From 0382e8119d7de58c3cbd59045b6b4e56ff580d67 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 12 Dec 2025 20:44:12 -0800
Subject: [PATCH] fix: improve batch card display with batch code badges and
 room location

---
 frontend/src/pages/BatchesPage.tsx | 111 ++++++++++++++++-------------
 1 file changed, 63 insertions(+), 48 deletions(-)

diff --git a/frontend/src/pages/BatchesPage.tsx b/frontend/src/pages/BatchesPage.tsx
index 4501013..81c70c5 100644
--- a/frontend/src/pages/BatchesPage.tsx
+++ b/frontend/src/pages/BatchesPage.tsx
@@ -141,60 +141,75 @@ export default function BatchesPage() {
                                 />
 
                                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                                    {group.items.map(batch => (
-                                        <div key={batch.id} className="card group overflow-hidden">
-                                            {/* Clickable Header */}
-                                            <Link
-                                                to={`/batches/${batch.id}`}
-                                                className="block p-4 hover:bg-tertiary transition-colors"
-                                            >
-                                                <div className="flex justify-between items-start mb-2">
-                                                    <div className="flex-1 min-w-0">
-                                                        <h4 className="font-medium text-primary text-sm truncate mb-1">
-                                                            {batch.name}
-                                                        </h4>
-                                                        <div className="flex items-center gap-2">
-                                                            <span className="text-xs text-secondary">{batch.strain}</span>
-                                                            <span className="text-xs text-tertiary">•</span>
-                                                            <span className="text-xs text-tertiary">{batch.plantCount} plants</span>
+                                    {group.items.map(batch => {
+                                        // Extract batch code from name (e.g., "B001" from "[DEMO] Gorilla Glue #4 - B001")
+                                        const batchCode = batch.name.match(/B\d{3}/)?.[0] || batch.id.slice(0, 6).toUpperCase();
+
+                                        return (
+                                            <div key={batch.id} className="card group overflow-hidden">
+                                                {/* Clickable Header */}
+                                                <Link
+                                                    to={`/batches/${batch.id}`}
+                                                    className="block p-4 hover:bg-tertiary transition-colors"
+                                                >
+                                                    <div className="flex justify-between items-start mb-2">
+                                                        <div className="flex-1 min-w-0">
+                                                            {/* Batch Code Badge + Strain Name */}
+                                                            <div className="flex items-center gap-2 mb-1">
+                                                                <span className="text-[10px] font-mono font-medium px-1.5 py-0.5 rounded bg-accent-muted text-accent">
+                                                                    {batchCode}
+                                                                </span>
+                                                                <h4 className="font-medium text-primary text-sm truncate">
+                                                                    {batch.strain}
+                                                                </h4>
+                                                            </div>
+                                                            {/* Plant count + Room */}
+                                                            <div className="flex items-center gap-2 text-xs text-tertiary">
+                                                                <span>{batch.plantCount} plants</span>
+                                                                {batch.room && (
+                                                                    <>
+                                                                        <span>•</span>
+                                                                        <span>{batch.room.name?.replace('[DEMO] ', '')}</span>
+                                                                    </>
+                                                                )}
+                                                            </div>
                                                         </div>
+                                                        <ChevronRight size={14} className="text-tertiary flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                                                     </div>
-                                                    <ChevronRight size={14} className="text-tertiary flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-                                                </div>
 
-                                                {/* Progress & Days */}
-                                                <div className="flex items-center justify-between mt-3">
-                                                    <StageProgressMini currentStage={batch.stage} />
-                                                    <DaysBadge startDate={batch.startDate} />
-                                                </div>
-                                            </Link>
+                                                    {/* Progress & Days */}
+                                                    <div className="flex items-center justify-between mt-3">
+                                                        <StageProgressMini currentStage={batch.stage} />
+                                                        <DaysBadge startDate={batch.startDate} />
+                                                    </div>
+                                                </Link>
 
-                                            {/* Quick Actions */}
-                                            <div className="px-3 py-2 border-t border-subtle bg-tertiary/30 flex items-center justify-between">
-                                                <span className="text-[10px] text-tertiary">{batch.room?.name || 'No Room'}</span>
-                                                <div className="flex gap-0.5">
-                                                    <ActionButton
-                                                        icon={Search}
-                                                        label="Scout"
-                                                        onClick={() => setScoutingBatch(batch)}
-                                                        variant="accent"
-                                                    />
-                                                    <ActionButton
-                                                        icon={Bug}
-                                                        label="IPM"
-                                                        onClick={() => setIpmBatch(batch)}
-                                                        variant="destructive"
-                                                    />
-                                                    <ActionButton
-                                                        icon={MoveRight}
-                                                        label="Transition"
-                                                        onClick={() => setSelectedBatch(batch)}
-                                                        variant="success"
-                                                    />
+                                                {/* Quick Actions */}
+                                                <div className="px-3 py-2 border-t border-subtle bg-tertiary/30 flex items-center justify-end">
+                                                    <div className="flex gap-0.5">
+                                                        <ActionButton
+                                                            icon={Search}
+                                                            label="Scout"
+                                                            onClick={() => setScoutingBatch(batch)}
+                                                            variant="accent"
+                                                        />
+                                                        <ActionButton
+                                                            icon={Bug}
+                                                            label="IPM"
+                                                            onClick={() => setIpmBatch(batch)}
+                                                            variant="destructive"
+                                                        />
+                                                        <ActionButton
+                                                            icon={MoveRight}
+                                                            label="Transition"
+                                                            onClick={() => setSelectedBatch(batch)}
+                                                            variant="success"
+                                                        />
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                    ))}
+                                        );
+                                    })}
                                 </div>
                             </div>
                         ))