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

@@ -16,6 +16,10 @@ import { toast } from '@/components/ui/toast'
 import { deliveryTasks as deliveryTasksApi, rides as ridesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { DeliveryTaskResponse, DeliveryTaskStatus, RideResponse } from '@/types/api'
 
+import { DeliveryTaskViewSheet } from './delivery-task-view-sheet'
+import { DeliveryTaskDeliverDialog } from './delivery-task-deliver-dialog'
+import { DeliveryTaskFailDialog } from './delivery-task-fail-dialog'
+
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
 
@@ -35,6 +39,11 @@ export function DeliveryTasksClient() {
   const [rides, setRides] = useState<RideResponse[]>([])
   const [selectedRideId, setSelectedRideId] = useState('')
 
+  const [viewOpen, setViewOpen] = useState(false)
+  const [deliverOpen, setDeliverOpen] = useState(false)
+  const [failOpen, setFailOpen] = useState(false)
+  const [selectedTask, setSelectedTask] = useState<DeliveryTaskResponse | null>(null)
+
   const selectedRide = useMemo(
     () => rides.find((ride) => ride.id === selectedRideId) ?? null,
     [rides, selectedRideId]
@@ -51,7 +60,7 @@ export function DeliveryTasksClient() {
     }
   }, [])
 
-  const fetchData = useCallback(async (rideId: string, p: number, ps: number) => {
+  const fetchData = useCallback(async (rideId: string) => {
     if (!rideId) {
       setData([])
       setTotal(0)
@@ -61,9 +70,9 @@ export function DeliveryTasksClient() {
 
     setLoading(true)
     try {
-      const res = await deliveryTasksApi.listByRide(rideId, { page: p, pageSize: ps })
-      setData(getPaginatedItems(res))
-      setTotal(res.total)
+      const items = await deliveryTasksApi.listByRide(rideId)
+      setData(items)
+      setTotal(items.length)
     } catch (err) {
       toast.add({ title: 'Failed to load delivery tasks', description: getApiError(err), type: 'error' })
     } finally {
@@ -76,12 +85,26 @@ export function DeliveryTasksClient() {
   }, [fetchRides])
 
   useEffect(() => {
-    fetchData(selectedRideId, page, pageSize)
-  }, [fetchData, selectedRideId, page, pageSize])
+    fetchData(selectedRideId)
+  }, [fetchData, selectedRideId])
+
+  function handleView(row: DeliveryTaskResponse) {
+    setSelectedTask(row)
+    setViewOpen(true)
+  }
+
+  function handleDeliver(row: DeliveryTaskResponse) {
+    setSelectedTask(row)
+    setDeliverOpen(true)
+  }
+
+  function handleFail(row: DeliveryTaskResponse) {
+    setSelectedTask(row)
+    setFailOpen(true)
+  }
 
   const tableConfig = useMemo<TableConfig<DeliveryTaskResponse>>(() => ({
     rowKey: 'id',
-    serverSide: true,
     stickyHeader: true,
     emptyMessage: selectedRideId ? 'No delivery tasks found for this ride.' : 'Select a ride to view its delivery tasks.',
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
@@ -117,6 +140,27 @@ export function DeliveryTasksClient() {
         width: 140,
       },
     ],
+    rowActions: {
+      actions: () => [
+        {
+          action: 'view',
+          label: 'View task',
+          onClick: handleView,
+        },
+        {
+          action: 'confirm',
+          label: 'Confirm delivery',
+          onClick: handleDeliver,
+          visible: (target) => target.status === 'Pending',
+        },
+        {
+          action: 'cancel',
+          label: 'Mark as failed',
+          onClick: handleFail,
+          visible: (target) => target.status === 'Pending',
+        },
+      ],
+    },
   }), [pageSize])
 
   return (
@@ -162,10 +206,27 @@ export function DeliveryTasksClient() {
         data={data}
         loading={loading}
         totalCount={total}
-        onServerSideChange={({ page: p }) => {
-          setPage(p.page)
-          setPageSize(p.pageSize)
-        }}
+      />
+
+      <DeliveryTaskViewSheet
+        open={viewOpen}
+        onClose={() => setViewOpen(false)}
+        task={selectedTask}
+      />
+
+      <DeliveryTaskDeliverDialog
+        open={deliverOpen}
+        onClose={() => setDeliverOpen(false)}
+        onSuccess={() => fetchData(selectedRideId)}
+        task={selectedTask}
+        vehicleId={selectedRide?.vehicleId ?? null}
+      />
+
+      <DeliveryTaskFailDialog
+        open={failOpen}
+        onClose={() => setFailOpen(false)}
+        onSuccess={() => fetchData(selectedRideId)}
+        task={selectedTask}
       />
     </>
   )