malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve batch card display with batch code badges and room location
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Details
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-12 20:44:12 -08:00
parent 5c7a4b83c3
commit 0382e8119d
1 changed files with 63 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
frontend/src/pages/BatchesPage.tsx
View file

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