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,66 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { rides } from '@/lib/api/index'
+import type { RideResponse } from '@/types/api'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Badge } from '@/components/ui/badge'
+
+export function ActiveRidesWidget() {
+  const [data, setData] = useState<RideResponse[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await rides.list({ status: 'Active', pageSize: 5, page: 1 })
+      setData(res.items)
+      setTotal(res.total)
+    } catch {
+      // silent — widget shows empty state
+    } 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" />
+        <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">active ride{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 active rides right now</p>
+        ) : (
+          data.map(ride => (
+            <div
+              key={ride.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">{ride.driverFullName}</span>
+                <span className="truncate text-xs text-muted-foreground">{ride.routeName} · {ride.vehicleNumberPlate}</span>
+              </div>
+              <Badge variant="secondary" className="ml-2 shrink-0">{ride.rideType}</Badge>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -0,0 +1,69 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { orders } from '@/lib/api/index'
+import type { OrderResponse } 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',
+  PartiallyFulfilled: 'secondary',
+  Fulfilled: 'default',
+  Cancelled: 'destructive',
+}
+
+export function RecentOrdersWidget() {
+  const [data, setData] = useState<OrderResponse[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await orders.list({ pageSize: 6, page: 1 })
+      setData(res.items)
+    } catch {
+      // silent
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchData() }, [fetchData])
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-10 w-full" />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-2 overflow-hidden">
+      {data.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No orders yet</p>
+      ) : (
+        <div className="flex flex-col gap-1.5 overflow-auto">
+          {data.map(order => (
+            <div key={order.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 font-mono text-xs text-muted-foreground">
+                  #{order.id.slice(0, 8).toUpperCase()}
+                </span>
+                <span className="text-sm font-medium">
+                  Rs.&nbsp;{order.totalAmount.toLocaleString('en-LK', { minimumFractionDigits: 2 })}
+                </span>
+              </div>
+              <Badge variant={STATUS_VARIANT[order.status] ?? 'outline'} className="ml-2 shrink-0">
+                {order.status}
+              </Badge>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -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>
+  )
+}
@@ -0,0 +1,69 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { sales } from '@/lib/api/index'
+import type { SaleResponse } from '@/types/api'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export function TodaySalesWidget() {
+  const [items, setItems] = useState<SaleResponse[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    const today = new Date().toISOString().split('T')[0]
+    try {
+      const res = await sales.list({ from: today, to: today, pageSize: 50, page: 1 })
+      setItems(res.items)
+      setTotal(res.total)
+    } catch {
+      // silent
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchData() }, [fetchData])
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-10 w-32" />
+        <div className="grid grid-cols-2 gap-3">
+          <Skeleton className="h-16" />
+          <Skeleton className="h-16" />
+        </div>
+      </div>
+    )
+  }
+
+  const revenue = items.reduce((sum, s) => sum + s.totalAmount, 0)
+  const completed = items.filter(s => s.status === 'Completed').length
+  const pending = items.filter(s => s.status === 'Pending').length
+
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <div className="flex flex-col">
+        <span className="text-3xl font-bold">
+          Rs.&nbsp;{revenue.toLocaleString('en-LK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+        </span>
+        <span className="text-sm text-muted-foreground">revenue today</span>
+      </div>
+      <div className="grid grid-cols-3 gap-2">
+        <div className="flex flex-col rounded-xl border px-3 py-2">
+          <span className="text-xl font-bold">{total}</span>
+          <span className="text-xs text-muted-foreground">total</span>
+        </div>
+        <div className="flex flex-col rounded-xl border px-3 py-2">
+          <span className="text-xl font-bold text-green-600">{completed}</span>
+          <span className="text-xs text-muted-foreground">completed</span>
+        </div>
+        <div className="flex flex-col rounded-xl border px-3 py-2">
+          <span className="text-xl font-bold text-amber-500">{pending}</span>
+          <span className="text-xs text-muted-foreground">pending</span>
+        </div>
+      </div>
+    </div>
+  )
+}