Implement GRN and Purchase Order sheets with form handling and data fetching

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

@@ -1,12 +1,15 @@
 'use client'
 
 import { useState, useEffect, useCallback, useMemo } from 'react'
-
+import { HugeiconsIcon } from '@hugeicons/react'
+import { Add01Icon } from '@hugeicons/core-free-icons'
 import { DataTable } from '@/components/shared/data-table'
 import type { TableConfig } from '@/components/shared/data-table'
+import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/toast'
 import { grn as grnApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { GrnResponse } from '@/types/api'
+import { GrnSheet } from './grn-sheet'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -19,6 +22,7 @@ export function GrnClient() {
   const [total, setTotal] = useState(0)
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
+  const [sheetOpen, setSheetOpen] = useState(false)
 
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
@@ -101,6 +105,10 @@ export function GrnClient() {
             Stock received into a warehouse against a purchase order
           </p>
         </div>
+        <Button onClick={() => setSheetOpen(true)}>
+          <HugeiconsIcon icon={Add01Icon} size={16} strokeWidth={2} />
+          Record Receipt
+        </Button>
       </div>
 
       <DataTable
@@ -113,6 +121,12 @@ export function GrnClient() {
           setPageSize(p.pageSize)
         }}
       />
+
+      <GrnSheet
+        open={sheetOpen}
+        onClose={() => setSheetOpen(false)}
+        onSuccess={() => fetchData(page, pageSize)}
+      />
     </>
   )
 }

distribution_fe/app/(dashboard)/procurement/grn/_components/grn-sheet.tsx

