fix: Add missing heatmap components and User.name field

🔧 Build Fixes:
- Created FloorToggle component
- Created HealthLegend component
- Added name field to User interface

Components complete for heatmap feature

frontend/src/components/Layout.tsx

@@ -1,55 +1,89 @@
 import React from 'react';
 import { Outlet, Link, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import ThemeToggle from './ThemeToggle';
 
 export default function Layout() {
     const { user, logout } = useAuth();
     const location = useLocation();
 
     const navItems = [
-        { label: 'Dashboard', path: '/' },
+        { label: 'Dashboard', path: '/', icon: '📊' },
-        { label: 'Rooms', path: '/rooms' },
+        { label: 'Daily Walkthrough', path: '/walkthrough', icon: '✅' },
-        { label: 'Batches', path: '/batches' },
+        { label: 'Rooms', path: '/rooms', icon: '🏠' },
-        { label: 'Timeclock', path: '/timeclock' },
+        { label: 'Batches', path: '/batches', icon: '🌱' },
+        { label: 'Timeclock', path: '/timeclock', icon: '⏰' },
     ];
 
     return (
-        <div className="flex h-screen bg-neutral-100 font-sans text-neutral-900">
+        <div className="flex h-screen bg-slate-50 dark:bg-slate-900">
+            {/* Skip to main content link (accessibility) */}
+            <a href="#main-content" className="skip-to-main">
+                Skip to main content
+            </a>
+
             {/* Sidebar */}
-            <aside className="w-64 bg-emerald-950 text-white flex flex-col shadow-xl">
+            <aside
-                <div className="p-6 border-b border-emerald-900">
+                className="w-64 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shadow-lg"
-                    <h1 className="text-xl font-bold tracking-wider text-emerald-400">CA GROW OPS</h1>
+                role="navigation"
-                    <p className="text-xs text-emerald-600 mt-1">Manager v0.1</p>
+                aria-label="Main navigation"
+            >
+                <div className="p-6 border-b border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center gap-3 mb-4">
+                        <img
+                            src="/assets/logo-777-wolfpack.jpg"
+                            alt="777 Wolfpack"
+                            className="w-12 h-12 rounded-full"
+                        />
+                        <div>
+                            <h1 className="text-lg font-bold text-slate-900 dark:text-white">
+                                777 WOLFPACK
+                            </h1>
+                            <p className="text-xs text-slate-600 dark:text-slate-400">
+                                Grow Ops Manager
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Theme Toggle */}
+                    <ThemeToggle />
                 </div>
 
-                <nav className="flex-1 p-4 space-y-2">
+                <nav className="flex-1 p-4 space-y-1 overflow-y-auto custom-scrollbar">
                     {navItems.map(item => (
                         <Link
                             key={item.path}
                             to={item.path}
-                            className={`block px-4 py-3 rounded-lg transition-colors ${location.pathname === item.path
+                            className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${location.pathname === item.path
-                                    ? 'bg-emerald-900 text-emerald-100 font-medium'
+                                    ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 font-semibold'
-                                    : 'text-emerald-300 hover:bg-emerald-900/50 hover:text-white'
+                                    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50'
                                 }`}
+                            aria-current={location.pathname === item.path ? 'page' : undefined}
                         >
-                            {item.label}
+                            <span className="text-xl" aria-hidden="true">{item.icon}</span>
+                            <span>{item.label}</span>
                         </Link>
                     ))}
                 </nav>
 
-                <div className="p-4 border-t border-emerald-900 bg-emerald-950/50">
+                <div className="p-4 border-t border-slate-200 dark:border-slate-700">
                     <div className="flex items-center gap-3 mb-4 px-2">
-                        <div className="w-8 h-8 rounded-full bg-emerald-800 flex items-center justify-center text-xs font-bold text-emerald-200">
+                        <div className="w-10 h-10 rounded-full bg-emerald-600 dark:bg-emerald-700 flex items-center justify-center text-sm font-bold text-white">
                             {user?.email[0].toUpperCase()}
                         </div>
-                        <div className="overflow-hidden">
+                        <div className="flex-1 overflow-hidden">
-                            <p className="text-sm font-medium truncate">{user?.email}</p>
+                            <p className="text-sm font-medium text-slate-900 dark:text-white truncate">
-                            <p className="text-xs text-emerald-500 uppercase">{user?.role}</p>
+                                {user?.name || user?.email}
+                            </p>
+                            <p className="text-xs text-slate-600 dark:text-slate-400 uppercase">
+                                {user?.role}
+                            </p>
                         </div>
                     </div>
                     <button
                         onClick={logout}
-                        className="w-full py-2 px-4 bg-red-900/20 hover:bg-red-900/40 text-red-200 text-sm rounded transition-colors"
+                        className="w-full py-2 px-4 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40 text-red-700 dark:text-red-400 text-sm font-medium rounded-lg transition-colors"
+                        aria-label="Sign out"
                     >
                         Sign Out
                     </button>
@@ -57,7 +91,11 @@ export default function Layout() {
             </aside>
 
             {/* Main Content */}
-            <main className="flex-1 overflow-auto p-8">
+            <main
+                id="main-content"
+                className="flex-1 overflow-auto p-4 md:p-8 custom-scrollbar"
+                role="main"
+            >
                 <Outlet />
             </main>
         </div>

frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * ThemeToggle - Dark/Light mode toggle button
+ * 
+ * Provides accessible theme switching with system preference detection.
+ * Persists user preference to localStorage.
+ * 
+ * Accessibility features:
+ * - ARIA labels for screen readers
+ * - Keyboard navigation support
+ * - Visual focus indicators
+ * - Respects prefers-color-scheme
+ */
+
+type Theme = 'light' | 'dark' | 'system';
+
+export default function ThemeToggle() {
+    const [theme, setTheme] = useState<Theme>('system');
+
+    useEffect(() => {
+        // Load saved theme preference
+        const savedTheme = localStorage.getItem('theme') as Theme | null;
+        if (savedTheme) {
+            setTheme(savedTheme);
+            applyTheme(savedTheme);
+        } else {
+            applyTheme('system');
+        }
+    }, []);
+
+    function applyTheme(newTheme: Theme) {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+
+        if (newTheme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+            root.classList.add(systemTheme);
+        } else {
+            root.classList.add(newTheme);
+        }
+    }
+
+    function handleThemeChange(newTheme: Theme) {
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+        applyTheme(newTheme);
+    }
+
+    return (
+        <div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
+            <button
+                onClick={() => handleThemeChange('light')}
+                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${theme === 'light'
+                        ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                        : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
+                    }`}
+                aria-label="Light mode"
+                aria-pressed={theme === 'light'}
+            >
+                ☀️ Light
+            </button>
+            <button
+                onClick={() => handleThemeChange('dark')}
+                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${theme === 'dark'
+                        ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                        : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
+                    }`}
+                aria-label="Dark mode"
+                aria-pressed={theme === 'dark'}
+            >
+                🌙 Dark
+            </button>
+            <button
+                onClick={() => handleThemeChange('system')}
+                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${theme === 'system'
+                        ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                        : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
+                    }`}
+                aria-label="System theme"
+                aria-pressed={theme === 'system'}
+            >
+                💻 Auto
+            </button>
+        </div>
+    );
+}

frontend/src/components/heatmap/BedCell.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import { Bed } from './GrowRoomHeatmap';
+import BedTooltip from './BedTooltip';
+
+/**
+ * BedCell - Individual bed cell in the grid
+ * 
+ * Renders a single bed with color-coded health score.
+ * Shows tooltip on hover with detailed bed information.
+ * 
+ * Color scale:
+ * - 90-100: Dark green (excellent)
+ * - 70-89: Light green (good)
+ * - 50-69: Yellow (fair)
+ * - 30-49: Orange (needs attention)
+ * - 0-29: Red (critical)
+ * - Empty: Gray outline (no plant)
+ */
+
+interface BedCellProps {
+    bed?: Bed;
+    x: number;
+    y: number;
+    size: number;
+    row: number;
+    column: number;
+}
+
+export default function BedCell({ bed, x, y, size, row, column }: BedCellProps) {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+
+    // Get color based on health score
+    const getHealthColor = (score: number): string => {
+        if (score >= 90) return '#059669'; // emerald-600
+        if (score >= 70) return '#10b981'; // emerald-500
+        if (score >= 50) return '#eab308'; // yellow-500
+        if (score >= 30) return '#f97316'; // orange-500
+        return '#dc2626'; // red-600
+    };
+
+    const handleMouseEnter = (e: React.MouseEvent) => {
+        if (bed && bed.status !== 'empty') {
+            setTooltipPosition({ x: e.clientX, y: e.clientY });
+            setShowTooltip(true);
+        }
+    };
+
+    const handleMouseLeave = () => {
+        setShowTooltip(false);
+    };
+
+    const handleClick = () => {
+        if (bed && bed.status !== 'empty') {
+            // TODO: Navigate to bed detail page
+            console.log('Navigate to bed:', bed.bed_id);
+        }
+    };
+
+    // Empty bed
+    if (!bed || bed.status === 'empty') {
+        return (
+            <g>
+                <rect
+                    x={x}
+                    y={y}
+                    width={size}
+                    height={size}
+                    fill="transparent"
+                    stroke="#94a3b8"
+                    strokeWidth="1"
+                    strokeDasharray="4 4"
+                    rx="4"
+                    className="opacity-30"
+                />
+                <text
+                    x={x + size / 2}
+                    y={y + size / 2}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    className="text-xs fill-slate-400 dark:fill-slate-600"
+                >
+                    Empty
+                </text>
+            </g>
+        );
+    }
+
+    const healthColor = getHealthColor(bed.health_score);
+    const hasAlert = !!bed.last_alert;
+
+    return (
+        <>
+            <g
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                onClick={handleClick}
+                className="cursor-pointer transition-opacity hover:opacity-90"
+            >
+                {/* Main cell */}
+                <rect
+                    x={x}
+                    y={y}
+                    width={size}
+                    height={size}
+                    fill={healthColor}
+                    stroke={hasAlert ? '#dc2626' : '#64748b'}
+                    strokeWidth={hasAlert ? '3' : '1'}
+                    rx="4"
+                />
+
+                {/* Health score text */}
+                <text
+                    x={x + size / 2}
+                    y={y + size / 2}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    className="text-sm font-bold fill-white"
+                    style={{ pointerEvents: 'none' }}
+                >
+                    {bed.health_score}
+                </text>
+
+                {/* Alert indicator */}
+                {hasAlert && (
+                    <circle
+                        cx={x + size - 10}
+                        cy={y + 10}
+                        r="6"
+                        fill="#dc2626"
+                        stroke="white"
+                        strokeWidth="2"
+                    />
+                )}
+
+                {/* Batch ID (small text) */}
+                {bed.plant_batch_id && (
+                    <text
+                        x={x + size / 2}
+                        y={y + size - 8}
+                        textAnchor="middle"
+                        className="text-xs fill-white opacity-70"
+                        style={{ pointerEvents: 'none' }}
+                    >
+                        {bed.plant_batch_id.substring(0, 8)}
+                    </text>
+                )}
+            </g>
+
+            {/* Tooltip */}
+            {showTooltip && bed && (
+                <BedTooltip
+                    bed={bed}
+                    position={tooltipPosition}
+                    onClose={() => setShowTooltip(false)}
+                />
+            )}
+        </>
+    );
+}

frontend/src/components/heatmap/BedTooltip.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useRef } from 'react';
+import { Bed } from './GrowRoomHeatmap';
+
+/**
+ * BedTooltip - Hover tooltip showing bed details
+ * 
+ * Displays key information about a bed when hovering over it.
+ * Positioned near the mouse cursor.
+ */
+
+interface BedTooltipProps {
+    bed: Bed;
+    position: { x: number; y: number };
+    onClose: () => void;
+}
+
+export default function BedTooltip({ bed, position, onClose }: BedTooltipProps) {
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    // Close on click outside
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (tooltipRef.current && !tooltipRef.current.contains(event.target as Node)) {
+                onClose();
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+
+    const getHealthLabel = (score: number): string => {
+        if (score >= 90) return 'Excellent';
+        if (score >= 70) return 'Good';
+        if (score >= 50) return 'Fair';
+        if (score >= 30) return 'Needs Attention';
+        return 'Critical';
+    };
+
+    const getHealthColor = (score: number): string => {
+        if (score >= 90) return 'text-emerald-600 dark:text-emerald-400';
+        if (score >= 70) return 'text-emerald-500 dark:text-emerald-300';
+        if (score >= 50) return 'text-yellow-500 dark:text-yellow-300';
+        if (score >= 30) return 'text-orange-500 dark:text-orange-300';
+        return 'text-red-600 dark:text-red-400';
+    };
+
+    return (
+        <div
+            ref={tooltipRef}
+            className="fixed z-50 bg-white dark:bg-slate-800 rounded-lg shadow-2xl border border-slate-200 dark:border-slate-700 p-4 min-w-[280px]"
+            style={{
+                left: position.x + 10,
+                top: position.y + 10,
+            }}
+        >
+            {/* Header */}
+            <div className="flex items-start justify-between mb-3">
+                <div>
+                    <div className="text-sm font-medium text-slate-600 dark:text-slate-400">
+                        Bed {bed.bed_id}
+                    </div>
+                    {bed.plant_batch_id && (
+                        <div className="text-xs text-slate-500 dark:text-slate-500 mt-1">
+                            Batch: {bed.plant_batch_id}
+                        </div>
+                    )}
+                </div>
+                <button
+                    onClick={onClose}
+                    className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
+                >
+                    ✕
+                </button>
+            </div>
+
+            {/* Health Score */}
+            <div className="mb-3">
+                <div className="flex items-center justify-between">
+                    <span className="text-sm text-slate-600 dark:text-slate-400">
+                        Health Score
+                    </span>
+                    <span className={`text-lg font-bold ${getHealthColor(bed.health_score)}`}>
+                        {bed.health_score}
+                    </span>
+                </div>
+                <div className="text-xs text-slate-500 dark:text-slate-500 mt-1">
+                    {getHealthLabel(bed.health_score)}
+                </div>
+            </div>
+
+            {/* Sensors */}
+            {bed.sensors && (
+                <div className="space-y-2 mb-3">
+                    <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mb-2">
+                        Sensor Readings
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                        {bed.sensors.temp !== undefined && (
+                            <SensorReading
+                                label="Temp"
+                                value={`${bed.sensors.temp.toFixed(1)}°F`}
+                            />
+                        )}
+                        {bed.sensors.humidity !== undefined && (
+                            <SensorReading
+                                label="Humidity"
+                                value={`${bed.sensors.humidity.toFixed(0)}%`}
+                            />
+                        )}
+                        {bed.sensors.ec !== undefined && (
+                            <SensorReading
+                                label="EC"
+                                value={bed.sensors.ec.toFixed(2)}
+                            />
+                        )}
+                        {bed.sensors.par !== undefined && (
+                            <SensorReading
+                                label="PAR"
+                                value={bed.sensors.par.toFixed(0)}
+                            />
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Last Alert */}
+            {bed.last_alert && (
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-2">
+                    <div className="text-xs font-medium text-red-700 dark:text-red-400">
+                        ⚠️ Last Alert: {bed.last_alert}
+                    </div>
+                </div>
+            )}
+
+            {/* Actions */}
+            <div className="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
+                <button className="text-sm text-emerald-600 dark:text-emerald-400 hover:underline">
+                    View Details →
+                </button>
+            </div>
+        </div>
+    );
+}
+
+function SensorReading({ label, value }: { label: string; value: string }) {
+    return (
+        <div className="bg-slate-50 dark:bg-slate-700/50 rounded p-2">
+            <div className="text-xs text-slate-500 dark:text-slate-400">{label}</div>
+            <div className="text-sm font-medium text-slate-900 dark:text-white">{value}</div>
+        </div>
+    );
+}

frontend/src/components/heatmap/FloorGrid.tsx

@@ -0,0 +1,117 @@
+import { Bed } from './GrowRoomHeatmap';
+import BedCell from './BedCell';
+
+/**
+ * FloorGrid - SVG-based grid visualization of grow room beds
+ * 
+ * Renders a grid of beds with color-coded health scores.
+ * Uses SVG for crisp rendering at any size.
+ * 
+ * @param floor - Current floor being displayed
+ * @param rows - Number of rows in the grid
+ * @param columns - Number of columns in the grid
+ * @param beds - Array of bed data for this floor
+ */
+
+interface FloorGridProps {
+    floor: 'floor_1' | 'floor_2';
+    rows: number;
+    columns: number;
+    beds: Bed[];
+}
+
+export default function FloorGrid({ floor, rows, columns, beds }: FloorGridProps) {
+    // Cell dimensions
+    const cellSize = 80;
+    const cellGap = 8;
+    const padding = 40;
+
+    // Calculate SVG dimensions
+    const width = columns * (cellSize + cellGap) - cellGap + padding * 2;
+    const height = rows * (cellSize + cellGap) - cellGap + padding * 2;
+
+    // Create a map for quick bed lookup
+    const bedMap = new Map<string, Bed>();
+    beds.forEach(bed => {
+        const key = `${bed.row}_${bed.column}`;
+        bedMap.set(key, bed);
+    });
+
+    return (
+        <div className="overflow-x-auto">
+            <svg
+                width={width}
+                height={height}
+                className="mx-auto"
+                style={{ minWidth: width }}
+            >
+                {/* Grid background */}
+                <rect
+                    x={0}
+                    y={0}
+                    width={width}
+                    height={height}
+                    fill="transparent"
+                />
+
+                {/* Row labels */}
+                {Array.from({ length: rows }).map((_, row) => (
+                    <text
+                        key={`row-label-${row}`}
+                        x={padding - 20}
+                        y={padding + row * (cellSize + cellGap) + cellSize / 2}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                        className="text-sm font-medium fill-slate-600 dark:fill-slate-400"
+                    >
+                        {String.fromCharCode(65 + row)}
+                    </text>
+                ))}
+
+                {/* Column labels */}
+                {Array.from({ length: columns }).map((_, col) => (
+                    <text
+                        key={`col-label-${col}`}
+                        x={padding + col * (cellSize + cellGap) + cellSize / 2}
+                        y={padding - 20}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                        className="text-sm font-medium fill-slate-600 dark:fill-slate-400"
+                    >
+                        {col + 1}
+                    </text>
+                ))}
+
+                {/* Bed cells */}
+                {Array.from({ length: rows }).map((_, row) =>
+                    Array.from({ length: columns }).map((_, col) => {
+                        const key = `${row}_${col}`;
+                        const bed = bedMap.get(key);
+
+                        return (
+                            <BedCell
+                                key={`bed-${row}-${col}`}
+                                bed={bed}
+                                x={padding + col * (cellSize + cellGap)}
+                                y={padding + row * (cellSize + cellGap)}
+                                size={cellSize}
+                                row={row}
+                                column={col}
+                            />
+                        );
+                    })
+                )}
+
+                {/* Floor label */}
+                <text
+                    x={width / 2}
+                    y={height - 10}
+                    textAnchor="middle"
+                    className="text-xs font-medium fill-slate-500 dark:fill-slate-500"
+                >
+                    {floor === 'floor_1' ? 'Floor 1 (Ground Level)' : 'Floor 2 (Scaffolding)'}
+                </text>
+            </svg>
+        </div>
+    );
+}

frontend/src/components/heatmap/FloorToggle.tsx

@@ -0,0 +1,32 @@
+/**
+ * FloorToggle - Toggle between floor levels
+ * 
+ * Simple button group to switch between Floor 1 and Floor 2.
+ */
+
+interface FloorToggleProps {
+    floors: Array<'floor_1' | 'floor_2'>;
+    currentFloor: 'floor_1' | 'floor_2';
+    onFloorChange: (floor: 'floor_1' | 'floor_2') => void;
+}
+
+export default function FloorToggle({ floors, currentFloor, onFloorChange }: FloorToggleProps) {
+    return (
+        <div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
+            {floors.map(floor => (
+                <button
+                    key={floor}
+                    onClick={() => onFloorChange(floor)}
+                    className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${currentFloor === floor
+                            ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                            : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
+                        }`}
+                    aria-label={floor === 'floor_1' ? 'Floor 1 (Ground)' : 'Floor 2 (Scaffolding)'}
+                    aria-pressed={currentFloor === floor}
+                >
+                    {floor === 'floor_1' ? '🏢 Floor 1' : '🪜 Floor 2'}
+                </button>
+            ))}
+        </div>
+    );
+}

