name: CI/CD - ERP Core Monorepo

on:
  pull_request:
    branches:
      - production
    types:
      - closed

jobs:
  backend-build-and-deploy:
    name: Build & Deploy ERP Core Backend
    runs-on: linux
    if: github.event.pull_request.merged == true
    steps:
      - name: Checkout code
        run: |
          git clone \
            --depth 1 \
            --branch production \
            https://oauth2:${{ secrets.ERPCORE }}@gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git \
            .

      - name: Restore backend
        run: dotnet restore Backend/ERPCore.sln

      - name: Publish backend
        run: |
          rm -rf /tmp/erpcore-deploy
          mkdir -p /tmp/erpcore-deploy
          dotnet publish Backend/ERPCore/ERPCore.csproj \
            -c Release \
            -r linux-x64 \
            --self-contained true \
            -o /tmp/erpcore-deploy

      - name: Stop backend service
        run: systemctl stop erpcore.service

      - name: Copy backend to deploy folder
        run: |
          mkdir -p /home/erp/core/publish
          rm -rf /home/erp/core/publish/*
          cp -r /tmp/erpcore-deploy/* /home/erp/core/publish/

      - name: Fix backend ownership and permissions
        run: |
          chown -R erpuser:erpuser /home/erp/core/publish
          find /home/erp/core/publish -type d -exec chmod 755 {} +
          find /home/erp/core/publish -type f -exec chmod 644 {} +
          chmod +x /home/erp/core/publish/ERPCore

      - name: Restart backend service
        run: systemctl restart erpcore.service

      - name: Verify backend
        run: |
          systemctl is-active erpcore.service && echo "Backend service running" || echo "Backend service failed"

  frontend-build-and-deploy:
    name: Build & Deploy ERP Core Frontend
    runs-on: linux
    needs: backend-build-and-deploy
    if: github.event.pull_request.merged == true
    steps:
      - name: Checkout code
        run: |
          git clone \
            --depth 1 \
            --branch Production \
            https://oauth2:${{ secrets.ERPCORE }}@gitea.hexdive.com/New_REP_SYSTEM/ERP-core.git \
            .

      - name: Build frontend Docker image
        run: docker build -t erpcore-frontend:latest Frontend/erp-system

      - name: Stop & remove existing frontend container
        run: |
          docker stop erpcore-frontend 2>/dev/null || true
          docker rm erpcore-frontend 2>/dev/null || true

      - name: Start frontend container
        run: |
          docker run -d \
            --name erpcore-frontend \
            -p 6702:6702 \
            --add-host=host.docker.internal:host-gateway \
            -e BACKEND_ORIGIN=http://host.docker.internal:6701 \
            --restart unless-stopped \
            --memory="512m" \
            --cpus="1.0" \
            --cap-drop ALL \
            --security-opt no-new-privileges \
            erpcore-frontend:latest

      - name: Remove old frontend images
        run: docker image prune -f

      - name: Verify frontend
        run: |
          docker ps --filter name=erpcore-frontend --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}" \
            | grep erpcore-frontend && echo "Frontend container running" || echo "Frontend container failed"

distribution_fe/app/(dashboard)/operations/deliveries/_components/delivery-tasks-client.tsx

@@ -51,7 +51,7 @@ export function DeliveryTasksClient() {
 
   const fetchRides = useCallback(async () => {
     try {
-      const res = await ridesApi.list({ page: 1, pageSize: 200, rideType: 'Delivery' })
+      const res = await ridesApi.list({ page: 1, pageSize: 200 })
       const items = getPaginatedItems(res)
       setRides(items)
       setSelectedRideId((current) => current || items[0]?.id || '')
@@ -188,7 +188,7 @@ export function DeliveryTasksClient() {
               <SelectItem value="__none__" disabled={rides.length > 0}>Select a ride...</SelectItem>
               {rides.map((ride) => (
                 <SelectItem key={ride.id} value={ride.id}>
-                  {ride.routeName} - {ride.vehicleNumberPlate}
+                  {ride.vehicleNumberPlate} — {ride.driverFullName}
                 </SelectItem>
               ))}
             </SelectContent>

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

@@ -0,0 +1,113 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useForm, zodResolver, z } from '@/lib/form'
+import { FormField } from '@/components/shared/form-field'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { FieldGroup } from '@/components/ui/field'
+import { toast } from '@/components/ui/toast'
+import { loadingSheets as loadingSheetsApi, rides as ridesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { RideResponse } from '@/types/api'
+
+const schema = z.object({
+  fK_RideId: z.string().min(1, 'Ride is required'),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface LoadingSheetCreateDialogProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+}
+
+export function LoadingSheetCreateDialog({ open, onClose, onSuccess }: LoadingSheetCreateDialogProps) {
+  const [ridesList, setRidesList] = useState<RideResponse[]>([])
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { fK_RideId: '' },
+  })
+
+  useEffect(() => {
+    if (!open) return
+    form.reset({ fK_RideId: '' })
+    ridesApi.list({ status: 'Open', pageSize: 200 })
+      .then((res) => setRidesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load rides', description: getApiError(err), type: 'error' }))
+  }, [open])
+
+  async function onSubmit(values: FormValues) {
+    try {
+      await loadingSheetsApi.create(values)
+      toast.add({ title: 'Loading sheet created', type: 'success' })
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to create loading sheet', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>New Loading Sheet</DialogTitle>
+          <DialogDescription>
+            Create a loading sheet for an open ride. Only one planned sheet per ride is allowed.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+          <FieldGroup>
+            <FormField
+              control={form.control}
+              name="fK_RideId"
+              label="Ride"
+              required
+              render={({ field }) => (
+                <Select value={field.value as string} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select open ride..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="" disabled>Select open ride...</SelectItem>
+                    {ridesList.map((r) => (
+                      <SelectItem key={r.id} value={r.id}>
+                        {r.vehicleNumberPlate} — {r.driverFullName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          </FieldGroup>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Creating…' : 'Create Sheet'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -11,11 +11,8 @@ import { Separator } from '@/components/ui/separator'
 import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api'
 
 const LS_STATUS_VARIANT: Record<LoadingSheetStatus, 'default' | 'secondary' | 'destructive'> = {
-  Pending: 'secondary',
-  DispatchConfirmed: 'default',
-  ReceiptConfirmed: 'default',
-  DiscrepancyFlagged: 'destructive',
-  Resolved: 'secondary',
+  Planned: 'secondary',
+  Confirmed: 'default',
 }
 
 const fmtDateTime = (v: string | null) =>
@@ -25,6 +22,8 @@ const fmtDateTime = (v: string | null) =>
       })
     : '—'
 
+const truncId = (id: string) => id.substring(0, 8)
+
 interface LoadingSheetViewSheetProps {
   open: boolean
   onClose: () => void
@@ -51,13 +50,12 @@ export function LoadingSheetViewSheet({ open, onClose, sheet }: LoadingSheetView
         </DialogHeader>
 
         <div className="flex flex-col">
-          <Row label="Sheet ID" value={<span className="font-mono">{sheet.id.substring(0, 8)}</span>} />
-          <Row label="Warehouse" value={sheet.warehouseName} />
+          <Row label="Sheet ID" value={<span className="font-mono">{truncId(sheet.id)}</span>} />
+          <Row label="Ride ID" value={<span className="font-mono">{truncId(sheet.fK_RideId)}</span>} />
           <Row label="Status" value={<Badge variant={LS_STATUS_VARIANT[sheet.status]}>{sheet.status}</Badge>} />
-          <Row label="Dispatch Confirmed By" value={sheet.dispatchConfirmedBy ?? '—'} />
-          <Row label="Dispatch Confirmed At" value={fmtDateTime(sheet.dispatchConfirmedAt)} />
-          <Row label="Receipt Confirmed By" value={sheet.receiptConfirmedBy ?? '—'} />
-          <Row label="Receipt Confirmed At" value={fmtDateTime(sheet.receiptConfirmedAt)} />
+          <Row label="Populated At" value={fmtDateTime(sheet.populatedAt)} />
+          <Row label="Confirmed At" value={fmtDateTime(sheet.confirmedAt)} />
+          <Row label="Source POs" value={sheet.orders.length > 0 ? sheet.orders.map(o => truncId(o.shopPOId)).join(', ') : '—'} />
           <Row label="Created At" value={fmtDateTime(sheet.createdAt)} />
         </div>
 
@@ -70,15 +68,14 @@ export function LoadingSheetViewSheet({ open, onClose, sheet }: LoadingSheetView
               <thead className="bg-muted/50">
                 <tr>
                   <th className="text-left font-medium px-3 py-2">Item</th>
-                  <th className="text-right font-medium px-3 py-2">Dispatched</th>
-                  <th className="text-right font-medium px-3 py-2">Received</th>
-                  <th className="text-right font-medium px-3 py-2">Resolved</th>
+                  <th className="text-left font-medium px-3 py-2">Warehouse</th>
+                  <th className="text-right font-medium px-3 py-2">Qty</th>
                 </tr>
               </thead>
               <tbody>
                 {sheet.items.length === 0 ? (
                   <tr>
-                    <td colSpan={4} className="text-center text-muted-foreground px-3 py-4">
+                    <td colSpan={3} className="text-center text-muted-foreground px-3 py-4">
                       No items on this sheet.
                     </td>
                   </tr>
@@ -86,9 +83,8 @@ export function LoadingSheetViewSheet({ open, onClose, sheet }: LoadingSheetView
                   sheet.items.map((item) => (
                     <tr key={item.id} className="border-t">
                       <td className="px-3 py-2">{item.itemName}</td>
+                      <td className="px-3 py-2 text-muted-foreground">{item.warehouseName}</td>
                       <td className="text-right px-3 py-2">{item.quantityDispatched}</td>
-                      <td className="text-right px-3 py-2">{item.quantityReceived}</td>
-                      <td className="text-right px-3 py-2">{item.quantityResolved}</td>
                     </tr>
                   ))
                 )}

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

@@ -1,14 +1,19 @@
 '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 { loadingSheets as loadingSheetsApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api'
 
 import { LoadingSheetViewSheet } from './loading-sheet-view-sheet'
+import { LoadingSheetCreateDialog } from './loading-sheet-create-dialog'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -16,11 +21,8 @@ const fmtDate = (v: string) =>
 const truncId = (id: string) => id.substring(0, 8)
 
 const LS_STATUS_VARIANT: Record<LoadingSheetStatus, 'default' | 'secondary' | 'destructive'> = {
-  Pending: 'secondary',
-  DispatchConfirmed: 'default',
-  ReceiptConfirmed: 'default',
-  DiscrepancyFlagged: 'destructive',
-  Resolved: 'secondary',
+  Planned: 'secondary',
+  Confirmed: 'default',
 }
 
 export function LoadingSheetsClient() {
@@ -30,6 +32,7 @@ export function LoadingSheetsClient() {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
 
+  const [createOpen, setCreateOpen] = useState(false)
   const [viewOpen, setViewOpen] = useState(false)
   const [selectedSheet, setSelectedSheet] = useState<LoadingSheetResponse | null>(null)
 
@@ -55,23 +58,13 @@ export function LoadingSheetsClient() {
     setViewOpen(true)
   }
 
-  async function handleConfirmDispatch(row: LoadingSheetResponse) {
+  async function handleConfirm(row: LoadingSheetResponse) {
     try {
-      await loadingSheetsApi.confirmDispatch(row.id)
-      toast.add({ title: 'Dispatch confirmed', type: 'success' })
+      await loadingSheetsApi.confirm(row.id)
+      toast.add({ title: 'Loading sheet confirmed — stock committed to vehicle', type: 'success' })
       fetchData(page, pageSize)
     } catch (err) {
-      toast.add({ title: 'Failed to confirm dispatch', description: getApiError(err), type: 'error' })
-    }
-  }
-
-  async function handleConfirmReceipt(row: LoadingSheetResponse) {
-    try {
-      await loadingSheetsApi.confirmReceipt(row.id, [])
-      toast.add({ title: 'Receipt confirmed', type: 'success' })
-      fetchData(page, pageSize)
-    } catch (err) {
-      toast.add({ title: 'Failed to confirm receipt', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to confirm loading sheet', description: getApiError(err), type: 'error' })
     }
   }
 
@@ -92,33 +85,45 @@ export function LoadingSheetsClient() {
         ),
       },
       {
-        key: 'warehouseName',
-        title: 'Warehouse',
-        fields: [{ key: 'warehouseName', primary: true }],
-        minWidth: 180,
+        key: 'rideId',
+        title: 'Ride',
+        fields: ['fK_RideId'],
+        width: 140,
+        cellRender: (row) => (
+          <span className="font-mono text-sm text-muted-foreground">{truncId(row.fK_RideId)}</span>
+        ),
       },
       {
         key: 'status',
         title: 'Status',
         fields: ['status'],
-        width: 180,
+        width: 140,
         cellRender: (row) => (
           <Badge variant={LS_STATUS_VARIANT[row.status]}>{row.status}</Badge>
         ),
       },
+      {
+        key: 'orders',
+        title: 'POs',
+        fields: ['orders'],
+        width: 80,
+        cellRender: (row) => (
+          <span className="text-sm text-muted-foreground">{row.orders.length}</span>
+        ),
+      },
       {
         key: 'itemCount',
         title: 'Items',
         fields: ['items'],
-        width: 120,
+        width: 80,
         cellRender: (row) => (
-          <span className="text-sm text-muted-foreground">{row.items.length} items</span>
+          <span className="text-sm text-muted-foreground">{row.items.length}</span>
         ),
       },
       {
-        key: 'createdAt',
-        title: 'Created',
-        fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
+        key: 'populatedAt',
+        title: 'Populated',
+        fields: [{ key: 'populatedAt', transform: (v) => fmtDate(v as string) }],
         width: 140,
       },
     ],
@@ -131,15 +136,9 @@ export function LoadingSheetsClient() {
         },
         {
           action: 'confirm',
-          label: 'Confirm dispatch',
-          onClick: handleConfirmDispatch,
-          visible: (target) => target.status === 'Pending',
-        },
-        {
-          action: 'confirm',
-          label: 'Confirm receipt',
-          onClick: handleConfirmReceipt,
-          visible: (target) => target.status === 'DispatchConfirmed',
+          label: 'Confirm & commit stock',
+          onClick: handleConfirm,
+          visible: (target) => target.status === 'Planned',
         },
       ],
     },
@@ -151,9 +150,13 @@ export function LoadingSheetsClient() {
         <div>
           <h1 className="text-2xl font-semibold text-foreground">Loading Sheets</h1>
           <p className="text-sm text-muted-foreground mt-0.5">
-            Track goods loaded onto a vehicle before dispatch
+            Items loaded onto a vehicle before a delivery run
           </p>
         </div>
+        <Button onClick={() => setCreateOpen(true)}>
+          <HugeiconsIcon icon={Add01Icon} size={16} />
+          New Sheet
+        </Button>
       </div>
 
       <DataTable
@@ -167,6 +170,12 @@ export function LoadingSheetsClient() {
         }}
       />
 
+      <LoadingSheetCreateDialog
+        open={createOpen}
+        onClose={() => setCreateOpen(false)}
+        onSuccess={() => fetchData(page, pageSize)}
+      />
+
       <LoadingSheetViewSheet
         open={viewOpen}
         onClose={() => setViewOpen(false)}

distribution_fe/app/(dashboard)/operations/rides/_components/ride-cancel-dialog.tsx

@@ -57,12 +57,12 @@ export function RideCancelDialog({ open, onClose, onSuccess, ride }: RideCancelD
 
   async function onSubmit(values: FormValues) {
     try {
-      await ridesApi.cancelRequests.raise(ride!.id, values)
-      toast.add({ title: 'Cancel request raised', type: 'success' })
+      await ridesApi.cancel(ride!.id, values)
+      toast.add({ title: 'Ride cancelled', type: 'success' })
       onSuccess()
       onClose()
     } catch (err) {
-      toast.add({ title: 'Failed to raise cancel request', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to cancel ride', description: getApiError(err), type: 'error' })
     }
   }
 
@@ -72,7 +72,7 @@ export function RideCancelDialog({ open, onClose, onSuccess, ride }: RideCancelD
         <DialogHeader>
           <DialogTitle>Cancel Ride</DialogTitle>
           <DialogDescription>
-            Raises a cancel request for this ride, subject to supervisor approval.
+            Cancelling this ride is immediate and cannot be undone.
           </DialogDescription>
         </DialogHeader>
 
@@ -122,7 +122,7 @@ export function RideCancelDialog({ open, onClose, onSuccess, ride }: RideCancelD
               Back
             </Button>
             <Button type="submit" variant="destructive" disabled={form.formState.isSubmitting}>
-              {form.formState.isSubmitting ? 'Submitting…' : 'Raise Cancel Request'}
+              {form.formState.isSubmitting ? 'Cancelling…' : 'Cancel Ride'}
             </Button>
           </DialogFooter>
         </form>

distribution_fe/app/(dashboard)/operations/rides/_components/ride-edit-driver-sheet.tsx

@@ -72,7 +72,7 @@ export function RideEditDriverSheet({ open, onClose, onSuccess, ride }: RideEdit
         <DialogHeader>
           <DialogTitle>Edit Ride Driver</DialogTitle>
           <DialogDescription>
-            Reassign the driver for this ride. Only available while the ride is in Draft status.
+            Reassign the driver for this ride. Only available while the ride is Open.
           </DialogDescription>
         </DialogHeader>
 

distribution_fe/app/(dashboard)/operations/rides/_components/ride-sheet.tsx

@@ -26,19 +26,14 @@ import {
   rides as ridesApi,
   vehicles as vehiclesApi,
   drivers as driversApi,
-  routes as routesApi,
-  warehouses as warehousesApi,
   getApiError,
   getPaginatedItems,
 } from '@/lib/api/index'
-import type { VehicleResponse, DriverProfileResponse, RouteResponse, WarehouseResponse } from '@/types/api'
+import type { VehicleResponse, DriverProfileResponse } from '@/types/api'
 
 const schema = z.object({
-  rideType: z.enum(['Delivery', 'Sale']),
   vehicleId: z.string().min(1, 'Vehicle is required'),
   driverProfileId: z.string().min(1, 'Driver is required'),
-  routeId: z.string().min(1, 'Route is required'),
-  sourceWarehouseId: z.string().min(1, 'Warehouse is required'),
   meterstart: z.number().min(0, 'Meter start must be 0 or more'),
 })
 
@@ -50,21 +45,15 @@ interface RideSheetProps {
   onSuccess: () => void
 }
 
-
 export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
   const [vehiclesList, setVehiclesList] = useState<VehicleResponse[]>([])
   const [driversList, setDriversList] = useState<DriverProfileResponse[]>([])
-  const [routesList, setRoutesList] = useState<RouteResponse[]>([])
-  const [warehousesList, setWarehousesList] = useState<WarehouseResponse[]>([])
 
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: {
-      rideType: 'Delivery',
       vehicleId: '',
       driverProfileId: '',
-      routeId: '',
-      sourceWarehouseId: '',
       meterstart: 0,
     },
   })
@@ -73,26 +62,18 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
     if (!open) return
 
     form.reset({
-      rideType: 'Delivery',
       vehicleId: '',
       driverProfileId: '',
-      routeId: '',
-      sourceWarehouseId: '',
       meterstart: 0,
     })
 
-    // available=true tells backend to exclude vehicles already on an open ride
     Promise.all([
       vehiclesApi.list({ available: true, isActive: true, pageSize: 200 }),
       driversApi.list({ pageSize: 200 }),
-      routesApi.list({ pageSize: 200 }),
-      warehousesApi.list({ pageSize: 200 }),
     ])
-      .then(([v, d, r, w]) => {
+      .then(([v, d]) => {
         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' })
@@ -115,30 +96,11 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
       <DialogContent className="overflow-y-auto sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>Create Ride</DialogTitle>
-          <DialogDescription>Start a new delivery or sales run.</DialogDescription>
+          <DialogDescription>Start a new delivery run for a driver and vehicle.</DialogDescription>
         </DialogHeader>
 
         <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
           <FieldGroup>
-            <FormField
-              control={form.control}
-              name="rideType"
-              label="Ride Type"
-              required
-              render={({ field }) => (
-                <Select value={field.value as string} onValueChange={field.onChange}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select ride type..." />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="" disabled>Select ride type...</SelectItem>
-                    <SelectItem value="Delivery">Delivery</SelectItem>
-                    <SelectItem value="Sale">Sale</SelectItem>
-                  </SelectContent>
-                </Select>
-              )}
-            />
-
             <FormField
               control={form.control}
               name="vehicleId"
@@ -183,50 +145,6 @@ export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="routeId"
-              label="Route"
-              required
-              render={({ field }) => (
-                <Select value={field.value as string} onValueChange={field.onChange}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select route..." />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="" disabled>Select route...</SelectItem>
-                    {routesList.map((r) => (
-                      <SelectItem key={r.id} value={r.id}>
-                        {r.routeName} ({r.startPoint} → {r.endPoint})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="sourceWarehouseId"
-              label="Source Warehouse"
-              required
-              render={({ field }) => (
-                <Select value={field.value as string} onValueChange={field.onChange}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select warehouse..." />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="" disabled>Select warehouse...</SelectItem>
-                    {warehousesList.map((w) => (
-                      <SelectItem key={w.id} value={w.id}>
-                        {w.name} — {w.location}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            />
-
             <FormField
               control={form.control}
               name="meterstart"

distribution_fe/app/(dashboard)/operations/rides/_components/ride-view-sheet.tsx

@@ -7,22 +7,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import type { RideResponse, RideStatus, RideType } from '@/types/api'
+import type { RideResponse, RideStatus } from '@/types/api'
 
 const RIDE_STATUS_VARIANT: Record<RideStatus, 'default' | 'secondary' | 'destructive'> = {
-  Draft: 'secondary',
-  Open: 'secondary',
-  Active: 'default',
-  CancelRequested: 'destructive',
+  Open: 'default',
   Cancelled: 'destructive',
   Closed: 'secondary',
 }
 
-const RIDE_TYPE_VARIANT: Record<RideType, 'default' | 'secondary'> = {
-  Delivery: 'default',
-  Sale: 'secondary',
-}
-
 const fmtDateTime = (v: string | null) =>
   v
     ? new Date(v).toLocaleString('en-GB', {
@@ -58,14 +50,10 @@ export function RideViewSheet({ open, onClose, ride }: RideViewSheetProps) {
         <div className="flex flex-col">
           <Row label="Vehicle" value={ride.vehicleNumberPlate} />
           <Row label="Driver" value={ride.driverFullName} />
-          <Row label="Route" value={ride.routeName} />
-          <Row label="Source Warehouse" value={ride.sourceWarehouseName} />
-          <Row label="Type" value={<Badge variant={RIDE_TYPE_VARIANT[ride.rideType]}>{ride.rideType}</Badge>} />
           <Row label="Status" value={<Badge variant={RIDE_STATUS_VARIANT[ride.status]}>{ride.status}</Badge>} />
-          <Row label="Meter Start" value={ride.meterstart} />
-          <Row label="Meter End" value={ride.meterend || '—'} />
+          <Row label="Meter Start" value={`${ride.meterstart} km`} />
+          <Row label="Meter End" value={ride.meterend ? `${ride.meterend} km` : '—'} />
           <Row label="Started At" value={fmtDateTime(ride.startedAt)} />
-          <Row label="Activated At" value={fmtDateTime(ride.activatedAt)} />
           <Row label="Closed At" value={fmtDateTime(ride.closedAt)} />
           <Row label="Created At" value={fmtDateTime(ride.createdAt)} />
         </div>

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

@@ -10,7 +10,7 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/toast'
 import { rides as ridesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { RideResponse, RideStatus, RideType } from '@/types/api'
+import type { RideResponse, RideStatus } from '@/types/api'
 
 import { RideSheet } from './ride-sheet'
 import { RideViewSheet } from './ride-view-sheet'
@@ -22,19 +22,11 @@ const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
 
 const RIDE_STATUS_VARIANT: Record<RideStatus, 'default' | 'secondary' | 'destructive'> = {
-  Draft: 'secondary',
-  Open: 'secondary',
-  Active: 'default',
-  CancelRequested: 'destructive',
+  Open: 'default',
   Cancelled: 'destructive',
   Closed: 'secondary',
 }
 
-const RIDE_TYPE_VARIANT: Record<RideType, 'default' | 'secondary'> = {
-  Delivery: 'default',
-  Sale: 'secondary',
-}
-
 export function RidesClient() {
   const [data, setData] = useState<RideResponse[]>([])
   const [loading, setLoading] = useState(true)
@@ -81,16 +73,6 @@ export function RidesClient() {
     setCancelOpen(true)
   }
 
-  async function handleActivate(row: RideResponse) {
-    try {
-      await ridesApi.activate(row.id)
-      toast.add({ title: 'Ride activated', type: 'success' })
-      fetchData(page, pageSize)
-    } catch (err) {
-      toast.add({ title: 'Failed to activate ride', description: getApiError(err), type: 'error' })
-    }
-  }
-
   function handleClose(row: RideResponse) {
     setSelectedRide(row)
     setCloseOpen(true)
@@ -115,30 +97,29 @@ export function RidesClient() {
           </div>
         ),
       },
-      {
-        key: 'routeName',
-        title: 'Route',
-        fields: [{ key: 'routeName', primary: true }],
-        minWidth: 160,
-      },
-      {
-        key: 'rideType',
-        title: 'Type',
-        fields: ['rideType'],
-        width: 120,
-        cellRender: (row) => (
-          <Badge variant={RIDE_TYPE_VARIANT[row.rideType]}>{row.rideType}</Badge>
-        ),
-      },
       {
         key: 'status',
         title: 'Status',
         fields: ['status'],
-        width: 160,
+        width: 140,
         cellRender: (row) => (
           <Badge variant={RIDE_STATUS_VARIANT[row.status]}>{row.status}</Badge>
         ),
       },
+      {
+        key: 'meter',
+        title: 'Meter',
+        fields: ['meterstart', 'meterend'],
+        width: 160,
+        cellRender: (row) => (
+          <div>
+            <p className="text-sm">{row.meterstart} km</p>
+            {row.meterend ? (
+              <p className="text-xs text-muted-foreground">→ {row.meterend} km</p>
+            ) : null}
+          </div>
+        ),
+      },
       {
         key: 'createdAt',
         title: 'Created',
@@ -157,25 +138,19 @@ export function RidesClient() {
           action: 'edit',
           label: 'Edit driver',
           onClick: handleEditDriver,
-          visible: (target) => target.status === 'Draft',
-        },
-        {
-          action: 'activate',
-          label: 'Activate ride',
-          onClick: handleActivate,
           visible: (target) => target.status === 'Open',
         },
         {
           action: 'close',
           label: 'Close ride',
           onClick: handleClose,
-          visible: (target) => target.status === 'Active',
+          visible: (target) => target.status === 'Open',
         },
         {
           action: 'cancel',
           label: 'Cancel ride',
           onClick: handleCancel,
-          visible: (target) => target.status === 'Active',
+          visible: (target) => target.status === 'Open',
         },
       ],
     },
@@ -192,7 +167,7 @@ export function RidesClient() {
         </div>
         <Button onClick={() => setSheetOpen(true)}>
           <HugeiconsIcon icon={Add01Icon} size={16} />
-          Add Ride
+          New Ride
         </Button>
       </div>
 

distribution_fe/app/(dashboard)/returns-claims/order-returns/_components/order-return-dialog.tsx

@@ -27,14 +27,13 @@ import { HugeiconsIcon } from '@hugeicons/react'
 import { Add01Icon, Delete02Icon } from '@hugeicons/core-free-icons'
 import {
   saleReturns as saleReturnsApi,
-  orders as ordersApi,
-  stores as storesApi,
+  shopPos as shopPosApi,
   items as itemsApi,
   users as usersApi,
   getApiError,
   getPaginatedItems,
 } from '@/lib/api/index'
-import type { OrderResponse, ItemSummaryResponse, UserResponse, ReturnReasonCode } from '@/types/api'
+import type { ShopPOResponse, ItemSummaryResponse, UserResponse, ReturnReasonCode } from '@/types/api'
 
 const REASON_CODES: ReturnReasonCode[] = ['Expired', 'Damaged', 'OrderError', 'Other']
 
@@ -45,7 +44,7 @@ const returnItemSchema = z.object({
 })
 
 const schema = z.object({
-  orderId: z.string().min(1, 'Order is required'),
+  shopPOId: z.string().min(1, 'Shop PO is required'),
   mode: z.enum(['CreditDeduction', 'ItemExchange']),
   createdByUserId: z.string().min(1, 'Created by is required'),
   items: z.array(returnItemSchema).min(1, 'At least one item is required'),
@@ -64,58 +63,55 @@ function defaultItem() {
 }
 
 export function OrderReturnDialog({ open, onClose, onSuccess }: OrderReturnDialogProps) {
-  const [ordersList, setOrdersList] = useState<OrderResponse[]>([])
-  const [storeNameById, setStoreNameById] = useState<Map<string, string>>(new Map())
+  const [shopPOList, setShopPOList] = useState<ShopPOResponse[]>([])
   const [itemsList, setItemsList] = useState<ItemSummaryResponse[]>([])
   const [usersList, setUsersList] = useState<UserResponse[]>([])
-  const [selectedOrder, setSelectedOrder] = useState<OrderResponse | null>(null)
+  const [selectedPO, setSelectedPO] = useState<ShopPOResponse | null>(null)
 
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: { orderId: '', mode: 'CreditDeduction', createdByUserId: '', items: [defaultItem()] },
+    defaultValues: { shopPOId: '', mode: 'CreditDeduction', createdByUserId: '', items: [defaultItem()] },
   })
 
   const { fields, append, remove } = useFieldArray({ control: form.control, name: 'items' })
   const itemsById = useMemo(() => new Map(itemsList.map((i) => [i.id, i])), [itemsList])
 
-  const eligibleOrders = useMemo(
-    () => ordersList.filter((o) => o.status !== 'Cancelled' && o.status !== 'Fulfilled'),
-    [ordersList]
+  const eligiblePOs = useMemo(
+    () => shopPOList.filter((o) => o.status !== 'Cancelled' && o.confirmedAt),
+    [shopPOList]
   )
 
   useEffect(() => {
     if (!open) return
-    form.reset({ orderId: '', mode: 'CreditDeduction', createdByUserId: '', items: [defaultItem()] })
-    setSelectedOrder(null)
+    form.reset({ shopPOId: '', mode: 'CreditDeduction', createdByUserId: '', items: [defaultItem()] })
+    setSelectedPO(null)
     Promise.all([
-      ordersApi.list(),
-      storesApi.list({ pageSize: 200 }),
+      shopPosApi.list({ pageSize: 200 }),
       itemsApi.list({ pageSize: 200 }),
       usersApi.list({ pageSize: 200 }),
     ])
-      .then(([orderList, storeList, itemsRes, usersRes]) => {
-        setOrdersList(orderList)
-        setStoreNameById(new Map(getPaginatedItems(storeList).map((s) => [s.id, s.storeName])))
+      .then(([posRes, itemsRes, usersRes]) => {
+        setShopPOList(getPaginatedItems(posRes))
         setItemsList(getPaginatedItems(itemsRes))
         setUsersList(getPaginatedItems(usersRes))
       })
       .catch((err) => toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' }))
   }, [open])
 
-  function handleOrderChange(orderId: string | null) {
-    form.setValue('orderId', orderId ?? '', { shouldValidate: true })
-    const order = orderId ? ordersList.find((o) => o.id === orderId) ?? null : null
-    setSelectedOrder(order)
+  function handlePOChange(shopPOId: string | null) {
+    form.setValue('shopPOId', shopPOId ?? '', { shouldValidate: true })
+    const po = shopPOId ? shopPOList.find((o) => o.id === shopPOId) ?? null : null
+    setSelectedPO(po)
   }
 
   async function onSubmit(values: FormValues) {
     try {
-      await saleReturnsApi.create(values.orderId, {
+      await saleReturnsApi.create(values.shopPOId, {
         mode: values.mode,
         items: values.items,
         createdByUserId: values.createdByUserId,
       })
-      toast.add({ title: 'Order return recorded', type: 'success' })
+      toast.add({ title: 'Return recorded', type: 'success' })
       onSuccess()
       onClose()
     } catch (err) {
@@ -123,14 +119,15 @@ export function OrderReturnDialog({ open, onClose, onSuccess }: OrderReturnDialo
     }
   }
 
+  const activeItems = selectedPO?.items.filter((i) => i.isActive) ?? []
+
   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 Order Return</DialogTitle>
           <DialogDescription>
-            Record items a store returned against an open order. Only items the store has previously
-            ordered can be returned.
+            Record items a store returned against a confirmed Shop PO.
           </DialogDescription>
         </DialogHeader>
 
@@ -138,19 +135,19 @@ export function OrderReturnDialog({ open, onClose, onSuccess }: OrderReturnDialo
           <FieldGroup>
             <FormField
               control={form.control}
-              name="orderId"
-              label="Order"
+              name="shopPOId"
+              label="Shop PO"
               required
               render={({ field }) => (
-                <Select value={field.value as string} onValueChange={handleOrderChange}>
+                <Select value={field.value as string} onValueChange={handlePOChange}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select order..." />
+                    <SelectValue placeholder="Select Shop PO..." />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="" disabled>Select order...</SelectItem>
-                    {eligibleOrders.map((o) => (
+                    <SelectItem value="" disabled>Select Shop PO...</SelectItem>
+                    {eligiblePOs.map((o) => (
                       <SelectItem key={o.id} value={o.id}>
-                        {storeNameById.get(o.storeId) ?? o.storeId.slice(0, 8)} — {o.id.slice(0, 8).toUpperCase()} ({o.status})
+                        {o.storeName} — {o.id.slice(0, 8).toUpperCase()} ({o.status})
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -200,7 +197,7 @@ export function OrderReturnDialog({ open, onClose, onSuccess }: OrderReturnDialo
             </div>
           </FieldGroup>
 
-          {selectedOrder && (
+          {selectedPO && (
             <div className="flex flex-col gap-3">
               <div className="flex items-center justify-between">
                 <p className="text-sm font-medium text-foreground">Items to Return</p>
@@ -223,11 +220,11 @@ export function OrderReturnDialog({ open, onClose, onSuccess }: OrderReturnDialo
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="" disabled>Select item...</SelectItem>
-                          {selectedOrder.items.map((oi) => {
+                          {activeItems.map((oi) => {
                             const item = itemsById.get(oi.itemId)
                             return (
                               <SelectItem key={oi.itemId} value={oi.itemId}>
-                                {item?.name ?? oi.itemId.slice(0, 8)} {item ? `— ${item.sku}` : ''}
+                                {oi.itemName}{item ? ` — ${item.sku}` : ''}
                               </SelectItem>
                             )
                           })}
@@ -282,7 +279,7 @@ export function OrderReturnDialog({ open, onClose, onSuccess }: OrderReturnDialo
 
           <DialogFooter>
             <Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
-            <Button type="submit" disabled={form.formState.isSubmitting || !selectedOrder}>
+            <Button type="submit" disabled={form.formState.isSubmitting || !selectedPO}>
               {form.formState.isSubmitting ? 'Saving…' : 'Record Return'}
             </Button>
           </DialogFooter>

distribution_fe/app/(dashboard)/returns-claims/order-returns/_components/order-return-view-sheet.tsx

@@ -49,7 +49,7 @@ export function OrderReturnViewSheet({ open, onClose, ret, storeName }: OrderRet
 
         <div className="flex flex-col">
           {storeName && <Row label="Store" value={storeName} />}
-          <Row label="Order ID" value={<span className="font-mono text-xs">{ret.orderId}</span>} />
+          <Row label="Shop PO" value={<span className="font-mono text-xs">{ret.shopPOId}</span>} />
           <Row label="Mode" value={<Badge>{MODE_LABEL[ret.mode]}</Badge>} />
           <Row label="Total Credit Amount" value={fmtAmount(ret.totalCreditAmount)} />
           <Row label="Order Total After" value={fmtAmount(ret.orderTotalAmountAfter)} />

distribution_fe/app/(dashboard)/returns-claims/order-returns/_components/order-returns-client.tsx

@@ -9,7 +9,7 @@ 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 { saleReturns as saleReturnsApi, orders as ordersApi, stores as storesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import { saleReturns as saleReturnsApi, shopPos as shopPosApi, stores as storesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { SaleReturnResponse, ReturnMode } from '@/types/api'
 import { OrderReturnViewSheet } from './order-return-view-sheet'
 import { OrderReturnDialog } from './order-return-dialog'
@@ -49,13 +49,13 @@ export function OrderReturnsClient() {
   const fetchData = useCallback(async () => {
     setLoading(true)
     try {
-      const [returns, orderList, storeList] = await Promise.all([
+      const [returns, shopPOList, storeList] = await Promise.all([
         saleReturnsApi.list(),
-        ordersApi.list(),
+        shopPosApi.list({ pageSize: 200 }),
         storesApi.list({ pageSize: 200 }),
       ])
       const storeNameById = new Map(getPaginatedItems(storeList).map((s) => [s.id, s.storeName]))
-      const map = new Map(orderList.map((o) => [o.id, storeNameById.get(o.storeId) ?? '—']))
+      const map = new Map(getPaginatedItems(shopPOList).map((o) => [o.id, storeNameById.get(o.storeId) ?? o.storeName]))
       setStoreNameByOrderId(map)
       setData(returns)
     } catch (err) {
@@ -78,10 +78,10 @@ export function OrderReturnsClient() {
       {
         key: 'store',
         title: 'Store',
-        fields: ['orderId'],
+        fields: ['shopPOId'],
         minWidth: 200,
         cellRender: (row) => (
-          <span className="text-sm font-medium">{storeNameByOrderId.get(row.orderId) ?? '—'}</span>
+          <span className="text-sm font-medium">{storeNameByOrderId.get(row.shopPOId) ?? '—'}</span>
         ),
       },
       {
@@ -163,7 +163,7 @@ export function OrderReturnsClient() {
         open={viewOpen}
         onClose={() => setViewOpen(false)}
         ret={viewing}
-        storeName={viewing ? storeNameByOrderId.get(viewing.orderId) : undefined}
+        storeName={viewing ? storeNameByOrderId.get(viewing.shopPOId) : undefined}
       />
 
       <OrderReturnDialog

distribution_fe/app/(dashboard)/sales/_components/sale-view-sheet.tsx

@@ -1,111 +1,2 @@
-'use client'
-
-import { Badge } from '@/components/ui/badge'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Separator } from '@/components/ui/separator'
-import type { SaleResponse, SaleStatus, PaymentStatus } from '@/types/api'
-
-const SALE_STATUS_VARIANT: Record<SaleStatus, 'default' | 'secondary' | 'destructive'> = {
-  Pending: 'secondary',
-  Completed: 'default',
-  Cancelled: 'destructive',
-}
-
-const PAYMENT_STATUS_VARIANT: Record<PaymentStatus, 'default' | 'secondary' | 'destructive'> = {
-  Pending: 'secondary',
-  PartiallyPaid: 'secondary',
-  Paid: 'default',
-}
-
-const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
-const truncId = (id: string) => id.substring(0, 8)
-
-const fmtDateTime = (v: string | null) =>
-  v
-    ? new Date(v).toLocaleString('en-GB', {
-        day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
-      })
-    : '—'
-
-interface SaleViewSheetProps {
-  open: boolean
-  onClose: () => void
-  sale: SaleResponse | 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 SaleViewSheet({ open, onClose, sale }: SaleViewSheetProps) {
-  if (!sale) return null
-
-  return (
-    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent className="overflow-y-auto sm:max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Sale Details</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-col">
-          <Row label="Sale ID" value={<span className="font-mono">{truncId(sale.id)}</span>} />
-          <Row label="Store ID" value={<span className="font-mono">{truncId(sale.storeId)}</span>} />
-          <Row label="Status" value={<Badge variant={SALE_STATUS_VARIANT[sale.status]}>{sale.status}</Badge>} />
-          <Row label="Payment Status" value={<Badge variant={PAYMENT_STATUS_VARIANT[sale.paymentStatus]}>{sale.paymentStatus}</Badge>} />
-          <Row label="Total Amount" value={fmtAmount(sale.totalAmount)} />
-          <Row label="Fulfill Immediately" value={sale.fulfillImmediately ? 'Yes' : 'No'} />
-          <Row label="Order Status" value={sale.orderStatus} />
-          <Row label="Sale Date" value={fmtDateTime(sale.saleDate)} />
-          <Row label="Completed At" value={fmtDateTime(sale.completedAt)} />
-          <Row label="Created At" value={fmtDateTime(sale.createdAt)} />
-        </div>
-
-        <Separator />
-
-        <div>
-          <p className="text-sm font-medium mb-2">Items ({sale.items.length})</p>
-          <div className="overflow-x-auto rounded-md border">
-            <table className="w-full text-sm">
-              <thead className="bg-muted/50">
-                <tr>
-                  <th className="text-left font-medium px-3 py-2">Item</th>
-                  <th className="text-right font-medium px-3 py-2">Quantity</th>
-                  <th className="text-right font-medium px-3 py-2">Fulfilled</th>
-                  <th className="text-right font-medium px-3 py-2">Unit Price</th>
-                </tr>
-              </thead>
-              <tbody>
-                {sale.items.length === 0 ? (
-                  <tr>
-                    <td colSpan={4} className="text-center text-muted-foreground px-3 py-4">
-                      No items on this sale.
-                    </td>
-                  </tr>
-                ) : (
-                  sale.items.map((item) => (
-                    <tr key={item.itemId} className="border-t">
-                      <td className="px-3 py-2 font-mono">{truncId(item.itemId)}</td>
-                      <td className="text-right px-3 py-2">{item.quantity}</td>
-                      <td className="text-right px-3 py-2">{item.quantityFulfilled}</td>
-                      <td className="text-right px-3 py-2">{fmtAmount(item.unitPrice)}</td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
+// Replaced by shop-po-view-sheet.tsx
+export {}

distribution_fe/app/(dashboard)/sales/_components/sales-client.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useState, useEffect, useCallback, useMemo } from 'react'
-import { useRouter } from 'next/navigation'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { Add01Icon } from '@hugeicons/core-free-icons'
 
@@ -10,10 +9,11 @@ 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 { sales as salesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { SaleResponse, SaleStatus, PaymentStatus } from '@/types/api'
+import { shopPos as shopPosApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { ShopPOResponse, ShopPOStatus } from '@/types/api'
 
-import { SaleViewSheet } from './sale-view-sheet'
+import { ShopPOViewSheet } from './shop-po-view-sheet'
+import { ShopPOCreateSheet } from './shop-po-create-sheet'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -21,36 +21,31 @@ const fmtDate = (v: string) =>
 const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
 const truncId = (id: string) => id.substring(0, 8)
 
-const SALE_STATUS_VARIANT: Record<SaleStatus, 'default' | 'secondary' | 'destructive'> = {
+const PO_STATUS_VARIANT: Record<ShopPOStatus, 'default' | 'secondary' | 'destructive'> = {
   Pending: 'secondary',
-  Completed: 'default',
+  PartiallyFulfilled: 'secondary',
+  Fulfilled: 'default',
   Cancelled: 'destructive',
 }
 
-const PAYMENT_STATUS_VARIANT: Record<PaymentStatus, 'default' | 'secondary' | 'destructive'> = {
-  Pending: 'secondary',
-  PartiallyPaid: 'secondary',
-  Paid: 'default',
-}
-
 export function SalesClient() {
-  const router = useRouter()
-  const [data, setData] = useState<SaleResponse[]>([])
+  const [data, setData] = useState<ShopPOResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [total, setTotal] = useState(0)
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
   const [viewOpen, setViewOpen] = useState(false)
-  const [selectedSale, setSelectedSale] = useState<SaleResponse | null>(null)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [selectedPO, setSelectedPO] = useState<ShopPOResponse | null>(null)
 
   const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
     try {
-      const res = await salesApi.list({ page: p, pageSize: ps })
+      const res = await shopPosApi.list({ page: p, pageSize: ps })
       setData(getPaginatedItems(res))
       setTotal(res.total)
     } catch (err) {
-      toast.add({ title: 'Failed to load sales', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to load Shop POs', description: getApiError(err), type: 'error' })
     } finally {
       setLoading(false)
     }
@@ -60,45 +55,52 @@ export function SalesClient() {
     fetchData(page, pageSize)
   }, [fetchData, page, pageSize])
 
-  function handleView(row: SaleResponse) {
-    setSelectedSale(row)
+  function handleView(row: ShopPOResponse) {
+    setSelectedPO(row)
     setViewOpen(true)
   }
 
-  async function handleCancel(row: SaleResponse) {
+  async function handleConfirm(row: ShopPOResponse) {
     try {
-      await salesApi.cancel(row.id)
-      toast.add({ title: 'Sale cancelled', type: 'success' })
+      await shopPosApi.confirm(row.id)
+      toast.add({ title: 'Shop PO confirmed', type: 'success' })
       fetchData(page, pageSize)
     } catch (err) {
-      toast.add({ title: 'Failed to cancel sale', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to confirm Shop PO', description: getApiError(err), type: 'error' })
     }
   }
 
-  const tableConfig = useMemo<TableConfig<SaleResponse>>(() => ({
+  async function handleCancel(row: ShopPOResponse) {
+    try {
+      await shopPosApi.cancel(row.id)
+      toast.add({ title: 'Shop PO cancelled', type: 'success' })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to cancel Shop PO', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  const tableConfig = useMemo<TableConfig<ShopPOResponse>>(() => ({
     rowKey: 'id',
     serverSide: true,
     stickyHeader: true,
-    emptyMessage: 'No sales found.',
+    emptyMessage: 'No Shop POs found.',
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
     columns: [
       {
         key: 'id',
-        title: 'Sale ID',
+        title: 'PO ID',
         fields: ['id'],
-        width: 140,
+        width: 120,
         cellRender: (row) => (
           <span className="font-mono text-sm">{truncId(row.id)}</span>
         ),
       },
       {
-        key: 'storeId',
-        title: 'Store ID',
-        fields: ['storeId'],
-        width: 140,
-        cellRender: (row) => (
-          <span className="font-mono text-sm">{truncId(row.storeId)}</span>
-        ),
+        key: 'store',
+        title: 'Store',
+        fields: [{ key: 'storeName', primary: true }],
+        minWidth: 180,
       },
       {
         key: 'totalAmount',
@@ -113,25 +115,21 @@ export function SalesClient() {
         key: 'status',
         title: 'Status',
         fields: ['status'],
-        width: 140,
-        cellRender: (row) => (
-          <Badge variant={SALE_STATUS_VARIANT[row.status]}>{row.status}</Badge>
-        ),
-      },
-      {
-        key: 'paymentStatus',
-        title: 'Payment',
-        fields: ['paymentStatus'],
         width: 160,
         cellRender: (row) => (
-          <Badge variant={PAYMENT_STATUS_VARIANT[row.paymentStatus]}>{row.paymentStatus}</Badge>
+          <Badge variant={PO_STATUS_VARIANT[row.status]}>{row.status}</Badge>
         ),
       },
       {
-        key: 'saleDate',
-        title: 'Sale Date',
-        fields: [{ key: 'saleDate', transform: (v) => fmtDate(v as string) }],
-        width: 140,
+        key: 'confirmed',
+        title: 'Confirmed',
+        fields: ['confirmedAt'],
+        width: 120,
+        cellRender: (row) => (
+          <span className="text-sm text-muted-foreground">
+            {row.confirmedAt ? fmtDate(row.confirmedAt) : 'Unconfirmed'}
+          </span>
+        ),
       },
       {
         key: 'createdAt',
@@ -144,14 +142,20 @@ export function SalesClient() {
       actions: () => [
         {
           action: 'view',
-          label: 'View sale',
+          label: 'View PO',
           onClick: handleView,
         },
+        {
+          action: 'confirm',
+          label: 'Confirm PO',
+          onClick: handleConfirm,
+          visible: (target) => !target.confirmedAt && target.status !== 'Cancelled',
+        },
         {
           action: 'cancel',
-          label: 'Cancel sale',
+          label: 'Cancel PO',
           onClick: handleCancel,
-          visible: (target) => target.status !== 'Cancelled',
+          visible: (target) => target.status !== 'Cancelled' && target.status !== 'Fulfilled',
         },
       ],
     },
@@ -161,14 +165,14 @@ export function SalesClient() {
     <>
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-foreground">Sales</h1>
+          <h1 className="text-2xl font-semibold text-foreground">Shop POs</h1>
           <p className="text-sm text-muted-foreground mt-0.5">
-            Sales transactions recorded against stores
+            Purchase orders raised by agents on behalf of stores
           </p>
         </div>
-        <Button onClick={() => router.push('/sales/new')}>
+        <Button onClick={() => setCreateOpen(true)}>
           <HugeiconsIcon icon={Add01Icon} size={16} />
-          Add Sale
+          New PO
         </Button>
       </div>
 
@@ -183,10 +187,16 @@ export function SalesClient() {
         }}
       />
 
-      <SaleViewSheet
+      <ShopPOCreateSheet
+        open={createOpen}
+        onClose={() => setCreateOpen(false)}
+        onSuccess={() => fetchData(page, pageSize)}
+      />
+
+      <ShopPOViewSheet
         open={viewOpen}
         onClose={() => setViewOpen(false)}
-        sale={selectedSale}
+        po={selectedPO}
       />
     </>
   )

distribution_fe/app/(dashboard)/sales/_components/shop-po-create-sheet.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+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,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { FieldGroup } from '@/components/ui/field'
+import { toast } from '@/components/ui/toast'
+import { shopPos as shopPosApi, stores as storesApi, items as itemsApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { StoreResponse, ItemSummaryResponse } from '@/types/api'
+
+const itemLineSchema = z.object({
+  itemId: z.string().min(1, 'Item required'),
+  quantity: z.number().int().min(1, 'Min 1'),
+  unitPrice: z.number().min(0, 'Price must be 0 or more'),
+})
+
+const schema = z.object({
+  storeId: z.string().min(1, 'Store is required'),
+  items: z.array(itemLineSchema).min(1, 'At least one item is required'),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface ShopPOCreateSheetProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+}
+
+const emptyLine = { itemId: '', quantity: 1, unitPrice: 0 }
+
+export function ShopPOCreateSheet({ open, onClose, onSuccess }: ShopPOCreateSheetProps) {
+  const [storesList, setStoresList] = useState<StoreResponse[]>([])
+  const [itemsList, setItemsList] = useState<ItemSummaryResponse[]>([])
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { storeId: '', items: [emptyLine] },
+  })
+
+  const watchedItems = form.watch('items')
+
+  useEffect(() => {
+    if (!open) return
+    form.reset({ storeId: '', items: [emptyLine] })
+    Promise.all([
+      storesApi.list({ pageSize: 200 }),
+      itemsApi.list({ pageSize: 200 }),
+    ])
+      .then(([s, i]) => {
+        setStoresList(getPaginatedItems(s))
+        setItemsList(getPaginatedItems(i))
+      })
+      .catch((err) => toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' }))
+  }, [open])
+
+  function addLine() {
+    form.setValue('items', [...watchedItems, emptyLine])
+  }
+
+  function removeLine(idx: number) {
+    form.setValue('items', watchedItems.filter((_, i) => i !== idx))
+  }
+
+  async function onSubmit(values: FormValues) {
+    try {
+      await shopPosApi.create(values)
+      toast.add({ title: 'Shop PO created', type: 'success' })
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to create Shop PO', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>New Shop PO</DialogTitle>
+          <DialogDescription>Raise a purchase order on behalf of a store.</DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+          <FieldGroup>
+            <FormField
+              control={form.control}
+              name="storeId"
+              label="Store"
+              required
+              render={({ field }) => (
+                <Select value={field.value as string} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select store..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="" disabled>Select store...</SelectItem>
+                    {storesList.map((s) => (
+                      <SelectItem key={s.id} value={s.id}>
+                        {s.storeName} — {s.ownerName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          </FieldGroup>
+
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-sm font-medium">Line Items</p>
+              <Button type="button" variant="outline" size="sm" onClick={addLine}>
+                + Add Item
+              </Button>
+            </div>
+
+            <div className="flex flex-col gap-3">
+              {watchedItems.map((_, idx) => (
+                <div key={idx} className="grid grid-cols-[1fr_80px_100px_36px] gap-2 items-end">
+                  <FormField
+                    control={form.control}
+                    name={`items.${idx}.itemId`}
+                    label={idx === 0 ? 'Item' : undefined}
+                    render={({ field }) => (
+                      <Select value={field.value as string} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select item..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="" disabled>Select item...</SelectItem>
+                          {itemsList.map((item) => (
+                            <SelectItem key={item.id} value={item.id}>
+                              {item.name} ({item.sku})
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name={`items.${idx}.quantity`}
+                    label={idx === 0 ? 'Qty' : undefined}
+                    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.${idx}.unitPrice`}
+                    label={idx === 0 ? 'Unit Price' : undefined}
+                    render={({ field, invalid }) => (
+                      <Input
+                        type="number"
+                        step="0.01"
+                        min={0}
+                        value={Number(field.value as number)}
+                        onChange={(e) => field.onChange(Number(e.target.value))}
+                        onBlur={field.onBlur}
+                        aria-invalid={invalid}
+                      />
+                    )}
+                  />
+                  <div className={idx === 0 ? 'mt-6' : ''}>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeLine(idx)}
+                      disabled={watchedItems.length === 1}
+                      className="h-9 w-9 p-0 text-muted-foreground hover:text-destructive"
+                    >
+                      ×
+                    </Button>
+                  </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 PO'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

distribution_fe/app/(dashboard)/sales/_components/shop-po-view-sheet.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Separator } from '@/components/ui/separator'
+import type { ShopPOResponse, ShopPOStatus } from '@/types/api'
+
+const PO_STATUS_VARIANT: Record<ShopPOStatus, 'default' | 'secondary' | 'destructive'> = {
+  Pending: 'secondary',
+  PartiallyFulfilled: 'secondary',
+  Fulfilled: 'default',
+  Cancelled: 'destructive',
+}
+
+const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
+const truncId = (id: string) => id.substring(0, 8)
+
+const fmtDateTime = (v: string | null) =>
+  v
+    ? new Date(v).toLocaleString('en-GB', {
+        day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+      })
+    : '—'
+
+interface ShopPOViewSheetProps {
+  open: boolean
+  onClose: () => void
+  po: ShopPOResponse | 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 ShopPOViewSheet({ open, onClose, po }: ShopPOViewSheetProps) {
+  if (!po) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Shop PO Details</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col">
+          <Row label="PO ID" value={<span className="font-mono">{truncId(po.id)}</span>} />
+          <Row label="Store" value={po.storeName} />
+          <Row label="Status" value={<Badge variant={PO_STATUS_VARIANT[po.status]}>{po.status}</Badge>} />
+          <Row label="Total Amount" value={fmtAmount(po.totalAmount)} />
+          <Row label="Invoice" value={po.invoiceId ? <span className="font-mono">{truncId(po.invoiceId)}</span> : 'No invoice yet'} />
+          <Row label="Confirmed At" value={fmtDateTime(po.confirmedAt)} />
+          <Row label="Fulfilled At" value={fmtDateTime(po.fulfilledAt)} />
+          <Row label="Created At" value={fmtDateTime(po.createdAt)} />
+        </div>
+
+        <Separator />
+
+        <div>
+          <p className="text-sm font-medium mb-2">Line Items ({po.items.filter(i => i.isActive).length})</p>
+          <div className="overflow-x-auto rounded-md border">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50">
+                <tr>
+                  <th className="text-left font-medium px-3 py-2">Item</th>
+                  <th className="text-right font-medium px-3 py-2">Qty</th>
+                  <th className="text-right font-medium px-3 py-2">Fulfilled</th>
+                  <th className="text-right font-medium px-3 py-2">Unit Price</th>
+                  <th className="text-right font-medium px-3 py-2">Line Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {po.items.filter(i => i.isActive).length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="text-center text-muted-foreground px-3 py-4">
+                      No items on this PO.
+                    </td>
+                  </tr>
+                ) : (
+                  po.items.filter(i => i.isActive).map((item) => (
+                    <tr key={item.id} className="border-t">
+                      <td className="px-3 py-2">{item.itemName}</td>
+                      <td className="text-right px-3 py-2">{item.quantity}</td>
+                      <td className="text-right px-3 py-2">{item.quantityFulfilled}</td>
+                      <td className="text-right px-3 py-2">{fmtAmount(item.unitPrice)}</td>
+                      <td className="text-right px-3 py-2 font-medium">{fmtAmount(item.quantity * item.unitPrice)}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

distribution_fe/app/(dashboard)/sales/new/page.tsx

@@ -15,24 +15,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Checkbox } from '@/components/ui/checkbox'
 import { Button } from '@/components/ui/button'
 import { FieldGroup } from '@/components/ui/field'
 import { Separator } from '@/components/ui/separator'
 import { toast } from '@/components/ui/toast'
 import {
-  sales as salesApi,
+  shopPos as shopPosApi,
   stores as storesApi,
-  rides as ridesApi,
   items as itemsApi,
-  users as usersApi,
   priceLists as priceListsApi,
   getApiError,
   getPaginatedItems,
 } from '@/lib/api/index'
-import type { ItemSummaryResponse, RideResponse, StoreResponse, UserResponse } from '@/types/api'
+import type { ItemSummaryResponse, StoreResponse } from '@/types/api'
 
-const saleItemSchema = z.object({
+const lineItemSchema = z.object({
   itemId: z.string().min(1, 'Item is required'),
   quantity: z.number().min(1, 'Quantity must be at least 1'),
   unitPrice: z.number().min(0.01, 'Unit price must be greater than 0'),
@@ -40,11 +37,7 @@ const saleItemSchema = z.object({
 
 const schema = z.object({
   storeId: z.string().min(1, 'Store is required'),
-  saleDate: z.string().min(1, 'Sale date is required'),
-  createdByUserId: z.string().min(1, 'Created by is required'),
-  rideId: z.string(),
-  fulfillImmediately: z.boolean(),
-  items: z.array(saleItemSchema).min(1, 'At least one item is required'),
+  items: z.array(lineItemSchema).min(1, 'At least one item is required'),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -53,61 +46,46 @@ function createDefaultItem() {
   return { itemId: '', quantity: 1, unitPrice: 0 }
 }
 
-function todayIso() {
-  return new Date().toISOString().slice(0, 10)
-}
-
 const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
 
-export default function NewSalePage() {
+export default function NewShopPOPage() {
   const router = useRouter()
   const [storesList, setStoresList] = useState<StoreResponse[]>([])
-  const [ridesList, setRidesList] = useState<RideResponse[]>([])
   const [itemsList, setItemsList] = useState<ItemSummaryResponse[]>([])
-  const [usersList, setUsersList] = useState<UserResponse[]>([])
+  const [priceMinByIndex, setPriceMinByIndex] = useState<Record<number, number | null>>({})
+  const [priceRetailByIndex, setPriceRetailByIndex] = useState<Record<number, number | null>>({})
 
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
-    defaultValues: {
-      storeId: '',
-      saleDate: todayIso(),
-      createdByUserId: '',
-      rideId: '',
-      fulfillImmediately: false,
-      items: [createDefaultItem()],
-    },
-  })
-
-  const { fields, append, remove } = useFieldArray({
-    control: form.control,
-    name: 'items',
+    defaultValues: { storeId: '', items: [createDefaultItem()] },
   })
 
+  const { fields, append, remove } = useFieldArray({ control: form.control, name: 'items' })
   const watchedItems = useWatch({ control: form.control, name: 'items' })
   const watchedStoreId = useWatch({ control: form.control, name: 'storeId' })
-  const watchedSaleDate = useWatch({ control: form.control, name: 'saleDate' })
+
   const itemsById = useMemo(
     () => new Map(itemsList.map((item) => [item.id, item])),
     [itemsList]
   )
+
   const totalAmount = useMemo(
-    () => watchedItems.reduce((sum, item) => sum + (Number(item.quantity) || 0) * (Number(item.unitPrice) || 0), 0),
+    () => watchedItems.reduce((sum, line) => sum + (Number(line.quantity) || 0) * (Number(line.unitPrice) || 0), 0),
     [watchedItems]
   )
-  const [priceMinByIndex, setPriceMinByIndex] = useState<Record<number, number | null>>({})
-  const [priceRetailByIndex, setPriceRetailByIndex] = useState<Record<number, number | null>>({})
 
   async function resolveAndSetPrice(index: number, itemId: string) {
     const item = itemsById.get(itemId)
-    if (watchedStoreId && watchedSaleDate) {
+    const today = new Date().toISOString().slice(0, 10)
+    if (watchedStoreId) {
       try {
-        const resolution = await priceListsApi.resolve({ itemId, storeId: watchedStoreId, saleDate: watchedSaleDate })
+        const resolution = await priceListsApi.resolve({ itemId, storeId: watchedStoreId, saleDate: today })
         form.setValue(`items.${index}.unitPrice`, resolution.price, { shouldValidate: true })
         setPriceMinByIndex((prev) => ({ ...prev, [index]: resolution.minPrice }))
         setPriceRetailByIndex((prev) => ({ ...prev, [index]: resolution.retailPrice }))
         return
       } catch {
-        // No resolvable price for this store/date (e.g. store/item not found) — fall back below.
+        // No resolvable price for this store — fall back to item default.
       }
     }
     if (item) {
@@ -117,28 +95,22 @@ export default function NewSalePage() {
     }
   }
 
-  // Re-resolve every already-selected line's price whenever the store or sale date changes,
-  // since the applicable price list is scoped by the store's region and the sale date.
   useEffect(() => {
-    if (!watchedStoreId || !watchedSaleDate) return
+    if (!watchedStoreId) return
     watchedItems.forEach((line, index) => {
       if (line.itemId) resolveAndSetPrice(index, line.itemId)
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [watchedStoreId, watchedSaleDate])
+  }, [watchedStoreId])
 
   useEffect(() => {
     Promise.all([
       storesApi.list({ pageSize: 200 }),
-      ridesApi.list({ pageSize: 200, rideType: 'Sale' }),
       itemsApi.list({ pageSize: 200 }),
-      usersApi.list({ pageSize: 200 }),
     ])
-      .then(([stores, rides, items, usersRes]) => {
+      .then(([stores, items]) => {
         setStoresList(getPaginatedItems(stores))
-        setRidesList(getPaginatedItems(rides))
         setItemsList(getPaginatedItems(items))
-        setUsersList(getPaginatedItems(usersRes))
       })
       .catch((err) => {
         toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
@@ -147,18 +119,14 @@ export default function NewSalePage() {
 
   async function onSubmit(values: FormValues) {
     try {
-      await salesApi.create({
+      await shopPosApi.create({
         storeId: values.storeId,
-        saleDate: values.saleDate,
-        rideId: values.rideId || null,
-        fulfillImmediately: values.fulfillImmediately,
         items: values.items,
-        createdByUserId: values.createdByUserId,
       })
-      toast.add({ title: 'Sale created', type: 'success' })
+      toast.add({ title: 'Shop PO created', type: 'success' })
       router.push('/sales')
     } catch (err) {
-      toast.add({ title: 'Failed to create sale', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to create Shop PO', description: getApiError(err), type: 'error' })
     }
   }
 
@@ -170,116 +138,34 @@ export default function NewSalePage() {
           Back
         </Button>
         <div>
-          <h1 className="text-2xl font-semibold text-foreground">Create Sale</h1>
-          <p className="text-sm text-muted-foreground">Record a sale for a store with one or more items.</p>
+          <h1 className="text-2xl font-semibold text-foreground">Create Shop PO</h1>
+          <p className="text-sm text-muted-foreground">Record a purchase order for a store.</p>
         </div>
       </div>
 
       <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
         <div className="rounded-2xl border p-6">
-          <h3 className="mb-4 text-sm font-medium text-foreground">Sale Details</h3>
+          <h3 className="mb-4 text-sm font-medium text-foreground">Order Details</h3>
           <FieldGroup>
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-              <FormField
-                control={form.control}
-                name="storeId"
-                label="Store"
-                required
-                render={({ field }) => (
-                  <Select value={field.value as string} onValueChange={field.onChange}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select store..." />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="" disabled>Select store...</SelectItem>
-                      {storesList.map((store) => (
-                        <SelectItem key={store.id} value={store.id}>
-                          {store.storeName} - {store.ownerName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="saleDate"
-                label="Sale Date"
-                required
-                render={({ field, invalid }) => (
-                  <Input
-                    id="saleDate"
-                    name={field.name}
-                    ref={field.ref}
-                    type="date"
-                    value={field.value as string}
-                    onChange={field.onChange}
-                    onBlur={field.onBlur}
-                    aria-invalid={invalid}
-                  />
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="createdByUserId"
-                label="Created 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>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="rideId"
-                label="Ride"
-                render={({ field }) => (
-                  <Select
-                    value={(field.value as string) || '__none__'}
-                    onValueChange={(value) => field.onChange(value === '__none__' ? '' : value)}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select ride..." />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="__none__">No ride</SelectItem>
-                      {ridesList.map((ride) => (
-                        <SelectItem key={ride.id} value={ride.id}>
-                          {ride.routeName} - {ride.vehicleNumberPlate}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-            </div>
-
             <FormField
               control={form.control}
-              name="fulfillImmediately"
+              name="storeId"
+              label="Store"
+              required
               render={({ field }) => (
-                <label className="flex items-center gap-3 text-sm font-medium">
-                  <Checkbox
-                    checked={Boolean(field.value)}
-                    onCheckedChange={(checked) => field.onChange(Boolean(checked))}
-                  />
-                  Fulfill immediately (van sale)
-                </label>
+                <Select value={field.value as string} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select store..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="" disabled>Select store...</SelectItem>
+                    {storesList.map((store) => (
+                      <SelectItem key={store.id} value={store.id}>
+                        {store.storeName} — {store.ownerName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
             />
           </FieldGroup>
@@ -313,7 +199,9 @@ export default function NewSalePage() {
               <tbody>
                 {fields.map((fieldItem, index) => {
                   const selectedItem = itemsById.get(watchedItems[index]?.itemId ?? '')
-                  const lineTotal = (Number(watchedItems[index]?.quantity) || 0) * (Number(watchedItems[index]?.unitPrice) || 0)
+                  const lineTotal =
+                    (Number(watchedItems[index]?.quantity) || 0) *
+                    (Number(watchedItems[index]?.unitPrice) || 0)
 
                   return (
                     <tr key={fieldItem.id} className="border-t align-top">
@@ -336,7 +224,7 @@ export default function NewSalePage() {
                                 <SelectItem value="" disabled>Select item...</SelectItem>
                                 {itemsList.map((item) => (
                                   <SelectItem key={item.id} value={item.id}>
-                                    {item.name} - {item.sku}
+                                    {item.name} — {item.sku}
                                   </SelectItem>
                                 ))}
                               </SelectContent>
@@ -356,9 +244,6 @@ export default function NewSalePage() {
                           name={`items.${index}.quantity`}
                           render={({ field, invalid }) => (
                             <Input
-                              id={`items.${index}.quantity`}
-                              name={field.name}
-                              ref={field.ref}
                               type="number"
                               min={1}
                               value={Number(field.value as number)}
@@ -377,9 +262,6 @@ export default function NewSalePage() {
                           name={`items.${index}.unitPrice`}
                           render={({ field, invalid }) => (
                             <Input
-                              id={`items.${index}.unitPrice`}
-                              name={field.name}
-                              ref={field.ref}
                               type="number"
                               min={0.01}
                               step="0.01"
@@ -393,12 +275,12 @@ export default function NewSalePage() {
                         />
                         {priceMinByIndex[index] != null && (
                           <p className="mt-1 text-xs text-muted-foreground">
-                            Negotiable down to {fmtAmount(priceMinByIndex[index]!)}
+                            Min: {fmtAmount(priceMinByIndex[index]!)}
                           </p>
                         )}
                         {priceRetailByIndex[index] != null && (
                           <p className="mt-1 text-xs text-muted-foreground">
-                            Retail price: {fmtAmount(priceRetailByIndex[index]!)}
+                            Retail: {fmtAmount(priceRetailByIndex[index]!)}
                           </p>
                         )}
                       </td>
@@ -426,9 +308,9 @@ export default function NewSalePage() {
 
         <div className="flex justify-end">
           <div className="w-full rounded-2xl border p-6 sm:w-96">
-            <h3 className="text-sm font-medium text-foreground">Sale Summary</h3>
+            <h3 className="text-sm font-medium text-foreground">Order Summary</h3>
             <p className="mt-1 text-sm text-muted-foreground">
-              {watchedItems.length} item{watchedItems.length === 1 ? '' : 's'} on this sale.
+              {watchedItems.length} item{watchedItems.length === 1 ? '' : 's'} on this order.
             </p>
 
             <Separator className="my-4" />
@@ -440,7 +322,7 @@ export default function NewSalePage() {
 
             <div className="mt-6 flex flex-col gap-2">
               <Button type="submit" disabled={form.formState.isSubmitting}>
-                {form.formState.isSubmitting ? 'Creating...' : 'Create Sale'}
+                {form.formState.isSubmitting ? 'Creating...' : 'Create Shop PO'}
               </Button>
               <Button type="button" variant="outline" onClick={() => router.push('/sales')}>
                 Cancel

distribution_fe/app/(dashboard)/sales/orders/_components/order-edit-status-dialog.tsx

@@ -1,111 +1,2 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useForm, zodResolver, z } from '@/lib/form'
-import { FormField } from '@/components/shared/form-field'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '@/components/ui/dialog'
-import { FieldGroup } from '@/components/ui/field'
-import { toast } from '@/components/ui/toast'
-import { orders as ordersApi, getApiError } from '@/lib/api/index'
-import type { OrderResponse, OrderStatus } from '@/types/api'
-
-const STATUS_OPTIONS: OrderStatus[] = ['Pending', 'PartiallyFulfilled', 'Fulfilled', 'Cancelled']
-
-const schema = z.object({
-  status: z.enum(['Pending', 'PartiallyFulfilled', 'Fulfilled', 'Cancelled']),
-})
-
-type FormValues = z.infer<typeof schema>
-
-interface OrderEditStatusDialogProps {
-  open: boolean
-  onClose: () => void
-  onSuccess: () => void
-  order: OrderResponse | null
-}
-
-export function OrderEditStatusDialog({ open, onClose, onSuccess, order }: OrderEditStatusDialogProps) {
-  const form = useForm<FormValues>({
-    resolver: zodResolver(schema),
-    defaultValues: { status: 'Pending' },
-  })
-
-  useEffect(() => {
-    if (open && order) {
-      form.reset({ status: order.status })
-    }
-  }, [open, order])
-
-  if (!order) return null
-
-  async function onSubmit(values: FormValues) {
-    try {
-      await ordersApi.update(order!.id, values.status)
-      toast.add({ title: 'Order status updated', type: 'success' })
-      onSuccess()
-      onClose()
-    } catch (err) {
-      toast.add({ title: 'Failed to update order', description: getApiError(err), type: 'error' })
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent className="overflow-y-auto sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Edit Order Status</DialogTitle>
-          <DialogDescription>
-            Changing this also updates the linked sale — Fulfilled completes the sale, Cancelled cancels it.
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
-          <FieldGroup>
-            <FormField
-              control={form.control}
-              name="status"
-              label="Status"
-              required
-              render={({ field }) => (
-                <Select value={field.value as string} onValueChange={field.onChange}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select status..." />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {STATUS_OPTIONS.map((s) => (
-                      <SelectItem key={s} value={s}>{s}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            />
-          </FieldGroup>
-
-          <DialogFooter>
-            <Button type="button" variant="outline" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={form.formState.isSubmitting}>
-              {form.formState.isSubmitting ? 'Saving…' : 'Save Changes'}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
+// Retained for compatibility — invoice status transitions are now handled inline via table row actions.
+export {}

distribution_fe/app/(dashboard)/sales/orders/_components/order-view-sheet.tsx

@@ -7,14 +7,18 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { Separator } from '@/components/ui/separator'
-import type { OrderResponse, OrderStatus } from '@/types/api'
+import type { InvoiceResponse, InvoiceStatus, PaymentStatus } from '@/types/api'
 
-const ORDER_STATUS_VARIANT: Record<OrderStatus, 'default' | 'secondary' | 'destructive'> = {
+const INVOICE_STATUS_VARIANT: Record<InvoiceStatus, 'default' | 'secondary' | 'destructive'> = {
+  Draft: 'secondary',
+  Printed: 'secondary',
+  Finalized: 'default',
+}
+
+const PAYMENT_STATUS_VARIANT: Record<PaymentStatus, 'default' | 'secondary' | 'destructive'> = {
   Pending: 'secondary',
-  PartiallyFulfilled: 'secondary',
-  Fulfilled: 'default',
-  Cancelled: 'destructive',
+  PartiallyPaid: 'secondary',
+  Paid: 'default',
 }
 
 const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
@@ -30,8 +34,7 @@ const fmtDateTime = (v: string | null) =>
 interface OrderViewSheetProps {
   open: boolean
   onClose: () => void
-  order: OrderResponse | null
-  storeName?: string
+  invoice: InvoiceResponse | null
 }
 
 function Row({ label, value }: { label: string; value: React.ReactNode }) {
@@ -43,61 +46,26 @@ function Row({ label, value }: { label: string; value: React.ReactNode }) {
   )
 }
 
-export function OrderViewSheet({ open, onClose, order, storeName }: OrderViewSheetProps) {
-  if (!order) return null
+export function OrderViewSheet({ open, onClose, invoice }: OrderViewSheetProps) {
+  if (!invoice) return null
 
   return (
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent className="overflow-y-auto sm:max-w-2xl">
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Order Details</DialogTitle>
+          <DialogTitle>Invoice Details</DialogTitle>
         </DialogHeader>
 
         <div className="flex flex-col">
-          <Row label="Order ID" value={<span className="font-mono">{truncId(order.id)}</span>} />
-          <Row label="Sale ID" value={<span className="font-mono">{truncId(order.saleId)}</span>} />
-          <Row label="Store" value={storeName ?? <span className="font-mono">{truncId(order.storeId)}</span>} />
-          <Row label="Status" value={<Badge variant={ORDER_STATUS_VARIANT[order.status]}>{order.status}</Badge>} />
-          <Row label="Total Amount" value={fmtAmount(order.totalAmount)} />
-          <Row label="Order Date" value={fmtDateTime(order.orderDate)} />
-          <Row label="Fulfilled At" value={fmtDateTime(order.fulfilledAt)} />
-          <Row label="Created At" value={fmtDateTime(order.createdAt)} />
-        </div>
-
-        <Separator />
-
-        <div>
-          <p className="text-sm font-medium mb-2">Items ({order.items.length})</p>
-          <div className="overflow-x-auto rounded-md border">
-            <table className="w-full text-sm">
-              <thead className="bg-muted/50">
-                <tr>
-                  <th className="text-left font-medium px-3 py-2">Item</th>
-                  <th className="text-right font-medium px-3 py-2">Quantity</th>
-                  <th className="text-right font-medium px-3 py-2">Fulfilled</th>
-                  <th className="text-right font-medium px-3 py-2">Unit Price</th>
-                </tr>
-              </thead>
-              <tbody>
-                {order.items.length === 0 ? (
-                  <tr>
-                    <td colSpan={4} className="text-center text-muted-foreground px-3 py-4">
-                      No items on this order.
-                    </td>
-                  </tr>
-                ) : (
-                  order.items.map((item) => (
-                    <tr key={item.itemId} className="border-t">
-                      <td className="px-3 py-2 font-mono">{truncId(item.itemId)}</td>
-                      <td className="text-right px-3 py-2">{item.quantity}</td>
-                      <td className="text-right px-3 py-2">{item.quantityFulfilled}</td>
-                      <td className="text-right px-3 py-2">{fmtAmount(item.unitPrice)}</td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
+          <Row label="Invoice ID" value={<span className="font-mono">{truncId(invoice.id)}</span>} />
+          <Row label="Shop PO" value={<span className="font-mono">{truncId(invoice.shopPOId)}</span>} />
+          <Row label="Store" value={invoice.storeName} />
+          <Row label="Status" value={<Badge variant={INVOICE_STATUS_VARIANT[invoice.status]}>{invoice.status}</Badge>} />
+          <Row label="Payment" value={<Badge variant={PAYMENT_STATUS_VARIANT[invoice.paymentStatus]}>{invoice.paymentStatus}</Badge>} />
+          <Row label="Total Amount" value={fmtAmount(invoice.totalAmount)} />
+          <Row label="Printed At" value={fmtDateTime(invoice.printedAt)} />
+          <Row label="Finalized At" value={fmtDateTime(invoice.finalizedAt)} />
+          <Row label="Created At" value={fmtDateTime(invoice.createdAt)} />
         </div>
       </DialogContent>
     </Dialog>

distribution_fe/app/(dashboard)/sales/orders/_components/orders-client.tsx

@@ -6,11 +6,10 @@ 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 { orders as ordersApi, stores as storesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { OrderResponse, OrderStatus, StoreResponse } from '@/types/api'
+import { invoices as invoicesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { InvoiceResponse, InvoiceStatus, PaymentStatus } from '@/types/api'
 
 import { OrderViewSheet } from './order-view-sheet'
-import { OrderEditStatusDialog } from './order-edit-status-dialog'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -18,78 +17,80 @@ const fmtDate = (v: string) =>
 const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
 const truncId = (id: string) => id.substring(0, 8)
 
-const ORDER_STATUS_VARIANT: Record<OrderStatus, 'default' | 'secondary' | 'destructive'> = {
+const INVOICE_STATUS_VARIANT: Record<InvoiceStatus, 'default' | 'secondary' | 'destructive'> = {
+  Draft: 'secondary',
+  Printed: 'secondary',
+  Finalized: 'default',
+}
+
+const PAYMENT_STATUS_VARIANT: Record<PaymentStatus, 'default' | 'secondary' | 'destructive'> = {
   Pending: 'secondary',
-  PartiallyFulfilled: 'secondary',
-  Fulfilled: 'default',
-  Cancelled: 'destructive',
+  PartiallyPaid: 'secondary',
+  Paid: 'default',
 }
 
 export function OrdersClient() {
-  const [data, setData] = useState<OrderResponse[]>([])
+  const [data, setData] = useState<InvoiceResponse[]>([])
   const [loading, setLoading] = useState(true)
   const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
 
   const [viewOpen, setViewOpen] = useState(false)
-  const [editOpen, setEditOpen] = useState(false)
-  const [selectedOrder, setSelectedOrder] = useState<OrderResponse | null>(null)
-  const [storesList, setStoresList] = useState<StoreResponse[]>([])
+  const [selectedInvoice, setSelectedInvoice] = useState<InvoiceResponse | null>(null)
 
-  const storesById = useMemo(
-    () => new Map(storesList.map((s) => [s.id, s.storeName])),
-    [storesList]
-  )
-
-  const fetchData = useCallback(async () => {
+  const fetchData = useCallback(async (p: number, ps: number) => {
     setLoading(true)
     try {
-      const items = await ordersApi.list()
-      setData(items)
-      setTotal(items.length)
+      const res = await invoicesApi.list({ page: p, pageSize: ps })
+      setData(getPaginatedItems(res))
+      setTotal(res.total)
     } catch (err) {
-      toast.add({ title: 'Failed to load orders', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to load invoices', description: getApiError(err), type: 'error' })
     } finally {
       setLoading(false)
     }
   }, [])
 
   useEffect(() => {
-    fetchData()
-    storesApi.list({ pageSize: 200 })
-      .then((res) => setStoresList(getPaginatedItems(res)))
-      .catch((err) => toast.add({ title: 'Failed to load stores', description: getApiError(err), type: 'error' }))
-  }, [fetchData])
+    fetchData(page, pageSize)
+  }, [fetchData, page, pageSize])
 
-  function handleView(row: OrderResponse) {
-    setSelectedOrder(row)
+  function handleView(row: InvoiceResponse) {
+    setSelectedInvoice(row)
     setViewOpen(true)
   }
 
-  function handleEdit(row: OrderResponse) {
-    setSelectedOrder(row)
-    setEditOpen(true)
-  }
-
-  async function handleDelete(row: OrderResponse) {
+  async function handlePrint(row: InvoiceResponse) {
     try {
-      await ordersApi.delete(row.id)
-      toast.add({ title: 'Order cancelled', type: 'success' })
-      fetchData()
+      await invoicesApi.print(row.id)
+      toast.add({ title: 'Invoice marked as printed', type: 'success' })
+      fetchData(page, pageSize)
     } catch (err) {
-      toast.add({ title: 'Failed to cancel order', description: getApiError(err), type: 'error' })
+      toast.add({ title: 'Failed to print invoice', description: getApiError(err), type: 'error' })
     }
   }
 
-  const tableConfig = useMemo<TableConfig<OrderResponse>>(() => ({
+  async function handleFinalize(row: InvoiceResponse) {
+    try {
+      await invoicesApi.finalize(row.id)
+      toast.add({ title: 'Invoice finalized', type: 'success' })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to finalize invoice', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  const tableConfig = useMemo<TableConfig<InvoiceResponse>>(() => ({
     rowKey: 'id',
+    serverSide: true,
     stickyHeader: true,
-    emptyMessage: 'No orders found.',
+    emptyMessage: 'No invoices found.',
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
     columns: [
       {
         key: 'id',
-        title: 'Order ID',
+        title: 'Invoice ID',
         fields: ['id'],
         width: 140,
         cellRender: (row) => (
@@ -97,22 +98,10 @@ export function OrdersClient() {
         ),
       },
       {
-        key: 'saleId',
-        title: 'Sale ID',
-        fields: ['saleId'],
-        width: 140,
-        cellRender: (row) => (
-          <span className="font-mono text-sm">{truncId(row.saleId)}</span>
-        ),
-      },
-      {
-        key: 'storeId',
+        key: 'store',
         title: 'Store',
-        fields: ['storeId'],
-        minWidth: 160,
-        cellRender: (row) => (
-          <span className="text-sm">{storesById.get(row.storeId) ?? truncId(row.storeId)}</span>
-        ),
+        fields: [{ key: 'storeName', primary: true }],
+        minWidth: 180,
       },
       {
         key: 'totalAmount',
@@ -127,16 +116,19 @@ export function OrdersClient() {
         key: 'status',
         title: 'Status',
         fields: ['status'],
-        width: 180,
+        width: 140,
         cellRender: (row) => (
-          <Badge variant={ORDER_STATUS_VARIANT[row.status]}>{row.status}</Badge>
+          <Badge variant={INVOICE_STATUS_VARIANT[row.status]}>{row.status}</Badge>
         ),
       },
       {
-        key: 'orderDate',
-        title: 'Order Date',
-        fields: [{ key: 'orderDate', transform: (v) => fmtDate(v as string) }],
-        width: 140,
+        key: 'paymentStatus',
+        title: 'Payment',
+        fields: ['paymentStatus'],
+        width: 150,
+        cellRender: (row) => (
+          <Badge variant={PAYMENT_STATUS_VARIANT[row.paymentStatus]}>{row.paymentStatus}</Badge>
+        ),
       },
       {
         key: 'createdAt',
@@ -149,32 +141,32 @@ export function OrdersClient() {
       actions: () => [
         {
           action: 'view',
-          label: 'View order',
+          label: 'View invoice',
           onClick: handleView,
         },
         {
-          action: 'edit',
-          label: 'Edit status',
-          onClick: handleEdit,
-          visible: (target) => target.status !== 'Cancelled',
+          action: 'print',
+          label: 'Mark as printed',
+          onClick: handlePrint,
+          visible: (target) => target.status === 'Draft',
         },
         {
-          action: 'cancel',
-          label: 'Delete order',
-          onClick: handleDelete,
-          visible: (target) => target.status !== 'Cancelled',
+          action: 'finalize',
+          label: 'Finalize invoice',
+          onClick: handleFinalize,
+          visible: (target) => target.status === 'Printed',
         },
       ],
     },
-  }), [pageSize, storesById])
+  }), [pageSize])
 
   return (
     <>
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-foreground">Orders</h1>
+          <h1 className="text-2xl font-semibold text-foreground">Invoices</h1>
           <p className="text-sm text-muted-foreground mt-0.5">
-            Fulfillment status of store orders
+            Billing documents generated from confirmed Shop POs
           </p>
         </div>
       </div>
@@ -185,6 +177,7 @@ export function OrdersClient() {
         loading={loading}
         totalCount={total}
         onServerSideChange={({ page: p }) => {
+          setPage(p.page)
           setPageSize(p.pageSize)
         }}
       />
@@ -192,15 +185,7 @@ export function OrdersClient() {
       <OrderViewSheet
         open={viewOpen}
         onClose={() => setViewOpen(false)}
-        order={selectedOrder}
-        storeName={selectedOrder ? storesById.get(selectedOrder.storeId) : undefined}
-      />
-
-      <OrderEditStatusDialog
-        open={editOpen}
-        onClose={() => setEditOpen(false)}
-        onSuccess={fetchData}
-        order={selectedOrder}
+        invoice={selectedInvoice}
       />
     </>
   )

distribution_fe/app/(dashboard)/sales/payments/_components/payment-sheet.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useForm, zodResolver, z } from '@/lib/form'
 import { FormField } from '@/components/shared/form-field'
 import { Input } from '@/components/ui/input'
@@ -22,14 +22,13 @@ import {
 } from '@/components/ui/dialog'
 import { FieldGroup } from '@/components/ui/field'
 import { toast } from '@/components/ui/toast'
-import { payments as paymentsApi, sales as salesApi, users as usersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { SaleResponse, UserResponse } from '@/types/api'
+import { payments as paymentsApi, getApiError } from '@/lib/api/index'
+import type { InvoiceResponse } from '@/types/api'
 
 const schema = z.object({
-  saleId: z.string().min(1, 'Sale is required'),
+  invoiceId: z.string().min(1, 'Invoice is required'),
   amount: z.number().min(0.01, 'Amount must be greater than 0'),
   method: z.enum(['Cash', 'Credit']),
-  collectedByUserId: z.string().min(1, 'Collected by is required'),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -38,51 +37,31 @@ interface PaymentSheetProps {
   open: boolean
   onClose: () => void
   onSuccess: () => void
+  invoices: InvoiceResponse[]
 }
 
 const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
 const truncId = (id: string) => id.substring(0, 8)
 
-export function PaymentSheet({ open, onClose, onSuccess }: PaymentSheetProps) {
-  const [salesList, setSalesList] = useState<SaleResponse[]>([])
-  const [usersList, setUsersList] = useState<UserResponse[]>([])
-
+export function PaymentSheet({ open, onClose, onSuccess, invoices }: PaymentSheetProps) {
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: {
-      saleId: '',
+      invoiceId: '',
       amount: 0,
       method: 'Cash',
-      collectedByUserId: '',
     },
   })
 
   useEffect(() => {
     if (!open) return
-
-    form.reset({
-      saleId: '',
-      amount: 0,
-      method: 'Cash',
-      collectedByUserId: '',
-    })
-
-    Promise.all([
-      salesApi.list({ pageSize: 200 }),
-      usersApi.list({ pageSize: 200 }),
-    ])
-      .then(([salesRes, usersRes]) => {
-        setSalesList(getPaginatedItems(salesRes).filter((s) => s.status !== 'Cancelled'))
-        setUsersList(getPaginatedItems(usersRes))
-      })
-      .catch((err) => {
-        toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
-      })
+    form.reset({ invoiceId: '', amount: 0, method: 'Cash' })
   }, [open])
 
   async function onSubmit(values: FormValues) {
+    const { invoiceId, ...rest } = values
     try {
-      await paymentsApi.create(values)
+      await paymentsApi.create(invoiceId, rest)
       toast.add({ title: 'Payment recorded', type: 'success' })
       onSuccess()
       onClose()
@@ -91,31 +70,33 @@ export function PaymentSheet({ open, onClose, onSuccess }: PaymentSheetProps) {
     }
   }
 
+  const pendingInvoices = invoices.filter((inv) => inv.paymentStatus !== 'Paid')
+
   return (
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
       <DialogContent className="overflow-y-auto sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>Record Payment</DialogTitle>
-          <DialogDescription>Record a cash or credit payment against a sale.</DialogDescription>
+          <DialogDescription>Record a cash or credit payment against an invoice.</DialogDescription>
         </DialogHeader>
 
         <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
           <FieldGroup>
             <FormField
               control={form.control}
-              name="saleId"
-              label="Sale"
+              name="invoiceId"
+              label="Invoice"
               required
               render={({ field }) => (
                 <Select value={field.value as string} onValueChange={field.onChange}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Select sale..." />
+                    <SelectValue placeholder="Select invoice..." />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="" disabled>Select sale...</SelectItem>
-                    {salesList.map((sale) => (
-                      <SelectItem key={sale.id} value={sale.id}>
-                        {truncId(sale.id)} — {fmtAmount(sale.totalAmount)} ({sale.paymentStatus})
+                    <SelectItem value="" disabled>Select invoice...</SelectItem>
+                    {pendingInvoices.map((inv) => (
+                      <SelectItem key={inv.id} value={inv.id}>
+                        {inv.storeName} — {fmtAmount(inv.totalAmount)} ({inv.paymentStatus}) [{truncId(inv.id)}]
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -150,10 +131,7 @@ export function PaymentSheet({ open, onClose, onSuccess }: PaymentSheetProps) {
               label="Payment Method"
               required
               render={({ field }) => (
-                <Select
-                  value={field.value as string}
-                  onValueChange={field.onChange}
-                >
+                <Select value={field.value as string} onValueChange={field.onChange}>
                   <SelectTrigger>
                     <SelectValue placeholder="Select method" />
                   </SelectTrigger>
@@ -164,29 +142,6 @@ export function PaymentSheet({ open, onClose, onSuccess }: PaymentSheetProps) {
                 </Select>
               )}
             />
-
-            <FormField
-              control={form.control}
-              name="collectedByUserId"
-              label="Collected 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>
 
           <DialogFooter>

distribution_fe/app/(dashboard)/sales/payments/_components/payment-view-sheet.tsx

@@ -26,8 +26,7 @@ interface PaymentViewSheetProps {
   open: boolean
   onClose: () => void
   payment: PaymentResponse | null
-  storeName?: string
-  collectedByName?: string
+  invoiceName?: string
 }
 
 function Row({ label, value }: { label: string; value: React.ReactNode }) {
@@ -39,7 +38,7 @@ function Row({ label, value }: { label: string; value: React.ReactNode }) {
   )
 }
 
-export function PaymentViewSheet({ open, onClose, payment, storeName, collectedByName }: PaymentViewSheetProps) {
+export function PaymentViewSheet({ open, onClose, payment, invoiceName }: PaymentViewSheetProps) {
   if (!payment) return null
 
   return (
@@ -51,12 +50,11 @@ export function PaymentViewSheet({ open, onClose, payment, storeName, collectedB
 
         <div className="flex flex-col">
           <Row label="Payment ID" value={<span className="font-mono">{truncId(payment.id)}</span>} />
-          <Row label="Sale ID" value={<span className="font-mono">{truncId(payment.saleId)}</span>} />
-          <Row label="Store" value={storeName ?? <span className="font-mono">{truncId(payment.storeId)}</span>} />
+          <Row label="Invoice" value={invoiceName ?? <span className="font-mono">{truncId(payment.invoiceId)}</span>} />
           <Row label="Amount" value={fmtAmount(payment.amount)} />
           <Row label="Method" value={<Badge variant={PAYMENT_METHOD_VARIANT[payment.method]}>{payment.method}</Badge>} />
           <Row label="Collected At" value={fmtDateTime(payment.collectedAt)} />
-          <Row label="Collected By" value={collectedByName ?? <span className="font-mono">{truncId(payment.collectedBy)}</span>} />
+          <Row label="Collected By" value={<span className="font-mono">{truncId(payment.collectedBy)}</span>} />
           <Row label="Created At" value={fmtDateTime(payment.createdAt)} />
         </div>
       </DialogContent>

distribution_fe/app/(dashboard)/sales/payments/_components/payments-client.tsx

@@ -8,9 +8,10 @@ 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 { Input } from '@/components/ui/input'
 import { toast } from '@/components/ui/toast'
-import { payments as paymentsApi, stores as storesApi, users as usersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { PaymentResponse, PaymentMethod, StoreResponse, UserResponse } from '@/types/api'
+import { invoices as invoicesApi, payments as paymentsApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { PaymentResponse, PaymentMethod, InvoiceResponse } from '@/types/api'
 
 import { PaymentSheet } from './payment-sheet'
 import { PaymentViewSheet } from './payment-view-sheet'
@@ -27,33 +28,39 @@ const PAYMENT_METHOD_VARIANT: Record<PaymentMethod, 'default' | 'secondary'> = {
 }
 
 export function PaymentsClient() {
+  const [invoicesList, setInvoicesList] = useState<InvoiceResponse[]>([])
+  const [selectedInvoiceId, setSelectedInvoiceId] = useState('')
   const [data, setData] = useState<PaymentResponse[]>([])
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(false)
   const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(20)
+  const [pageSize] = useState(20)
 
   const [sheetOpen, setSheetOpen] = useState(false)
   const [viewOpen, setViewOpen] = useState(false)
   const [selectedPayment, setSelectedPayment] = useState<PaymentResponse | null>(null)
-  const [storesList, setStoresList] = useState<StoreResponse[]>([])
-  const [usersList, setUsersList] = useState<UserResponse[]>([])
 
-  const storeNameById = useMemo(
-    () => new Map(storesList.map((s) => [s.id, s.storeName])),
-    [storesList]
-  )
-  const userNameById = useMemo(
-    () => new Map(usersList.map((u) => [u.id, u.fullName])),
-    [usersList]
+  const invoiceNameById = useMemo(
+    () => new Map(invoicesList.map((inv) => [inv.id, `${inv.storeName} — ${truncId(inv.id)}`])),
+    [invoicesList]
   )
 
-  const fetchData = useCallback(async (p: number, ps: number) => {
+  useEffect(() => {
+    invoicesApi.list({ pageSize: 200 })
+      .then((res) => setInvoicesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load invoices', description: getApiError(err), type: 'error' }))
+  }, [])
+
+  const fetchData = useCallback(async (invoiceId: string) => {
+    if (!invoiceId) {
+      setData([])
+      setTotal(0)
+      return
+    }
     setLoading(true)
     try {
-      const res = await paymentsApi.list({ page: p, pageSize: ps })
-      setData(getPaginatedItems(res))
-      setTotal(res.total)
+      const items = await paymentsApi.listByInvoice(invoiceId)
+      setData(items)
+      setTotal(items.length)
     } catch (err) {
       toast.add({ title: 'Failed to load payments', description: getApiError(err), type: 'error' })
     } finally {
@@ -62,17 +69,8 @@ export function PaymentsClient() {
   }, [])
 
   useEffect(() => {
-    fetchData(page, pageSize)
-  }, [fetchData, page, pageSize])
-
-  useEffect(() => {
-    storesApi.list({ pageSize: 200 })
-      .then((res) => setStoresList(getPaginatedItems(res)))
-      .catch((err) => toast.add({ title: 'Failed to load stores', description: getApiError(err), type: 'error' }))
-    usersApi.list({ pageSize: 200 })
-      .then((res) => setUsersList(getPaginatedItems(res)))
-      .catch((err) => toast.add({ title: 'Failed to load users', description: getApiError(err), type: 'error' }))
-  }, [])
+    fetchData(selectedInvoiceId)
+  }, [fetchData, selectedInvoiceId])
 
   function handleView(row: PaymentResponse) {
     setSelectedPayment(row)
@@ -81,9 +79,8 @@ export function PaymentsClient() {
 
   const tableConfig = useMemo<TableConfig<PaymentResponse>>(() => ({
     rowKey: 'id',
-    serverSide: true,
     stickyHeader: true,
-    emptyMessage: 'No payments found.',
+    emptyMessage: selectedInvoiceId ? 'No payments found for this invoice.' : 'Enter an invoice ID to view its payments.',
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
     columns: [
       {
@@ -96,12 +93,12 @@ export function PaymentsClient() {
         ),
       },
       {
-        key: 'storeId',
-        title: 'Store',
-        fields: ['storeId'],
-        minWidth: 160,
+        key: 'invoiceId',
+        title: 'Invoice',
+        fields: ['invoiceId'],
+        minWidth: 180,
         cellRender: (row) => (
-          <span className="text-sm">{storeNameById.get(row.storeId) ?? truncId(row.storeId)}</span>
+          <span className="text-sm">{invoiceNameById.get(row.invoiceId) ?? truncId(row.invoiceId)}</span>
         ),
       },
       {
@@ -128,15 +125,6 @@ export function PaymentsClient() {
         fields: [{ key: 'collectedAt', transform: (v) => fmtDate(v as string) }],
         width: 140,
       },
-      {
-        key: 'collectedBy',
-        title: 'Collected By',
-        fields: ['collectedBy'],
-        minWidth: 160,
-        cellRender: (row) => (
-          <span className="text-sm text-muted-foreground">{userNameById.get(row.collectedBy) ?? truncId(row.collectedBy)}</span>
-        ),
-      },
     ],
     rowActions: {
       actions: () => [
@@ -147,7 +135,7 @@ export function PaymentsClient() {
         },
       ],
     },
-  }), [pageSize, storeNameById, userNameById])
+  }), [pageSize, invoiceNameById])
 
   return (
     <>
@@ -155,7 +143,7 @@ export function PaymentsClient() {
         <div>
           <h1 className="text-2xl font-semibold text-foreground">Payments</h1>
           <p className="text-sm text-muted-foreground mt-0.5">
-            Cash and credit payments collected from stores
+            Cash and credit payments collected against invoices
           </p>
         </div>
         <Button onClick={() => setSheetOpen(true)}>
@@ -164,29 +152,38 @@ export function PaymentsClient() {
         </Button>
       </div>
 
+      <div className="flex items-center gap-2 max-w-sm">
+        <Input
+          placeholder="Paste invoice ID to filter payments..."
+          value={selectedInvoiceId}
+          onChange={(e) => setSelectedInvoiceId(e.target.value.trim())}
+        />
+        {selectedInvoiceId && (
+          <Button variant="ghost" size="sm" onClick={() => setSelectedInvoiceId('')}>
+            Clear
+          </Button>
+        )}
+      </div>
+
       <DataTable
         config={tableConfig}
         data={data}
         loading={loading}
         totalCount={total}
-        onServerSideChange={({ page: p }) => {
-          setPage(p.page)
-          setPageSize(p.pageSize)
-        }}
       />
 
       <PaymentSheet
         open={sheetOpen}
         onClose={() => setSheetOpen(false)}
-        onSuccess={() => fetchData(page, pageSize)}
+        onSuccess={() => fetchData(selectedInvoiceId)}
+        invoices={invoicesList}
       />
 
       <PaymentViewSheet
         open={viewOpen}
         onClose={() => setViewOpen(false)}
         payment={selectedPayment}
-        storeName={selectedPayment ? storeNameById.get(selectedPayment.storeId) : undefined}
-        collectedByName={selectedPayment ? userNameById.get(selectedPayment.collectedBy) : undefined}
+        invoiceName={selectedPayment ? invoiceNameById.get(selectedPayment.invoiceId) : undefined}
       />
     </>
   )

distribution_fe/app/(dashboard)/stores/_components/store-sheet.tsx

@@ -50,7 +50,7 @@ type FormValues = z.infer<typeof schema>
 interface StoreSheetProps {
   open: boolean
   onClose: () => void
-  store: StoreResponse
+  store: StoreResponse | null
   onSuccess: () => void
 }
 
@@ -81,7 +81,7 @@ export function StoreSheet({ open, onClose, store, onSuccess }: StoreSheetProps)
         toast.add({ title: 'Failed to load routes', description: getApiError(err), type: 'error' })
       )
 
-      form.reset({
+      if (store) form.reset({
         storeName: store.storeName,
         ownerName: store.ownerName,
         storeAddress: store.storeAddress,
@@ -97,7 +97,7 @@ export function StoreSheet({ open, onClose, store, onSuccess }: StoreSheetProps)
 
   async function onSubmit(values: FormValues) {
     try {
-      await storesApi.update(store.id, {
+      await storesApi.update(store!.id, {
         ...values,
         segment: values.segment || undefined,
       })

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

@@ -10,7 +10,9 @@ export type RowActionKind =
   | 'deactivate'
   | 'confirm'
   | 'close'
-  | 'cancel';
+  | 'cancel'
+  | 'print'
+  | 'finalize';
 
 export interface BadgeConfig {
   colorMap?: Record<string, string>;

distribution_fe/components/shared/row-actions.tsx

@@ -5,9 +5,11 @@ import { HugeiconsIcon } from "@hugeicons/react"
 import {
   Cancel01Icon,
   CheckmarkCircle02Icon,
+  CheckmarkSquare01Icon,
   Delete02Icon,
   EyeIcon,
   PencilEdit01Icon,
+  PrinterIcon,
 } from "@hugeicons/core-free-icons"
 
 import { Button } from "@/components/ui/button"
@@ -20,6 +22,8 @@ const ACTION_ICONS = {
   confirm: CheckmarkCircle02Icon,
   deactivate: Cancel01Icon,
   edit: PencilEdit01Icon,
+  finalize: CheckmarkSquare01Icon,
+  print: PrinterIcon,
   view: EyeIcon,
 } as const
 

distribution_fe/config/nav.ts

@@ -60,12 +60,12 @@ export const NAV_GROUPS: NavGroup[] = [
     ],
   },
   {
-    title: 'Sales & Orders',
+    title: 'Shop POs & Invoices',
     icon: DollarSquareIcon,
     items: [
-      { title: 'Sales', href: '/sales', icon: DollarSquareIcon, description: 'Sales transactions recorded against stores', permission: 'orders.view' },
-      { title: 'Orders', href: '/sales/orders', icon: ClipboardListIcon, description: 'Fulfillment status of store orders', permission: 'orders.view' },
-      { title: 'Payments', href: '/sales/payments', icon: BankIcon, description: 'Cash and credit payments collected from stores', permission: 'orders.view' },
+      { title: 'Shop POs', href: '/sales', icon: ClipboardListIcon, description: 'Purchase orders raised by sales agents on behalf of stores', permission: 'orders.view' },
+      { title: 'Invoices', href: '/sales/orders', icon: DollarSquareIcon, description: 'Billing documents generated from confirmed Shop POs', permission: 'orders.view' },
+      { title: 'Payments', href: '/sales/payments', icon: BankIcon, description: 'Cash and credit payments collected against invoices', permission: 'orders.view' },
     ],
   },
   {
@@ -161,6 +161,6 @@ export const BOTTOM_NAV_CANDIDATES: NavItem[] = [
   { title: 'Stores', href: '/stores', icon: Store01Icon, permission: 'stores.view' },
   { title: 'Rides', href: '/operations/rides', icon: TruckIcon, permission: 'rides.view' },
   { title: 'Loading', href: '/operations/loading', icon: DeliveryBox01Icon, permission: 'loading.view' },
-  { title: 'Sales', href: '/sales', icon: DollarSquareIcon, permission: 'orders.view' },
+  { title: 'Shop POs', href: '/sales', icon: ClipboardListIcon, permission: 'orders.view' },
   { title: 'Items', href: '/catalogue/items', icon: Package01Icon, permission: 'items.view' },
 ]

distribution_fe/lib/api/index.ts

@@ -8,7 +8,7 @@ export { drivers, compliance } from './drivers'
 export { purchaseOrders, grn, purchaseReturns } from './procurement'
 export { rides, loadingSheets, deliveryTasks } from './operations'
 export { stock } from './stock'
-export { sales, orders, payments } from './sales'
+export { shopPos, invoices, payments } from './sales'
 export { saleReturns, claims, supplierClaims } from './returns-claims'
 export { getPaginatedItems } from './paginated'
 

distribution_fe/lib/api/operations.ts

@@ -2,10 +2,8 @@ import { api } from '@/lib/api'
 import type {
   PaginatedResponse,
   RideResponse,
-  CancelRequestResponse,
   LoadingSheetResponse,
   DeliveryTaskResponse,
-  RideType,
   RideStatus,
   CancelRequestType,
   LoadingSheetStatus,
@@ -16,22 +14,18 @@ import type { PageParams } from './master'
 // ─── Rides ────────────────────────────────────────────────────────────────────
 
 export interface RideBody {
-  rideType: RideType
   vehicleId: string
   driverProfileId: string
-  routeId: string
-  sourceWarehouseId: string
   meterstart: number
 }
 
 export interface RideListParams extends PageParams {
   status?: RideStatus
-  rideType?: RideType
   driverProfileId?: string
   vehicleId?: string
 }
 
-export interface CancelRequestBody {
+export interface CancelRideBody {
   typeCode: CancelRequestType
   reason: string
 }
@@ -49,43 +43,24 @@ export const rides = {
   assignDriver: (id: string, driverProfileId: string) =>
     api.put<RideResponse>(`/rides/${id}/driver`, { driverProfileId }).then(r => r.data),
 
-  activate: (id: string) =>
-    api.patch<RideResponse>(`/rides/${id}/activate`).then(r => r.data),
-
   close: (id: string, meterend: number) =>
-    api.patch<RideResponse>(`/rides/${id}/close`, { meterend }).then(r => r.data),
+    api.post<RideResponse>(`/rides/${id}/close`, { meterend }).then(r => r.data),
 
-  cancelRequests: {
-    getForRide: (rideId: string) =>
-      api.get<CancelRequestResponse | null>(`/rides/${rideId}/cancel-request`).then(r => r.data),
-
-    raise: (rideId: string, body: CancelRequestBody) =>
-      api.post<CancelRequestResponse>(`/rides/${rideId}/cancel-request`, body).then(r => r.data),
-
-    approve: (requestId: string) =>
-      api.post<CancelRequestResponse>(`/rides/cancel-requests/${requestId}/approve`).then(r => r.data),
-
-    reject: (requestId: string) =>
-      api.post<CancelRequestResponse>(`/rides/cancel-requests/${requestId}/reject`).then(r => r.data),
-  },
+  cancel: (id: string, body: CancelRideBody) =>
+    api.post<RideResponse>(`/rides/${id}/cancel`, body).then(r => r.data),
 }
 
 // ─── Loading Sheets ───────────────────────────────────────────────────────────
 
-export interface LoadingSheetItemBody {
-  itemId: string
-  quantityDispatched: number
+export interface LoadingSheetCreateBody {
+  fK_RideId: string
 }
 
-export interface LoadingSheetBody {
-  rideId: string
-  sourceWarehouseId: string
-  items: LoadingSheetItemBody[]
-}
-
-export interface LoadingSheetReceiptItemBody {
-  itemId: string
-  quantityReceived: number
+export interface LoadingSheetItemInput {
+  fK_ItemId: string
+  fK_WarehouseId: string
+  quantity: number
+  fK_ShopPOItemId?: string | null
 }
 
 export interface LoadingSheetListParams extends PageParams {
@@ -100,17 +75,14 @@ export const loadingSheets = {
   get: (id: string) =>
     api.get<LoadingSheetResponse>(`/loading-sheets/${id}`).then(r => r.data),
 
-  create: (body: LoadingSheetBody) =>
+  create: (body: LoadingSheetCreateBody) =>
     api.post<LoadingSheetResponse>('/loading-sheets', body).then(r => r.data),
 
-  confirmDispatch: (id: string) =>
-    api.patch<LoadingSheetResponse>(`/loading-sheets/${id}/dispatch`).then(r => r.data),
+  updateItems: (id: string, items: LoadingSheetItemInput[]) =>
+    api.put<LoadingSheetResponse>(`/loading-sheets/${id}/items`, { items }).then(r => r.data),
 
-  confirmReceipt: (id: string, items: LoadingSheetReceiptItemBody[]) =>
-    api.patch<LoadingSheetResponse>(`/loading-sheets/${id}/receipt`, { items }).then(r => r.data),
-
-  resolve: (id: string) =>
-    api.patch<LoadingSheetResponse>(`/loading-sheets/${id}/resolve`).then(r => r.data),
+  confirm: (id: string) =>
+    api.post<LoadingSheetResponse>(`/loading-sheets/${id}/confirm`).then(r => r.data),
 }
 
 // ─── Delivery Tasks ───────────────────────────────────────────────────────────
@@ -121,11 +93,8 @@ 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}/delivery-tasks`).then(r => r.data),
+    api.get<DeliveryTaskResponse[]>(`/rides/${rideId}/tasks`).then(r => r.data),
 
   get: (id: string) =>
     api.get<DeliveryTaskResponse>(`/delivery-tasks/${id}`).then(r => r.data),

distribution_fe/lib/api/returns-claims.ts

@@ -35,11 +35,11 @@ export const saleReturns = {
   get: (id: string) =>
     api.get<SaleReturnResponse>(`/returns/${id}`).then(r => r.data),
 
-  listByOrder: (orderId: string) =>
-    api.get<SaleReturnResponse[]>(`/orders/${orderId}/returns`).then(r => r.data),
+  listByShopPO: (shopPOId: string) =>
+    api.get<SaleReturnResponse[]>(`/shop-pos/${shopPOId}/returns`).then(r => r.data),
 
-  create: (orderId: string, body: SaleReturnBody) =>
-    api.post<SaleReturnResponse>(`/orders/${orderId}/returns`, body).then(r => r.data),
+  create: (shopPOId: string, body: SaleReturnBody) =>
+    api.post<SaleReturnResponse>(`/shop-pos/${shopPOId}/returns`, body).then(r => r.data),
 
   updateReasons: (id: string, body: UpdateSaleReturnReasonsBody) =>
     api.patch<SaleReturnResponse>(`/returns/${id}/reasons`, body).then(r => r.data),

distribution_fe/lib/api/sales.ts

@@ -1,101 +1,99 @@
 import { api } from '@/lib/api'
 import type {
   PaginatedResponse,
-  SaleResponse,
-  OrderResponse,
-  OrderStatus,
+  ShopPOResponse,
+  InvoiceResponse,
+  InvoiceStatus,
   PaymentResponse,
-  SaleStatus,
-  PaymentStatus,
   PaymentMethod,
+  ShopPOStatus,
 } from '@/types/api'
 
 import type { PageParams } from './master'
 
-// ─── Sales ────────────────────────────────────────────────────────────────────
+// ─── Shop POs ─────────────────────────────────────────────────────────────────
 
-export interface SaleItemBody {
+export interface ShopPOItemBody {
   itemId: string
   quantity: number
-  unitPrice: number
+  unitPrice?: number | null
 }
 
-export interface SaleBody {
+export interface CreateShopPOBody {
   storeId: string
-  saleDate: string
-  rideId?: string | null
-  fulfillImmediately?: boolean
-  items: SaleItemBody[]
-  // TEMPORARY: required while auth doesn't resolve a logged-in user server-side — see testbug.md #28.
-  createdByUserId: string
+  items: ShopPOItemBody[]
 }
 
-export interface SaleListParams extends PageParams {
-  storeId?: string
-  status?: SaleStatus
-  paymentStatus?: PaymentStatus
-  rideId?: string
-  from?: string
-  to?: string
+export interface UpdateShopPOItemsBody {
+  items: ShopPOItemBody[]
 }
 
-export const sales = {
-  list: (params?: SaleListParams) =>
-    api.get<PaginatedResponse<SaleResponse>>('/sales', { params }).then(r => r.data),
+export interface ShopPOListParams extends PageParams {
+  agentId?: string
+  routeId?: string
+  shopId?: string
+  confirmed?: boolean
+  status?: ShopPOStatus
+}
+
+export const shopPos = {
+  list: (params?: ShopPOListParams) =>
+    api.get<PaginatedResponse<ShopPOResponse>>('/shop-pos', { params }).then(r => r.data),
 
   get: (id: string) =>
-    api.get<SaleResponse>(`/sales/${id}`).then(r => r.data),
+    api.get<ShopPOResponse>(`/shop-pos/${id}`).then(r => r.data),
 
-  create: (body: SaleBody) =>
-    api.post<SaleResponse>('/sales', body).then(r => r.data),
+  create: (body: CreateShopPOBody) =>
+    api.post<ShopPOResponse>('/shop-pos', body).then(r => r.data),
+
+  updateItems: (id: string, body: UpdateShopPOItemsBody) =>
+    api.put<ShopPOResponse>(`/shop-pos/${id}/items`, body).then(r => r.data),
+
+  confirm: (id: string) =>
+    api.post<ShopPOResponse>(`/shop-pos/${id}/confirm`).then(r => r.data),
+
+  confirmAndCreateInvoice: (id: string) =>
+    api.post<ShopPOResponse>(`/shop-pos/${id}/confirm-and-create-invoice`).then(r => r.data),
 
   cancel: (id: string) =>
-    api.patch<SaleResponse>(`/sales/${id}/cancel`).then(r => r.data),
+    api.post<ShopPOResponse>(`/shop-pos/${id}/cancel`).then(r => r.data),
 }
 
-// ─── Orders ───────────────────────────────────────────────────────────────────
-// GET /orders takes no query params and returns a plain array — no server-side
-// filtering/pagination exists on the backend, unlike Sales/Payments.
+// ─── Invoices ─────────────────────────────────────────────────────────────────
 
-export const orders = {
-  list: () =>
-    api.get<OrderResponse[]>('/orders').then(r => r.data),
+export interface InvoiceListParams extends PageParams {
+  agentId?: string
+  routeId?: string
+  shopId?: string
+  status?: InvoiceStatus
+}
+
+export const invoices = {
+  list: (params?: InvoiceListParams) =>
+    api.get<PaginatedResponse<InvoiceResponse>>('/invoices', { params }).then(r => r.data),
 
   get: (id: string) =>
-    api.get<OrderResponse>(`/orders/${id}`).then(r => r.data),
+    api.get<InvoiceResponse>(`/invoices/${id}`).then(r => r.data),
 
-  update: (id: string, status: OrderStatus) =>
-    api.put<OrderResponse>(`/orders/${id}`, { status }).then(r => r.data),
+  print: (id: string) =>
+    api.post<InvoiceResponse>(`/invoices/${id}/print`).then(r => r.data),
 
-  delete: (id: string) =>
-    api.delete(`/orders/${id}`),
+  finalize: (id: string) =>
+    api.post<InvoiceResponse>(`/invoices/${id}/finalize`).then(r => r.data),
 }
 
 // ─── Payments ─────────────────────────────────────────────────────────────────
 
 export interface PaymentBody {
-  saleId: string
   amount: number
   method: PaymentMethod
-  // TEMPORARY: required while auth doesn't resolve a logged-in user server-side — see testbug.md #28.
-  collectedByUserId: string
-}
-
-export interface PaymentListParams extends PageParams {
-  storeId?: string
-  saleId?: string
-  method?: PaymentMethod
-  from?: string
-  to?: string
+  collectedByUserId?: string | null
 }
 
 export const payments = {
-  list: (params?: PaymentListParams) =>
-    api.get<PaginatedResponse<PaymentResponse>>('/payments', { params }).then(r => r.data),
+  listByInvoice: (invoiceId: string) =>
+    api.get<PaymentResponse[]>(`/invoices/${invoiceId}/payments`).then(r => r.data),
 
-  get: (id: string) =>
-    api.get<PaymentResponse>(`/payments/${id}`).then(r => r.data),
-
-  create: (body: PaymentBody) =>
-    api.post<PaymentResponse>('/payments', body).then(r => r.data),
+  create: (invoiceId: string, body: PaymentBody) =>
+    api.post<PaymentResponse>(`/invoices/${invoiceId}/payments`, body).then(r => r.data),
 }

distribution_fe/types/api.ts

@@ -5,19 +5,15 @@ export type LocationType = 'Warehouse' | 'Vehicle' | 'External'
 export type MovementType =
   | 'Sale' | 'CustomerReturn' | 'Transfer' | 'Damage'
   | 'Adjustment' | 'Load' | 'PurchaseReceipt' | 'PurchaseReturn'
-export type LoadingSheetStatus =
-  | 'Pending' | 'DispatchConfirmed' | 'ReceiptConfirmed'
-  | 'DiscrepancyFlagged' | 'Resolved'
-export type RideType = 'Delivery' | 'Sale'
-export type RideStatus =
-  | 'Draft' | 'Open' | 'Active' | 'CancelRequested' | 'Cancelled' | 'Closed'
+export type LoadingSheetStatus = 'Planned' | 'Confirmed'
+export type RideStatus = 'Open' | 'Cancelled' | 'Closed'
 export type CancelRequestType =
   | 'VehicleBreakdown' | 'DriverUnavailable' | 'RouteIssue' | 'Other'
-export type CancelRequestStatus = 'Pending' | 'Approved' | 'Rejected'
 export type PurchaseOrderStatus =
   | 'Issued' | 'PartiallyReceived' | 'Received' | 'Closed' | 'Cancelled'
-export type SaleStatus = 'Pending' | 'Completed' | 'Cancelled'
-export type OrderStatus = 'Pending' | 'PartiallyFulfilled' | 'Fulfilled' | 'Cancelled'
+export type ShopPOStatus = 'Pending' | 'PartiallyFulfilled' | 'Fulfilled' | 'Cancelled'
+export type InvoiceStatus = 'Draft' | 'Printed' | 'Finalized'
+export type InvoiceCreationMode = 'ModeA' | 'ModeB'
 export type PaymentStatus = 'Pending' | 'PartiallyPaid' | 'Paid'
 export type PaymentMethod = 'Cash' | 'Credit'
 export type DeliveryTaskStatus = 'Pending' | 'Delivered' | 'PartiallyDelivered' | 'Failed'
@@ -457,7 +453,7 @@ export interface SaleReturnItemResponse {
 
 export interface SaleReturnResponse {
   id: string
-  orderId: string
+  shopPOId: string
   mode: ReturnMode
   totalCreditAmount: number
   orderTotalAmountAfter: number
@@ -555,59 +551,45 @@ export interface DriverComplianceConfigResponse {
 
 export interface RideResponse {
   id: string
-  rideType: RideType
   status: RideStatus
   vehicleId: string
   vehicleNumberPlate: string
   driverProfileId: string
   driverFullName: string
-  routeId: string
-  routeName: string
-  sourceWarehouseId: string
-  sourceWarehouseName: string
   meterstart: number
   meterend: number
   startedAt: string | null
-  activatedAt: string | null
   closedAt: string | null
   createdAt: string
 }
 
-export interface CancelRequestResponse {
-  id: string
-  rideId: string
-  typeCode: CancelRequestType
-  reason: string
-  requestedBy: string
-  requestedAt: string
-  status: CancelRequestStatus
-  approvedBy: string | null
-  approvedAt: string | null
-}
-
 // ─── Loading Sheets ───────────────────────────────────────────────────────────
 
 export interface LoadingSheetItemResponse {
   id: string
   fK_ItemId: string
   itemName: string
+  fK_WarehouseId: string
+  warehouseName: string
   quantityDispatched: number
-  quantityReceived: number
-  quantityResolved: number
+  fK_ShopPOItemId: string | null
+}
+
+export interface LoadingSheetOrderRef {
+  shopPOId: string
 }
 
 export interface LoadingSheetResponse {
   id: string
   fK_RideId: string
-  fK_SourceWarehouseId: string
-  warehouseName: string
   status: LoadingSheetStatus
-  dispatchConfirmedAt: string | null
-  dispatchConfirmedBy: string | null
-  receiptConfirmedAt: string | null
-  receiptConfirmedBy: string | null
+  populatedBy: string
+  populatedAt: string
+  confirmedAt: string | null
+  confirmedBy: string | null
   createdAt: string
   items: LoadingSheetItemResponse[]
+  orders: LoadingSheetOrderRef[]
 }
 
 // ─── Delivery Tasks ───────────────────────────────────────────────────────────
@@ -623,7 +605,7 @@ export interface DeliveryTaskItemResponse {
 export interface DeliveryTaskResponse {
   id: string
   fK_RideId: string
-  fK_OrderId: string
+  fK_ShopPOId: string
   storeId: string
   storeName: string
   sequence: number
@@ -635,58 +617,53 @@ export interface DeliveryTaskResponse {
   createdAt: string
 }
 
-// ─── Sales / Orders / Payments ────────────────────────────────────────────────
+// ─── ShopPO / Invoice / Payment ───────────────────────────────────────────────
 
-export interface SaleItemResponse {
+export interface ShopPOItemResponse {
+  id: string
   itemId: string
+  itemName: string
   quantity: number
   quantityFulfilled: number
   unitPrice: number
+  isActive: boolean
 }
 
-export interface SaleResponse {
+export interface ShopPOResponse {
   id: string
-  saleDate: string
   storeId: string
-  createdByUserId: string
-  rideId: string | null
+  storeName: string
+  raisedById: string
+  invoiceId: string | null
   totalAmount: number
-  status: SaleStatus
-  paymentStatus: PaymentStatus
-  fulfillImmediately: boolean
-  completedAt: string | null
-  orderId: string
-  orderStatus: OrderStatus
-  orderFulfilledAt: string | null
-  items: SaleItemResponse[]
+  status: ShopPOStatus
+  confirmedAt: string | null
+  confirmedBy: string | null
+  fulfilledAt: string | null
+  items: ShopPOItemResponse[]
   isActive: boolean
   createdAt: string
 }
 
-export interface OrderItemResponse {
-  itemId: string
-  quantity: number
-  quantityFulfilled: number
-  unitPrice: number
-}
-
-export interface OrderResponse {
+export interface InvoiceResponse {
   id: string
-  saleId: string
-  orderDate: string
-  storeId: string
+  shopPOId: string
+  storeName: string
+  status: InvoiceStatus
+  paymentStatus: PaymentStatus
+  createdBy: string
+  printedAt: string | null
+  printedBy: string | null
+  finalizedAt: string | null
+  finalizedBy: string | null
   totalAmount: number
-  status: OrderStatus
-  fulfilledAt: string | null
-  items: OrderItemResponse[]
   isActive: boolean
   createdAt: string
 }
 
 export interface PaymentResponse {
   id: string
-  saleId: string
-  storeId: string
+  invoiceId: string
   amount: number
   method: PaymentMethod
   collectedAt: string
@@ -694,6 +671,13 @@ export interface PaymentResponse {
   createdAt: string
 }
 
+export interface SysConfigResponse {
+  key: string
+  value: string
+  updatedAt: string
+  updatedBy: string | null
+}
+
 // ─── API Error ────────────────────────────────────────────────────────────────
 
 export interface ApiError {