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

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

@ -141,7 +141,11 @@ 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 => {
// 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"> <div key={batch.id} className="card group overflow-hidden">
{/* Clickable Header */} {/* Clickable Header */}
<Link <Link
@ -150,13 +154,24 @@ export default function BatchesPage() {
> >
<div className="flex justify-between items-start mb-2"> <div className="flex justify-between items-start mb-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className="font-medium text-primary text-sm truncate mb-1"> {/* Batch Code Badge + Strain Name */}
{batch.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> </h4>
<div className="flex items-center gap-2"> </div>
<span className="text-xs text-secondary">{batch.strain}</span> {/* Plant count + Room */}
<span className="text-xs text-tertiary">•</span> <div className="flex items-center gap-2 text-xs text-tertiary">
<span className="text-xs text-tertiary">{batch.plantCount} plants</span> <span>{batch.plantCount} plants</span>
{batch.room && (
<>
<span>•</span>
<span>{batch.room.name?.replace('[DEMO] ', '')}</span>
</>
)}
</div> </div>
</div> </div>
<ChevronRight size={14} className="text-tertiary flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" /> <ChevronRight size={14} className="text-tertiary flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
@ -170,8 +185,7 @@ export default function BatchesPage() {
</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}
@ -194,7 +208,8 @@ export default function BatchesPage() {
</div> </div>
</div> </div>
</div> </div>
))} );
})}
</div> </div>
</div> </div>
)) ))