frontend/src/components/heatmap/GrowRoomHeatmap.tsx

@@ -0,0 +1,250 @@
+import { useState, useEffect } from 'react';
+import FloorGrid from './FloorGrid';
+import FloorToggle from './FloorToggle';
+import HealthLegend from './HealthLegend';
+
+/**
+ * GrowRoomHeatmap - Visual heat-map representation of plant health
+ * 
+ * This component displays a multi-level grow room with color-coded beds
+ * based on plant health scores. Reduces cognitive load by showing problems
+ * as visual zones instead of text lists.
+ * 
+ * @param roomId - Unique identifier for the grow room
+ * 
+ * Integration:
+ * 1. Replace mockFetchRoomLayout with real API call to /api/rooms/:roomId/layout
+ * 2. Replace mockFetchRoomHealth with real API call to /api/rooms/:roomId/health
+ * 3. For real-time updates, add WebSocket connection or polling interval
+ * 4. Add error handling and loading states
+ */
+
+export interface Bed {
+    bed_id: string;
+    floor: 'floor_1' | 'floor_2';
+    row: number;
+    column: number;
+    plant_batch_id?: string;
+    status: 'active' | 'empty' | 'maintenance';
+    health_score: number; // 0-100
+    sensors?: {
+        temp?: number;
+        humidity?: number;
+        ec?: number;
+        par?: number;
+    };
+    last_alert?: string;
+}
+
+export interface RoomLayout {
+    room_id: string;
+    name: string;
+    floors: Array<'floor_1' | 'floor_2'>;
+    grid: {
+        rows: number;
+        columns: number;
+    };
+}
+
+interface GrowRoomHeatmapProps {
+    roomId: string;
+}
+
+export default function GrowRoomHeatmap({ roomId }: GrowRoomHeatmapProps) {
+    const [currentFloor, setCurrentFloor] = useState<'floor_1' | 'floor_2'>('floor_1');
+    const [layout, setLayout] = useState<RoomLayout | null>(null);
+    const [beds, setBeds] = useState<Bed[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        loadRoomData();
+
+        // TODO: For real-time updates, add polling or WebSocket
+        // const interval = setInterval(loadRoomData, 30000); // Poll every 30s
+        // return () => clearInterval(interval);
+    }, [roomId]);
+
+    async function loadRoomData() {
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            // TODO: Replace with real API calls
+            const layoutData = await mockFetchRoomLayout(roomId);
+            const healthData = await mockFetchRoomHealth(roomId);
+
+            setLayout(layoutData);
+            setBeds(healthData);
+        } catch (err: any) {
+            setError(err.message || 'Failed to load room data');
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    // Filter beds for current floor
+    const currentFloorBeds = beds.filter(bed => bed.floor === currentFloor);
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center h-96">
+                <div className="text-lg text-slate-600 dark:text-slate-400">
+                    Loading room data...
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex items-center justify-center h-96">
+                <div className="text-lg text-red-600 dark:text-red-400">
+                    Error: {error}
+                </div>
+            </div>
+        );
+    }
+
+    if (!layout) {
+        return (
+            <div className="flex items-center justify-center h-96">
+                <div className="text-lg text-slate-600 dark:text-slate-400">
+                    No room data available
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div>
+                    <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
+                        {layout.name}
+                    </h2>
+                    <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">
+                        Plant Health Heat Map
+                    </p>
+                </div>
+
+                <FloorToggle
+                    floors={layout.floors}
+                    currentFloor={currentFloor}
+                    onFloorChange={setCurrentFloor}
+                />
+            </div>
+
+            {/* Legend */}
+            <HealthLegend />
+
+            {/* Grid */}
+            <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <FloorGrid
+                    floor={currentFloor}
+                    rows={layout.grid.rows}
+                    columns={layout.grid.columns}
+                    beds={currentFloorBeds}
+                />
+            </div>
+
+            {/* Stats Summary */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <StatCard
+                    label="Total Beds"
+                    value={currentFloorBeds.length}
+                    color="blue"
+                />
+                <StatCard
+                    label="Active"
+                    value={currentFloorBeds.filter(b => b.status === 'active').length}
+                    color="green"
+                />
+                <StatCard
+                    label="Needs Attention"
+                    value={currentFloorBeds.filter(b => b.health_score < 70).length}
+                    color="yellow"
+                />
+                <StatCard
+                    label="Critical"
+                    value={currentFloorBeds.filter(b => b.health_score < 30).length}
+                    color="red"
+                />
+            </div>
+        </div>
+    );
+}
+
+// Stats card component
+function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
+    const colorClasses = {
+        blue: 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300',
+        green: 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300',
+        yellow: 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300',
+        red: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300',
+    };
+
+    return (
+        <div className={`${colorClasses[color as keyof typeof colorClasses]} rounded-lg p-4`}>
+            <div className="text-2xl font-bold">{value}</div>
+            <div className="text-sm font-medium mt-1">{label}</div>
+        </div>
+    );
+}
+
+// ============================================================================
+// MOCK API FUNCTIONS
+// TODO: Replace these with real API calls
+// ============================================================================
+
+async function mockFetchRoomLayout(roomId: string): Promise<RoomLayout> {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    return {
+        room_id: roomId,
+        name: 'Veg Room A',
+        floors: ['floor_1', 'floor_2'],
+        grid: {
+            rows: 6,
+            columns: 8,
+        },
+    };
+}
+
+async function mockFetchRoomHealth(roomId: string): Promise<Bed[]> {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    const beds: Bed[] = [];
+
+    // Generate mock data for both floors
+    for (const floor of ['floor_1', 'floor_2'] as const) {
+        for (let row = 0; row < 6; row++) {
+            for (let col = 0; col < 8; col++) {
+                // Randomly make some beds empty
+                const isEmpty = Math.random() < 0.2;
+
+                beds.push({
+                    bed_id: `${floor}_${row}_${col}`,
+                    floor,
+                    row,
+                    column: col,
+                    plant_batch_id: isEmpty ? undefined : `batch_${Math.floor(Math.random() * 10)}`,
+                    status: isEmpty ? 'empty' : 'active',
+                    health_score: isEmpty ? 0 : Math.floor(Math.random() * 100),
+                    sensors: isEmpty ? undefined : {
+                        temp: 72 + Math.random() * 8,
+                        humidity: 55 + Math.random() * 15,
+                        ec: 1.2 + Math.random() * 0.8,
+                        par: 400 + Math.random() * 400,
+                    },
+                    last_alert: isEmpty ? undefined : (Math.random() < 0.3 ? '2 hours ago' : undefined),
+                });
+            }
+        }
+    }
+
+    return beds;
+}

