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

This commit is contained in:
fullsizemalt 2025-12-12 20:44:12 -08:00
parent 5c7a4b83c3
commit 0382e8119d

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">
{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">
{/* Clickable Header */}
<Link
@ -150,13 +154,24 @@ export default function BatchesPage() {
>
<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}
{/* 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 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>
</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" />
@ -170,8 +185,7 @@ export default function BatchesPage() {
</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="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}
@ -194,7 +208,8 @@ export default function BatchesPage() {
</div>
</div>
</div>
))}
);
})}
</div>
</div>
))