edited dashbaord and forecasts page

Author: HarshAI-ML

backend/db.sqlite3

@@ -11,6 +11,16 @@ import {
 import '../styles/components.css'
 import '../styles/pages.css'
 
+function formatDaysOfCover(value) {
+  if (!Number.isFinite(value)) {
+    return 'N/A'
+  }
+  if (value >= 999) {
+    return '999+ days'
+  }
+  return `${value.toFixed(1)} days`
+}
+
 function DashboardPage() {
   const { accessToken } = useAuth()
 
@@ -96,6 +106,30 @@ function DashboardPage() {
     ]
   }, [stockOverview, lowStockAlerts, consumptionSummary, supplierSummary, consumptionDays])
 
+  const consumptionByItemId = useMemo(() => {
+    const map = new Map()
+    consumptionSummary.forEach((row) => {
+      map.set(String(row.item_id), Number(row.avg_daily_consumption || 0))
+    })
+    return map
+  }, [consumptionSummary])
+
+  const actionItems = useMemo(() => {
+    const sortedAlerts = [...lowStockAlerts].sort((a, b) => Number(b.shortage || 0) - Number(a.shortage || 0))
+    return sortedAlerts.slice(0, 4).map((alert) => {
+      const stock = stockOverview.find((row) => String(row.item_id) === String(alert.item_id))
+      const avgDaily = consumptionByItemId.get(String(alert.item_id)) || 0
+      const qtyAvailable = Number(stock?.quantity_available || 0)
+      const daysOfCover = avgDaily > 0 ? qtyAvailable / avgDaily : Number.POSITIVE_INFINITY
+
+      return {
+        ...alert,
+        daysOfCover,
+        avgDaily,
+      }
+    })
+  }, [lowStockAlerts, stockOverview, consumptionByItemId])
+
   if (loading) {
     return <section className="page-stack"><p className="page-state">Loading dashboard data...</p></section>
   }
@@ -107,8 +141,8 @@ function DashboardPage() {
   return (
     <section className="page-stack">
       <PageHeader
-        title="Operations Dashboard"
-        subtitle="Historical and current view: stock levels, consumption trends, and reorder risk."
+        title="What Needs Action Today?"
+        subtitle="Historical and current view of stock, usage trends, and immediate reorder risks."
       />
 
       <div className="stats-grid">
@@ -122,6 +156,29 @@ function DashboardPage() {
         ))}
       </div>
 
+      <section className="content-card">
+        <h3>Priority Action Queue</h3>
+        <p className="section-subtitle">Most urgent items to reorder based on shortage and current cover.</p>
+        {actionItems.length === 0 ? (
+          <p className="page-state">No urgent reorder action right now.</p>
+        ) : (
+          <div className="action-grid">
+            {actionItems.map((item) => (
+              <article key={item.item_id} className="action-card">
+                <div className="action-head">
+                  <p className="action-item">{item.item_name}</p>
+                  <span className="status-pill status-critical">Order now</span>
+                </div>
+                <p>Shortage: <strong>{item.shortage}</strong></p>
+                <p>Avg daily usage: <strong>{item.avgDaily.toFixed(2)}</strong></p>
+                <p>Days of cover: <strong>{formatDaysOfCover(item.daysOfCover)}</strong></p>
+                <p>Supplier: <strong>{item.supplier_name || 'N/A'}</strong></p>
+              </article>
+            ))}
+          </div>
+        )}
+      </section>
+
       <section className="content-card">
         <h3>Current Stock Levels</h3>
         <p className="section-subtitle">What has happened now: quantity available vs reorder thresholds.</p>
@@ -132,25 +189,35 @@ function DashboardPage() {
                 <th>Item</th>
                 <th>Category</th>
                 <th>Available</th>
+                <th>Days of Cover</th>
                 <th>Reorder</th>
                 <th>Safety</th>
                 <th>Status</th>
               </tr>
             </thead>
             <tbody>
               {stockOverview.map((row) => (
-                <tr key={row.item_id}>
+                (() => {
+                  const avgDaily = consumptionByItemId.get(String(row.item_id)) || 0
+                  const daysOfCover = avgDaily > 0
+                    ? Number(row.quantity_available || 0) / avgDaily
+                    : Number.POSITIVE_INFINITY
+                  return (
+                    <tr key={row.item_id}>
                   <td>{row.item_name}</td>
                   <td>{row.category}</td>
                   <td>{row.quantity_available}</td>
+                  <td>{formatDaysOfCover(daysOfCover)}</td>
                   <td>{row.reorder_level}</td>
                   <td>{row.safety_stock}</td>
                   <td>
                     <span className={`status-pill status-${row.status?.toLowerCase()}`}>
                       {row.status}
                     </span>
                   </td>
-                </tr>
+                    </tr>
+                  )
+                })()
               ))}
             </tbody>
           </table>

frontend/src/pages/DashboardPage.jsx

@@ -180,8 +180,8 @@ function ForecastsPage() {
   return (
     <section className="page-stack">
       <PageHeader
-        title="Forecasting Workspace"
-        subtitle="Future view: 30-day demand predictions, model comparison, and suggested order planning."
+        title="What Should We Order Next?"
+        subtitle="Future view with selected horizon, model confidence, and recommended order quantity."
       />
 
       <section className="content-card compact-card">

frontend/src/pages/ForecastsPage.jsx

@@ -83,6 +83,35 @@
   color: #1b6f3d;
 }
 
+.action-grid {
+  margin-top: 0.65rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 0.75rem;
+}
+
+.action-card {
+  border: 1px solid #f2d2d2;
+  background: #fffdfc;
+  border-radius: 12px;
+  padding: 0.8rem;
+  display: grid;
+  gap: 0.28rem;
+  font-size: 0.9rem;
+}
+
+.action-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.action-item {
+  font-weight: 700;
+  color: #7f1d1d;
+}
+
 .alert-grid {
   margin-top: 0.65rem;
   display: grid;