frontend/src/components/heatmap/HealthLegend.tsx

@@ -0,0 +1,38 @@
+/**
+ * HealthLegend - Color scale legend for health scores
+ * 
+ * Shows the color-to-health-score mapping for the heatmap.
+ */
+
+export default function HealthLegend() {
+    const legendItems = [
+        { range: '90-100', label: 'Excellent', color: 'bg-emerald-600' },
+        { range: '70-89', label: 'Good', color: 'bg-emerald-500' },
+        { range: '50-69', label: 'Fair', color: 'bg-yellow-500' },
+        { range: '30-49', label: 'Needs Attention', color: 'bg-orange-500' },
+        { range: '0-29', label: 'Critical', color: 'bg-red-600' },
+    ];
+
+    return (
+        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+            <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
+                Health Score Legend
+            </h3>
+            <div className="flex flex-wrap gap-3">
+                {legendItems.map(item => (
+                    <div key={item.range} className="flex items-center gap-2">
+                        <div className={`w-6 h-6 rounded ${item.color}`} />
+                        <div className="text-xs">
+                            <div className="font-medium text-slate-900 dark:text-white">
+                                {item.range}
+                            </div>
+                            <div className="text-slate-600 dark:text-slate-400">
+                                {item.label}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

frontend/src/context/AuthContext.tsx

@@ -4,6 +4,7 @@ import api from '../lib/api';
 interface User {
     id: string;
     email: string;
+    name?: string;
     role: string;
 }
 

frontend/src/index.css

@@ -13,7 +13,8 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 151 76% 40%; /* Emerald 500 equivalent in HSL approx */
+    --primary: 151 76% 40%;
+    /* Emerald 500 equivalent in HSL approx */
     --primary-foreground: 210 40% 98%;
 
     --secondary: 217.2 91.2% 59.8%;
@@ -74,45 +75,123 @@
   html {
     /* Prevent text size adjustment on orientation change (iOS) */
     -webkit-text-size-adjust: 100%;
-    /* Enable smooth scrolling */
     scroll-behavior: smooth;
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50;
-    /* Minimum font size for mobile (prevents zoom on iOS) */
+    font-family: var(--font-sans);
-    font-size: 16px;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
-    /* Improve font rendering */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
   }
 
-  /* Touch-friendly button defaults */
+  /* Code and monospace */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+  }
+
+  /* Touch-friendly interactive elements */
   button,
-  [role="button"],
+  input,
-  input[type="submit"],
+  select,
-  input[type="button"] {
+  textarea,
-    /* Minimum touch target size */
+  a {
     min-height: 44px;
     min-width: 44px;
-    /* Remove tap highlight on mobile */
     -webkit-tap-highlight-color: transparent;
-    /* Improve touch response */
     touch-action: manipulation;
   }
 
-  /* Touch-friendly form inputs */
+  /* Focus visible for keyboard navigation (accessibility) */
-  input,
+  *:focus-visible {
-  select,
+    @apply outline-none ring-2 ring-emerald-500 ring-offset-2 ring-offset-white dark:ring-offset-slate-900;
-  textarea {
-    /* Minimum height for easy tapping */
-    min-height: 44px;
-    /* Prevent zoom on focus (iOS) */
-    font-size: 16px;
   }
 
-  /* Improve touch scrolling */
+  /* Skip to main content link (accessibility) */
-  * {
+  .skip-to-main {
-    -webkit-overflow-scrolling: touch;
+    @apply absolute left-0 top-0 -translate-y-full bg-emerald-600 text-white px-4 py-2 rounded-br-lg;
+    @apply focus:translate-y-0 z-50;
+  }
+
+  /* Reduced motion for accessibility */
+  @media (prefers-reduced-motion: reduce) {
+
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    :root {
+      --color-primary: 0 128 0;
+    }
+
+    .dark {
+      --color-primary: 0 255 0;
+    }
+  }
+
+  /* Headings */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold tracking-tight;
+  }
+
+  h1 {
+    @apply text-4xl md:text-5xl;
+  }
+
+  h2 {
+    @apply text-3xl md:text-4xl;
+  }
+
+  h3 {
+    @apply text-2xl md:text-3xl;
+  }
+
+  h4 {
+    @apply text-xl md:text-2xl;
+  }
+
+  /* Links */
+  a {
+    @apply text-emerald-600 dark:text-emerald-400 hover:underline;
+  }
+
+  /* Selection */
+  ::selection {
+    @apply bg-emerald-500/20 text-emerald-900 dark:text-emerald-100;
+  }
+}
+
+@layer components {
+
+  /* Custom scrollbar */
+  .custom-scrollbar::-webkit-scrollbar {
+    @apply w-2 h-2;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    @apply bg-slate-100 dark:bg-slate-800;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-slate-300 dark:bg-slate-600 rounded-full;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-slate-400 dark:bg-slate-500;
   }
 }

specs/grow-room-heatmap.md

@@ -0,0 +1,103 @@
+# Grow Room Heatmap - Feature Spec
+
+**Priority**: 🟡 High (Phase 2)  
+**Team**: 777 Wolfpack  
+**Date**: 2025-12-09  
+**Status**: Ready for Implementation
+
+---
+
+## 📋 Overview
+
+Visual heat-map representation of plant health across a multi-level grow room. Reduces cognitive load by showing problems as color-coded zones instead of text lists.
+
+**Key Benefit**: Growers can instantly see which beds need attention at a glance.
+
+---
+
+## 🏗️ Room Model
+
+### Structure
+
+- **2 Levels**: `floor_1` (ground), `floor_2` (scaffolding)
+- **Fixed Grid**: Same rows/columns on each floor
+- **Beds**: Individual growing beds in grid positions
+
+### Bed Data Model
+
+```typescript
+interface Bed {
+  bed_id: string;
+  floor: 'floor_1' | 'floor_2';
+  row: number;
+  column: number;
+  plant_batch_id?: string;
+  status: 'active' | 'empty' | 'maintenance';
+  health_score: number; // 0-100
+  sensors?: {
+    temp?: number;
+    humidity?: number;
+    ec?: number;
+    par?: number;
+  };
+  last_alert?: string;
+}
+```
+
+---
+
+## 🎨 UX Design
+
+### Main Canvas
+
+- Grid visualization of room layout
+- Floor toggle (Floor 1 / Floor 2)
+- Color-coded heat map cells
+- Hover tooltips with bed details
+- Legend showing health score ranges
+
+### Color Scale
+
+- **90-100**: Dark green (excellent)
+- **70-89**: Light green (good)
+- **50-69**: Yellow (fair)
+- **30-49**: Orange (needs attention)
+- **0-29**: Red (critical)
+- **Empty**: Gray outline (no plant)
+
+### Interactions
+
+- **Hover**: Show tooltip with bed info
+- **Click**: Navigate to bed detail page
+- **Toggle**: Switch between floors
+- **Legend**: Show color scale reference
+
+---
+
+## 🔧 Implementation Plan
+
+### Components
+
+1. `GrowRoomHeatmap.tsx` - Main container
+2. `FloorGrid.tsx` - Grid visualization
+3. `BedCell.tsx` - Individual bed cell
+4. `BedTooltip.tsx` - Hover tooltip
+5. `FloorToggle.tsx` - Floor selector
+6. `HealthLegend.tsx` - Color scale legend
+
+### API Endpoints
+
+- `GET /api/rooms/:roomId/layout` - Room structure
+- `GET /api/rooms/:roomId/health` - Current health data
+
+---
+
+## 📊 Success Metrics
+
+- Growers can identify problem areas in < 5 seconds
+- Reduce time spent reviewing text lists by 80%
+- Increase early problem detection by 50%
+
+---
+
+**Status**: ✅ Spec Complete - Ready for Implementation