@@ -0,0 +1,298 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useFieldArray } from 'react-hook-form'
+import { useForm, zodResolver, z } from '@/lib/form'
+import { FormField } from '@/components/shared/form-field'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { FieldGroup } from '@/components/ui/field'
+import { Separator } from '@/components/ui/separator'
+import { toast } from '@/components/ui/toast'
+import {
+  grn as grnApi,
+  purchaseOrders as purchaseOrdersApi,
+  warehouses as warehousesApi,
+  getApiError,
+  getPaginatedItems,
+} from '@/lib/api/index'
+import type { PurchaseOrderResponse, WarehouseResponse } from '@/types/api'
+
+const grnItemSchema = z.object({
+  purchaseOrderItemId: z.string().min(1),
+  acceptedQuantity: z.number().min(0, 'Must be 0 or more'),
+  rejectedQuantity: z.number().min(0, 'Must be 0 or more'),
+})
+
+const schema = z.object({
+  purchaseOrderId: z.string().min(1, 'Purchase order is required'),
+  warehouseId: z.string().min(1, 'Warehouse is required'),
+  receivedAt: z.string().min(1, 'Received date is required'),
+  items: z.array(grnItemSchema).min(1, 'PO must have at least one line item'),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface GrnSheetProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+}
+
+function todayIso() {
+  return new Date().toISOString().slice(0, 10)
+}
+
+export function GrnSheet({ open, onClose, onSuccess }: GrnSheetProps) {
+  const [eligiblePOs, setEligiblePOs] = useState<PurchaseOrderResponse[]>([])
+  const [warehousesList, setWarehousesList] = useState<WarehouseResponse[]>([])
+  const [selectedPO, setSelectedPO] = useState<PurchaseOrderResponse | null>(null)
+  const [loadingPO, setLoadingPO] = useState(false)
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      purchaseOrderId: '',
+      warehouseId: '',
+      receivedAt: todayIso(),
+      items: [],
+    },
+  })
+
+  const { fields, replace } = useFieldArray({ control: form.control, name: 'items' })
+
+  // Load reference data when sheet opens
+  useEffect(() => {
+    if (!open) return
+    form.reset({ purchaseOrderId: '', warehouseId: '', receivedAt: todayIso(), items: [] })
+    setSelectedPO(null)
+    Promise.all([
+      purchaseOrdersApi.list({ pageSize: 200 }),
+      warehousesApi.list({ pageSize: 200 }),
+    ])
+      .then(([pos, ws]) => {
+        // Only POs that can still receive goods
+        const pos_ = getPaginatedItems(pos) as PurchaseOrderResponse[]
+        setEligiblePOs(pos_.filter(po => po.status === 'Issued' || po.status === 'PartiallyReceived'))
+        setWarehousesList(getPaginatedItems(ws))
+      })
+      .catch(err =>
+        toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
+      )
+  }, [open])
+
+  // When PO changes, fetch its details and populate items
+  async function handlePOChange(poId: string) {
+    form.setValue('purchaseOrderId', poId, { shouldValidate: true })
+    if (!poId) {
+      setSelectedPO(null)
+      replace([])
+      return
+    }
+    setLoadingPO(true)
+    try {
+      const po = await purchaseOrdersApi.get(poId)
+      setSelectedPO(po)
+      // Pre-fill items: remaining quantity for each non-cancelled line
+      const lineItems = (po.items ?? [])
+        .filter(item => !item.isCancelled)
+        .map(item => ({
+          purchaseOrderItemId: item.id,
+          acceptedQuantity: Math.max(0, item.quantity - item.receivedQuantity),
+          rejectedQuantity: 0,
+        }))
+      replace(lineItems)
+    } catch (err) {
+      toast.add({ title: 'Failed to load PO details', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoadingPO(false)
+    }
+  }
+
+  async function onSubmit(values: FormValues) {
+    try {
+      await grnApi.create({
+        purchaseOrderId: values.purchaseOrderId,
+        warehouseId: values.warehouseId,
+        receivedAt: `${values.receivedAt}T00:00:00.000Z`,
+        items: values.items,
+      })
+      toast.add({ title: 'Goods receipt recorded', type: 'success' })
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to record receipt', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  const poItems = selectedPO?.items?.filter(i => !i.isCancelled) ?? []
+
+  return (
+    <Dialog open={open} onOpenChange={v => { if (!v) onClose() }}>
+      <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Record Goods Receipt</DialogTitle>
+          <DialogDescription>
+            Record stock received into a warehouse against a purchase order.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto">
+          <FieldGroup>
+            <FormField
+              control={form.control}
+              name="purchaseOrderId"
+              label="Purchase Order"
+              required
+              render={({ field }) => (
+                <Select
+                  value={field.value as string}
+                  onValueChange={v => handlePOChange(v ?? '')}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select purchase order..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {eligiblePOs.map(po => (
+                      <SelectItem key={po.id} value={po.id}>
+                        {po.supplierName} — {po.id.slice(0, 8).toUpperCase()} ({po.status})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="warehouseId"
+                label="Warehouse"
+                required
+                render={({ field }) => (
+                  <Select value={field.value as string} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select warehouse..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {warehousesList.map(w => (
+                        <SelectItem key={w.id} value={w.id}>{w.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="receivedAt"
+                label="Received Date"
+                required
+                render={({ field, invalid }) => (
+                  <Input
+                    type="date"
+                    value={field.value as string}
+                    onChange={field.onChange}
+                    onBlur={field.onBlur}
+                    aria-invalid={invalid}
+                  />
+                )}
+              />
+            </div>
+          </FieldGroup>
+
+          {/* Line items — populated from the selected PO */}
+          {selectedPO && (
+            <>
+              <Separator />
+              <div className="flex flex-col gap-3">
+                <p className="text-sm font-medium text-foreground">Line Items</p>
+
+                {loadingPO ? (
+                  <p className="text-sm text-muted-foreground">Loading items…</p>
+                ) : poItems.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">No receivable items on this order.</p>
+                ) : (
+                  <>
+                    {/* Header row */}
+                    <div className="grid grid-cols-[1fr_100px_100px] gap-3 px-1">
+                      <p className="text-xs font-medium text-muted-foreground">Item</p>
+                      <p className="text-xs font-medium text-muted-foreground">Accepted</p>
+                      <p className="text-xs font-medium text-muted-foreground">Rejected</p>
+                    </div>
+
+                    {fields.map((f, index) => {
+                      const poItem = poItems[index]
+                      return (
+                        <div key={f.id} className="grid grid-cols-[1fr_100px_100px] items-start gap-3 rounded-xl border px-3 py-3">
+                          <div className="flex flex-col gap-0.5 pt-1">
+                            <span className="text-sm font-medium">{poItem?.itemName}</span>
+                            <span className="text-xs text-muted-foreground">
+                              {poItem?.sku} · ordered {poItem?.quantity}, received {poItem?.receivedQuantity}
+                            </span>
+                          </div>
+
+                          <FormField
+                            control={form.control}
+                            name={`items.${index}.acceptedQuantity`}
+                            render={({ field, invalid }) => (
+                              <Input
+                                type="number"
+                                min={0}
+                                value={Number(field.value as number)}
+                                onChange={e => field.onChange(Number(e.target.value))}
+                                onBlur={field.onBlur}
+                                aria-invalid={invalid}
+                              />
+                            )}
+                          />
+
+                          <FormField
+                            control={form.control}
+                            name={`items.${index}.rejectedQuantity`}
+                            render={({ field, invalid }) => (
+                              <Input
+                                type="number"
+                                min={0}
+                                value={Number(field.value as number)}
+                                onChange={e => field.onChange(Number(e.target.value))}
+                                onBlur={field.onBlur}
+                                aria-invalid={invalid}
+                              />
+                            )}
+                          />
+                        </div>
+                      )
+                    })}
+                  </>
+                )}
+              </div>
+            </>
+          )}
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
+            <Button type="submit" disabled={form.formState.isSubmitting || fields.length === 0}>
+              {form.formState.isSubmitting ? 'Saving…' : 'Record Receipt'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}