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">
{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>
))