distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheet-items-dialog.tsx

@@ -0,0 +1,292 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/toast'
+import {
+  shopPos as shopPosApi,
+  regions as regionsApi,
+  routes as routesApi,
+  warehouses as warehousesApi,
+  loadingSheets as loadingSheetsApi,
+  getApiError,
+  getPaginatedItems,
+} from '@/lib/api/index'
+import type { LoadingSheetResponse, ShopPOResponse, RegionResponse, RouteResponse, WarehouseResponse } from '@/types/api'
+import type { LoadingSheetItemInput } from '@/lib/api/operations'
+
+const ALL = '__all__'
+
+interface LoadingSheetItemsDialogProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+  sheet: LoadingSheetResponse | null
+}
+
+interface PickedLine {
+  shopPOItemId: string
+  itemId: string
+  itemName: string
+  storeName: string
+  orderedQty: number
+  remainingQty: number
+  checked: boolean
+  quantity: number
+}
+
+export function LoadingSheetItemsDialog({ open, onClose, onSuccess, sheet }: LoadingSheetItemsDialogProps) {
+  const [regionsList, setRegionsList] = useState<RegionResponse[]>([])
+  const [routesList, setRoutesList] = useState<RouteResponse[]>([])
+  const [warehousesList, setWarehousesList] = useState<WarehouseResponse[]>([])
+
+  const [regionId, setRegionId] = useState('')
+  const [routeId, setRouteId] = useState('')
+  const [warehouseId, setWarehouseId] = useState('')
+
+  const [pos, setPos] = useState<ShopPOResponse[]>([])
+  const [loading, setLoading] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [lines, setLines] = useState<Record<string, PickedLine>>({})
+
+  useEffect(() => {
+    if (!open) return
+    setRegionId('')
+    setRouteId('')
+    setWarehouseId('')
+    setPos([])
+    setLines({})
+
+    Promise.all([
+      regionsApi.list({ pageSize: 200 }),
+      warehousesApi.list({ pageSize: 200 }),
+    ])
+      .then(([regionsRes, warehousesRes]) => {
+        setRegionsList(getPaginatedItems(regionsRes))
+        setWarehousesList(getPaginatedItems(warehousesRes))
+      })
+      .catch((err) => toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' }))
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    setRouteId('')
+    routesApi.list({ regionId: regionId || undefined, pageSize: 200 })
+      .then((res) => setRoutesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load routes', description: getApiError(err), type: 'error' }))
+  }, [open, regionId])
+
+  useEffect(() => {
+    if (!open) return
+    setLoading(true)
+    shopPosApi.list({ regionId: regionId || undefined, routeId: routeId || undefined, confirmed: true, pageSize: 200 })
+      .then((res) => {
+        const items = getPaginatedItems(res).filter((po) => po.status === 'Pending' || po.status === 'PartiallyFulfilled')
+        setPos(items)
+      })
+      .catch((err) => toast.add({ title: 'Failed to load Shop POs', description: getApiError(err), type: 'error' }))
+      .finally(() => setLoading(false))
+  }, [open, regionId, routeId])
+
+  const rows = useMemo<PickedLine[]>(() => {
+    const result: PickedLine[] = []
+    for (const po of pos) {
+      for (const item of po.items) {
+        const remaining = item.quantity - item.quantityFulfilled
+        if (remaining <= 0) continue
+        result.push(
+          lines[item.id] ?? {
+            shopPOItemId: item.id,
+            itemId: item.itemId,
+            itemName: item.itemName,
+            storeName: po.storeName,
+            orderedQty: item.quantity,
+            remainingQty: remaining,
+            checked: false,
+            quantity: remaining,
+          }
+        )
+      }
+    }
+    return result
+  }, [pos, lines])
+
+  function toggleLine(line: PickedLine, checked: boolean) {
+    setLines((prev) => ({ ...prev, [line.shopPOItemId]: { ...line, checked } }))
+  }
+
+  function setLineQuantity(line: PickedLine, quantity: number) {
+    setLines((prev) => ({ ...prev, [line.shopPOItemId]: { ...line, quantity } }))
+  }
+
+  async function handleSubmit() {
+    if (!sheet) return
+    if (!warehouseId) {
+      toast.add({ title: 'Select a warehouse first', type: 'error' })
+      return
+    }
+    const selected = rows.filter((r) => (lines[r.shopPOItemId]?.checked ?? false))
+    if (selected.length === 0) {
+      toast.add({ title: 'Select at least one item', type: 'error' })
+      return
+    }
+
+    const items: LoadingSheetItemInput[] = selected.map((r) => {
+      const line = lines[r.shopPOItemId]
+      return {
+        fK_ItemId: line.itemId,
+        fK_WarehouseId: warehouseId,
+        quantity: line.quantity,
+        fK_ShopPOItemId: line.shopPOItemId,
+      }
+    })
+
+    setSubmitting(true)
+    try {
+      await loadingSheetsApi.updateItems(sheet.id, items)
+      toast.add({ title: 'Loading sheet items saved', type: 'success' })
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to save items', description: getApiError(err), type: 'error' })
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (!sheet) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Set Loading Sheet Items</DialogTitle>
+          <DialogDescription>
+            Pick items from confirmed Shop POs to load onto the vehicle for this ride. Narrow the list
+            by region/route first.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-col gap-1">
+            <label className="text-xs text-muted-foreground">Region</label>
+            <Select value={regionId || ALL} onValueChange={(v) => setRegionId(!v || v === ALL ? '' : v)}>
+              <SelectTrigger className="w-48">
+                <SelectValue placeholder="All regions" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>All regions</SelectItem>
+                {regionsList.map((r) => (
+                  <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <label className="text-xs text-muted-foreground">Route</label>
+            <Select value={routeId || ALL} onValueChange={(v) => setRouteId(!v || v === ALL ? '' : v)}>
+              <SelectTrigger className="w-48">
+                <SelectValue placeholder="All routes" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL}>All routes</SelectItem>
+                {routesList.map((r) => (
+                  <SelectItem key={r.id} value={r.id}>{r.routeName}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <label className="text-xs text-muted-foreground">Warehouse *</label>
+            <Select value={warehouseId} onValueChange={(v) => setWarehouseId(v ?? '')}>
+              <SelectTrigger className="w-52">
+                <SelectValue placeholder="Select warehouse..." />
+              </SelectTrigger>
+              <SelectContent>
+                {warehousesList.map((w) => (
+                  <SelectItem key={w.id} value={w.id}>{w.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto rounded-xl border">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50">
+              <tr>
+                <th className="w-10 px-3 py-2"></th>
+                <th className="px-3 py-2 text-left font-medium">Store</th>
+                <th className="px-3 py-2 text-left font-medium">Item</th>
+                <th className="w-24 px-3 py-2 text-right font-medium">Ordered</th>
+                <th className="w-32 px-3 py-2 text-right font-medium">Qty to load</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr><td colSpan={5} className="text-center text-muted-foreground px-3 py-6">Loading…</td></tr>
+              ) : rows.length === 0 ? (
+                <tr><td colSpan={5} className="text-center text-muted-foreground px-3 py-6">No eligible Shop PO items found for this filter.</td></tr>
+              ) : (
+                rows.map((row) => {
+                  const line = lines[row.shopPOItemId] ?? row
+                  return (
+                    <tr key={row.shopPOItemId} className="border-t">
+                      <td className="px-3 py-2">
+                        <Checkbox
+                          checked={line.checked}
+                          onCheckedChange={(v) => toggleLine(row, v === true)}
+                        />
+                      </td>
+                      <td className="px-3 py-2">{row.storeName}</td>
+                      <td className="px-3 py-2">{row.itemName}</td>
+                      <td className="px-3 py-2 text-right text-muted-foreground">{row.remainingQty}</td>
+                      <td className="px-3 py-2">
+                        <Input
+                          type="number"
+                          min={1}
+                          max={row.remainingQty}
+                          value={line.quantity}
+                          disabled={!line.checked}
+                          onChange={(e) => setLineQuantity(row, Number(e.target.value))}
+                        />
+                      </td>
+                    </tr>
+                  )
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button type="button" disabled={submitting} onClick={handleSubmit}>
+            {submitting ? 'Saving…' : 'Save Items'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

distribution_fe/app/(dashboard)/operations/loading/_components/loading-sheets-client.tsx

@@ -16,13 +16,14 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { toast } from '@/components/ui/toast'
-import { loadingSheets as loadingSheetsApi, rides as ridesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { LoadingSheetResponse, LoadingSheetStatus, RideResponse } from '@/types/api'
+import { loadingSheets as loadingSheetsApi, rides as ridesApi, regions as regionsApi, routes as routesApi, deliveryTasks as deliveryTasksApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { LoadingSheetResponse, LoadingSheetStatus, RideResponse, RegionResponse, RouteResponse } from '@/types/api'
 
 const ALL = '__all__'
 
 import { LoadingSheetViewSheet } from './loading-sheet-view-sheet'
 import { LoadingSheetCreateDialog } from './loading-sheet-create-dialog'
+import { LoadingSheetItemsDialog } from './loading-sheet-items-dialog'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -43,18 +44,35 @@ export function LoadingSheetsClient() {
 
   const [createOpen, setCreateOpen] = useState(false)
   const [viewOpen, setViewOpen] = useState(false)
+  const [itemsOpen, setItemsOpen] = useState(false)
   const [selectedSheet, setSelectedSheet] = useState<LoadingSheetResponse | null>(null)
 
   const [ridesList, setRidesList] = useState<RideResponse[]>([])
   const [rideId, setRideId] = useState('')
   const [statusFilter, setStatusFilter] = useState<LoadingSheetStatus | ''>('')
 
+  const [regionsList, setRegionsList] = useState<RegionResponse[]>([])
+  const [routesList, setRoutesList] = useState<RouteResponse[]>([])
+  const [regionId, setRegionId] = useState('')
+  const [routeId, setRouteId] = useState('')
+
   useEffect(() => {
     ridesApi.list({ pageSize: 200 })
       .then((res) => setRidesList(getPaginatedItems(res)))
       .catch((err) => toast.add({ title: 'Failed to load rides', description: getApiError(err), type: 'error' }))
+
+    regionsApi.list({ pageSize: 200 })
+      .then((res) => setRegionsList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load regions', description: getApiError(err), type: 'error' }))
   }, [])
 
+  useEffect(() => {
+    setRouteId('')
+    routesApi.list({ regionId: regionId || undefined, pageSize: 200 })
+      .then((res) => setRoutesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load routes', description: getApiError(err), type: 'error' }))
+  }, [regionId])
+
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
     try {
@@ -63,6 +81,8 @@ export function LoadingSheetsClient() {
         pageSize: ps,
         rideId: rideId || undefined,
         status: statusFilter || undefined,
+        regionId: regionId || undefined,
+        routeId: routeId || undefined,
       })
       setData(getPaginatedItems(res))
       setTotal(res.total)
@@ -71,17 +91,19 @@ export function LoadingSheetsClient() {
     } finally {
       setLoading(false)
     }
-  }, [rideId, statusFilter])
+  }, [rideId, statusFilter, regionId, routeId])
 
   useEffect(() => {
     fetchData(page, pageSize)
   }, [fetchData, page, pageSize])
 
-  const hasFilters = !!rideId || !!statusFilter
+  const hasFilters = !!rideId || !!statusFilter || !!regionId || !!routeId
 
   function clearFilters() {
     setRideId('')
     setStatusFilter('')
+    setRegionId('')
+    setRouteId('')
   }
 
   function handleView(row: LoadingSheetResponse) {
@@ -89,6 +111,11 @@ export function LoadingSheetsClient() {
     setViewOpen(true)
   }
 
+  function handleSetItems(row: LoadingSheetResponse) {
+    setSelectedSheet(row)
+    setItemsOpen(true)
+  }
+
   async function handleConfirm(row: LoadingSheetResponse) {
     try {
       await loadingSheetsApi.confirm(row.id)
@@ -99,6 +126,16 @@ export function LoadingSheetsClient() {
     }
   }
 
+  async function handleGenerateTasks(row: LoadingSheetResponse) {
+    try {
+      const tasks = await deliveryTasksApi.generate(row.fK_RideId)
+      toast.add({ title: `Generated ${tasks.length} delivery task(s)`, type: 'success' })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to generate delivery tasks', description: getApiError(err), type: 'error' })
+    }
+  }
+
   const tableConfig = useMemo<TableConfig<LoadingSheetResponse>>(() => ({
     rowKey: 'id',
     serverSide: true,
@@ -165,11 +202,23 @@ export function LoadingSheetsClient() {
           label: 'View sheet',
           onClick: handleView,
         },
+        {
+          action: 'edit',
+          label: 'Set items',
+          onClick: handleSetItems,
+          visible: (target) => target.status === 'Planned',
+        },
         {
           action: 'confirm',
           label: 'Confirm & commit stock',
           onClick: handleConfirm,
-          visible: (target) => target.status === 'Planned',
+          visible: (target) => target.status === 'Planned' && target.items.length > 0,
+        },
+        {
+          action: 'generate',
+          label: 'Generate delivery tasks',
+          onClick: handleGenerateTasks,
+          visible: (target) => target.status === 'Confirmed',
         },
       ],
     },
@@ -226,6 +275,42 @@ export function LoadingSheetsClient() {
           </Select>
         </div>
 
+        <div className="flex flex-col gap-1">
+          <label className="text-xs text-muted-foreground">Region</label>
+          <Select
+            value={regionId || ALL}
+            onValueChange={(v) => { setRegionId(!v || v === ALL ? '' : v); setPage(1) }}
+          >
+            <SelectTrigger className="w-44">
+              <SelectValue placeholder="All regions" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>All regions</SelectItem>
+              {regionsList.map((r) => (
+                <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label className="text-xs text-muted-foreground">Route</label>
+          <Select
+            value={routeId || ALL}
+            onValueChange={(v) => { setRouteId(!v || v === ALL ? '' : v); setPage(1) }}
+          >
+            <SelectTrigger className="w-44">
+              <SelectValue placeholder="All routes" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={ALL}>All routes</SelectItem>
+              {routesList.map((r) => (
+                <SelectItem key={r.id} value={r.id}>{r.routeName}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
         {hasFilters && (
           <Button variant="ghost" size="sm" onClick={() => { clearFilters(); setPage(1) }}>
             Clear filters
@@ -255,6 +340,13 @@ export function LoadingSheetsClient() {
         onClose={() => setViewOpen(false)}
         sheet={selectedSheet}
       />
+
+      <LoadingSheetItemsDialog
+        open={itemsOpen}
+        onClose={() => setItemsOpen(false)}
+        onSuccess={() => fetchData(page, pageSize)}
+        sheet={selectedSheet}
+      />
     </>
   )
 }

distribution_fe/components/shared/data-table/types.ts

@@ -12,7 +12,8 @@ export type RowActionKind =
   | 'close'
   | 'cancel'
   | 'print'
-  | 'finalize';
+  | 'finalize'
+  | 'generate';
 
 export interface BadgeConfig {
   colorMap?: Record<string, string>;

distribution_fe/components/shared/row-actions.tsx

@@ -23,6 +23,7 @@ const ACTION_ICONS = {
   deactivate: Cancel01Icon,
   edit: PencilEdit01Icon,
   finalize: CheckmarkSquare01Icon,
+  generate: CheckmarkSquare01Icon,
   print: PrinterIcon,
   view: EyeIcon,
 } as const

distribution_fe/lib/api/operations.ts

@@ -66,6 +66,8 @@ export interface LoadingSheetItemInput {
 export interface LoadingSheetListParams extends PageParams {
   rideId?: string
   status?: LoadingSheetStatus
+  routeId?: string
+  regionId?: string
 }
 
 export const loadingSheets = {
@@ -93,6 +95,9 @@ export interface DeliveryTaskItemQuantity {
 }
 
 export const deliveryTasks = {
+  generate: (rideId: string) =>
+    api.post<DeliveryTaskResponse[]>(`/rides/${rideId}/tasks/generate`).then(r => r.data),
+
   listByRide: (rideId: string) =>
     api.get<DeliveryTaskResponse[]>(`/rides/${rideId}/tasks`).then(r => r.data),
 

distribution_fe/lib/api/sales.ts

@@ -32,6 +32,7 @@ export interface UpdateShopPOItemsBody {
 export interface ShopPOListParams extends PageParams {
   agentId?: string
   routeId?: string
+  regionId?: string
   shopId?: string
   confirmed?: boolean
   status?: ShopPOStatus