frontend fully integreated with the backend

2026-08-25 23:47:33 +05:30
parent 1bee5f91c6
commit 83d3272784
151 changed files with 10724 additions and 573 deletions
@@ -0,0 +1,172 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+
+import { DataTable } from '@/components/shared/data-table'
+import type { TableConfig } from '@/components/shared/data-table'
+import { Badge } from '@/components/ui/badge'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+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'
+
+const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+const TASK_STATUS_VARIANT: Record<DeliveryTaskStatus, 'default' | 'secondary' | 'destructive'> = {
+  Pending: 'secondary',
+  Delivered: 'default',
+  PartiallyDelivered: 'secondary',
+  Failed: 'destructive',
+}
+
+export function DeliveryTasksClient() {
+  const [data, setData] = useState<DeliveryTaskResponse[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const [rides, setRides] = useState<RideResponse[]>([])
+  const [selectedRideId, setSelectedRideId] = useState('')
+
+  const selectedRide = useMemo(
+    () => rides.find((ride) => ride.id === selectedRideId) ?? null,
+    [rides, selectedRideId]
+  )
+
+  const fetchRides = useCallback(async () => {
+    try {
+      const res = await ridesApi.list({ page: 1, pageSize: 200, rideType: 'Delivery' })
+      const items = getPaginatedItems(res)
+      setRides(items)
+      setSelectedRideId((current) => current || items[0]?.id || '')
+    } catch (err) {
+      toast.add({ title: 'Failed to load rides', description: getApiError(err), type: 'error' })
+    }
+  }, [])
+
+  const fetchData = useCallback(async (rideId: string, p: number, ps: number) => {
+    if (!rideId) {
+      setData([])
+      setTotal(0)
+      setLoading(false)
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await deliveryTasksApi.listByRide(rideId, { page: p, pageSize: ps })
+      setData(getPaginatedItems(res))
+      setTotal(res.total)
+    } catch (err) {
+      toast.add({ title: 'Failed to load delivery tasks', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchRides()
+  }, [fetchRides])
+
+  useEffect(() => {
+    fetchData(selectedRideId, page, pageSize)
+  }, [fetchData, selectedRideId, page, pageSize])
+
+  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] },
+    columns: [
+      {
+        key: 'storeName',
+        title: 'Store',
+        fields: [{ key: 'storeName', primary: true }],
+        minWidth: 200,
+      },
+      {
+        key: 'sequence',
+        title: 'Sequence',
+        fields: ['sequence'],
+        width: 120,
+        cellRender: (row) => (
+          <span className="text-sm">{row.sequence}</span>
+        ),
+      },
+      {
+        key: 'status',
+        title: 'Status',
+        fields: ['status'],
+        width: 180,
+        cellRender: (row) => (
+          <Badge variant={TASK_STATUS_VARIANT[row.status]}>{row.status}</Badge>
+        ),
+      },
+      {
+        key: 'createdAt',
+        title: 'Created',
+        fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
+        width: 140,
+      },
+    ],
+  }), [pageSize])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Delivery Tasks</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Individual store drop-offs within the selected ride
+          </p>
+        </div>
+        <div className="w-full max-w-sm">
+          <Select
+            value={selectedRideId || '__none__'}
+            onValueChange={(value) => {
+              const nextRideId = !value || value === '__none__' ? '' : value
+              setSelectedRideId(nextRideId)
+              setPage(1)
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select a ride..." />
+            </SelectTrigger>
+            <SelectContent>
+              <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}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedRide && (
+            <p className="mt-2 text-xs text-muted-foreground">
+              Status: {selectedRide.status} | Driver: {selectedRide.driverFullName}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <DataTable
+        config={tableConfig}
+        data={data}
+        loading={loading}
+        totalCount={total}
+        onServerSideChange={({ page: p }) => {
+          setPage(p.page)
+          setPageSize(p.pageSize)
+        }}
+      />
+    </>
+  )
+}
@@ -0,0 +1,5 @@
+import { DeliveryTasksClient } from './_components/delivery-tasks-client'
+
+export default function DeliveryTasksPage() {
+  return <DeliveryTasksClient />
+}