diff --git a/distribution_fe/app/(dashboard)/operations/rides/_components/ride-sheet.tsx b/distribution_fe/app/(dashboard)/operations/rides/_components/ride-sheet.tsx
index 04ef51c..840f79c 100644
--- a/distribution_fe/app/(dashboard)/operations/rides/_components/ride-sheet.tsx
+++ b/distribution_fe/app/(dashboard)/operations/rides/_components/ride-sheet.tsx
@@ -29,6 +29,7 @@ import {
   routes as routesApi,
   warehouses as warehousesApi,
   getApiError,
+  getPaginatedItems,
 } from '@/lib/api/index'
 import type { VehicleResponse, DriverProfileResponse, RouteResponse, WarehouseResponse } from '@/types/api'
 
@@ -49,9 +50,6 @@ interface RideSheetProps {
   onSuccess: () => void
 }
 
-function ensureItems<T>(value: { items?: T[] } | null | undefined): T[] {
-  return Array.isArray(value?.items) ? value.items : []
-}
 
 export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
   const [vehiclesList, setVehiclesList] = useState<VehicleResponse[]>([])
@@ -91,10 +89,10 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
       warehousesApi.list({ pageSize: 200 }),
     ])
       .then(([v, d, r, w]) => {
-        setVehiclesList(ensureItems(v))
-        setDriversList(ensureItems(d))
-        setRoutesList(ensureItems(r))
-        setWarehousesList(ensureItems(w))
+        setVehiclesList(getPaginatedItems(v))
+        setDriversList(getPaginatedItems(d))
+        setRoutesList(getPaginatedItems(r))
+        setWarehousesList(getPaginatedItems(w))
       })
       .catch((err) => {
         toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
diff --git a/distribution_fe/app/(dashboard)/procurement/grn/_components/grn-client.tsx b/distribution_fe/app/(dashboard)/procurement/grn/_components/grn-client.tsx
index 821ee32..e5a69f4 100644
--- a/distribution_fe/app/(dashboard)/procurement/grn/_components/grn-client.tsx
+++ b/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)}
+      />
     </>
   )
 }
