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

ui: redesign room cards - sensor data prominent
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 
- Temp/humidity now large and center with colored icons
- Size and capacity compressed to header subtitle
- Batch count with status indicator dot
- Cleaner visual hierarchy
This commit is contained in:
fullsizemalt 2025-12-12 19:13:00 -08:00
parent e7be23cce4
commit 3239a8b89b
1 changed files with 35 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/pages/RoomsPage.tsx
View file

@ -88,49 +88,53 @@ export default function RoomsPage() {
key={room.id}
className="card card-interactive p-4 group"
>
{/* Header: Name + Type Badge */}
<div className="flex justify-between items-start mb-4">
<div>
<h3 className="font-medium text-primary text-sm">
{room.name?.replace('[DEMO] ', '')}
</h3>
<span className="text-xs text-tertiary">{room.sqft?.toLocaleString()} sqft • {room.capacity || '—'} cap</span>
</div>
<span className={getBadgeClass(room.type)}>
{room.type}
</span>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-tertiary">Size</span>
<span className="text-primary font-medium">
{room.sqft?.toLocaleString()} sqft
</span>
{/* Primary: Sensor Data - Large & Prominent */}
<div className="flex items-center justify-around py-4 border-y border-subtle mb-4">
<div className="text-center">
<div className="flex items-center justify-center gap-1 text-2xl font-semibold text-primary">
<Thermometer size={18} className="text-red-500" />
{room.targetTemp || '—'}
<span className="text-sm text-tertiary font-normal">°F</span>
</div>
<div className="flex justify-between">
<span className="text-tertiary">Capacity</span>
<span className="text-primary font-medium">
{room.capacity || '—'} plants
</span>
<span className="text-[10px] text-tertiary uppercase tracking-wide">Temp</span>
</div>
<div className="flex justify-between">
<span className="text-tertiary">Active Batches</span>
<span className="text-accent font-medium">
{room.batches?.length || 0}
</span>
<div className="w-px h-10 bg-subtle" />
<div className="text-center">
<div className="flex items-center justify-center gap-1 text-2xl font-semibold text-primary">
<Droplets size={18} className="text-blue-500" />
{room.targetHumidity || '—'}
<span className="text-sm text-tertiary font-normal">%</span>
</div>
<span className="text-[10px] text-tertiary uppercase tracking-wide">Humidity</span>
</div>
</div>
{room.targetTemp && (
<div className="mt-4 pt-3 border-t border-subtle flex gap-4 text-xs text-tertiary">
<div className="flex items-center gap-1">
<Thermometer size={12} />
{room.targetTemp}°F
</div>
<div className="flex items-center gap-1">
<Droplets size={12} />
{room.targetHumidity}%
</div>
{/* Secondary: Batch Count */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${room.batches?.length > 0 ? 'bg-success' : 'bg-subtle'}`} />
<span className="text-sm font-medium text-primary">
{room.batches?.length || 0} {room.batches?.length === 1 ? 'batch' : 'batches'}
</span>
</div>
{room.batches?.length > 0 && (
<span className="text-xs text-accent">View →</span>
)}
</div>
</div>
))}
</div>
)}