Mahitha - Implement Kitchen & Inventory Dashboard Alerts and Metrics

src/components/KitchenandInventory/KIDashboard/KIDashboard.jsx

@@ -1,9 +1,126 @@
-export function KIDashboard() {
+import React from 'react';
+import styles from './KIDashboard.module.css';
+
+const metrics = [
+  {
+    title: 'Total Ingredients',
+    value: 128,
+    info: '+12 this week',
+    icon: '🥕',
+  },
+  {
+    title: 'Onsite Grown',
+    value: 46,
+    info: '36% of total',
+    icon: '🌱',
+  },
+  {
+    title: 'Upcoming Meals',
+    value: 8,
+    info: 'Next 7 days',
+    icon: '🍽️',
+  },
+  {
+    title: 'Pending Orders',
+    value: 5,
+    info: '$1,247 total',
+    icon: '📦',
+  },
+];
+
+const lowStockItems = [
+  {
+    name: 'Tomatoes',
+    current: '4 kg',
+    minimum: '10 kg',
+  },
+  {
+    name: 'Spinach',
+    current: '2 kg',
+    minimum: '8 kg',
+  },
+  {
+    name: 'Carrots',
+    current: '3 kg',
+    minimum: '7 kg',
+  },
+];
+
+const upcomingHarvests = [
+  {
+    name: 'Tomatoes',
+    location: 'Garden A',
+    date: 'Sep 8',
+  },
+  {
+    name: 'Carrots',
+    location: 'Garden B',
+    date: 'Sep 12',
+  },
+];
+
+const KIDashboard = () => {
   return (
-    <div>
-      <h1>Welcome to Kitchen and Inventory Dashboard</h1>
+    <div className={styles.container}>
+      <h1 className={styles.title}>Kitchen & Inventory Dashboard</h1>
+
+      {/* Low Stock Alerts */}
+      <section className={styles.alertSection}>
+        <h2>Low Stock Alerts</h2>
+
+        <div className={styles.alertList}>
+          {lowStockItems.map(item => (
+            <div className={styles.alertCard} key={item.name}>
+              <div className={styles.alertIcon}>⚠️</div>
+
+              <div className={styles.alertContent}>
+                <h3>{item.name}</h3>
+                <p>
+                  {item.current} remaining · Minimum {item.minimum}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Upcoming Harvests */}
+      <section className={styles.alertSection}>
+        <h2>Upcoming Harvests</h2>
+
+        <div className={styles.harvestList}>
+          {upcomingHarvests.map(harvest => (
+            <div className={styles.harvestCard} key={`${harvest.name}-${harvest.date}`}>
+              <div className={styles.harvestIcon}>🌱</div>
+
+              <div>
+                <h3>{harvest.name}</h3>
+                <p>
+                  {harvest.location} · {harvest.date}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Metrics */}
+      <section className={styles.metricsGrid}>
+        {metrics.map(metric => (
+          <div className={styles.metricCard} key={metric.title}>
+            <div className={styles.metricHeader}>
+              <span aria-hidden="true">{metric.icon}</span>
+              <h2>{metric.title}</h2>
+            </div>
+
+            <div className={styles.metricValue}>{metric.value}</div>
+
+            <p className={styles.metricInfo}>{metric.info}</p>
+          </div>
+        ))}
+      </section>
     </div>
   );
-}
+};
 
 export default KIDashboard;

src/components/KitchenandInventory/KIDashboard/KIDashboard.module.css

@@ -0,0 +1,191 @@
+
+.container {
+  min-height: 100vh;
+  padding: 24px;
+  background-color: #f7f8f5;
+  color: #222;
+}
+
+.title {
+  margin: 0 0 24px;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+/* Alerts */
+
+.alertSection {
+  margin-bottom: 24px;
+}
+
+.alertSection h2 {
+  margin: 0 0 12px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.alertList,
+.harvestList {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.alertCard,
+.harvestCard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+}
+
+.alertIcon,
+.harvestIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  background-color: #f1f3ec;
+  border-radius: 50%;
+  font-size: 20px;
+}
+
+.alertContent h3,
+.harvestCard h3 {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.alertContent p,
+.harvestCard p {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
+}
+
+/* Metrics */
+
+.metricsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.metricCard {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+}
+
+.metricHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.metricHeader span {
+  font-size: 20px;
+}
+
+.metricHeader h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.metricValue {
+  margin-top: 16px;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.metricInfo {
+  margin: 4px 0 0;
+  color: #666;
+  font-size: 14px;
+}
+
+/* Dark mode */
+
+:global(body.dark-mode) .container {
+  background-color: #121212;
+  color: #fff;
+}
+
+:global(body.dark-mode) .title {
+  color: #fff;
+}
+
+:global(body.dark-mode) .alertSection h2 {
+  color: #fff;
+}
+
+:global(body.dark-mode) .alertCard,
+:global(body.dark-mode) .harvestCard,
+:global(body.dark-mode) .metricCard {
+  background-color: #1e1e1e;
+  border-color: #444;
+  color: #fff;
+}
+
+:global(body.dark-mode) .alertContent h3,
+:global(body.dark-mode) .harvestCard h3,
+:global(body.dark-mode) .metricHeader h2,
+:global(body.dark-mode) .metricValue {
+  color: #fff;
+}
+
+:global(body.dark-mode) .alertContent p,
+:global(body.dark-mode) .harvestCard p,
+:global(body.dark-mode) .metricInfo {
+  color: #aaa;
+}
+
+:global(body.dark-mode) .alertIcon,
+:global(body.dark-mode) .harvestIcon {
+  background-color: #2d2d2d;
+}
+
+/* Responsive */
+
+@media (width <= 900px) {
+  .metricsGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .alertList,
+  .harvestList {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (width <= 600px) {
+  .container {
+    padding: 16px;
+  }
+
+  .header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .priorityIndicator {
+    align-self: flex-start;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .metricsGrid {
+    grid-template-columns: 1fr;
+  }
+}

src/routes.jsx

@@ -1078,7 +1078,7 @@ export default (
         {/* <BMProtectedRoute path="/bmdashboard/:path" component={BMDashboard} /> */}
         {/* ----- END BM Dashboard Routing ----- */}
         {/* ----- Kitchen and Inventory Portal Routes ----- */}
-        <ProtectedRoute path="/kitchenandinventory" exact component={KIDashboard} />
+        <ProtectedRoute path="/kitchenandinventory/dashboard" exact component={KIDashboard} />
         <ProtectedRoute path="/kitchenandinventory/inventory" exact component={KIINVENTORY} />
         <ProtectedRoute path="/kitchenandinventory/calendar" exact component={KICalendar} />
         <ProtectedRoute