frontend fully integreated with the backend

distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { DataTable } from '@/components/shared/data-table'
+import type { TableConfig } from '@/components/shared/data-table'
+import { Badge } from '@/components/ui/badge'
+import { toast } from '@/components/ui/toast'
+import { loadingSheets as loadingSheetsApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api'
+
+const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+const truncId = (id: string) => id.substring(0, 8)
+
+const LS_STATUS_VARIANT: Record<LoadingSheetStatus, 'default' | 'secondary' | 'destructive'> = {
+  Pending: 'secondary',
+  DispatchConfirmed: 'default',
+  ReceiptConfirmed: 'default',
+  DiscrepancyFlagged: 'destructive',
+  Resolved: 'secondary',
+}
+
+export function LoadingSheetsClient() {
+  const [data, setData] = useState<LoadingSheetResponse[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+
+  const fetchData = useCallback(async (p: number, ps: number) => {
+    setLoading(true)
+    try {
+      const res = await loadingSheetsApi.list({ page: p, pageSize: ps })
+      setData(getPaginatedItems(res))
+      setTotal(res.total)
+    } catch (err) {
+      toast.add({ title: 'Failed to load loading sheets', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData(page, pageSize)
+  }, [fetchData, page, pageSize])
+
+  async function handleConfirmDispatch(row: LoadingSheetResponse) {
+    try {
+      await loadingSheetsApi.confirmDispatch(row.id)
+      toast.add({ title: 'Dispatch confirmed', type: 'success' })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to confirm dispatch', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  async function handleConfirmReceipt(row: LoadingSheetResponse) {
+    try {
+      await loadingSheetsApi.confirmReceipt(row.id, [])
+      toast.add({ title: 'Receipt confirmed', type: 'success' })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to confirm receipt', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  const tableConfig = useMemo<TableConfig<LoadingSheetResponse>>(() => ({
+    rowKey: 'id',
+    serverSide: true,
+    stickyHeader: true,
+    emptyMessage: 'No loading sheets found.',
+    pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
+    columns: [
+      {
+        key: 'id',
+        title: 'Sheet ID',
+        fields: ['id'],
+        width: 140,
+        cellRender: (row) => (
+          <span className="font-mono text-sm">{truncId(row.id)}</span>
+        ),
+      },
+      {
+        key: 'warehouseName',
+        title: 'Warehouse',
+        fields: [{ key: 'warehouseName', primary: true }],
+        minWidth: 180,
+      },
+      {
+        key: 'status',
+        title: 'Status',
+        fields: ['status'],
+        width: 180,
+        cellRender: (row) => (
+          <Badge variant={LS_STATUS_VARIANT[row.status]}>{row.status}</Badge>
+        ),
+      },
+      {
+        key: 'itemCount',
+        title: 'Items',
+        fields: ['items'],
+        width: 120,
+        cellRender: (row) => (
+          <span className="text-sm text-muted-foreground">{row.items.length} items</span>
+        ),
+      },
+      {
+        key: 'createdAt',
+        title: 'Created',
+        fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
+        width: 140,
+      },
+    ],
+    rowActions: {
+      actions: () => [
+        {
+          action: 'confirm',
+          label: 'Confirm dispatch',
+          onClick: handleConfirmDispatch,
+          visible: (target) => target.status === 'Pending',
+        },
+        {
+          action: 'confirm',
+          label: 'Confirm receipt',
+          onClick: handleConfirmReceipt,
+          visible: (target) => target.status === 'DispatchConfirmed',
+        },
+      ],
+    },
+  }), [pageSize])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Loading Sheets</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Track goods loaded onto a vehicle before dispatch
+          </p>
+        </div>
+      </div>
+
+      <DataTable
+        config={tableConfig}
+        data={data}
+        loading={loading}
+        totalCount={total}
+        onServerSideChange={({ page: p }) => {
+          setPage(p.page)
+          setPageSize(p.pageSize)
+        }}
+      />
+    </>
+  )
+}

distribution_fe/app/(dashboard)/operations/loading/page.tsx

@@ -0,0 +1,5 @@
+import { LoadingSheetsClient } from './_components/loading-sheets-client'
+
+export default function LoadingSheetsPage() {
+  return <LoadingSheetsClient />
+}