Add GrnViewSheet in GrnClient

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

@@ -10,6 +10,7 @@ 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'
+import { GrnViewSheet } from './grn-view-sheet'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -23,6 +24,13 @@ export function GrnClient() {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
   const [sheetOpen, setSheetOpen] = useState(false)
+  const [viewing, setViewing] = useState<GrnResponse | null>(null)
+  const [viewOpen, setViewOpen] = useState(false)
+
+  function openView(row: GrnResponse) {
+    setViewing(row)
+    setViewOpen(true)
+  }
 
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
@@ -94,6 +102,15 @@ export function GrnClient() {
         width: 140,
       },
     ],
+    rowActions: {
+      actions: () => [
+        {
+          action: 'view',
+          label: 'View receipt',
+          onClick: openView,
+        },
+      ],
+    },
   }), [pageSize])
 
   return (
@@ -127,6 +144,12 @@ export function GrnClient() {
         onClose={() => setSheetOpen(false)}
         onSuccess={() => fetchData(page, pageSize)}
       />
+
+      <GrnViewSheet
+        open={viewOpen}
+        onClose={() => setViewOpen(false)}
+        grn={viewing}
+      />
     </>
   )
 }

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

@@ -28,10 +28,11 @@ import {
   grn as grnApi,
   purchaseOrders as purchaseOrdersApi,
   warehouses as warehousesApi,
+  users as usersApi,
   getApiError,
   getPaginatedItems,
 } from '@/lib/api/index'
-import type { PurchaseOrderResponse, WarehouseResponse } from '@/types/api'
+import type { PurchaseOrderResponse, WarehouseResponse, UserResponse } from '@/types/api'
 
 const grnItemSchema = z.object({
   purchaseOrderItemId: z.string().min(1),
@@ -43,6 +44,7 @@ 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'),
+  receivedByUserId: z.string().min(1, 'Received by is required'),
   items: z.array(grnItemSchema).min(1, 'PO must have at least one line item'),
 })
 
@@ -61,6 +63,7 @@ function todayIso() {
 export function GrnSheet({ open, onClose, onSuccess }: GrnSheetProps) {
   const [eligiblePOs, setEligiblePOs] = useState<PurchaseOrderResponse[]>([])
   const [warehousesList, setWarehousesList] = useState<WarehouseResponse[]>([])
+  const [usersList, setUsersList] = useState<UserResponse[]>([])
   const [selectedPO, setSelectedPO] = useState<PurchaseOrderResponse | null>(null)
   const [loadingPO, setLoadingPO] = useState(false)
 
@@ -70,6 +73,7 @@ export function GrnSheet({ open, onClose, onSuccess }: GrnSheetProps) {
       purchaseOrderId: '',
       warehouseId: '',
       receivedAt: todayIso(),
+      receivedByUserId: '',
       items: [],
     },
   })
@@ -79,17 +83,19 @@ export function GrnSheet({ open, onClose, onSuccess }: GrnSheetProps) {
   // Load reference data when sheet opens
   useEffect(() => {
     if (!open) return
-    form.reset({ purchaseOrderId: '', warehouseId: '', receivedAt: todayIso(), items: [] })
+    form.reset({ purchaseOrderId: '', warehouseId: '', receivedAt: todayIso(), receivedByUserId: '', items: [] })
     setSelectedPO(null)
     Promise.all([
       purchaseOrdersApi.list({ pageSize: 200 }),
       warehousesApi.list({ pageSize: 200 }),
+      usersApi.list({ pageSize: 200 }),
     ])
-      .then(([pos, ws]) => {
+      .then(([pos, ws, usersRes]) => {
         // 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))
+        setUsersList(getPaginatedItems(usersRes))
       })
       .catch(err =>
         toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
@@ -131,6 +137,7 @@ export function GrnSheet({ open, onClose, onSuccess }: GrnSheetProps) {
         warehouseId: values.warehouseId,
         receivedAt: `${values.receivedAt}T00:00:00.000Z`,
         items: values.items,
+        receivedByUserId: values.receivedByUserId,
       })
       toast.add({ title: 'Goods receipt recorded', type: 'success' })
       onSuccess()
@@ -214,6 +221,27 @@ export function GrnSheet({ open, onClose, onSuccess }: GrnSheetProps) {
                 )}
               />
             </div>
+
+            <FormField
+              control={form.control}
+              name="receivedByUserId"
+              label="Received By"
+              description="Temporary — required until auth resolves the logged-in user automatically."
+              required
+              render={({ field }) => (
+                <Select value={field.value as string} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select user..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="" disabled>Select user...</SelectItem>
+                    {usersList.map((user) => (
+                      <SelectItem key={user.id} value={user.id}>{user.fullName}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
           </FieldGroup>
 
           {/* Line items — populated from the selected PO */}

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

@@ -0,0 +1,80 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Separator } from '@/components/ui/separator'
+import type { GrnResponse } from '@/types/api'
+
+const fmtDateTime = (v: string) =>
+  new Date(v).toLocaleString('en-GB', {
+    day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+  })
+
+interface GrnViewSheetProps {
+  open: boolean
+  onClose: () => void
+  grn: GrnResponse | null
+}
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between py-2 text-sm border-b last:border-0">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium text-right">{value}</span>
+    </div>
+  )
+}
+
+export function GrnViewSheet({ open, onClose, grn }: GrnViewSheetProps) {
+  if (!grn) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Goods Receipt Details</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col">
+          <Row label="Purchase Order" value={<span className="font-mono text-xs">{grn.purchaseOrderId}</span>} />
+          <Row label="Warehouse" value={grn.warehouseName} />
+          <Row label="Received At" value={fmtDateTime(grn.receivedAt)} />
+          <Row label="Created" value={fmtDateTime(grn.createdAt)} />
+        </div>
+
+        <Separator className="my-2" />
+
+        <div>
+          <p className="mb-2 text-sm font-medium text-foreground">Line Items</p>
+          <div className="overflow-x-auto rounded-xl border">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50">
+                <tr>
+                  <th className="px-3 py-2 text-left font-medium">Item</th>
+                  <th className="px-3 py-2 text-right font-medium">Accepted</th>
+                  <th className="px-3 py-2 text-right font-medium">Rejected</th>
+                </tr>
+              </thead>
+              <tbody>
+                {grn.items.map((item) => (
+                  <tr key={item.id} className="border-t">
+                    <td className="px-3 py-2">
+                      {item.itemName}
+                      <span className="ml-1 text-xs text-muted-foreground">({item.sku})</span>
+                    </td>
+                    <td className="px-3 py-2 text-right">{item.acceptedQuantity}</td>
+                    <td className="px-3 py-2 text-right">{item.rejectedQuantity}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}