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,65 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { purchaseOrders } from '@/lib/api/index'
+import type { PurchaseOrderResponse } from '@/types/api'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export function PendingPOsWidget() {
+  const [data, setData] = useState<PurchaseOrderResponse[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await purchaseOrders.list({ status: 'Issued', 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 order{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 purchase orders</p>
+        ) : (
+          data.map(po => (
+            <div key={po.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">{po.supplierName}</span>
+                <span className="text-xs text-muted-foreground">
+                  {po.items.length} line{po.items.length !== 1 ? 's' : ''}
+                </span>
+              </div>
+              <span className="ml-2 shrink-0 text-sm font-semibold">
+                Rs.&nbsp;{po.items.reduce((s, i) => s + i.quantity * i.unitCost, 0).toLocaleString('en-LK', { minimumFractionDigits: 0 })}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}