frontend fully integreated with the backend
This commit is contained in:
Kalana B. Thilakarathna
@@ -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 />
|
||||
}
|
||||
+147
@@ -0,0 +1,147 @@
|
||||
'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 { purchaseOrders as purchaseOrdersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
|
||||
import type { PurchaseOrderResponse, PurchaseOrderStatus } 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 PO_STATUS_VARIANT: Record<PurchaseOrderStatus, 'default' | 'secondary' | 'destructive'> = {
|
||||
Issued: 'default',
|
||||
PartiallyReceived: 'secondary',
|
||||
Received: 'secondary',
|
||||
Closed: 'secondary',
|
||||
Cancelled: 'destructive',
|
||||
}
|
||||
|
||||
export function PurchaseOrdersClient() {
|
||||
const [data, setData] = useState<PurchaseOrderResponse[]>([])
|
||||
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 purchaseOrdersApi.list({ page: p, pageSize: ps })
|
||||
setData(getPaginatedItems(res))
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to load purchase orders', description: getApiError(err), type: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(page, pageSize)
|
||||
}, [fetchData, page, pageSize])
|
||||
|
||||
async function handleCancel(row: PurchaseOrderResponse) {
|
||||
const reason = window.prompt('Enter cancellation reason:')
|
||||
if (reason === null) return
|
||||
if (!reason.trim()) {
|
||||
toast.add({ title: 'Cancellation reason is required', type: 'error' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
await purchaseOrdersApi.cancel(row.id, reason.trim())
|
||||
toast.add({ title: 'Purchase order cancelled', type: 'success' })
|
||||
fetchData(page, pageSize)
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to cancel order', description: getApiError(err), type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
const tableConfig = useMemo<TableConfig<PurchaseOrderResponse>>(() => ({
|
||||
rowKey: 'id',
|
||||
serverSide: true,
|
||||
stickyHeader: true,
|
||||
emptyMessage: 'No purchase orders found.',
|
||||
pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
|
||||
columns: [
|
||||
{
|
||||
key: 'id',
|
||||
title: 'Order ID',
|
||||
fields: ['id'],
|
||||
width: 140,
|
||||
cellRender: (row) => (
|
||||
<span className="font-mono text-sm">{truncId(row.id)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'supplierName',
|
||||
title: 'Supplier',
|
||||
fields: [{ key: 'supplierName', 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: 'status',
|
||||
title: 'Status',
|
||||
fields: ['status'],
|
||||
width: 160,
|
||||
cellRender: (row) => (
|
||||
<Badge variant={PO_STATUS_VARIANT[row.status]}>{row.status}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'Created',
|
||||
fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
|
||||
width: 140,
|
||||
},
|
||||
],
|
||||
rowActions: {
|
||||
actions: () => [
|
||||
{
|
||||
action: 'cancel',
|
||||
label: 'Cancel order',
|
||||
tone: 'destructive',
|
||||
onClick: handleCancel,
|
||||
visible: (target) => target.status === 'Issued',
|
||||
},
|
||||
],
|
||||
},
|
||||
}), [pageSize])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Purchase Orders</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
Orders placed with suppliers to restock inventory
|
||||
</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 { PurchaseOrdersClient } from './_components/purchase-orders-client'
|
||||
|
||||
export default function PurchaseOrdersPage() {
|
||||
return <PurchaseOrdersClient />
|
||||
}
|
||||
Reference in New Issue
Block a user