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,118 @@
+'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 { toast } from '@/components/ui/toast'
+import { grn as grnApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { GrnResponse } 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)
+
+export function GrnClient() {
+  const [data, setData] = useState<GrnResponse[]>([])
+  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 grnApi.list({ page: p, pageSize: ps })
+      setData(getPaginatedItems(res))
+      setTotal(res.total)
+    } catch (err) {
+      toast.add({ title: 'Failed to load goods receipts', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData(page, pageSize)
+  }, [fetchData, page, pageSize])
+
+  const tableConfig = useMemo<TableConfig<GrnResponse>>(() => ({
+    rowKey: 'id',
+    serverSide: true,
+    stickyHeader: true,
+    emptyMessage: 'No goods receipts found.',
+    pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
+    columns: [
+      {
+        key: 'id',
+        title: 'GRN ID',
+        fields: ['id'],
+        width: 140,
+        cellRender: (row) => (
+          <span className="font-mono text-sm">{truncId(row.id)}</span>
+        ),
+      },
+      {
+        key: 'purchaseOrderId',
+        title: 'PO ID',
+        fields: ['purchaseOrderId'],
+        width: 140,
+        cellRender: (row) => (
+          <span className="font-mono text-sm">{truncId(row.purchaseOrderId)}</span>
+        ),
+      },
+      {
+        key: 'warehouseName',
+        title: 'Warehouse',
+        fields: [{ key: 'warehouseName', primary: true }],
+        minWidth: 180,
+      },
+      {
+        key: 'itemCount',
+        title: 'Items',
+        fields: ['items'],
+        width: 120,
+        cellRender: (row) => (
+          <span className="text-sm text-muted-foreground">{row.items.length} items</span>
+        ),
+      },
+      {
+        key: 'receivedAt',
+        title: 'Received At',
+        fields: [{ key: 'receivedAt', transform: (v) => fmtDate(v as string) }],
+        width: 140,
+      },
+      {
+        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">Goods Receipts</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Stock received into a warehouse against a purchase order
+          </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 { GrnClient } from './_components/grn-client'
+
+export default function GrnPage() {
+  return <GrnClient />
+}