feat: Reverse dashboard layout and add inventory requirement validation

dashboard/app.js

@@ -38,50 +38,51 @@ const TUTORIAL_STEPS = [
 
 let currentTutStep = 0;
 
+// Global State for UI calculation
+let latestInventory = { chips: 0, sensors: 0 };
+
+const RECIPES = {
+    "EcoPhone": { chips: 1, sensors: 2 },
+    "GreenTab": { chips: 2, sensors: 1 }
+};
+
 // State Management
 async function updateState() {
     try {
         const response = await fetch(`${API_BASE}/state`);
         if (!response.ok) throw new Error('API Unreachable');
         const data = await response.json();
-        
-        const status = document.getElementById('connection-status');
-        status.textContent = 'ONLINE';
-        status.className = 'status-badge status-online';
-
-        document.getElementById('carbon-value').textContent = data.carbon.toFixed(0);
-        document.getElementById('cash-value').textContent = data.cash.toLocaleString();
+        latestInventory = data.inventory;
+...
         document.getElementById('chips-count').textContent = data.inventory.chips;
         document.getElementById('sensors-count').textContent = data.inventory.sensors;
-
-        const newsAlert = document.getElementById('news-alert');
-        if (data.news) {
-            document.getElementById('news-text').textContent = data.news;
-            newsAlert.classList.remove('hidden');
-        } else {
-            newsAlert.classList.add('hidden');
-        }
-
-        const container = document.getElementById('shipments-container');
-        if (data.orders && data.orders.length > 0) {
-            container.innerHTML = data.orders.map(order => `
-                <div class="shipment-item">
-                    <span>${order.product} (Required: ${order.quantity})</span>
-                    <small>Deadline: Day ${order.due_date}</small>
-                </div>
-            `).join('');
-        } else {
-            container.innerHTML = '<p class="placeholder">All orders fulfilled. Environment reset recommended.</p>';
-        }
-
-    } catch (error) {
-        console.error('Update failed:', error);
-        const status = document.getElementById('connection-status');
-        status.textContent = 'RECONNECTING...';
-        status.className = 'status-badge';
+        updateProducePreview();
+...
     }
 }
 
+function updateProducePreview() {
+    const product = document.getElementById('product-select').value;
+    const req = RECIPES[product];
+    const preview = document.getElementById('req-preview');
+    
+    const chipClass = latestInventory.chips >= req.chips ? "sufficient" : "shortage";
+    const sensorClass = latestInventory.sensors >= req.sensors ? "sufficient" : "shortage";
+
+    preview.innerHTML = `
+        <div class="req-item">
+            <span>Chips required: ${req.chips}</span>
+            <span class="${chipClass}">Avl: ${latestInventory.chips} ${latestInventory.chips < req.chips ? '(SHORT)' : ''}</span>
+        </div>
+        <div class="req-item">
+            <span>Sensors required: ${req.sensors}</span>
+            <span class="${sensorClass}">Avl: ${latestInventory.sensors} ${latestInventory.sensors < req.sensors ? '(SHORT)' : ''}</span>
+        </div>
+    `;
+}
+
+document.getElementById('product-select').addEventListener('change', updateProducePreview);
+
 // UI Controls
 const modeSelect = document.getElementById('mode-select');
 

dashboard/style.css

@@ -98,7 +98,7 @@ header {
 
 main {
     display: grid;
-    grid-template-columns: 1fr 400px;
+    grid-template-columns: 400px 1fr;
     gap: 2rem;
 }
 
@@ -109,12 +109,31 @@ main {
 }
 
 .control-panel {
-    background: #F9F7F2;
+    background: #F4F7F4;
     height: fit-content;
     position: sticky;
     top: 2rem;
+    border-right: 2px solid var(--sage-green);
 }
 
+.req-preview {
+    margin: 1rem 0;
+    padding: 0.75rem;
+    background: #FFF;
+    border: 1px solid var(--border-tan);
+    border-radius: 8px;
+    font-size: 0.8rem;
+}
+
+.req-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+}
+
+.shortage { color: #E74C3C; font-weight: 600; }
+.sufficient { color: #27AE60; font-weight: 600; }
+
 .details-section, .log-section, .guide-section {
     grid-column: 1 / -1;
 }