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,82 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { loadingSheets } from '@/lib/api/index'
+import type { LoadingSheetResponse } from '@/types/api'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Badge } from '@/components/ui/badge'
+
+const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  Pending: 'outline',
+  DispatchConfirmed: 'secondary',
+  ReceiptConfirmed: 'default',
+  DiscrepancyFlagged: 'destructive',
+  Resolved: 'default',
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  Pending: 'Pending',
+  DispatchConfirmed: 'Dispatched',
+  ReceiptConfirmed: 'Received',
+  DiscrepancyFlagged: 'Discrepancy',
+  Resolved: 'Resolved',
+}
+
+export function LoadingSheetsWidget() {
+  const [data, setData] = useState<LoadingSheetResponse[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await loadingSheets.list({ status: 'Pending', pageSize: 5, page: 1 })
+      setData(res.items)
+      setTotal(res.total)
+    } 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-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    )
+  }
+
+  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">{total}</span>
+        <span className="text-sm text-muted-foreground">pending sheet{total !== 1 ? 's' : ''}</span>
+      </div>
+      <div className="flex flex-col gap-1.5 overflow-auto">
+        {data.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No pending loading sheets</p>
+        ) : (
+          data.map(sheet => (
+            <div key={sheet.id} 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">{sheet.warehouseName}</span>
+                <span className="text-xs text-muted-foreground">
+                  {sheet.items.length} item{sheet.items.length !== 1 ? 's' : ''}
+                </span>
+              </div>
+              <Badge variant={STATUS_VARIANT[sheet.status] ?? 'outline'} className="ml-2 shrink-0">
+                {STATUS_LABEL[sheet.status] ?? sheet.status}
+              </Badge>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}