diff --git a/distribution_fe/app/(dashboard)/procurement/grn/_components/grn-sheet.tsx b/distribution_fe/app/(dashboard)/procurement/grn/_components/grn-sheet.tsx
new file mode 100644
index 0000000..e0cc8c8
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-order-sheet.tsx b/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-order-sheet.tsx
new file mode 100644
index 0000000..8e599c3
--- /dev/null
+++ b/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-order-sheet.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import { useEffect, useMemo, 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 { toast } from '@/components/ui/toast'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { Add01Icon, Delete02Icon } from '@hugeicons/core-free-icons'
+import {
+  purchaseOrders as purchaseOrdersApi,
+  suppliers as suppliersApi,
+  items as itemsApi,
+  getApiError,
+  getPaginatedItems,
+} from '@/lib/api/index'
+import type { ItemSummaryResponse, SupplierResponse } from '@/types/api'
+
+const poItemSchema = z.object({
+  itemId: z.string().min(1, 'Item is required'),
+  quantity: z.number().min(1, 'Quantity must be at least 1'),
+  unitCost: z.number().min(0.01, 'Unit cost must be greater than 0'),
+})
+
+const schema = z.object({
+  supplierId: z.string().min(1, 'Supplier is required'),
+  items: z.array(poItemSchema).min(1, 'At least one item is required'),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface PurchaseOrderSheetProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+}
+
+function defaultItem() {
+  return { itemId: '', quantity: 1, unitCost: 0 }
+}
+
+export function PurchaseOrderSheet({ open, onClose, onSuccess }: PurchaseOrderSheetProps) {
+  const [suppliersList, setSuppliersList] = useState<SupplierResponse[]>([])
+  const [itemsList, setItemsList] = useState<ItemSummaryResponse[]>([])
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { supplierId: '', items: [defaultItem()] },
+  })
+
+  const { fields, append, remove } = useFieldArray({ control: form.control, name: 'items' })
+  const watchedItems = form.watch('items')
+  const itemsById = useMemo(() => new Map(itemsList.map(i => [i.id, i])), [itemsList])
+
+  const totalCost = useMemo(
+    () => watchedItems.reduce((sum, i) => sum + (Number(i.quantity) || 0) * (Number(i.unitCost) || 0), 0),
+    [watchedItems]
+  )
+
+  useEffect(() => {
+    if (!open) return
+    form.reset({ supplierId: '', items: [defaultItem()] })
+    Promise.all([
+      suppliersApi.list({ pageSize: 200 }),
+      itemsApi.list({ pageSize: 200 }),
+    ])
+      .then(([s, it]) => {
+        setSuppliersList(getPaginatedItems(s))
+        setItemsList(getPaginatedItems(it))
+      })
+      .catch(err =>
+        toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
+      )
+  }, [open])
+
+  async function onSubmit(values: FormValues) {
+    try {
+      await purchaseOrdersApi.create(values)
+      toast.add({ title: 'Purchase order created', type: 'success' })
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to create purchase order', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={v => { if (!v) onClose() }}>
+      <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>Create Purchase Order</DialogTitle>
+          <DialogDescription>Issue a new purchase order to a supplier.</DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col gap-6">
+          <div className="grid min-h-0 gap-6 lg:grid-cols-3">
+
+            {/* Left — supplier + summary */}
+            <FieldGroup className="lg:col-span-2">
+              <FormField
+                control={form.control}
+                name="supplierId"
+                label="Supplier"
+                required
+                render={({ field }) => (
+                  <Select value={field.value as string} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select supplier..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {suppliersList.map(s => (
+                        <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+
+              <div className="rounded-2xl border p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-foreground">Order Summary</p>
+                    <p className="text-sm text-muted-foreground">{fields.length} line item{fields.length !== 1 ? 's' : ''}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-xs uppercase tracking-wide text-muted-foreground">Total Cost</p>
+                    <p className="text-lg font-semibold text-foreground">
+                      Rs.&nbsp;{totalCost.toLocaleString('en-LK', { minimumFractionDigits: 2 })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </FieldGroup>
+
+            {/* Right — scrollable items */}
+            <div className="flex min-h-0 flex-col rounded-2xl border p-4 lg:col-span-1">
+              <div className="mb-4 flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-sm font-medium text-foreground">Line Items</p>
+                  <p className="text-sm text-muted-foreground">Add items to order</p>
+                </div>
+                <Button type="button" variant="outline" size="sm" onClick={() => append(defaultItem())}>
+                  <HugeiconsIcon icon={Add01Icon} size={14} strokeWidth={2} />
+                  Add
+                </Button>
+              </div>
+
+              <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">
+                {fields.map((f, index) => {
+                  const selected = itemsById.get(watchedItems[index]?.itemId ?? '')
+                  return (
+                    <div key={f.id} className="space-y-3 rounded-2xl border p-4">
+                      <FormField
+                        control={form.control}
+                        name={`items.${index}.itemId`}
+                        label="Item"
+                        required
+                        render={({ field }) => (
+                          <Select
+                            value={field.value as string}
+                            onValueChange={val => {
+                              field.onChange(val ?? '')
+                              const item = val ? itemsById.get(val) : undefined
+                              if (item) form.setValue(`items.${index}.unitCost`, item.salePrice, { shouldValidate: true })
+                            }}
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select item..." />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {itemsList.map(i => (
+                                <SelectItem key={i.id} value={i.id}>{i.name} — {i.sku}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        )}
+                      />
+
+                      <div className="grid gap-3 sm:grid-cols-2">
+                        <FormField
+                          control={form.control}
+                          name={`items.${index}.quantity`}
+                          label="Qty"
+                          required
+                          render={({ field, invalid }) => (
+                            <Input
+                              type="number"
+                              min={1}
+                              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}.unitCost`}
+                          label="Unit Cost"
+                          required
+                          render={({ field, invalid }) => (
+                            <Input
+                              type="number"
+                              min={0.01}
+                              step="0.01"
+                              value={Number(field.value as number)}
+                              onChange={e => field.onChange(Number(e.target.value))}
+                              onBlur={field.onBlur}
+                              aria-invalid={invalid}
+                            />
+                          )}
+                        />
+                      </div>
+
+                      {selected && (
+                        <p className="text-xs text-muted-foreground">UOM: {selected.baseUomName}</p>
+                      )}
+
+                      {fields.length > 1 && (
+                        <div className="flex justify-end">
+                          <Button type="button" variant="outline" size="sm" onClick={() => remove(index)}>
+                            <HugeiconsIcon icon={Delete02Icon} size={14} strokeWidth={2} />
+                            Remove
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Creating…' : 'Create Order'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-orders-client.tsx b/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-orders-client.tsx
index 26ad5a9..eefdbe8 100644
--- a/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-orders-client.tsx
+++ b/distribution_fe/app/(dashboard)/procurement/orders/_components/purchase-orders-client.tsx
@@ -1,12 +1,16 @@
 '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 { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/toast'
 import { purchaseOrders as purchaseOrdersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { PurchaseOrderResponse, PurchaseOrderStatus } from '@/types/api'
+import { PurchaseOrderSheet } from './purchase-order-sheet'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -27,6 +31,7 @@ export function PurchaseOrdersClient() {
   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)
@@ -130,6 +135,10 @@ export function PurchaseOrdersClient() {
             Orders placed with suppliers to restock inventory
           </p>
         </div>
+        <Button onClick={() => setSheetOpen(true)}>
+          <HugeiconsIcon icon={Add01Icon} size={16} strokeWidth={2} />
+          New Order
+        </Button>
       </div>
 
       <DataTable
@@ -142,6 +151,12 @@ export function PurchaseOrdersClient() {
           setPageSize(p.pageSize)
         }}
       />
+
+      <PurchaseOrderSheet
+        open={sheetOpen}
+        onClose={() => setSheetOpen(false)}
+        onSuccess={() => fetchData(page, pageSize)}
+      />
     </>
   )
 }
diff --git a/distribution_fe/app/(dashboard)/sales/_components/sale-sheet.tsx b/distribution_fe/app/(dashboard)/sales/_components/sale-sheet.tsx
index 5451b75..c696c20 100644
--- a/distribution_fe/app/(dashboard)/sales/_components/sale-sheet.tsx
+++ b/distribution_fe/app/(dashboard)/sales/_components/sale-sheet.tsx
@@ -30,6 +30,7 @@ import {
   rides as ridesApi,
   items as itemsApi,
   getApiError,
+  getPaginatedItems,
 } from '@/lib/api/index'
 import type { ItemSummaryResponse, RideResponse, StoreResponse } from '@/types/api'
 
@@ -54,9 +55,6 @@ interface SaleSheetProps {
   onSuccess: () => void
 }
 
-function ensureItems<T>(value: { items?: T[] } | null | undefined): T[] {
-  return Array.isArray(value?.items) ? value.items : []
-}
 
 function createDefaultItem() {
   return {
@@ -112,9 +110,9 @@ export function SaleSheet({ open, onClose, onSuccess }: SaleSheetProps) {
       itemsApi.list({ pageSize: 200 }),
     ])
       .then(([stores, rides, items]) => {
-        setStoresList(ensureItems(stores))
-        setRidesList(ensureItems(rides))
-        setItemsList(ensureItems(items))
+        setStoresList(getPaginatedItems(stores))
+        setRidesList(getPaginatedItems(rides))
+        setItemsList(getPaginatedItems(items))
       })
       .catch((err) => {
         toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
diff --git a/distribution_fe/app/(dashboard)/stores/_components/store-sheet.tsx b/distribution_fe/app/(dashboard)/stores/_components/store-sheet.tsx
index 96d17dc..d51fbf2 100644
--- a/distribution_fe/app/(dashboard)/stores/_components/store-sheet.tsx
+++ b/distribution_fe/app/(dashboard)/stores/_components/store-sheet.tsx
@@ -23,7 +23,7 @@ import {
 } from '@/components/ui/dialog'
 import { FieldGroup } from '@/components/ui/field'
 import { toast } from '@/components/ui/toast'
-import { stores as storesApi, routes as routesApi, getApiError } from '@/lib/api/index'
+import { stores as storesApi, routes as routesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { StoreResponse, RouteResponse } from '@/types/api'
 
 const schema = z.object({
@@ -47,9 +47,6 @@ interface StoreSheetProps {
   onSuccess: () => void
 }
 
-function ensureItems<T>(value: { items?: T[] } | null | undefined): T[] {
-  return Array.isArray(value?.items) ? value.items : []
-}
 
 export function StoreSheet({ open, onClose, store, onSuccess }: StoreSheetProps) {
   const isEdit = !!store
@@ -72,7 +69,7 @@ export function StoreSheet({ open, onClose, store, onSuccess }: StoreSheetProps)
 
   useEffect(() => {
     if (open) {
-      routesApi.list({ pageSize: 100 }).then((res) => setRoutes(ensureItems(res))).catch((err) =>
+      routesApi.list({ pageSize: 100 }).then((res) => setRoutes(getPaginatedItems(res))).catch((err) =>
         toast.add({ title: 'Failed to load routes', description: getApiError(err), type: 'error' })
       )