feat(dashboard): implement customizable dashboard with widget support

- Added `react-grid-layout` for drag-and-drop functionality. - Created `DashboardCanvas` component to manage layout and widget interactions. - Introduced `WidgetContainer` and `WidgetPicker` components for widget management. - Implemented various widgets: Active Rides, Today Sales, Pending Purchase Orders, Stock Alerts, Recent Orders, and Loading Sheets. - Integrated API calls for fetching and saving dashboard preferences. - Defined default layouts for different user roles. - Created a card component for consistent widget styling.
2026-08-29 16:51:25 +05:30
parent dc7e7a70fc
commit 29f181d5e1
17 changed files with 1089 additions and 9 deletions
@@ -0,0 +1,77 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { stock } from '@/lib/api/index'
+import type { StockBalanceResponse } from '@/types/api'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Badge } from '@/components/ui/badge'
+
+const LOW_STOCK_THRESHOLD = 10
+
+export function StockAlertsWidget() {
+  const [alerts, setAlerts] = useState<StockBalanceResponse[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await stock.balances({ pageSize: 100, page: 1 })
+      const low = res.items.filter(b => b.quantity <= LOW_STOCK_THRESHOLD)
+      setAlerts(low)
+    } catch {
+      // silent
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchData() }, [fetchData])
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-8 w-16" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+    )
+  }
+
+  const outOfStock = alerts.filter(a => a.quantity === 0)
+  const lowStock = alerts.filter(a => a.quantity > 0)
+
+  return (
+    <div className="flex h-full flex-col gap-3 overflow-hidden">
+      <div className="flex items-baseline gap-2">
+        <span className="text-3xl font-bold">{alerts.length}</span>
+        <span className="text-sm text-muted-foreground">
+          alert{alerts.length !== 1 ? 's' : ''}
+          {outOfStock.length > 0 && (
+            <span className="ml-1 text-destructive">({outOfStock.length} out of stock)</span>
+          )}
+        </span>
+      </div>
+      <div className="flex flex-col gap-1.5 overflow-auto">
+        {alerts.length === 0 ? (
+          <p className="text-sm text-muted-foreground">All stock levels are healthy</p>
+        ) : (
+          alerts.map(b => (
+            <div key={`${b.itemId}-${b.locationId}`} className="flex items-center justify-between rounded-xl border px-3 py-2">
+              <div className="flex min-w-0 flex-col">
+                <span className="truncate text-sm font-medium">{b.itemName}</span>
+                <span className="text-xs text-muted-foreground capitalize">{b.locationType}</span>
+              </div>
+              <Badge
+                variant={b.quantity === 0 ? 'destructive' : 'outline'}
+                className="ml-2 shrink-0"
+              >
+                {b.quantity === 0 ? 'Out of stock' : `${b.quantity} left`}
+              </Badge>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}