distribution_fe/app/(dashboard)/_components/dashboard-charts.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Label, PolarAngleAxis, Pie, PieChart, RadialBar, RadialBarChart, XAxis, YAxis } from 'recharts'
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+
+export interface ChartDatum {
+  name: string
+  value: number
+}
+
+export interface MonthlySalesPoint {
+  month: string // yyyy-MM
+  invoiced: number
+}
+
+const fmtCompact = (v: number) => v.toLocaleString('en-LK', { notation: 'compact', maximumFractionDigits: 1 })
+const fmtMonth = (v: string) => new Date(`${v}-01`).toLocaleDateString('en-GB', { month: 'short', year: '2-digit' })
+
+const SLICE_COLORS = ['var(--chart-2)', 'var(--chart-4)', 'var(--chart-1)', 'var(--chart-3)', 'var(--destructive)']
+
+function Empty({ text }: { text: string }) {
+  return <p className="text-xs text-muted-foreground">{text}</p>
+}
+
+export function DonutChart({ data, centerLabel, emptyText }: { data: ChartDatum[]; centerLabel: string; emptyText: string }) {
+  const total = data.reduce((sum, d) => sum + d.value, 0)
+  if (total === 0) return <Empty text={emptyText} />
+
+  const slices = data.map((d, i) => ({ ...d, fill: SLICE_COLORS[i % SLICE_COLORS.length] }))
+  const config = Object.fromEntries(slices.map(s => [s.name, { label: s.name, color: s.fill }])) as ChartConfig
+
+  return (
+    <ChartContainer config={config} className="h-full min-h-40 w-full">
+      <PieChart>
+        <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="name" />} />
+        <Pie data={slices} dataKey="value" nameKey="name" innerRadius="55%" strokeWidth={2}>
+          <Label
+            content={({ viewBox }) => {
+              if (!viewBox || !('cx' in viewBox)) return null
+              return (
+                <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                  <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) - 6} className="fill-foreground text-base font-semibold">{fmtCompact(total)}</tspan>
+                  <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 12} className="fill-muted-foreground text-[11px]">{centerLabel}</tspan>
+                </text>
+              )
+            }}
+          />
+        </Pie>
+        <ChartLegend content={<ChartLegendContent nameKey="name" />} />
+      </PieChart>
+    </ChartContainer>
+  )
+}
+
+export function HorizontalBarChart({ data, emptyText, color = 'var(--chart-2)' }: { data: ChartDatum[]; emptyText: string; color?: string }) {
+  if (data.length === 0 || data.every(d => d.value === 0)) return <Empty text={emptyText} />
+
+  const config = { value: { label: 'Quantity', color } } satisfies ChartConfig
+
+  return (
+    <ChartContainer config={config} className="h-full min-h-40 w-full">
+      <BarChart data={data} layout="vertical" margin={{ left: 0, right: 8 }}>
+        <CartesianGrid horizontal={false} />
+        <XAxis type="number" tickFormatter={fmtCompact} tickLine={false} axisLine={false} />
+        <YAxis type="category" dataKey="name" tickLine={false} axisLine={false} width={96} />
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+        <Bar dataKey="value" fill="var(--color-value)" radius={4} maxBarSize={22}>
+          {data.map(d => <Cell key={d.name} fill={color} />)}
+        </Bar>
+      </BarChart>
+    </ChartContainer>
+  )
+}
+
+export function ColumnBarChart({ data, emptyText, label }: { data: ChartDatum[]; emptyText: string; label: string }) {
+  if (data.length === 0 || data.every(d => d.value === 0)) return <Empty text={emptyText} />
+
+  const config = { value: { label, color: 'var(--chart-2)' } } satisfies ChartConfig
+
+  return (
+    <ChartContainer config={config} className="h-full min-h-40 w-full">
+      <BarChart data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="name" tickLine={false} axisLine={false} interval={0} tick={{ fontSize: 10 }} />
+        <YAxis tickFormatter={fmtCompact} tickLine={false} axisLine={false} width={40} />
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+        <Bar dataKey="value" fill="var(--color-value)" radius={4} maxBarSize={36} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
+
+export function SalesTrendChart({ data }: { data: MonthlySalesPoint[] }) {
+  if (data.length === 0) return <Empty text="No invoices yet." />
+
+  const config = { invoiced: { label: 'Invoiced', color: 'var(--chart-2)' } } satisfies ChartConfig
+
+  return (
+    <ChartContainer config={config} className="h-full min-h-40 w-full">
+      <AreaChart data={data}>
+        <defs>
+          <linearGradient id="dashFillInvoiced" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--color-invoiced)" stopOpacity={0.5} />
+            <stop offset="95%" stopColor="var(--color-invoiced)" stopOpacity={0.05} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="month" tickFormatter={fmtMonth} tickLine={false} axisLine={false} />
+        <YAxis tickFormatter={fmtCompact} tickLine={false} axisLine={false} width={48} />
+        <ChartTooltip content={<ChartTooltipContent labelFormatter={(v) => fmtMonth(String(v))} />} />
+        <Area dataKey="invoiced" type="monotone" stroke="var(--color-invoiced)" fill="url(#dashFillInvoiced)" />
+      </AreaChart>
+    </ChartContainer>
+  )
+}
+
+export function RadialGauge({ pct, label, sub }: { pct: number; label: string; sub: string }) {
+  const config = { value: { label, color: 'var(--chart-2)' } } satisfies ChartConfig
+
+  return (
+    <div className="flex h-full min-h-32 items-center gap-4">
+      <div className="relative aspect-square h-full max-h-40 min-h-24">
+        <ChartContainer config={config} className="size-full">
+          <RadialBarChart data={[{ value: pct, fill: 'var(--color-value)' }]} startAngle={90} endAngle={-270} innerRadius="75%" outerRadius="100%">
+            <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
+            <RadialBar dataKey="value" background cornerRadius={10} />
+          </RadialBarChart>
+        </ChartContainer>
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-foreground">{pct}%</div>
+      </div>
+      <p className="text-xs text-muted-foreground">{sub}</p>
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/_components/dashboard-client.tsx

@@ -22,6 +22,8 @@ import {
   getPaginatedItems,
 } from '@/lib/api/index'
 import type { LowStockItemResponse, StockMovementResponse } from '@/types/api'
+import { ColumnBarChart, DonutChart, HorizontalBarChart, RadialGauge, SalesTrendChart } from './dashboard-charts'
+import type { ChartDatum, MonthlySalesPoint } from './dashboard-charts'
 
 const STORAGE_KEY = 'distribution-dashboard-widgets-v3'
 const ROW_HEIGHT = 36
@@ -31,7 +33,7 @@ type Breakpoint = keyof typeof DEFAULT_BREAKPOINTS
 const BREAKPOINT_ORDER = Object.keys(DEFAULT_BREAKPOINTS) as Breakpoint[]
 
 type Category = 'sales' | 'ops' | 'stock' | 'finance'
-type Size = 'sm' | 'md' | 'lg'
+type Size = 'sm' | 'md' | 'lg' | 'chart' | 'chartWide'
 
 interface WidgetMeta {
   id: string
@@ -59,11 +61,18 @@ const WIDGET_META: WidgetMeta[] = [
   { id: 'warehouseBalance', cat: 'stock', title: 'Warehouse Balances', size: 'md' },
   { id: 'outstandingPay', cat: 'finance', title: 'Outstanding Payments', size: 'sm' },
   { id: 'invoiceStatus', cat: 'finance', title: 'Invoices by Status', size: 'md' },
+  { id: 'salesTrendChart', cat: 'finance', title: 'Sales Trend (6 months)', size: 'chartWide' },
+  { id: 'paymentStatusChart', cat: 'finance', title: 'Payment Status', size: 'chart' },
+  { id: 'poStatusChart', cat: 'sales', title: 'Shop POs by Status', size: 'chart' },
+  { id: 'loadingSheetsChart', cat: 'ops', title: 'Loading Sheets Split', size: 'chart' },
+  { id: 'warehouseChart', cat: 'stock', title: 'Warehouse Stock Chart', size: 'chart' },
+  { id: 'movementTypeChart', cat: 'stock', title: 'Movements by Type', size: 'chart' },
 ]
 
 const DEFAULT_ACTIVE = [
   'pendingPO', 'awaitingConfirm', 'fulfillRate', 'openRides', 'loadingSheetsByStatus',
   'deliveryTasks', 'lowStock', 'outstandingPay', 'invoiceStatus',
+  'salesTrendChart', 'poStatusChart', 'paymentStatusChart', 'warehouseChart',
 ]
 
 /** Width (in that breakpoint's own columns), height, and minimums per widget size, per breakpoint. Narrower breakpoints
@@ -71,28 +80,38 @@ const DEFAULT_ACTIVE = [
 const SIZE_CONFIG: Record<Breakpoint, Record<Size, { w: number; h: number; minW: number; minH: number }>> = {
   lg: {
     sm: { w: 3, h: 4, minW: 2, minH: 3 },
-    md: { w: 6, h: 5, minW: 3, minH: 3 },
+    md: { w: 6, h: 6, minW: 3, minH: 3 },
     lg: { w: 12, h: 7, minW: 4, minH: 4 },
+    chart: { w: 4, h: 7, minW: 3, minH: 5 },
+    chartWide: { w: 8, h: 7, minW: 4, minH: 5 },
   },
   md: {
     sm: { w: 5, h: 4, minW: 3, minH: 3 },
-    md: { w: 10, h: 5, minW: 4, minH: 3 },
+    md: { w: 10, h: 6, minW: 4, minH: 3 },
     lg: { w: 10, h: 7, minW: 4, minH: 4 },
+    chart: { w: 5, h: 7, minW: 3, minH: 5 },
+    chartWide: { w: 10, h: 7, minW: 4, minH: 5 },
   },
   sm: {
     sm: { w: 3, h: 4, minW: 2, minH: 3 },
-    md: { w: 6, h: 5, minW: 3, minH: 3 },
+    md: { w: 6, h: 6, minW: 3, minH: 3 },
     lg: { w: 6, h: 7, minW: 3, minH: 4 },
+    chart: { w: 6, h: 7, minW: 3, minH: 5 },
+    chartWide: { w: 6, h: 7, minW: 3, minH: 5 },
   },
   xs: {
     sm: { w: 4, h: 4, minW: 2, minH: 3 },
-    md: { w: 4, h: 5, minW: 2, minH: 3 },
+    md: { w: 4, h: 6, minW: 2, minH: 3 },
     lg: { w: 4, h: 7, minW: 2, minH: 4 },
+    chart: { w: 4, h: 7, minW: 2, minH: 5 },
+    chartWide: { w: 4, h: 7, minW: 2, minH: 5 },
   },
   xxs: {
     sm: { w: 2, h: 4, minW: 1, minH: 3 },
-    md: { w: 2, h: 5, minW: 1, minH: 3 },
+    md: { w: 2, h: 6, minW: 1, minH: 3 },
     lg: { w: 2, h: 7, minW: 1, minH: 4 },
+    chart: { w: 2, h: 7, minW: 1, minH: 5 },
+    chartWide: { w: 2, h: 7, minW: 1, minH: 5 },
   },
 }
 
@@ -198,6 +217,32 @@ interface DashboardData {
   draftInvoiceCount: number
   printedInvoiceCount: number
   finalizedInvoiceCount: number
+  poStatusChart: ChartDatum[]
+  paymentStatusChart: ChartDatum[]
+  movementTypeChart: ChartDatum[]
+  monthlySales: MonthlySalesPoint[]
+}
+
+const PO_STATUSES = ['Pending', 'PartiallyFulfilled', 'Fulfilled', 'Cancelled'] as const
+const PAYMENT_STATUSES = ['Pending', 'PartiallyPaid', 'Paid'] as const
+const SALES_MONTHS = 6
+/** Recent-activity charts aggregate this many latest records client-side. */
+const CHART_SAMPLE_SIZE = 200
+
+const splitWords = (s: string) => s.replace(/([a-z])([A-Z])/g, '$1 $2')
+
+function buildMonthlySales(rows: Array<{ createdAt: string; totalAmount: number }>): MonthlySalesPoint[] {
+  const now = new Date()
+  const months: MonthlySalesPoint[] = []
+  for (let i = SALES_MONTHS - 1; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
+    months.push({ month: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`, invoiced: 0 })
+  }
+  for (const r of rows) {
+    const bucket = months.find(m => m.month === r.createdAt.slice(0, 7))
+    if (bucket) bucket.invoiced += r.totalAmount
+  }
+  return months
 }
 
 async function loadDashboardData(): Promise<DashboardData> {
@@ -211,6 +256,8 @@ async function loadDashboardData(): Promise<DashboardData> {
     balances,
     outstanding,
     draftInv, printedInv, finalizedInv,
+    poStatusCounts, paymentStatusCounts,
+    recentInvoices, recentMovements,
   ] = await Promise.all([
     shopPos.list({ status: 'Pending', pageSize: 1 }),
     shopPos.list({ confirmed: true, status: 'Pending', pageSize: 1 }),
@@ -228,8 +275,17 @@ async function loadDashboardData(): Promise<DashboardData> {
     invoices.list({ status: 'Draft', pageSize: 1 }),
     invoices.list({ status: 'Printed', pageSize: 1 }),
     invoices.list({ status: 'Finalized', pageSize: 1 }),
+    Promise.all(PO_STATUSES.map(status => shopPos.list({ status, pageSize: 1 }))),
+    Promise.all(PAYMENT_STATUSES.map(paymentStatus => invoices.list({ paymentStatus, pageSize: 1 }))),
+    invoices.list({ pageSize: CHART_SAMPLE_SIZE }),
+    stock.movements({ pageSize: CHART_SAMPLE_SIZE }),
   ])
 
+  const movementCounts = new Map<string, number>()
+  for (const m of getPaginatedItems(recentMovements)) {
+    movementCounts.set(m.type, (movementCounts.get(m.type) ?? 0) + 1)
+  }
+
   const balanceRows = getPaginatedItems(balances)
   const byWarehouse = new Map<string, WarehouseBalanceRow>()
   for (const b of balanceRows) {
@@ -259,6 +315,10 @@ async function loadDashboardData(): Promise<DashboardData> {
     draftInvoiceCount: draftInv.total,
     printedInvoiceCount: printedInv.total,
     finalizedInvoiceCount: finalizedInv.total,
+    poStatusChart: PO_STATUSES.map((s, i) => ({ name: splitWords(s), value: poStatusCounts[i].total })),
+    paymentStatusChart: PAYMENT_STATUSES.map((s, i) => ({ name: splitWords(s), value: paymentStatusCounts[i].total })),
+    movementTypeChart: Array.from(movementCounts, ([type, value]) => ({ name: splitWords(type), value })).sort((a, b) => b.value - a.value),
+    monthlySales: buildMonthlySales(getPaginatedItems(recentInvoices)),
   }
 }
 
@@ -271,14 +331,6 @@ function CategoryPill({ cat }: { cat: Category }) {
   )
 }
 
-function Bar({ pct, colorClass }: { pct: number; colorClass: string }) {
-  return (
-    <div className="h-2 rounded-full bg-muted overflow-hidden">
-      <div className={`h-full rounded-full ${colorClass}`} style={{ width: `${Math.min(100, Math.max(0, pct))}%` }} />
-    </div>
-  )
-}
-
 function WidgetBody({ id, data }: { id: string; data: DashboardData }) {
   switch (id) {
     case 'pendingPO':
@@ -297,13 +349,7 @@ function WidgetBody({ id, data }: { id: string; data: DashboardData }) {
       )
     case 'fulfillRate': {
       const pct = data.totalPOCount > 0 ? Math.round((data.fulfilledPOCount / data.totalPOCount) * 100) : 0
-      return (
-        <div>
-          <div className="mb-2.5 text-2xl font-bold text-foreground">{pct}%</div>
-          <Bar pct={pct} colorClass="bg-blue-600" />
-          <div className="mt-2.5 text-xs text-muted-foreground">{data.fulfilledPOCount} of {data.totalPOCount} orders fulfilled</div>
-        </div>
-      )
+      return <RadialGauge pct={pct} label="Fulfilled" sub={`${data.fulfilledPOCount} of ${data.totalPOCount} orders fulfilled`} />
     }
     case 'openRides':
       return data.openRides.length === 0 ? (
@@ -321,29 +367,16 @@ function WidgetBody({ id, data }: { id: string; data: DashboardData }) {
           ))}
         </div>
       )
-    case 'loadingSheetsByStatus': {
-      const total = data.plannedSheetsCount + data.confirmedSheetsCount
-      const plannedPct = total > 0 ? (data.plannedSheetsCount / total) * 100 : 0
-      const confirmedPct = total > 0 ? (data.confirmedSheetsCount / total) * 100 : 0
+    case 'loadingSheetsByStatus':
       return (
-        <div className="flex flex-col gap-3">
-          <div>
-            <div className="mb-1 flex justify-between text-xs">
-              <span className="text-muted-foreground">Planned</span>
-              <span className="font-semibold text-foreground">{data.plannedSheetsCount}</span>
-            </div>
-            <Bar pct={plannedPct} colorClass="bg-amber-600" />
-          </div>
-          <div>
-            <div className="mb-1 flex justify-between text-xs">
-              <span className="text-muted-foreground">Confirmed</span>
-              <span className="font-semibold text-foreground">{data.confirmedSheetsCount}</span>
-            </div>
-            <Bar pct={confirmedPct} colorClass="bg-violet-600" />
-          </div>
-        </div>
+        <HorizontalBarChart
+          data={[
+            { name: 'Planned', value: data.plannedSheetsCount },
+            { name: 'Confirmed', value: data.confirmedSheetsCount },
+          ]}
+          emptyText="No loading sheets yet."
+        />
       )
-    }
     case 'deliveryTasks':
       return (
         <div>
@@ -387,24 +420,8 @@ function WidgetBody({ id, data }: { id: string; data: DashboardData }) {
           ))}
         </div>
       )
-    case 'warehouseBalance': {
-      const max = Math.max(1, ...data.warehouseBalances.map(w => w.quantity))
-      return data.warehouseBalances.length === 0 ? (
-        <p className="text-xs text-muted-foreground">No warehouse stock recorded.</p>
-      ) : (
-        <div className="flex flex-col gap-3">
-          {data.warehouseBalances.map(w => (
-            <div key={w.locationId}>
-              <div className="mb-1 flex justify-between text-xs">
-                <span className="text-muted-foreground">{w.name}</span>
-                <span className="font-semibold text-foreground">{w.quantity}</span>
-              </div>
-              <Bar pct={(w.quantity / max) * 100} colorClass="bg-amber-600" />
-            </div>
-          ))}
-        </div>
-      )
-    }
+    case 'warehouseBalance':
+      return <HorizontalBarChart data={data.warehouseBalances.map(w => ({ name: w.name, value: w.quantity }))} emptyText="No warehouse stock recorded." />
     case 'outstandingPay':
       return (
         <div>
@@ -412,34 +429,39 @@ function WidgetBody({ id, data }: { id: string; data: DashboardData }) {
           <div className="mt-1.5 text-xs text-muted-foreground">{data.outstandingInvoiceCount} invoices</div>
         </div>
       )
-    case 'invoiceStatus': {
-      const total = data.draftInvoiceCount + data.printedInvoiceCount + data.finalizedInvoiceCount
-      const segs = [
-        { label: 'Draft', count: data.draftInvoiceCount, color: 'bg-slate-400' },
-        { label: 'Printed', count: data.printedInvoiceCount, color: 'bg-amber-600' },
-        { label: 'Finalized', count: data.finalizedInvoiceCount, color: 'bg-emerald-600' },
-      ]
+    case 'invoiceStatus':
       return (
-        <div>
-          <div className="flex h-2.5 overflow-hidden rounded-full bg-muted">
-            {segs.map(s => (
-              <div key={s.label} className={s.color} style={{ width: total > 0 ? `${(s.count / total) * 100}%` : '0%' }} />
-            ))}
-          </div>
-          <div className="mt-3.5 flex flex-col gap-1.5">
-            {segs.map(s => (
-              <div key={s.label} className="flex items-center justify-between text-xs">
-                <span className="flex items-center gap-1.5 text-muted-foreground">
-                  <span className={`inline-block h-2 w-2 rounded-full ${s.color}`} />
-                  {s.label}
-                </span>
-                <span className="font-semibold text-foreground">{s.count}</span>
-              </div>
-            ))}
-          </div>
-        </div>
+        <DonutChart
+          data={[
+            { name: 'Draft', value: data.draftInvoiceCount },
+            { name: 'Printed', value: data.printedInvoiceCount },
+            { name: 'Finalized', value: data.finalizedInvoiceCount },
+          ]}
+          centerLabel="invoices"
+          emptyText="No invoices yet."
+        />
       )
-    }
+    case 'salesTrendChart':
+      return <SalesTrendChart data={data.monthlySales} />
+    case 'paymentStatusChart':
+      return <DonutChart data={data.paymentStatusChart} centerLabel="invoices" emptyText="No invoices yet." />
+    case 'poStatusChart':
+      return <DonutChart data={data.poStatusChart} centerLabel="orders" emptyText="No shop POs yet." />
+    case 'loadingSheetsChart':
+      return (
+        <DonutChart
+          data={[
+            { name: 'Planned', value: data.plannedSheetsCount },
+            { name: 'Confirmed', value: data.confirmedSheetsCount },
+          ]}
+          centerLabel="sheets"
+          emptyText="No loading sheets yet."
+        />
+      )
+    case 'warehouseChart':
+      return <HorizontalBarChart data={data.warehouseBalances.map(w => ({ name: w.name, value: w.quantity }))} emptyText="No warehouse stock recorded." />
+    case 'movementTypeChart':
+      return <ColumnBarChart data={data.movementTypeChart} label="Movements" emptyText="No recent stock movements." />
     default:
       return null
   }
@@ -653,7 +675,9 @@ export function DashboardClient() {
                     <div className="text-sm font-semibold text-foreground">{w.title}</div>
                     <div className="mt-1"><CategoryPill cat={w.cat} /></div>
                   </div>
-                  <WidgetBody id={w.id} data={data} />
+                  <div className="min-h-0 flex-1">
+                    <WidgetBody id={w.id} data={data} />
+                  </div>
                 </div>
               ))}
             </ResponsiveGridLayout>

distribution_fe/app/(dashboard)/network/vehicles/[id]/page.tsx

@@ -0,0 +1,5 @@
+import { VehicleDashboard } from '../_components/dashboard/vehicle-dashboard'
+
+export default function VehicleDashboardPage() {
+  return <VehicleDashboard />
+}

distribution_fe/app/(dashboard)/network/vehicles/_components/dashboard/sections.tsx

@@ -0,0 +1,385 @@
+'use client'
+
+import { useState } from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import {
+  MOVEMENT_LABEL, daysAgo, fmtCompact, fmtDate, fmtDateTime, fmtMoney, fmtNum, fmtShortDay,
+} from '@/app/(dashboard)/network/warehouses/_components/dashboard/format'
+import { EmptyNote, Metric, Section } from '@/app/(dashboard)/network/warehouses/_components/dashboard/shared'
+import type { CancelRequestType, RideStatus, VehicleDashboardResponse } from '@/types/api'
+
+const CANCEL_LABEL: Record<CancelRequestType, string> = {
+  VehicleBreakdown: 'Vehicle breakdown',
+  DriverUnavailable: 'Driver unavailable',
+  RouteIssue: 'Route issue',
+  Other: 'Other',
+}
+
+const RIDE_BADGE: Record<RideStatus, 'default' | 'secondary' | 'destructive'> = {
+  Open: 'default',
+  Closed: 'secondary',
+  Cancelled: 'destructive',
+}
+
+const deliveryConfig = {
+  delivered: { label: 'Delivered', color: 'var(--chart-2)' },
+  failed: { label: 'Failed', color: 'var(--destructive)' },
+} satisfies ChartConfig
+
+const flowConfig = {
+  in: { label: 'Units in', color: 'var(--chart-2)' },
+  out: { label: 'Units out', color: 'var(--chart-1)' },
+} satisfies ChartConfig
+
+export function expiryState(date: string): 'expired' | 'soon' | 'ok' {
+  const days = (new Date(date).getTime() - Date.now()) / 86_400_000
+  return days < 0 ? 'expired' : days <= 30 ? 'soon' : 'ok'
+}
+
+// ── Rides & deliveries ──────────────────────────────────────────────────────
+
+export function RidesSection({ data }: { data: VehicleDashboardResponse }) {
+  const { kpis, rides, cancelReasons, topStores } = data
+  return (
+    <div className="flex flex-col gap-4">
+      <Section title="Deliveries" description="Delivery tasks completed and failed per day">
+        <ChartContainer config={deliveryConfig} className="h-64 w-full">
+          <BarChart data={data.dailyDeliveries}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickFormatter={fmtShortDay} tickLine={false} axisLine={false} minTickGap={24} />
+            <YAxis allowDecimals={false} tickLine={false} axisLine={false} width={32} />
+            <ChartTooltip content={<ChartTooltipContent labelFormatter={v => fmtShortDay(String(v))} />} />
+            <Bar dataKey="delivered" stackId="a" fill="var(--color-delivered)" />
+            <Bar dataKey="failed" stackId="a" fill="var(--color-failed)" radius={[4, 4, 0, 0]} />
+            <ChartLegend content={<ChartLegendContent />} />
+          </BarChart>
+        </ChartContainer>
+      </Section>
+
+      <Section
+        title="Ride history"
+        description={`Latest ${rides.length} of ${kpis.rides} rides in this period`}
+        href="/operations/rides"
+        hrefLabel="All rides"
+      >
+        {rides.length === 0 ? (
+          <EmptyNote>No rides in this period.</EmptyNote>
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Started</TableHead>
+                  <TableHead>Driver</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Distance</TableHead>
+                  <TableHead className="text-right">Delivered</TableHead>
+                  <TableHead className="text-right">Failed</TableHead>
+                  <TableHead>Notes</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rides.map(r => (
+                  <TableRow key={r.id}>
+                    <TableCell className="whitespace-nowrap">{fmtDateTime(r.startedAt ?? r.createdAt)}</TableCell>
+                    <TableCell>{r.driverName}</TableCell>
+                    <TableCell><Badge variant={RIDE_BADGE[r.status]}>{r.status}</Badge></TableCell>
+                    <TableCell className="text-right tabular-nums">{r.distanceKm > 0 ? `${fmtNum(r.distanceKm)} km` : '—'}</TableCell>
+                    <TableCell className="text-right tabular-nums">{r.delivered} / {r.tasks}</TableCell>
+                    <TableCell className="text-right tabular-nums">{r.failed}</TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {r.status === 'Cancelled'
+                        ? `${r.cancelType ? CANCEL_LABEL[r.cancelType] : 'Cancelled'}${r.cancelReason ? ` — ${r.cancelReason}` : ''}`
+                        : r.closedAt ? `Closed ${fmtDateTime(r.closedAt)}` : '—'}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </Section>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Top stores served" description="By value delivered from this vehicle">
+          {topStores.length === 0 ? (
+            <EmptyNote>No completed deliveries in this period.</EmptyNote>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {topStores.map(s => (
+                <li key={s.storeId} className="flex items-center justify-between gap-2 text-sm">
+                  <span className="truncate font-medium">{s.storeName}</span>
+                  <span className="shrink-0 tabular-nums text-muted-foreground">
+                    {s.deliveries} {s.deliveries === 1 ? 'delivery' : 'deliveries'} · {fmtMoney(s.value)}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+
+        <Section title="Cancelled rides" description="Why rides on this vehicle were cancelled">
+          {cancelReasons.length === 0 ? (
+            <EmptyNote>No cancelled rides in this period.</EmptyNote>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {cancelReasons.map(c => (
+                <li key={c.type} className="flex items-center justify-between text-sm">
+                  <span>{CANCEL_LABEL[c.type]}</span>
+                  <Badge variant="outline">{c.count}</Badge>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+      </div>
+    </div>
+  )
+}
+
+// ── Stock on board ──────────────────────────────────────────────────────────
+
+export function StockSection({ data }: { data: VehicleDashboardResponse }) {
+  const { stockOnBoard, kpis } = data
+  return (
+    <Section
+      title="Stock on board"
+      description={`${stockOnBoard.length} items currently on this vehicle`}
+      href="/stock"
+      hrefLabel="Stock balances"
+    >
+      <div className="mb-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <Metric label="Units on board" value={fmtNum(kpis.stockOnBoardUnits)} />
+        <Metric label="Value at sale price" value={fmtMoney(kpis.stockOnBoardValue)} />
+        <Metric label="Loaded" value={fmtNum(kpis.unitsLoaded)} sub="units this period" />
+        <Metric label="Sold" value={fmtNum(kpis.unitsSold)} sub="units this period" />
+      </div>
+      {stockOnBoard.length === 0 ? (
+        <EmptyNote>The vehicle is empty.</EmptyNote>
+      ) : (
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Item</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead className="text-right">On board</TableHead>
+                <TableHead className="text-right">Value</TableHead>
+                <TableHead>Updated</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {stockOnBoard.map(r => (
+                <TableRow key={r.itemId}>
+                  <TableCell>
+                    <p className="font-medium">{r.name}</p>
+                    <p className="text-xs text-muted-foreground">{r.sku}</p>
+                  </TableCell>
+                  <TableCell>{r.category}</TableCell>
+                  <TableCell className="text-right tabular-nums">{fmtNum(r.quantity)} {r.uom}</TableCell>
+                  <TableCell className="text-right tabular-nums">{fmtMoney(r.value)}</TableCell>
+                  <TableCell className="whitespace-nowrap text-muted-foreground">{daysAgo(r.updatedAt)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </Section>
+  )
+}
+
+// ── Stock movement ──────────────────────────────────────────────────────────
+
+export function MovementSection({ data }: { data: VehicleDashboardResponse }) {
+  const [direction, setDirection] = useState<'all' | 'In' | 'Out'>('all')
+  const ledger = direction === 'all' ? data.ledger : data.ledger.filter(r => r.direction === direction)
+  const total = data.movementByType.reduce((sum, r) => sum + r.count, 0)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Section title="Stock movement" description="Units loaded onto and leaving this vehicle, per day">
+        <ChartContainer config={flowConfig} className="h-64 w-full">
+          <BarChart data={data.dailyMovement}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickFormatter={fmtShortDay} tickLine={false} axisLine={false} minTickGap={24} />
+            <YAxis tickFormatter={fmtCompact} tickLine={false} axisLine={false} width={44} />
+            <ChartTooltip content={<ChartTooltipContent labelFormatter={v => fmtShortDay(String(v))} />} />
+            <Bar dataKey="in" fill="var(--color-in)" radius={[4, 4, 0, 0]} />
+            <Bar dataKey="out" fill="var(--color-out)" radius={[4, 4, 0, 0]} />
+            <ChartLegend content={<ChartLegendContent />} />
+          </BarChart>
+        </ChartContainer>
+      </Section>
+
+      <Section title="By movement type" description="Loads from warehouses, sales to customers, returns and transfers">
+        {data.movementByType.length === 0 ? (
+          <EmptyNote>No movements in this period.</EmptyNote>
+        ) : (
+          <ul className="flex flex-col gap-2">
+            {data.movementByType.map(r => (
+              <li key={`${r.type}-${r.direction}`} className="flex items-center justify-between text-sm">
+                <span className="flex items-center gap-2">
+                  <Badge variant={r.direction === 'In' ? 'secondary' : 'outline'}>{r.direction}</Badge>
+                  {MOVEMENT_LABEL[r.type]}
+                </span>
+                <span className="tabular-nums text-muted-foreground">{fmtNum(r.units)} units · {r.count}×</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Section>
+
+      <Section
+        title="Movement ledger"
+        description={`Latest ${data.ledger.length} of ${total} movements in this period`}
+        href="/stock/movements"
+        hrefLabel="Full movement history"
+      >
+        <div className="mb-3 flex gap-1">
+          {(['all', 'In', 'Out'] as const).map(d => (
+            <Button key={d} size="sm" variant={direction === d ? 'default' : 'outline'} onClick={() => setDirection(d)}>
+              {d === 'all' ? 'All' : d}
+            </Button>
+          ))}
+        </div>
+        {ledger.length === 0 ? (
+          <EmptyNote>No movements to show.</EmptyNote>
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>When</TableHead>
+                  <TableHead>Item</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead className="text-right">Qty</TableHead>
+                  <TableHead>From → To</TableHead>
+                  <TableHead>By</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ledger.map(r => (
+                  <TableRow key={r.id}>
+                    <TableCell className="whitespace-nowrap text-muted-foreground">{fmtDateTime(r.createdAt)}</TableCell>
+                    <TableCell>
+                      <p className="font-medium">{r.itemName}</p>
+                      <p className="text-xs text-muted-foreground">{r.sku}</p>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1.5">
+                        <Badge variant={r.direction === 'In' ? 'secondary' : 'outline'}>{r.direction}</Badge>
+                        <span className="text-sm">{MOVEMENT_LABEL[r.type]}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">{r.direction === 'In' ? '+' : '−'}{fmtNum(r.quantity)}</TableCell>
+                    <TableCell className="whitespace-nowrap">{r.fromName} → {r.toName}</TableCell>
+                    <TableCell className="whitespace-nowrap">{r.createdByName}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </Section>
+    </div>
+  )
+}
+
+// ── Drivers, collections and returns ────────────────────────────────────────
+
+function ExpiryBadge({ date }: { date: string }) {
+  const state = expiryState(date)
+  return (
+    <span className="flex items-center gap-1.5">
+      {fmtDate(date)}
+      {state === 'expired' && <Badge variant="destructive">Expired</Badge>}
+      {state === 'soon' && <Badge variant="outline">Expiring</Badge>}
+    </span>
+  )
+}
+
+export function PeopleMoneySection({ data }: { data: VehicleDashboardResponse }) {
+  const { drivers, collectionsByMethod, returns, kpis } = data
+  return (
+    <div className="flex flex-col gap-4">
+      <Section title="Drivers" description="Drivers who have operated this vehicle in the period, with compliance dates" href="/drivers" hrefLabel="All drivers">
+        {drivers.length === 0 ? (
+          <EmptyNote>No driver has used this vehicle in this period.</EmptyNote>
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Driver</TableHead>
+                  <TableHead className="text-right">Rides</TableHead>
+                  <TableHead className="text-right">Distance</TableHead>
+                  <TableHead>Last ride</TableHead>
+                  <TableHead>Licence expiry</TableHead>
+                  <TableHead>Medical clearance</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {drivers.map(d => (
+                  <TableRow key={d.id}>
+                    <TableCell>
+                      <p className="font-medium">{d.name}{!d.isActive && <Badge variant="secondary" className="ml-2">Inactive</Badge>}</p>
+                      <p className="text-xs text-muted-foreground">{d.licenseNumber}</p>
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">{d.rides}</TableCell>
+                    <TableCell className="text-right tabular-nums">{d.distanceKm > 0 ? `${fmtNum(d.distanceKm)} km` : '—'}</TableCell>
+                    <TableCell className="whitespace-nowrap text-muted-foreground">{d.lastRideAt ? daysAgo(d.lastRideAt) : '—'}</TableCell>
+                    <TableCell><ExpiryBadge date={d.licenseExpiry} /></TableCell>
+                    <TableCell><ExpiryBadge date={d.medicalClearanceExpiry} /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </Section>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Collections" description="Payments received against orders delivered by this vehicle" href="/sales/invoices" hrefLabel="Invoices">
+          <div className="mb-3 grid grid-cols-2 gap-3">
+            <Metric label="Collected" value={fmtMoney(kpis.collections)} />
+            <Metric label="Delivered value" value={fmtMoney(kpis.deliveredValue)} />
+          </div>
+          {collectionsByMethod.length === 0 ? (
+            <EmptyNote>No payments collected in this period.</EmptyNote>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {collectionsByMethod.map(c => (
+                <li key={c.method} className="flex items-center justify-between text-sm">
+                  <span>{c.method}</span>
+                  <span className="tabular-nums text-muted-foreground">{fmtMoney(c.amount)} · {c.count} {c.count === 1 ? 'payment' : 'payments'}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+
+        <Section title="Returns" description="Sale returns on orders delivered by this vehicle" href="/returns-claims/order-returns" hrefLabel="Order returns">
+          <div className="grid grid-cols-2 gap-3">
+            <Metric label="Returns" value={String(returns.returnCount)} />
+            <Metric label="Units returned" value={fmtNum(returns.returnedUnits)} />
+            <Metric label="Credit issued" value={fmtMoney(returns.creditValue)} />
+            <Metric label="Received on vehicle" value={fmtNum(returns.customerReturnUnitsOnVehicle)} sub="units from customers" />
+          </div>
+        </Section>
+      </div>
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/network/vehicles/_components/dashboard/vehicle-dashboard.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { ArrowLeft01Icon, PencilEdit01Icon } from '@hugeicons/core-free-icons'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { toast } from '@/components/ui/toast'
+import { vehicles as vehiclesApi, getApiError } from '@/lib/api/index'
+import { daysFromToday, fmtDate, fmtDateTime, fmtMoney, fmtNum } from '@/app/(dashboard)/network/warehouses/_components/dashboard/format'
+import { Metric } from '@/app/(dashboard)/network/warehouses/_components/dashboard/shared'
+import type { VehicleDashboardResponse } from '@/types/api'
+
+import { VehicleSheet } from '../vehicle-sheet'
+import { MovementSection, PeopleMoneySection, RidesSection, StockSection, expiryState } from './sections'
+
+const PRESETS = [
+  { label: '7 days', days: 7 },
+  { label: '30 days', days: 30 },
+  { label: '90 days', days: 90 },
+]
+
+type Alert = { severity: 'danger' | 'warning' | 'info'; text: string }
+
+function buildAlerts(d: VehicleDashboardResponse): Alert[] {
+  const alerts: Alert[] = []
+  const { kpis, currentRide, drivers } = d
+
+  if (!d.vehicle.isActive)
+    alerts.push({ severity: 'warning', text: 'This vehicle is inactive.' })
+
+  if (currentRide)
+    alerts.push({
+      severity: 'info',
+      text: `Ride in progress with ${currentRide.driverName}${currentRide.startedAt ? ` since ${fmtDateTime(currentRide.startedAt)}` : ''} — ${currentRide.delivered}/${currentRide.tasks} stops delivered`,
+    })
+  else if (kpis.stockOnBoardUnits > 0)
+    alerts.push({
+      severity: 'danger',
+      text: `${fmtNum(kpis.stockOnBoardUnits)} units are still on the vehicle but there is no open ride — return them to a warehouse`,
+    })
+
+  for (const dr of drivers) {
+    const licence = expiryState(dr.licenseExpiry)
+    const medical = expiryState(dr.medicalClearanceExpiry)
+    if (licence === 'expired') alerts.push({ severity: 'danger', text: `${dr.name}'s licence expired on ${fmtDate(dr.licenseExpiry)}` })
+    else if (licence === 'soon') alerts.push({ severity: 'warning', text: `${dr.name}'s licence expires on ${fmtDate(dr.licenseExpiry)}` })
+    if (medical === 'expired') alerts.push({ severity: 'danger', text: `${dr.name}'s medical clearance expired on ${fmtDate(dr.medicalClearanceExpiry)}` })
+    else if (medical === 'soon') alerts.push({ severity: 'warning', text: `${dr.name}'s medical clearance expires on ${fmtDate(dr.medicalClearanceExpiry)}` })
+  }
+
+  if (kpis.failedCount > 0)
+    alerts.push({ severity: 'warning', text: `${kpis.failedCount} failed deliver${kpis.failedCount > 1 ? 'ies' : 'y'} this period (${kpis.successRatePercent}% success rate)` })
+  if (kpis.cancelledRides > 0)
+    alerts.push({ severity: 'warning', text: `${kpis.cancelledRides} ride${kpis.cancelledRides > 1 ? 's' : ''} cancelled this period` })
+
+  return alerts
+}
+
+const ALERT_BADGE = {
+  danger: { label: 'Critical', variant: 'destructive' },
+  warning: { label: 'Attention', variant: 'outline' },
+  info: { label: 'Info', variant: 'secondary' },
+} as const
+
+export function VehicleDashboard() {
+  const { id } = useParams<{ id: string }>()
+  const router = useRouter()
+
+  const [from, setFrom] = useState(() => daysFromToday(-29))
+  const [to, setTo] = useState(() => daysFromToday(0))
+  const [data, setData] = useState<VehicleDashboardResponse | null>(null)
+  const [reloadKey, setReloadKey] = useState(0)
+  const [loadedKey, setLoadedKey] = useState('')
+  const [editOpen, setEditOpen] = useState(false)
+
+  const requestKey = `${id}|${from}|${to}|${reloadKey}`
+  const loading = loadedKey !== requestKey
+  const reload = () => setReloadKey(k => k + 1)
+
+  useEffect(() => {
+    let cancelled = false
+    vehiclesApi.dashboard(id, { from, to })
+      .then(res => { if (!cancelled) setData(res) })
+      .catch(err => {
+        if (!cancelled) toast.add({ title: 'Failed to load vehicle dashboard', description: getApiError(err), type: 'error' })
+      })
+      .finally(() => { if (!cancelled) setLoadedKey(requestKey) })
+    return () => { cancelled = true }
+  }, [id, from, to, requestKey])
+
+  const alerts = useMemo(() => (data ? buildAlerts(data) : []), [data])
+
+  function applyPreset(days: number) {
+    setFrom(daysFromToday(-(days - 1)))
+    setTo(daysFromToday(0))
+  }
+
+  const vehicle = data?.vehicle
+  const k = data?.kpis
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" onClick={() => router.push('/network/vehicles')}>
+            <HugeiconsIcon icon={ArrowLeft01Icon} size={16} strokeWidth={2} />
+            Back
+          </Button>
+          <div>
+            {!vehicle ? (
+              <Skeleton className="h-7 w-48 rounded-lg" />
+            ) : (
+              <div className="flex flex-wrap items-center gap-2">
+                <h1 className="text-2xl font-semibold text-foreground">{vehicle.numberPlate}</h1>
+                <Badge variant="outline">{vehicle.type}</Badge>
+                <Badge variant={vehicle.isActive ? 'default' : 'secondary'}>
+                  {vehicle.isActive ? 'Active' : 'Inactive'}
+                </Badge>
+                {data?.currentRide && <Badge>On a ride</Badge>}
+              </div>
+            )}
+            <p className="mt-0.5 text-sm text-muted-foreground">
+              {vehicle ? `Reg. ${vehicle.regNumber} · Added ${fmtDate(vehicle.createdAt)}` : 'Vehicle overview'}
+              {data?.defaultWarehouse && (
+                <> · Home warehouse: <Link href={`/network/warehouses/${data.defaultWarehouse.id}`} className="text-primary hover:underline">{data.defaultWarehouse.name}</Link></>
+              )}
+              {data?.mobileWarehouse && (
+                <> · Mobile warehouse: <Link href={`/network/warehouses/${data.mobileWarehouse.id}`} className="text-primary hover:underline">{data.mobileWarehouse.name}</Link></>
+              )}
+            </p>
+          </div>
+        </div>
+
+        {vehicle && (
+          <Button onClick={() => setEditOpen(true)}>
+            <HugeiconsIcon icon={PencilEdit01Icon} size={16} strokeWidth={2} />
+            Edit vehicle
+          </Button>
+        )}
+      </div>
+
+      {/* Period */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-sm text-muted-foreground">Activity period</span>
+        {PRESETS.map(p => (
+          <Button key={p.days} variant="outline" size="sm" onClick={() => applyPreset(p.days)}>
+            {p.label}
+          </Button>
+        ))}
+        <Input type="date" value={from} max={to} onChange={e => e.target.value && setFrom(e.target.value)} className="w-40" />
+        <span className="text-sm text-muted-foreground">to</span>
+        <Input type="date" value={to} min={from} max={daysFromToday(0)} onChange={e => e.target.value && setTo(e.target.value)} className="w-40" />
+      </div>
+
+      {!data && loading && (
+        <div className="flex flex-col gap-4">
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+            {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-16 rounded-xl" />)}
+          </div>
+          <Skeleton className="h-72 rounded-2xl" />
+        </div>
+      )}
+
+      {data && k && (
+        <div className={`flex flex-col gap-6 transition-opacity ${loading ? 'opacity-60' : ''}`}>
+          {/* KPIs */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+            <Metric label="Rides" value={String(k.rides)} sub={`${k.closedRides} closed · ${k.cancelledRides} cancelled`} />
+            <Metric label="Distance" value={`${fmtNum(k.distanceKm)} km`} sub="closed rides" />
+            <Metric
+              label="Deliveries"
+              value={`${k.deliveredCount} / ${k.deliveries}`}
+              sub={`${k.successRatePercent}% success · ${k.failedCount} failed`}
+              tone={k.failedCount > 0 ? 'warning' : undefined}
+            />
+            <Metric label="Delivered value" value={fmtMoney(k.deliveredValue)} sub={`${fmtMoney(k.collections)} collected`} />
+            <Metric label="Stock on board" value={fmtNum(k.stockOnBoardUnits)} sub={fmtMoney(k.stockOnBoardValue)} />
+            <Metric label="Loaded / sold" value={`${fmtNum(k.unitsLoaded)} / ${fmtNum(k.unitsSold)}`} sub="units this period" />
+          </div>
+
+          {/* Alerts */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Alerts</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {alerts.length === 0 ? (
+                <p className="text-sm text-muted-foreground">Nothing needs attention right now.</p>
+              ) : (
+                <ul className="grid gap-2 lg:grid-cols-2">
+                  {alerts.map((a, i) => (
+                    <li key={i} className="flex items-start gap-2 text-sm">
+                      <Badge variant={ALERT_BADGE[a.severity].variant} className="mt-0.5 shrink-0">
+                        {ALERT_BADGE[a.severity].label}
+                      </Badge>
+                      <span>{a.text}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </CardContent>
+          </Card>
+
+          <Tabs defaultValue="rides">
+            <TabsList>
+              <TabsTrigger value="rides">Rides & deliveries</TabsTrigger>
+              <TabsTrigger value="stock">Stock on board</TabsTrigger>
+              <TabsTrigger value="movement">Stock movement</TabsTrigger>
+              <TabsTrigger value="people">Drivers & collections</TabsTrigger>
+            </TabsList>
+            <TabsContent value="rides"><RidesSection data={data} /></TabsContent>
+            <TabsContent value="stock"><StockSection data={data} /></TabsContent>
+            <TabsContent value="movement"><MovementSection data={data} /></TabsContent>
+            <TabsContent value="people"><PeopleMoneySection data={data} /></TabsContent>
+          </Tabs>
+        </div>
+      )}
+
+      <VehicleSheet
+        open={editOpen}
+        onClose={() => setEditOpen(false)}
+        vehicle={vehicle ?? null}
+        onSuccess={reload}
+      />
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/network/vehicles/_components/vehicles-client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { Add01Icon } from '@hugeicons/core-free-icons'
 
@@ -15,6 +16,7 @@ import type { VehicleResponse } from '@/types/api'
 import { VehicleSheet } from './vehicle-sheet'
 
 export function VehiclesClient() {
+  const router = useRouter()
   const [data, setData] = useState<VehicleResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [total, setTotal] = useState(0)
@@ -118,6 +120,11 @@ export function VehiclesClient() {
     ],
     rowActions: {
       actions: (row) => [
+        {
+          action: 'view',
+          label: 'View dashboard',
+          onClick: (vehicle: VehicleResponse) => router.push(`/network/vehicles/${vehicle.id}`),
+        },
         {
           action: 'edit',
           label: 'Edit vehicle',
@@ -131,7 +138,7 @@ export function VehiclesClient() {
         },
       ],
     },
-  }), [pageSize, openEdit, deactivate])
+  }), [pageSize, openEdit, deactivate, router])
 
   return (
     <>

distribution_fe/app/(dashboard)/network/warehouses/[id]/page.tsx

@@ -0,0 +1,5 @@
+import { WarehouseDashboard } from '../_components/dashboard/warehouse-dashboard'
+
+export default function WarehouseDashboardPage() {
+  return <WarehouseDashboard />
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/dashboard/activity-section.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import type { WarehouseDashboardResponse } from '@/types/api'
+
+import { daysAgo, fmtDate, fmtMoney, fmtNum } from './format'
+import { EmptyNote, Metric, Section } from './shared'
+
+export function ActivitySection({ data }: { data: WarehouseDashboardResponse }) {
+  const { inbound, outbound, vehicles, losses, topMovers, deadStock } = data
+  const maxMover = Math.max(...topMovers.map(m => m.unitsOut), 1)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section
+          title="Inbound · Procurement"
+          description="Goods receipts (GRN) received into this warehouse"
+          href="/procurement/grn"
+          hrefLabel="All GRNs"
+        >
+          <div className="mb-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <Metric label="GRNs" value={String(inbound.grnCount)} />
+            <Metric label="Accepted" value={fmtNum(inbound.acceptedUnits)} sub="units" />
+            <Metric label="Rejected" value={fmtNum(inbound.rejectedUnits)} sub="units" tone={inbound.rejectedUnits > 0 ? 'warning' : undefined} />
+            <Metric
+              label="Rejection rate"
+              value={`${inbound.rejectionRatePercent}%`}
+              tone={inbound.rejectionRatePercent > 5 ? 'danger' : undefined}
+            />
+          </div>
+          {inbound.recentGrns.length === 0 ? (
+            <EmptyNote>No goods received in this period.</EmptyNote>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Received</TableHead>
+                  <TableHead>Supplier</TableHead>
+                  <TableHead className="text-right">Accepted</TableHead>
+                  <TableHead className="text-right">Rejected</TableHead>
+                  <TableHead className="text-right">Cost</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {inbound.recentGrns.map(g => (
+                  <TableRow key={g.id}>
+                    <TableCell className="whitespace-nowrap">{fmtDate(g.receivedAt)}</TableCell>
+                    <TableCell>{g.supplierName ?? <span className="text-muted-foreground">Direct receipt</span>}</TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtNum(g.acceptedQuantity)}</TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtNum(g.rejectedQuantity)}</TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtMoney(g.costValue)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </Section>
+
+        <Section
+          title="Outbound · Loading sheets"
+          description="Stock dispatched from this warehouse onto delivery vehicles"
+          href="/operations/loading"
+          hrefLabel="All loading sheets"
+        >
+          <div className="mb-3 grid grid-cols-2 gap-3">
+            <Metric label="Dispatched" value={fmtNum(outbound.unitsDispatched)} sub="units this period" />
+            <Metric label="Pending dispatch" value={fmtNum(outbound.pendingDispatchUnits)} sub="on planned sheets" />
+          </div>
+          {outbound.recentLoadingSheets.length === 0 ? (
+            <EmptyNote>No loading sheets in this period.</EmptyNote>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Prepared</TableHead>
+                  <TableHead>Vehicle</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Lines</TableHead>
+                  <TableHead className="text-right">Units</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {outbound.recentLoadingSheets.map(s => (
+                  <TableRow key={s.id}>
+                    <TableCell className="whitespace-nowrap">{fmtDate(s.populatedAt)}</TableCell>
+                    <TableCell>{s.vehiclePlate}</TableCell>
+                    <TableCell>
+                      <Badge variant={s.status === 'Confirmed' ? 'default' : 'secondary'}>{s.status}</Badge>
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">{s.lines}</TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtNum(s.units)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </Section>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Vehicles" description="Stock currently on vehicles linked to or loaded from this warehouse">
+          {vehicles.length === 0 ? (
+            <EmptyNote>No vehicles are linked to this warehouse.</EmptyNote>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Vehicle</TableHead>
+                  <TableHead className="text-right">Units on board</TableHead>
+                  <TableHead className="text-right">SKUs</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {vehicles.map(v => (
+                  <TableRow key={v.vehicleId}>
+                    <TableCell>
+                      <span className="font-medium">{v.numberPlate}</span>
+                      <span className="ml-2 text-xs text-muted-foreground">{v.regNumber}</span>
+                      {v.isLinked && <Badge variant="outline" className="ml-2">Linked</Badge>}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtNum(v.units)}</TableCell>
+                    <TableCell className="text-right tabular-nums">{v.skus}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </Section>
+
+        <Section
+          title="Returns & losses"
+          description="Stock leaving without a sale, plus open supplier claims"
+          href="/returns-claims/supplier-claims"
+          hrefLabel="Supplier claims"
+        >
+          <div className="mb-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <Metric label="Purchase returns" value={fmtNum(losses.purchaseReturnUnits)} sub="units" />
+            <Metric label="Damaged" value={fmtNum(losses.damageUnits)} sub="units" tone={losses.damageUnits > 0 ? 'warning' : undefined} />
+            <Metric label="Adjusted down" value={fmtNum(losses.negativeAdjustmentUnits)} sub="units" tone={losses.negativeAdjustmentUnits > 0 ? 'warning' : undefined} />
+            <Metric label="Adjusted up" value={fmtNum(losses.positiveAdjustmentUnits)} sub="units" />
+          </div>
+          {losses.openClaims.length === 0 ? (
+            <EmptyNote>No open supplier claims for goods received here.</EmptyNote>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {losses.openClaims.map(c => (
+                <li key={c.id} className="flex items-start justify-between gap-2 text-sm">
+                  <div className="min-w-0">
+                    <p className="truncate font-medium">{c.supplierName ?? 'Supplier'}</p>
+                    <p className="truncate text-xs text-muted-foreground">{c.details}</p>
+                  </div>
+                  <span className="shrink-0 text-xs text-muted-foreground">{fmtNum(c.units)} units · {fmtDate(c.createdAt)}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Top movers" description="Most units loaded onto vehicles in this period">
+          {topMovers.length === 0 ? (
+            <EmptyNote>Nothing was dispatched in this period.</EmptyNote>
+          ) : (
+            <ul className="flex flex-col gap-3">
+              {topMovers.map(m => (
+                <li key={m.itemId} className="flex flex-col gap-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="truncate font-medium">{m.name} <span className="text-xs font-normal text-muted-foreground">{m.sku}</span></span>
+                    <span className="shrink-0 tabular-nums text-muted-foreground">{fmtNum(m.unitsOut)} units</span>
+                  </div>
+                  <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                    <div className="h-full rounded-full" style={{ width: `${(m.unitsOut / maxMover) * 100}%`, background: 'var(--chart-2)' }} />
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+
+        <Section title="Dead stock" description={`In stock but not sent out for ${data.deadStockDays}+ days`}>
+          {deadStock.length === 0 ? (
+            <EmptyNote>No idle stock found.</EmptyNote>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Item</TableHead>
+                  <TableHead className="text-right">Qty</TableHead>
+                  <TableHead className="text-right">Cost value</TableHead>
+                  <TableHead>Last sent out</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {deadStock.map(d => (
+                  <TableRow key={d.itemId}>
+                    <TableCell>
+                      <p className="font-medium">{d.name}</p>
+                      <p className="text-xs text-muted-foreground">{d.sku}</p>
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtNum(d.quantity)}</TableCell>
+                    <TableCell className="text-right tabular-nums">{fmtMoney(d.costValue)}</TableCell>
+                    <TableCell className="whitespace-nowrap text-muted-foreground">
+                      {d.lastOutboundAt ? daysAgo(d.lastOutboundAt) : 'Never'}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </Section>
+      </div>
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/dashboard/format.ts

@@ -0,0 +1,56 @@
+import type { MovementType, WarehouseType } from '@/types/api'
+
+export const fmtMoney = (v: number) =>
+  `Rs. ${v.toLocaleString('en-LK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+
+export const fmtNum = (v: number) =>
+  v.toLocaleString('en-LK', { maximumFractionDigits: 2 })
+
+export const fmtCompact = (v: number) =>
+  v.toLocaleString('en-LK', { notation: 'compact', maximumFractionDigits: 1 })
+
+export const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+export const fmtDateTime = (v: string) =>
+  new Date(v).toLocaleString('en-GB', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })
+
+export const fmtShortDay = (v: string) =>
+  new Date(`${v}T00:00:00`).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })
+
+/** yyyy-MM-dd in local time, the format the dashboard endpoint and date inputs use. */
+export function toIsoDate(d: Date) {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+
+export function daysFromToday(offset: number) {
+  const d = new Date()
+  d.setDate(d.getDate() + offset)
+  return toIsoDate(d)
+}
+
+export const daysAgo = (v: string) => {
+  const d = Math.floor((Date.now() - new Date(v).getTime()) / 86_400_000)
+  return d <= 0 ? 'Today' : d === 1 ? '1 day ago' : `${d} days ago`
+}
+
+export const MOVEMENT_LABEL: Record<MovementType, string> = {
+  Sale: 'Sale',
+  CustomerReturn: 'Customer return',
+  Transfer: 'Transfer',
+  Damage: 'Damage write-off',
+  Adjustment: 'Adjustment',
+  Load: 'Loaded to vehicle',
+  PurchaseReceipt: 'Purchase receipt (GRN)',
+  PurchaseReturn: 'Purchase return',
+}
+
+export const WAREHOUSE_TYPE_LABEL: Record<WarehouseType, string> = {
+  DistributionCenter: 'Distribution Center',
+  FulfillmentCenter: 'Fulfillment Center',
+  CrossDocking: 'Cross Docking',
+  ColdStorage: 'Cold Storage',
+  BondedWarehouse: 'Bonded Warehouse',
+  AutomatedWarehouse: 'Automated Warehouse',
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/dashboard/movement-section.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import type { WarehouseDashboardResponse, WarehouseDashboardMovementTypeRow, WarehouseMovementDirection } from '@/types/api'
+
+import { MOVEMENT_LABEL, fmtCompact, fmtDateTime, fmtNum, fmtShortDay } from './format'
+import { EmptyNote, Section } from './shared'
+
+const flowConfig = {
+  in: { label: 'Units in', color: 'var(--chart-2)' },
+  out: { label: 'Units out', color: 'var(--chart-1)' },
+} satisfies ChartConfig
+
+type DirectionFilter = 'all' | WarehouseMovementDirection
+
+function TypeBreakdown({ title, rows }: { title: string; rows: WarehouseDashboardMovementTypeRow[] }) {
+  const total = rows.reduce((sum, r) => sum + r.units, 0)
+  return (
+    <Section title={title}>
+      {rows.length === 0 ? (
+        <EmptyNote>No movements in this period.</EmptyNote>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {rows.map(r => (
+            <li key={r.type} className="flex flex-col gap-1">
+              <div className="flex items-center justify-between text-sm">
+                <span>{MOVEMENT_LABEL[r.type]}</span>
+                <span className="tabular-nums text-muted-foreground">
+                  {fmtNum(r.units)} units · {r.count} {r.count === 1 ? 'entry' : 'entries'}
+                </span>
+              </div>
+              <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full rounded-full"
+                  style={{
+                    width: `${total > 0 ? (r.units / total) * 100 : 0}%`,
+                    background: r.direction === 'In' ? 'var(--chart-2)' : 'var(--chart-1)',
+                  }}
+                />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Section>
+  )
+}
+
+export function MovementSection({ data }: { data: WarehouseDashboardResponse }) {
+  const [direction, setDirection] = useState<DirectionFilter>('all')
+
+  const inbound = useMemo(() => data.movementByType.filter(r => r.direction === 'In'), [data.movementByType])
+  const outbound = useMemo(() => data.movementByType.filter(r => r.direction === 'Out'), [data.movementByType])
+  const totalEntries = data.movementByType.reduce((sum, r) => sum + r.count, 0)
+  const ledger = direction === 'all' ? data.ledger : data.ledger.filter(r => r.direction === direction)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Section title="Stock movement" description="Units received into and sent out of this warehouse, per day">
+        <ChartContainer config={flowConfig} className="h-64 w-full">
+          <BarChart data={data.dailyMovement}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickFormatter={fmtShortDay} tickLine={false} axisLine={false} minTickGap={24} />
+            <YAxis tickFormatter={fmtCompact} tickLine={false} axisLine={false} width={44} />
+            <ChartTooltip content={<ChartTooltipContent labelFormatter={v => fmtShortDay(String(v))} />} />
+            <Bar dataKey="in" fill="var(--color-in)" radius={[4, 4, 0, 0]} />
+            <Bar dataKey="out" fill="var(--color-out)" radius={[4, 4, 0, 0]} />
+            <ChartLegend content={<ChartLegendContent />} />
+          </BarChart>
+        </ChartContainer>
+      </Section>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <TypeBreakdown title="Where stock comes from (In)" rows={inbound} />
+        <TypeBreakdown title="Where stock goes (Out)" rows={outbound} />
+      </div>
+
+      <Section
+        title="Movement ledger"
+        description={`Latest ${data.ledger.length} of ${totalEntries} movements in this period`}
+        href="/stock/movements"
+        hrefLabel="Full movement history"
+      >
+        <div className="mb-3 flex gap-1">
+          {(['all', 'In', 'Out'] as const).map(d => (
+            <Button key={d} size="sm" variant={direction === d ? 'default' : 'outline'} onClick={() => setDirection(d)}>
+              {d === 'all' ? 'All' : d}
+            </Button>
+          ))}
+        </div>
+
+        {ledger.length === 0 ? (
+          <EmptyNote>No movements to show.</EmptyNote>
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>When</TableHead>
+                  <TableHead>Item</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead className="text-right">Qty</TableHead>
+                  <TableHead>From → To</TableHead>
+                  <TableHead>Reference</TableHead>
+                  <TableHead>By</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {ledger.map(r => (
+                  <TableRow key={r.id}>
+                    <TableCell className="whitespace-nowrap text-muted-foreground">{fmtDateTime(r.createdAt)}</TableCell>
+                    <TableCell>
+                      <p className="font-medium">{r.itemName}</p>
+                      <p className="text-xs text-muted-foreground">{r.sku}</p>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1.5">
+                        <Badge variant={r.direction === 'In' ? 'secondary' : 'outline'}>{r.direction}</Badge>
+                        <span className="text-sm">{MOVEMENT_LABEL[r.type]}</span>
+                      </div>
+                      {r.reasonCode && <p className="mt-0.5 text-xs text-muted-foreground">{r.reasonCode}</p>}
+                    </TableCell>
+                    <TableCell className="text-right tabular-nums">
+                      {r.direction === 'In' ? '+' : '−'}{fmtNum(r.quantity)}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap">{r.fromName} → {r.toName}</TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {r.referenceKind ? `${r.referenceKind} · ${r.referenceId?.slice(0, 8)}` : '—'}
+                    </TableCell>
+                    <TableCell className="whitespace-nowrap">{r.createdByName}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </Section>
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/dashboard/shared.tsx

@@ -0,0 +1,62 @@
+import Link from 'next/link'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export function Metric({
+  label,
+  value,
+  sub,
+  tone,
+}: {
+  label: string
+  value: string
+  sub?: string
+  tone?: 'danger' | 'warning'
+}) {
+  const valueClass =
+    tone === 'danger' ? 'text-destructive' : tone === 'warning' ? 'text-amber-600 dark:text-amber-400' : ''
+  return (
+    <div className="flex flex-col gap-0.5 rounded-xl border px-3 py-2">
+      <span className="truncate text-[11px] uppercase tracking-wide text-muted-foreground">{label}</span>
+      <span className={`truncate text-base font-semibold leading-tight ${valueClass}`}>{value}</span>
+      {sub && <span className="truncate text-[11px] text-muted-foreground">{sub}</span>}
+    </div>
+  )
+}
+
+export function Section({
+  title,
+  description,
+  href,
+  hrefLabel,
+  children,
+}: {
+  title: string
+  description?: string
+  href?: string
+  hrefLabel?: string
+  children: React.ReactNode
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <CardTitle>{title}</CardTitle>
+            {description && <CardDescription>{description}</CardDescription>}
+          </div>
+          {href && (
+            <Link href={href} className="shrink-0 text-xs font-medium text-primary hover:underline">
+              {hrefLabel ?? 'View all'}
+            </Link>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}
+
+export function EmptyNote({ children }: { children: React.ReactNode }) {
+  return <p className="py-4 text-center text-sm text-muted-foreground">{children}</p>
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/dashboard/stock-section.tsx

@@ -0,0 +1,226 @@
+'use client'
+
+import { Fragment, useMemo, useState } from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { StockAdjustDialog } from '@/app/(dashboard)/stock/_components/stock-adjust-dialog'
+import type {
+  StockBalanceResponse,
+  WarehouseDashboardResponse,
+  WarehouseDashboardStockRow,
+  WarehouseStockStatus,
+} from '@/types/api'
+
+import { daysAgo, fmtCompact, fmtDate, fmtMoney, fmtNum } from './format'
+import { EmptyNote, Section } from './shared'
+
+const PAGE_SIZE = 25
+const ALL = 'all'
+
+const categoryConfig = { value: { label: 'Stock value', color: 'var(--chart-2)' } } satisfies ChartConfig
+
+const STATUS_BADGE: Record<WarehouseStockStatus, { label: string; variant: 'default' | 'secondary' | 'destructive' }> = {
+  OK: { label: 'In stock', variant: 'secondary' },
+  Low: { label: 'Low', variant: 'destructive' },
+  Out: { label: 'Out of stock', variant: 'destructive' },
+}
+
+export function StockSection({
+  data,
+  onChanged,
+}: {
+  data: WarehouseDashboardResponse
+  onChanged: () => void
+}) {
+  const [search, setSearch] = useState('')
+  const [category, setCategory] = useState(ALL)
+  const [status, setStatus] = useState(ALL)
+  const [visible, setVisible] = useState(PAGE_SIZE)
+  const [expanded, setExpanded] = useState<string | null>(null)
+  const [adjusting, setAdjusting] = useState<StockBalanceResponse | null>(null)
+
+  const categories = useMemo(() => [...new Set(data.stock.map(r => r.category))].sort(), [data.stock])
+
+  const rows = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return data.stock.filter(r =>
+      (category === ALL || r.category === category) &&
+      (status === ALL || r.status === status) &&
+      (!q || r.name.toLowerCase().includes(q) || r.sku.toLowerCase().includes(q)),
+    )
+  }, [data.stock, search, category, status])
+
+  function openAdjust(row: WarehouseDashboardStockRow) {
+    setAdjusting({
+      itemId: row.itemId,
+      itemName: row.name,
+      locationId: data.warehouse.id,
+      locationType: 'Warehouse',
+      quantity: row.quantity,
+      updatedAt: row.updatedAt,
+      locationName: data.warehouse.name,
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-4 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <Section title="Stock value by category" description="At cost price, items currently on hand">
+            {data.stockByCategory.length === 0 ? (
+              <EmptyNote>No stock on hand.</EmptyNote>
+            ) : (
+              <ChartContainer config={categoryConfig} className="w-full" style={{ height: Math.max(140, data.stockByCategory.length * 36) }}>
+                <BarChart data={data.stockByCategory} layout="vertical" margin={{ left: 8 }}>
+                  <CartesianGrid horizontal={false} />
+                  <XAxis type="number" tickFormatter={fmtCompact} tickLine={false} axisLine={false} />
+                  <YAxis type="category" dataKey="category" tickLine={false} axisLine={false} width={110} />
+                  <ChartTooltip content={<ChartTooltipContent hideLabel formatter={(v) => fmtMoney(Number(v))} />} />
+                  <Bar dataKey="value" fill="var(--color-value)" radius={6} />
+                </BarChart>
+              </ChartContainer>
+            )}
+          </Section>
+        </div>
+
+        <Section title="Expiry watch" description="Batches expired or expiring within 30 days">
+          {data.expiringBatches.length === 0 ? (
+            <EmptyNote>No batches at risk.</EmptyNote>
+          ) : (
+            <ul className="flex max-h-56 flex-col gap-2 overflow-y-auto">
+              {data.expiringBatches.map(b => (
+                <li key={`${b.itemId}-${b.batchNumber}-${b.expiryDate}`} className="flex items-start justify-between gap-2 text-sm">
+                  <div className="min-w-0">
+                    <p className="truncate font-medium">{b.itemName}</p>
+                    <p className="text-xs text-muted-foreground">
+                      Batch {b.batchNumber ?? '—'} · {fmtNum(b.quantity)} units · {fmtDate(b.expiryDate)}
+                    </p>
+                  </div>
+                  <Badge variant={b.status === 'Expired' ? 'destructive' : 'outline'}>
+                    {b.status === 'Expired' ? 'Expired' : 'Expiring'}
+                  </Badge>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+      </div>
+
+      <Section title="Stock on hand" description={`${data.stock.length} items held in this warehouse`}>
+        <div className="mb-3 flex flex-wrap items-center gap-2">
+          <Input
+            value={search}
+            onChange={e => { setSearch(e.target.value); setVisible(PAGE_SIZE) }}
+            placeholder="Search item or SKU"
+            className="w-56"
+          />
+          <Select value={category} onValueChange={v => { setCategory(v ?? ALL); setVisible(PAGE_SIZE) }}>
+            <SelectTrigger className="w-44"><SelectValue placeholder="Category" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>All categories</SelectItem>
+              {categories.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
+            </SelectContent>
+          </Select>
+          <Select value={status} onValueChange={v => { setStatus(v ?? ALL); setVisible(PAGE_SIZE) }}>
+            <SelectTrigger className="w-40"><SelectValue placeholder="Status" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>All statuses</SelectItem>
+              <SelectItem value="OK">In stock</SelectItem>
+              <SelectItem value="Low">Low stock</SelectItem>
+              <SelectItem value="Out">Out of stock</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {rows.length === 0 ? (
+          <EmptyNote>No items match the current filters.</EmptyNote>
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Item</TableHead>
+                  <TableHead>Category</TableHead>
+                  <TableHead className="text-right">On hand</TableHead>
+                  <TableHead className="text-right">Reorder at</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Cost value</TableHead>
+                  <TableHead className="text-right">Sale value</TableHead>
+                  <TableHead>Updated</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.slice(0, visible).map(r => {
+                  const badge = STATUS_BADGE[r.status]
+                  const hasBatches = r.batches.length > 0
+                  return (
+                    <Fragment key={r.itemId}>
+                      <TableRow
+                        className={hasBatches ? 'cursor-pointer' : undefined}
+                        onClick={hasBatches ? () => setExpanded(expanded === r.itemId ? null : r.itemId) : undefined}
+                      >
+                        <TableCell>
+                          <p className="font-medium">{r.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {r.sku}{r.brand ? ` · ${r.brand}` : ''}{hasBatches ? ` · ${r.batches.length} batch${r.batches.length > 1 ? 'es' : ''}` : ''}
+                          </p>
+                        </TableCell>
+                        <TableCell>{r.category}</TableCell>
+                        <TableCell className="text-right tabular-nums">{fmtNum(r.quantity)} {r.uom}</TableCell>
+                        <TableCell className="text-right tabular-nums">{r.reorderLevel != null ? fmtNum(r.reorderLevel) : '—'}</TableCell>
+                        <TableCell><Badge variant={badge.variant}>{badge.label}</Badge></TableCell>
+                        <TableCell className="text-right tabular-nums">{fmtMoney(r.costValue)}</TableCell>
+                        <TableCell className="text-right tabular-nums">{fmtMoney(r.saleValue)}</TableCell>
+                        <TableCell className="whitespace-nowrap text-muted-foreground">{daysAgo(r.updatedAt)}</TableCell>
+                        <TableCell className="text-right">
+                          {!hasBatches && (
+                            <Button variant="ghost" size="xs" onClick={e => { e.stopPropagation(); openAdjust(r) }}>
+                              Adjust
+                            </Button>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                      {expanded === r.itemId && r.batches.map(b => (
+                        <TableRow key={b.batchId} className="bg-muted/40">
+                          <TableCell colSpan={2} className="pl-8 text-xs text-muted-foreground">
+                            Batch {b.batchNumber ?? '—'}
+                          </TableCell>
+                          <TableCell className="text-right text-xs tabular-nums">{fmtNum(b.quantity)} {r.uom}</TableCell>
+                          <TableCell colSpan={6} className="text-xs text-muted-foreground">
+                            {b.expiryDate ? `Expires ${fmtDate(b.expiryDate)}` : 'No expiry date'}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </Fragment>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+
+        {rows.length > visible && (
+          <div className="mt-3 flex justify-center">
+            <Button variant="outline" size="sm" onClick={() => setVisible(v => v + PAGE_SIZE)}>
+              Show more ({rows.length - visible} remaining)
+            </Button>
+          </div>
+        )}
+      </Section>
+
+      <StockAdjustDialog
+        open={adjusting !== null}
+        onClose={() => setAdjusting(null)}
+        onSuccess={() => { setAdjusting(null); onChanged() }}
+        balance={adjusting}
+      />
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/dashboard/warehouse-dashboard.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { ArrowLeft01Icon, PencilEdit01Icon } from '@hugeicons/core-free-icons'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { toast } from '@/components/ui/toast'
+import { warehouses as warehousesApi, getApiError } from '@/lib/api/index'
+import type { WarehouseDashboardResponse } from '@/types/api'
+
+import { WarehouseSheet } from '../warehouse-sheet'
+import { ActivitySection } from './activity-section'
+import { WAREHOUSE_TYPE_LABEL, daysFromToday, fmtDate, fmtMoney, fmtNum } from './format'
+import { MovementSection } from './movement-section'
+import { Metric } from './shared'
+import { StockSection } from './stock-section'
+
+const PRESETS = [
+  { label: '7 days', days: 7 },
+  { label: '30 days', days: 30 },
+  { label: '90 days', days: 90 },
+]
+
+type Alert = { severity: 'danger' | 'warning' | 'info'; text: string }
+
+function buildAlerts(d: WarehouseDashboardResponse): Alert[] {
+  const alerts: Alert[] = []
+  const { kpis, losses, inbound, outbound } = d
+
+  if (kpis.outOfStockCount > 0)
+    alerts.push({ severity: 'danger', text: `${kpis.outOfStockCount} item${kpis.outOfStockCount > 1 ? 's' : ''} out of stock` })
+
+  const low = d.stock.filter(r => r.status === 'Low')
+  if (low.length > 0) {
+    const names = low.slice(0, 3).map(r => `${r.name} (${fmtNum(r.quantity)}/${fmtNum(r.reorderLevel ?? 0)})`).join(', ')
+    alerts.push({ severity: 'warning', text: `${low.length} item${low.length > 1 ? 's' : ''} below reorder level: ${names}${low.length > 3 ? '…' : ''}` })
+  }
+
+  if (kpis.expiredCount > 0)
+    alerts.push({ severity: 'danger', text: `${kpis.expiredCount} expired batch${kpis.expiredCount > 1 ? 'es' : ''} still in stock` })
+  if (kpis.nearExpiryCount > 0)
+    alerts.push({ severity: 'warning', text: `${kpis.nearExpiryCount} batch${kpis.nearExpiryCount > 1 ? 'es' : ''} expiring within 30 days` })
+
+  if (losses.openClaimCount > 0)
+    alerts.push({ severity: 'warning', text: `${losses.openClaimCount} open supplier claim${losses.openClaimCount > 1 ? 's' : ''} on goods received here` })
+  if (inbound.rejectionRatePercent > 5)
+    alerts.push({ severity: 'warning', text: `GRN rejection rate is ${inbound.rejectionRatePercent}% this period` })
+  if (losses.negativeAdjustmentUnits > 0)
+    alerts.push({ severity: 'warning', text: `${fmtNum(losses.negativeAdjustmentUnits)} units adjusted down this period` })
+  if (losses.damageUnits > 0)
+    alerts.push({ severity: 'warning', text: `${fmtNum(losses.damageUnits)} units written off as damaged this period` })
+  if (outbound.pendingDispatchUnits > 0)
+    alerts.push({ severity: 'info', text: `${fmtNum(outbound.pendingDispatchUnits)} units reserved on planned loading sheets` })
+
+  return alerts
+}
+
+const ALERT_BADGE = {
+  danger: { label: 'Critical', variant: 'destructive' },
+  warning: { label: 'Attention', variant: 'outline' },
+  info: { label: 'Info', variant: 'secondary' },
+} as const
+
+export function WarehouseDashboard() {
+  const { id } = useParams<{ id: string }>()
+  const router = useRouter()
+
+  const [from, setFrom] = useState(() => daysFromToday(-29))
+  const [to, setTo] = useState(() => daysFromToday(0))
+  const [data, setData] = useState<WarehouseDashboardResponse | null>(null)
+  const [reloadKey, setReloadKey] = useState(0)
+  const [loadedKey, setLoadedKey] = useState('')
+  const [editOpen, setEditOpen] = useState(false)
+
+  const requestKey = `${id}|${from}|${to}|${reloadKey}`
+  const loading = loadedKey !== requestKey
+  const reload = () => setReloadKey(k => k + 1)
+
+  useEffect(() => {
+    let cancelled = false
+    warehousesApi.dashboard(id, { from, to })
+      .then(res => { if (!cancelled) setData(res) })
+      .catch(err => {
+        if (!cancelled) toast.add({ title: 'Failed to load warehouse dashboard', description: getApiError(err), type: 'error' })
+      })
+      .finally(() => { if (!cancelled) setLoadedKey(requestKey) })
+    return () => { cancelled = true }
+  }, [id, from, to, requestKey])
+
+  const alerts = useMemo(() => (data ? buildAlerts(data) : []), [data])
+
+  function applyPreset(days: number) {
+    setFrom(daysFromToday(-(days - 1)))
+    setTo(daysFromToday(0))
+  }
+
+  const warehouse = data?.warehouse
+  const k = data?.kpis
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" onClick={() => router.push('/network/warehouses')}>
+            <HugeiconsIcon icon={ArrowLeft01Icon} size={16} strokeWidth={2} />
+            Back
+          </Button>
+          <div>
+            {!warehouse ? (
+              <Skeleton className="h-7 w-48 rounded-lg" />
+            ) : (
+              <div className="flex flex-wrap items-center gap-2">
+                <h1 className="text-2xl font-semibold text-foreground">{warehouse.name}</h1>
+                <Badge variant="outline">{WAREHOUSE_TYPE_LABEL[warehouse.type] ?? warehouse.type}</Badge>
+                <Badge variant={warehouse.isActive ? 'default' : 'secondary'}>
+                  {warehouse.isActive ? 'Active' : 'Inactive'}
+                </Badge>
+              </div>
+            )}
+            <p className="mt-0.5 text-sm text-muted-foreground">
+              {warehouse
+                ? `${warehouse.location} · Created ${fmtDate(warehouse.createdAt)}`
+                : 'Warehouse overview'}
+              {data && data.linkedVehicles.length > 0 && (
+                <> · Vehicles: {data.linkedVehicles.map(v => v.numberPlate).join(', ')}</>
+              )}
+            </p>
+          </div>
+        </div>
+
+        {warehouse && (
+          <Button onClick={() => setEditOpen(true)}>
+            <HugeiconsIcon icon={PencilEdit01Icon} size={16} strokeWidth={2} />
+            Edit warehouse
+          </Button>
+        )}
+      </div>
+
+      {/* Period */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-sm text-muted-foreground">Activity period</span>
+        {PRESETS.map(p => (
+          <Button key={p.days} variant="outline" size="sm" onClick={() => applyPreset(p.days)}>
+            {p.label}
+          </Button>
+        ))}
+        <Input type="date" value={from} max={to} onChange={e => e.target.value && setFrom(e.target.value)} className="w-40" />
+        <span className="text-sm text-muted-foreground">to</span>
+        <Input type="date" value={to} min={from} max={daysFromToday(0)} onChange={e => e.target.value && setTo(e.target.value)} className="w-40" />
+      </div>
+
+      {!data && loading && (
+        <div className="flex flex-col gap-4">
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+            {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-16 rounded-xl" />)}
+          </div>
+          <Skeleton className="h-72 rounded-2xl" />
+        </div>
+      )}
+
+      {data && k && (
+        <div className={`flex flex-col gap-6 transition-opacity ${loading ? 'opacity-60' : ''}`}>
+          {/* KPIs */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+            <Metric label="Stock value" value={fmtMoney(k.stockValueCost)} sub={`${fmtMoney(k.stockValueSale)} at sale price`} />
+            <Metric label="Units on hand" value={fmtNum(k.totalUnits)} sub={`${k.skuCount} SKUs`} />
+            <Metric
+              label="Low / out of stock"
+              value={`${k.lowStockCount} / ${k.outOfStockCount}`}
+              tone={k.outOfStockCount > 0 ? 'danger' : k.lowStockCount > 0 ? 'warning' : undefined}
+              sub="items"
+            />
+            <Metric
+              label="Expiry risk"
+              value={`${k.nearExpiryCount} / ${k.expiredCount}`}
+              tone={k.expiredCount > 0 ? 'danger' : k.nearExpiryCount > 0 ? 'warning' : undefined}
+              sub="near / expired batches"
+            />
+            <Metric label="Units in" value={fmtNum(k.unitsIn)} sub="this period" />
+            <Metric label="Units out" value={fmtNum(k.unitsOut)} sub="this period" />
+          </div>
+
+          {/* Alerts */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Alerts</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {alerts.length === 0 ? (
+                <p className="text-sm text-muted-foreground">Nothing needs attention right now.</p>
+              ) : (
+                <ul className="grid gap-2 lg:grid-cols-2">
+                  {alerts.map((a, i) => (
+                    <li key={i} className="flex items-start gap-2 text-sm">
+                      <Badge variant={ALERT_BADGE[a.severity].variant} className="mt-0.5 shrink-0">
+                        {ALERT_BADGE[a.severity].label}
+                      </Badge>
+                      <span>{a.text}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </CardContent>
+          </Card>
+
+          <Tabs defaultValue="stock">
+            <TabsList>
+              <TabsTrigger value="stock">Stock on hand</TabsTrigger>
+              <TabsTrigger value="movement">Stock movement</TabsTrigger>
+              <TabsTrigger value="activity">Module activity</TabsTrigger>
+            </TabsList>
+            <TabsContent value="stock"><StockSection data={data} onChanged={reload} /></TabsContent>
+            <TabsContent value="movement"><MovementSection data={data} /></TabsContent>
+            <TabsContent value="activity"><ActivitySection data={data} /></TabsContent>
+          </Tabs>
+        </div>
+      )}
+
+      <WarehouseSheet
+        open={editOpen}
+        onClose={() => setEditOpen(false)}
+        warehouse={warehouse ?? null}
+        onSuccess={reload}
+      />
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/network/warehouses/_components/warehouses-client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { Add01Icon } from '@hugeicons/core-free-icons'
 
@@ -15,6 +16,7 @@ import type { WarehouseResponse } from '@/types/api'
 import { WarehouseSheet } from './warehouse-sheet'
 
 export function WarehousesClient() {
+  const router = useRouter()
   const [data, setData] = useState<WarehouseResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [total, setTotal] = useState(0)
@@ -118,6 +120,11 @@ export function WarehousesClient() {
     ],
     rowActions: {
       actions: () => [
+        {
+          action: 'view',
+          label: 'View dashboard',
+          onClick: (warehouse: WarehouseResponse) => router.push(`/network/warehouses/${warehouse.id}`),
+        },
         {
           action: 'edit',
           label: 'Edit warehouse',
@@ -137,7 +144,7 @@ export function WarehousesClient() {
         },
       ],
     },
-  }), [pageSize, openEdit, toggleActive])
+  }), [pageSize, openEdit, toggleActive, router])
 
   return (
     <>

distribution_fe/app/(dashboard)/reports/products/_components/product-report-client.tsx

@@ -3,12 +3,14 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 
 import { DataTable } from '@/components/shared/data-table'
+import { ExportButtons } from '@/components/shared/export-buttons'
 import type { TableConfig } from '@/components/shared/data-table'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { toast } from '@/components/ui/toast'
 import { getApiError, getPaginatedItems } from '@/lib/api/index'
+import { exportExcel, exportPdf, fetchAllPages, type ExportColumn } from '@/lib/export'
 import {
   productReports,
   type ProductReportSummary,
@@ -71,6 +73,44 @@ const returnsColumns: TableConfig<ProductReturnRow>['columns'] = [
   },
 ]
 
+const STOCK_EXPORT: ExportColumn<ProductStockRow>[] = [
+  { header: 'SKU', value: r => r.sku },
+  { header: 'Item', value: r => r.name },
+  { header: 'Brand', value: r => r.brand ?? '' },
+  { header: 'Category', value: r => r.category },
+  { header: 'UOM', value: r => r.uom },
+  { header: 'Warehouse', value: r => r.warehouseQty, numeric: true },
+  { header: 'Vehicles', value: r => r.vehicleQty, numeric: true },
+  { header: 'Total', value: r => r.totalQty, numeric: true },
+  { header: 'Stock Value', value: r => r.stockValue, numeric: true },
+  { header: 'Low Stock', value: r => (r.isLowStock ? 'Yes' : 'No') },
+]
+
+const SALES_EXPORT: ExportColumn<ProductSalesRow>[] = [
+  { header: 'SKU', value: r => r.sku },
+  { header: 'Item', value: r => r.name },
+  { header: 'Orders', value: r => r.orders, numeric: true },
+  { header: 'Stores', value: r => r.stores, numeric: true },
+  { header: 'Qty Ordered', value: r => r.qtyOrdered, numeric: true },
+  { header: 'Qty Fulfilled', value: r => r.qtyFulfilled, numeric: true },
+  { header: 'Sales', value: r => r.salesValue, numeric: true },
+  { header: 'Margin', value: r => r.margin, numeric: true },
+  { header: 'Margin %', value: r => r.marginPercent, numeric: true },
+]
+
+const RETURNS_EXPORT: ExportColumn<ProductReturnRow>[] = [
+  { header: 'SKU', value: r => r.sku },
+  { header: 'Item', value: r => r.name },
+  { header: 'Returned Qty', value: r => r.returnedQty, numeric: true },
+  { header: 'Returned Value', value: r => r.returnedValue, numeric: true },
+  { header: 'Sold Qty', value: r => r.soldQty, numeric: true },
+  { header: 'Return %', value: r => r.returnPercent, numeric: true },
+  {
+    header: 'By Reason',
+    value: r => Object.entries(r.qtyByReason).map(([reason, qty]) => `${reason}: ${num(qty)}`).join(', '),
+  },
+]
+
 export function ProductReportClient() {
   const [tab, setTab] = useState<Tab>('stock')
   const [search, setSearch] = useState('')
@@ -128,6 +168,30 @@ export function ProductReportClient() {
     setTotal(0)
   }
 
+  async function handleExport(format: 'excel' | 'pdf') {
+    const filters = (p: number, s: number) => ({
+      page: p, pageSize: s, search: search || undefined, from: from || undefined, to: to || undefined,
+    })
+    const range = `${from || 'start'} to ${to || 'today'}`
+
+    if (tab === 'stock') {
+      const rows = await fetchAllPages((p, s) =>
+        productReports.stock({ ...filters(p, s), lowStockOnly }).then(r => ({ items: getPaginatedItems(r), total: r.total })))
+      if (format === 'excel') await exportExcel('product-stock', STOCK_EXPORT, rows)
+      else await exportPdf('product-stock', 'Product Report: Stock', STOCK_EXPORT, rows, lowStockOnly ? 'Low stock only' : undefined)
+    } else if (tab === 'sales') {
+      const rows = await fetchAllPages((p, s) =>
+        productReports.sales(filters(p, s)).then(r => ({ items: getPaginatedItems(r), total: r.total })))
+      if (format === 'excel') await exportExcel('product-sales', SALES_EXPORT, rows)
+      else await exportPdf('product-sales', 'Product Report: Sales', SALES_EXPORT, rows, range)
+    } else {
+      const rows = await fetchAllPages((p, s) =>
+        productReports.returns(filters(p, s)).then(r => ({ items: getPaginatedItems(r), total: r.total })))
+      if (format === 'excel') await exportExcel('product-returns', RETURNS_EXPORT, rows)
+      else await exportPdf('product-returns', 'Product Report: Returns', RETURNS_EXPORT, rows, range)
+    }
+  }
+
   const common = { serverSide: true, stickyHeader: true, pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] } }
 
   const stockConfig = useMemo<TableConfig<ProductStockRow>>(
@@ -197,6 +261,9 @@ export function ProductReportClient() {
             Low stock only
           </Button>
         )}
+        <div className="ml-auto flex items-center gap-2">
+          <ExportButtons onExport={handleExport} disabled={loading || total === 0} />
+        </div>
       </div>
 
       {tab === 'stock' && (

distribution_fe/app/(dashboard)/reports/stock/_components/stock-report-client.tsx

@@ -0,0 +1,331 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+
+import { DataTable } from '@/components/shared/data-table'
+import { ExportButtons } from '@/components/shared/export-buttons'
+import type { TableConfig } from '@/components/shared/data-table'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { toast } from '@/components/ui/toast'
+import { getApiError, getPaginatedItems } from '@/lib/api/index'
+import { exportExcel, exportPdf, fetchAllPages, type ExportColumn } from '@/lib/export'
+import { categories } from '@/lib/api/catalogue'
+import { vehicles, warehouses } from '@/lib/api/master'
+import {
+  stockReports,
+  type StockExpiryRow,
+  type StockLedgerRow,
+  type StockOverview,
+} from '@/lib/api/reports'
+
+type Tab = 'ledger' | 'expiry'
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: 'ledger', label: 'Stock Ledger' },
+  { key: 'expiry', label: 'Expiry' },
+]
+
+const ALL = 'all'
+const EXPIRY_WINDOWS = [7, 30, 60, 90]
+
+const num = (v: number | null | undefined) =>
+  v == null ? '—' : v.toLocaleString('en-IN', { maximumFractionDigits: 2 })
+
+const fmtDate = (v: string) => new Date(v).toLocaleDateString('en-GB')
+
+const STATUS_CLASS: Record<string, string> = {
+  OK: 'text-emerald-600',
+  Low: 'text-amber-600',
+  Out: 'text-red-600',
+}
+
+const ledgerColumns: TableConfig<StockLedgerRow>['columns'] = [
+  { key: 'name', title: 'Item', fields: [{ key: 'name', primary: true }, { key: 'sku' }], minWidth: 220 },
+  { key: 'category', title: 'Category', fields: ['category'], width: 140 },
+  { key: 'uom', title: 'UOM', fields: ['uom'], width: 70 },
+  { key: 'openingQty', title: 'Opening', fields: [{ key: 'openingQty', transform: v => num(v as number) }], width: 100 },
+  { key: 'qtyIn', title: 'In', fields: [{ key: 'qtyIn', transform: v => num(v as number) }], width: 90 },
+  { key: 'qtyOut', title: 'Out', fields: [{ key: 'qtyOut', transform: v => num(v as number) }], width: 90 },
+  { key: 'closingQty', title: 'Closing', fields: [{ key: 'closingQty', transform: v => num(v as number) }], width: 100 },
+  { key: 'currentQty', title: 'On Hand', fields: [{ key: 'currentQty', transform: v => num(v as number) }], width: 100 },
+  { key: 'stockValue', title: 'Value', fields: [{ key: 'stockValue', transform: v => num(v as number) }], width: 110 },
+  {
+    key: 'status',
+    title: 'Status',
+    fields: ['status'],
+    width: 90,
+    cellRender: row => <span className={`text-sm font-medium ${STATUS_CLASS[row.status] ?? ''}`}>{row.status}</span>,
+  },
+]
+
+const expiryColumns: TableConfig<StockExpiryRow>['columns'] = [
+  { key: 'name', title: 'Item', fields: [{ key: 'name', primary: true }, { key: 'sku' }], minWidth: 220 },
+  { key: 'batchNumber', title: 'Batch', fields: [{ key: 'batchNumber', transform: v => (v as string | null) ?? '—' }], width: 130 },
+  { key: 'locationName', title: 'Location', fields: [{ key: 'locationName', primary: true }, { key: 'locationType' }], width: 150 },
+  { key: 'quantity', title: 'Qty', fields: [{ key: 'quantity', transform: v => num(v as number) }], width: 90 },
+  { key: 'value', title: 'Value', fields: [{ key: 'value', transform: v => num(v as number) }], width: 110 },
+  { key: 'expiryDate', title: 'Expiry', fields: [{ key: 'expiryDate', transform: v => fmtDate(v as string) }], width: 110 },
+  {
+    key: 'daysLeft',
+    title: 'Days Left',
+    fields: ['daysLeft'],
+    width: 110,
+    cellRender: row => (
+      <span className={`text-sm font-medium ${row.daysLeft < 0 ? 'text-red-600' : row.daysLeft <= 7 ? 'text-amber-600' : ''}`}>
+        {row.daysLeft < 0 ? `Expired ${-row.daysLeft}d ago` : `${row.daysLeft}d`}
+      </span>
+    ),
+  },
+]
+
+const LEDGER_EXPORT: ExportColumn<StockLedgerRow>[] = [
+  { header: 'SKU', value: r => r.sku },
+  { header: 'Item', value: r => r.name },
+  { header: 'Category', value: r => r.category },
+  { header: 'UOM', value: r => r.uom },
+  { header: 'Opening', value: r => r.openingQty, numeric: true },
+  { header: 'In', value: r => r.qtyIn, numeric: true },
+  { header: 'Out', value: r => r.qtyOut, numeric: true },
+  { header: 'Closing', value: r => r.closingQty, numeric: true },
+  { header: 'On Hand', value: r => r.currentQty, numeric: true },
+  { header: 'Value', value: r => r.stockValue, numeric: true },
+  { header: 'Status', value: r => r.status },
+]
+
+const EXPIRY_EXPORT: ExportColumn<StockExpiryRow>[] = [
+  { header: 'SKU', value: r => r.sku },
+  { header: 'Item', value: r => r.name },
+  { header: 'Batch', value: r => r.batchNumber ?? '' },
+  { header: 'Location', value: r => r.locationName },
+  { header: 'Qty', value: r => r.quantity, numeric: true },
+  { header: 'Value', value: r => r.value, numeric: true },
+  { header: 'Expiry', value: r => fmtDate(r.expiryDate) },
+  { header: 'Days Left', value: r => r.daysLeft, numeric: true },
+]
+
+export function StockReportClient() {
+  const [tab, setTab] = useState<Tab>('ledger')
+  const [search, setSearch] = useState('')
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const [locationId, setLocationId] = useState(ALL)
+  const [categoryId, setCategoryId] = useState(ALL)
+  const [status, setStatus] = useState(ALL)
+  const [expiryDays, setExpiryDays] = useState(30)
+
+  const [locationOptions, setLocationOptions] = useState<{ id: string; label: string }[]>([])
+  const [categoryOptions, setCategoryOptions] = useState<{ id: string; name: string }[]>([])
+  const [overview, setOverview] = useState<StockOverview | null>(null)
+  const [ledgerData, setLedgerData] = useState<StockLedgerRow[]>([])
+  const [expiryData, setExpiryData] = useState<StockExpiryRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+
+  useEffect(() => {
+    Promise.all([warehouses.list({ pageSize: 200 }), vehicles.list({ pageSize: 200 }), categories.list()])
+      .then(([w, v, c]) => {
+        setLocationOptions([
+          ...getPaginatedItems(w).map(x => ({ id: x.id, label: `Warehouse · ${x.name}` })),
+          ...getPaginatedItems(v).map(x => ({ id: x.id, label: `Vehicle · ${x.numberPlate}` })),
+        ])
+        setCategoryOptions(c.map(x => ({ id: x.id, name: x.name })))
+      })
+      .catch(err => toast.add({ title: 'Failed to load filters', description: getApiError(err), type: 'error' }))
+  }, [])
+
+  const location = locationId === ALL ? undefined : locationId
+
+  const ledgerParams = useCallback(
+    (p: number, s: number) => ({
+      page: p,
+      pageSize: s,
+      search: search || undefined,
+      locationId: location,
+      from: from || undefined,
+      to: to || undefined,
+      categoryId: categoryId === ALL ? undefined : categoryId,
+      status: status === ALL ? undefined : (status as 'low' | 'out'),
+    }),
+    [search, location, from, to, categoryId, status],
+  )
+
+  const expiryParams = useCallback(
+    (p: number, s: number) => ({ page: p, pageSize: s, search: search || undefined, locationId: location, days: expiryDays }),
+    [search, location, expiryDays],
+  )
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      if (tab === 'ledger') {
+        const res = await stockReports.ledger(ledgerParams(page, pageSize))
+        setLedgerData(getPaginatedItems(res))
+        setTotal(res.total)
+      } else {
+        const res = await stockReports.expiry(expiryParams(page, pageSize))
+        setExpiryData(getPaginatedItems(res))
+        setTotal(res.total)
+      }
+    } catch (err) {
+      toast.add({ title: 'Failed to load stock report', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [tab, page, pageSize, ledgerParams, expiryParams])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  useEffect(() => {
+    stockReports
+      .overview({ locationId: location, expiryDays })
+      .then(setOverview)
+      .catch(err => toast.add({ title: 'Failed to load summary', description: getApiError(err), type: 'error' }))
+  }, [location, expiryDays])
+
+  function changeTab(next: Tab) {
+    setTab(next)
+    setPage(1)
+    setTotal(0)
+  }
+
+  async function handleExport(format: 'excel' | 'pdf') {
+    const locationLabel = locationOptions.find(o => o.id === locationId)?.label ?? 'All locations'
+    if (tab === 'ledger') {
+      const rows = await fetchAllPages((p, s) =>
+        stockReports.ledger(ledgerParams(p, s)).then(r => ({ items: getPaginatedItems(r), total: r.total })),
+      )
+      const range = `${from || 'last 30 days'} to ${to || 'today'}`
+      if (format === 'excel') await exportExcel('stock-ledger', LEDGER_EXPORT, rows)
+      else await exportPdf('stock-ledger', 'Stock Ledger', LEDGER_EXPORT, rows, `${locationLabel}  ·  ${range}`)
+    } else {
+      const rows = await fetchAllPages((p, s) =>
+        stockReports.expiry(expiryParams(p, s)).then(r => ({ items: getPaginatedItems(r), total: r.total })),
+      )
+      if (format === 'excel') await exportExcel('stock-expiry', EXPIRY_EXPORT, rows)
+      else await exportPdf('stock-expiry', 'Stock Expiry', EXPIRY_EXPORT, rows, `${locationLabel}  ·  within ${expiryDays} days`)
+    }
+  }
+
+  const common = { serverSide: true, stickyHeader: true, pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] } }
+
+  const ledgerConfig = useMemo<TableConfig<StockLedgerRow>>(
+    () => ({ ...common, rowKey: r => r.itemId, emptyMessage: 'No products found.', columns: ledgerColumns }),
+    [pageSize],
+  )
+  const expiryConfig = useMemo<TableConfig<StockExpiryRow>>(
+    () => ({
+      ...common,
+      rowKey: r => `${r.batchId}-${r.locationId}`,
+      emptyMessage: 'No batches expiring in this window.',
+      columns: expiryColumns,
+    }),
+    [pageSize],
+  )
+
+  const onServerSideChange = ({ page: p }: { page: { page: number; pageSize: number } }) => {
+    setPage(p.page)
+    setPageSize(p.pageSize)
+  }
+
+  const cards: [string, string][] = overview
+    ? [
+        ['Products in stock', num(overview.totalSkus)],
+        ['Total qty', num(overview.totalQty)],
+        ['Stock value', num(overview.totalValue)],
+        ['Low stock', num(overview.lowStockCount)],
+        ['Out of stock', num(overview.outOfStockCount)],
+        [`Expiring in ${expiryDays}d`, num(overview.expiringSoonCount)],
+        ['Expired', num(overview.expiredCount)],
+      ]
+    : []
+
+  return (
+    <>
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Stock Report</h1>
+        <p className="text-sm text-muted-foreground mt-0.5">
+          Opening, in, out and closing stock across all locations or one warehouse or vehicle, plus batches nearing expiry.
+        </p>
+      </div>
+
+      {overview && (
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
+          {cards.map(([label, value]) => (
+            <Card key={label} className="rounded-3xl border-border/60">
+              <CardContent className="space-y-1">
+                <CardDescription>{label}</CardDescription>
+                <CardTitle className="text-2xl">{value}</CardTitle>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-center gap-2">
+        {TABS.map(t => (
+          <Button key={t.key} size="sm" variant={tab === t.key ? 'default' : 'outline'} onClick={() => changeTab(t.key)}>
+            {t.label}
+          </Button>
+        ))}
+        <Select value={locationId} onValueChange={v => { setLocationId(v ?? ALL); setPage(1) }}>
+          <SelectTrigger className="w-56"><SelectValue placeholder="Location" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value={ALL}>All locations</SelectItem>
+            {locationOptions.map(o => <SelectItem key={o.id} value={o.id}>{o.label}</SelectItem>)}
+          </SelectContent>
+        </Select>
+        <Input
+          className="w-56"
+          placeholder="Search name or SKU"
+          value={search}
+          onChange={e => { setSearch(e.target.value); setPage(1) }}
+        />
+        {tab === 'ledger' ? (
+          <>
+            <Select value={categoryId} onValueChange={v => { setCategoryId(v ?? ALL); setPage(1) }}>
+              <SelectTrigger className="w-44"><SelectValue placeholder="Category" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>All categories</SelectItem>
+                {categoryOptions.map(c => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
+              </SelectContent>
+            </Select>
+            <Select value={status} onValueChange={v => { setStatus(v ?? ALL); setPage(1) }}>
+              <SelectTrigger className="w-40"><SelectValue placeholder="Status" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>All statuses</SelectItem>
+                <SelectItem value="low">Low stock</SelectItem>
+                <SelectItem value="out">Out of stock</SelectItem>
+              </SelectContent>
+            </Select>
+            <Input className="w-40" type="date" value={from} onChange={e => { setFrom(e.target.value); setPage(1) }} />
+            <Input className="w-40" type="date" value={to} onChange={e => { setTo(e.target.value); setPage(1) }} />
+          </>
+        ) : (
+          <Select value={String(expiryDays)} onValueChange={v => { setExpiryDays(Number(v)); setPage(1) }}>
+            <SelectTrigger className="w-44"><SelectValue placeholder="Window" /></SelectTrigger>
+            <SelectContent>
+              {EXPIRY_WINDOWS.map(d => <SelectItem key={d} value={String(d)}>Within {d} days</SelectItem>)}
+            </SelectContent>
+          </Select>
+        )}
+        <div className="ml-auto flex items-center gap-2">
+          <ExportButtons onExport={handleExport} disabled={loading || total === 0} />
+        </div>
+      </div>
+
+      {tab === 'ledger' && (
+        <DataTable config={ledgerConfig} data={ledgerData} loading={loading} totalCount={total} onServerSideChange={onServerSideChange} />
+      )}
+      {tab === 'expiry' && (
+        <DataTable config={expiryConfig} data={expiryData} loading={loading} totalCount={total} onServerSideChange={onServerSideChange} />
+      )}
+    </>
+  )
+}

distribution_fe/app/(dashboard)/reports/stock/page.tsx

@@ -0,0 +1,5 @@
+import { StockReportClient } from './_components/stock-report-client'
+
+export default function StockReportPage() {
+  return <StockReportClient />
+}

distribution_fe/components/shared/export-buttons.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/toast'
+import { getApiError } from '@/lib/api/index'
+
+interface ExportButtonsProps {
+  /** Runs the export for the chosen format; fetch the full filtered data inside. */
+  onExport: (format: 'excel' | 'pdf') => Promise<void>
+  disabled?: boolean
+}
+
+export function ExportButtons({ onExport, disabled }: ExportButtonsProps) {
+  const [busy, setBusy] = useState<'excel' | 'pdf' | null>(null)
+
+  async function run(format: 'excel' | 'pdf') {
+    setBusy(format)
+    try {
+      await onExport(format)
+    } catch (err) {
+      toast.add({ title: 'Export failed', description: getApiError(err), type: 'error' })
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  return (
+    <>
+      <Button size="sm" variant="outline" disabled={disabled || busy !== null} onClick={() => run('excel')}>
+        {busy === 'excel' ? 'Exporting…' : 'Export Excel'}
+      </Button>
+      <Button size="sm" variant="outline" disabled={disabled || busy !== null} onClick={() => run('pdf')}>
+        {busy === 'pdf' ? 'Exporting…' : 'Export PDF'}
+      </Button>
+    </>
+  )
+}

distribution_fe/config/nav.ts

@@ -168,6 +168,7 @@ export const NAV_GROUPS: NavGroup[] = [
     icon: ClipboardListIcon,
     items: [
       { title: 'Product Report', href: '/reports/products', icon: ClipboardListIcon, description: 'Stock, sales and returns per product', permission: 'warehouses.view' },
+      { title: 'Stock Report', href: '/reports/stock', icon: Package01Icon, description: 'Opening, in, out and closing stock, low stock and expiry', permission: 'warehouses.view' },
     ],
   },
 ]

distribution_fe/lib/api/master.ts

@@ -12,6 +12,8 @@ import type {
   RouteVisitResponse,
   VehicleResponse,
   WarehouseResponse,
+  WarehouseDashboardResponse,
+  VehicleDashboardResponse,
   VehicleType,
   WarehouseType,
 } from '@/types/api'
@@ -199,6 +201,10 @@ export const vehicles = {
   get: (id: string) =>
     api.get<VehicleResponse>(`/vehicles/${id}`).then(r => normalizeVehicle(r.data)),
 
+  dashboard: (id: string, params?: { from?: string; to?: string }) =>
+    api.get<VehicleDashboardResponse>(`/vehicles/${id}/dashboard`, { params })
+      .then(r => ({ ...r.data, vehicle: normalizeVehicle(r.data.vehicle) })),
+
   create: (body: VehicleBody) =>
     api.post<VehicleResponse>('/vehicles', serializeVehicleBody(body)).then(r => normalizeVehicle(r.data)),
 
@@ -226,6 +232,9 @@ export const warehouses = {
   get: (id: string) =>
     api.get<WarehouseResponse>(`/warehouses/${id}`).then(r => r.data),
 
+  dashboard: (id: string, params?: { from?: string; to?: string; deadStockDays?: number }) =>
+    api.get<WarehouseDashboardResponse>(`/warehouses/${id}/dashboard`, { params }).then(r => r.data),
+
   create: (body: WarehouseBody) =>
     api.post<WarehouseResponse>('/warehouses', body).then(r => r.data),
 

distribution_fe/lib/api/reports.ts

@@ -72,6 +72,80 @@ export interface ProductStockParams extends ProductReportParams {
   lowStockOnly?: boolean
 }
 
+export interface StockOverview {
+  totalSkus: number
+  totalQty: number
+  totalValue: number
+  lowStockCount: number
+  outOfStockCount: number
+  expiringSoonCount: number
+  expiredCount: number
+}
+
+export type StockLedgerStatus = 'OK' | 'Low' | 'Out'
+
+export interface StockLedgerRow {
+  itemId: string
+  sku: string
+  name: string
+  brand: string | null
+  category: string
+  uom: string
+  openingQty: number
+  qtyIn: number
+  qtyOut: number
+  closingQty: number
+  currentQty: number
+  costPrice: number | null
+  stockValue: number
+  reorderLevel: number | null
+  status: StockLedgerStatus
+}
+
+export interface StockExpiryRow {
+  itemId: string
+  sku: string
+  name: string
+  batchId: string
+  batchNumber: string | null
+  expiryDate: string
+  daysLeft: number
+  quantity: number
+  costPrice: number | null
+  value: number
+  locationId: string
+  locationType: string
+  locationName: string
+}
+
+export interface StockLedgerParams extends PageParams {
+  locationId?: string
+  categoryId?: string
+  brandId?: string
+  from?: string
+  to?: string
+  status?: 'low' | 'out'
+  activeOnly?: boolean
+  search?: string
+}
+
+export interface StockExpiryParams extends PageParams {
+  locationId?: string
+  days?: number
+  search?: string
+}
+
+export const stockReports = {
+  overview: (params?: { locationId?: string; expiryDays?: number }) =>
+    api.get<StockOverview>('/reports/stock/overview', { params }).then(r => r.data),
+
+  ledger: (params?: StockLedgerParams) =>
+    api.get<PaginatedResponse<StockLedgerRow>>('/reports/stock/ledger', { params }).then(r => r.data),
+
+  expiry: (params?: StockExpiryParams) =>
+    api.get<PaginatedResponse<StockExpiryRow>>('/reports/stock/expiry', { params }).then(r => r.data),
+}
+
 export const productReports = {
   stock: (params?: ProductStockParams) =>
     api.get<PaginatedResponse<ProductStockRow>>('/reports/products/stock', { params }).then(r => r.data),

distribution_fe/lib/export.ts

@@ -0,0 +1,81 @@
+export interface ExportColumn<T> {
+  header: string
+  value: (row: T) => string | number | null | undefined
+  /** Right-align and format as a number in Excel. */
+  numeric?: boolean
+}
+
+const MAX_PAGE_SIZE = 200
+
+/** Walks every page of a server-paged endpoint and returns all rows. */
+export async function fetchAllPages<T>(
+  fetchPage: (page: number, pageSize: number) => Promise<{ items: T[]; total: number }>,
+): Promise<T[]> {
+  const rows: T[] = []
+  for (let page = 1; ; page++) {
+    const res = await fetchPage(page, MAX_PAGE_SIZE)
+    rows.push(...res.items)
+    if (res.items.length === 0 || rows.length >= res.total) return rows
+  }
+}
+
+function stamp() {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function download(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+export async function exportExcel<T>(name: string, columns: ExportColumn<T>[], rows: T[]) {
+  const { Workbook } = await import('exceljs')
+  const wb = new Workbook()
+  const ws = wb.addWorksheet(name.slice(0, 31))
+
+  ws.columns = columns.map(c => ({ header: c.header, width: Math.max(c.header.length + 4, 14) }))
+  ws.getRow(1).font = { bold: true }
+  ws.views = [{ state: 'frozen', ySplit: 1 }]
+
+  rows.forEach(r => ws.addRow(columns.map(c => c.value(r) ?? '')))
+  columns.forEach((c, i) => {
+    if (c.numeric) {
+      const col = ws.getColumn(i + 1)
+      col.numFmt = '#,##0.##'
+      col.alignment = { horizontal: 'right' }
+    }
+  })
+
+  const buffer = await wb.xlsx.writeBuffer()
+  download(
+    new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }),
+    `${name}-${stamp()}.xlsx`,
+  )
+}
+
+export async function exportPdf<T>(name: string, title: string, columns: ExportColumn<T>[], rows: T[], subtitle?: string) {
+  const [{ jsPDF }, { default: autoTable }] = await Promise.all([import('jspdf'), import('jspdf-autotable')])
+  const doc = new jsPDF({ orientation: columns.length > 6 ? 'landscape' : 'portrait', unit: 'pt', format: 'a4' })
+
+  doc.setFontSize(14)
+  doc.text(title, 40, 40)
+  doc.setFontSize(9)
+  doc.text(subtitle ? `${subtitle}  ·  Generated ${stamp()}` : `Generated ${stamp()}`, 40, 56)
+
+  autoTable(doc, {
+    startY: 68,
+    head: [columns.map(c => c.header)],
+    body: rows.map(r => columns.map(c => String(c.value(r) ?? ''))),
+    styles: { fontSize: 8 },
+    headStyles: { fillColor: [55, 65, 81] },
+    columnStyles: Object.fromEntries(
+      columns.map((c, i) => [i, c.numeric ? { halign: 'right' as const } : {}]),
+    ),
+  })
+
+  doc.save(`${name}-${stamp()}.pdf`)
+}

distribution_fe/types/api.ts

@@ -185,6 +185,97 @@ export interface VehicleResponse {
   createdAt: string
 }
 
+// ─── Vehicle dashboard ────────────────────────────────────────────────────────
+
+export interface VehicleDashboardKpis {
+  rides: number
+  closedRides: number
+  cancelledRides: number
+  distanceKm: number
+  deliveries: number
+  deliveredCount: number
+  failedCount: number
+  pendingCount: number
+  successRatePercent: number
+  deliveredValue: number
+  collections: number
+  stockOnBoardUnits: number
+  stockOnBoardValue: number
+  unitsLoaded: number
+  unitsSold: number
+}
+
+export interface VehicleDashboardStockRow {
+  itemId: string
+  sku: string
+  name: string
+  category: string
+  uom: string
+  quantity: number
+  value: number
+  updatedAt: string
+}
+
+export interface VehicleDashboardRide {
+  id: string
+  status: RideStatus
+  driverName: string
+  startedAt: string | null
+  closedAt: string | null
+  createdAt: string
+  distanceKm: number
+  tasks: number
+  delivered: number
+  failed: number
+  cancelType: CancelRequestType | null
+  cancelReason: string | null
+}
+
+export interface VehicleDashboardDriver {
+  id: string
+  name: string
+  licenseNumber: string
+  licenseExpiry: string
+  medicalClearanceExpiry: string
+  isActive: boolean
+  rides: number
+  distanceKm: number
+  lastRideAt: string | null
+}
+
+export interface VehicleDashboardResponse {
+  vehicle: VehicleResponse
+  defaultWarehouse: { id: string; name: string } | null
+  mobileWarehouse: { id: string; name: string } | null
+  currentRide: {
+    id: string
+    driverName: string
+    startedAt: string | null
+    meterStart: number
+    tasks: number
+    delivered: number
+    failed: number
+  } | null
+  period: { from: string; to: string }
+  kpis: VehicleDashboardKpis
+  stockOnBoard: VehicleDashboardStockRow[]
+  rides: VehicleDashboardRide[]
+  dailyDeliveries: { date: string; delivered: number; failed: number }[]
+  dailyMovement: { date: string; in: number; out: number }[]
+  movementByType: WarehouseDashboardMovementTypeRow[]
+  ledger: WarehouseDashboardLedgerRow[]
+  cancelReasons: { type: CancelRequestType; count: number }[]
+  collectionsByMethod: { method: PaymentMethod; amount: number; count: number }[]
+  returns: {
+    returnCount: number
+    creditValue: number
+    returnedUnits: number
+    customerReturnUnitsOnVehicle: number
+  }
+  topStores: { storeId: string; storeName: string; deliveries: number; value: number }[]
+  drivers: VehicleDashboardDriver[]
+}
+
 export interface WarehouseResponse {
   id: string
   name: string
@@ -195,6 +286,174 @@ export interface WarehouseResponse {
   createdAt: string
 }
 
+// ─── Warehouse dashboard ──────────────────────────────────────────────────────
+
+export type WarehouseStockStatus = 'OK' | 'Low' | 'Out'
+export type WarehouseMovementDirection = 'In' | 'Out'
+
+export interface WarehouseDashboardKpis {
+  stockValueCost: number
+  stockValueSale: number
+  totalUnits: number
+  skuCount: number
+  lowStockCount: number
+  outOfStockCount: number
+  nearExpiryCount: number
+  expiredCount: number
+  unitsIn: number
+  unitsOut: number
+}
+
+export interface WarehouseDashboardBatch {
+  batchId: string
+  batchNumber: string | null
+  expiryDate: string | null
+  quantity: number
+}
+
+export interface WarehouseDashboardStockRow {
+  itemId: string
+  sku: string
+  name: string
+  category: string
+  brand: string | null
+  uom: string
+  quantity: number
+  reorderLevel: number | null
+  status: WarehouseStockStatus
+  costValue: number
+  saleValue: number
+  updatedAt: string
+  batches: WarehouseDashboardBatch[]
+}
+
+export interface WarehouseDashboardCategoryStock {
+  category: string
+  units: number
+  value: number
+}
+
+export interface WarehouseDashboardExpiringBatch {
+  itemId: string
+  itemName: string
+  batchNumber: string | null
+  expiryDate: string
+  quantity: number
+  status: 'NearExpiry' | 'Expired'
+}
+
+export interface WarehouseDashboardDailyPoint {
+  date: string
+  in: number
+  out: number
+}
+
+export interface WarehouseDashboardMovementTypeRow {
+  type: MovementType
+  direction: WarehouseMovementDirection
+  units: number
+  count: number
+}
+
+export interface WarehouseDashboardLedgerRow {
+  id: string
+  createdAt: string
+  itemId: string
+  itemName: string
+  sku: string
+  type: MovementType
+  direction: WarehouseMovementDirection
+  quantity: number
+  fromName: string
+  toName: string
+  referenceId: string | null
+  referenceKind: string | null
+  reasonCode: string | null
+  createdByName: string
+}
+
+export interface WarehouseDashboardGrnRow {
+  id: string
+  receivedAt: string
+  purchaseOrderId: string | null
+  supplierName: string | null
+  acceptedQuantity: number
+  rejectedQuantity: number
+  costValue: number
+}
+
+export interface WarehouseDashboardLoadingSheetRow {
+  id: string
+  rideId: string
+  vehiclePlate: string
+  status: LoadingSheetStatus
+  populatedAt: string
+  confirmedAt: string | null
+  lines: number
+  units: number
+}
+
+export interface WarehouseDashboardVehicle {
+  vehicleId: string
+  regNumber: string
+  numberPlate: string
+  isLinked: boolean
+  units: number
+  skus: number
+}
+
+export interface WarehouseDashboardClaimRow {
+  id: string
+  createdAt: string
+  supplierName: string | null
+  details: string
+  units: number
+}
+
+export interface WarehouseDashboardResponse {
+  warehouse: WarehouseResponse
+  linkedVehicles: { id: string; regNumber: string; numberPlate: string; isPrimary: boolean }[]
+  period: { from: string; to: string }
+  deadStockDays: number
+  kpis: WarehouseDashboardKpis
+  stock: WarehouseDashboardStockRow[]
+  stockByCategory: WarehouseDashboardCategoryStock[]
+  expiringBatches: WarehouseDashboardExpiringBatch[]
+  dailyMovement: WarehouseDashboardDailyPoint[]
+  movementByType: WarehouseDashboardMovementTypeRow[]
+  ledger: WarehouseDashboardLedgerRow[]
+  inbound: {
+    grnCount: number
+    acceptedUnits: number
+    rejectedUnits: number
+    rejectionRatePercent: number
+    recentGrns: WarehouseDashboardGrnRow[]
+  }
+  outbound: {
+    unitsDispatched: number
+    pendingDispatchUnits: number
+    recentLoadingSheets: WarehouseDashboardLoadingSheetRow[]
+  }
+  vehicles: WarehouseDashboardVehicle[]
+  losses: {
+    purchaseReturnUnits: number
+    damageUnits: number
+    negativeAdjustmentUnits: number
+    positiveAdjustmentUnits: number
+    openClaimCount: number
+    openClaims: WarehouseDashboardClaimRow[]
+  }
+  topMovers: { itemId: string; sku: string; name: string; unitsOut: number }[]
+  deadStock: {
+    itemId: string
+    sku: string
+    name: string
+    quantity: number
+    costValue: number
+    lastOutboundAt: string | null
+  }[]
+}
+
 // ─── Stores ───────────────────────────────────────────────────────────────────
 
 export interface StoreResponse {