frontend fully integreated with the backend

2026-08-25 23:47:33 +05:30
parent 1bee5f91c6
commit 83d3272784
151 changed files with 10724 additions and 573 deletions
@@ -0,0 +1,135 @@
+'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 { stock as stockApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { StockMovementResponse, MovementType } from '@/types/api'
+
+const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+const MOVEMENT_TYPE_VARIANT: Record<MovementType, 'default' | 'secondary' | 'destructive'> = {
+  Sale: 'default',
+  CustomerReturn: 'secondary',
+  Transfer: 'secondary',
+  Damage: 'destructive',
+  Adjustment: 'secondary',
+  Load: 'default',
+  PurchaseReceipt: 'default',
+  PurchaseReturn: 'secondary',
+}
+
+export function StockMovementsClient() {
+  const [data, setData] = useState<StockMovementResponse[]>([])
+  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 stockApi.movements({ page: p, pageSize: ps })
+      setData(getPaginatedItems(res))
+      setTotal(res.total)
+    } catch (err) {
+      toast.add({ title: 'Failed to load stock movements', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData(page, pageSize)
+  }, [fetchData, page, pageSize])
+
+  const tableConfig = useMemo<TableConfig<StockMovementResponse>>(() => ({
+    rowKey: 'id',
+    serverSide: true,
+    stickyHeader: true,
+    emptyMessage: 'No stock movements found.',
+    pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
+    columns: [
+      {
+        key: 'itemName',
+        title: 'Item',
+        fields: [{ key: 'itemName', primary: true }],
+        minWidth: 200,
+      },
+      {
+        key: 'type',
+        title: 'Type',
+        fields: ['type'],
+        width: 160,
+        cellRender: (row) => (
+          <Badge variant={MOVEMENT_TYPE_VARIANT[row.type]}>{row.type}</Badge>
+        ),
+      },
+      {
+        key: 'fromLocationType',
+        title: 'From',
+        fields: ['fromLocationType'],
+        width: 140,
+        cellRender: (row) => (
+          <span className="text-sm text-muted-foreground">
+            {row.fromLocationType ?? '—'}
+          </span>
+        ),
+      },
+      {
+        key: 'toLocationType',
+        title: 'To',
+        fields: ['toLocationType'],
+        width: 140,
+        cellRender: (row) => (
+          <span className="text-sm text-muted-foreground">
+            {row.toLocationType ?? '—'}
+          </span>
+        ),
+      },
+      {
+        key: 'quantity',
+        title: 'Quantity',
+        fields: ['quantity'],
+        width: 120,
+        cellRender: (row) => (
+          <span className="text-sm font-medium">{row.quantity}</span>
+        ),
+      },
+      {
+        key: 'createdAt',
+        title: 'Created',
+        fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
+        width: 140,
+      },
+    ],
+  }), [pageSize])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Stock Movements</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Full history of stock in and out across all locations
+          </p>
+        </div>
+      </div>
+
+      <DataTable
+        config={tableConfig}
+        data={data}
+        loading={loading}
+        totalCount={total}
+        onServerSideChange={({ page: p }) => {
+          setPage(p.page)
+          setPageSize(p.pageSize)
+        }}
+      />
+    </>
+  )
+}
@@ -0,0 +1,5 @@
+import { StockMovementsClient } from './_components/stock-movements-client'
+
+export default function StockMovementsPage() {
+  return <StockMovementsClient />
+}