frontend fully integreated with the backend
This commit is contained in:
Kalana B. Thilakarathna
+172
@@ -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 />
|
||||
}
|
||||
+156
@@ -0,0 +1,156 @@
|
||||
'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 { toast } from '@/components/ui/toast'
|
||||
import { loadingSheets as loadingSheetsApi, getApiError, getPaginatedItems } from '@/lib/api/index'
|
||||
import type { LoadingSheetResponse, LoadingSheetStatus } from '@/types/api'
|
||||
|
||||
const fmtDate = (v: string) =>
|
||||
new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
|
||||
|
||||
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',
|
||||
}
|
||||
|
||||
export function LoadingSheetsClient() {
|
||||
const [data, setData] = useState<LoadingSheetResponse[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(20)
|
||||
|
||||
const fetchData = useCallback(async (p: number, ps: number) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await loadingSheetsApi.list({ page: p, pageSize: ps })
|
||||
setData(getPaginatedItems(res))
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to load loading sheets', description: getApiError(err), type: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(page, pageSize)
|
||||
}, [fetchData, page, pageSize])
|
||||
|
||||
async function handleConfirmDispatch(row: LoadingSheetResponse) {
|
||||
try {
|
||||
await loadingSheetsApi.confirmDispatch(row.id)
|
||||
toast.add({ title: 'Dispatch confirmed', 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' })
|
||||
}
|
||||
}
|
||||
|
||||
const tableConfig = useMemo<TableConfig<LoadingSheetResponse>>(() => ({
|
||||
rowKey: 'id',
|
||||
serverSide: true,
|
||||
stickyHeader: true,
|
||||
emptyMessage: 'No loading sheets found.',
|
||||
pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
|
||||
columns: [
|
||||
{
|
||||
key: 'id',
|
||||
title: 'Sheet ID',
|
||||
fields: ['id'],
|
||||
width: 140,
|
||||
cellRender: (row) => (
|
||||
<span className="font-mono text-sm">{truncId(row.id)}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'warehouseName',
|
||||
title: 'Warehouse',
|
||||
fields: [{ key: 'warehouseName', primary: true }],
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'Status',
|
||||
fields: ['status'],
|
||||
width: 180,
|
||||
cellRender: (row) => (
|
||||
<Badge variant={LS_STATUS_VARIANT[row.status]}>{row.status}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'itemCount',
|
||||
title: 'Items',
|
||||
fields: ['items'],
|
||||
width: 120,
|
||||
cellRender: (row) => (
|
||||
<span className="text-sm text-muted-foreground">{row.items.length} items</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'Created',
|
||||
fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
|
||||
width: 140,
|
||||
},
|
||||
],
|
||||
rowActions: {
|
||||
actions: () => [
|
||||
{
|
||||
action: 'confirm',
|
||||
label: 'Confirm dispatch',
|
||||
onClick: handleConfirmDispatch,
|
||||
visible: (target) => target.status === 'Pending',
|
||||
},
|
||||
{
|
||||
action: 'confirm',
|
||||
label: 'Confirm receipt',
|
||||
onClick: handleConfirmReceipt,
|
||||
visible: (target) => target.status === 'DispatchConfirmed',
|
||||
},
|
||||
],
|
||||
},
|
||||
}), [pageSize])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<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
|
||||
</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 { LoadingSheetsClient } from './_components/loading-sheets-client'
|
||||
|
||||
export default function LoadingSheetsPage() {
|
||||
return <LoadingSheetsClient />
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
'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 {
|
||||
rides as ridesApi,
|
||||
vehicles as vehiclesApi,
|
||||
drivers as driversApi,
|
||||
routes as routesApi,
|
||||
warehouses as warehousesApi,
|
||||
getApiError,
|
||||
} from '@/lib/api/index'
|
||||
import type { VehicleResponse, DriverProfileResponse, RouteResponse, WarehouseResponse } 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'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
interface RideSheetProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
function ensureItems<T>(value: { items?: T[] } | null | undefined): T[] {
|
||||
return Array.isArray(value?.items) ? value.items : []
|
||||
}
|
||||
|
||||
export function RideSheet({ open, onClose, onSuccess }: RideSheetProps) {
|
||||
const [vehiclesList, setVehiclesList] = useState<VehicleResponse[]>([])
|
||||
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,
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
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]) => {
|
||||
setVehiclesList(ensureItems(v))
|
||||
setDriversList(ensureItems(d))
|
||||
setRoutesList(ensureItems(r))
|
||||
setWarehousesList(ensureItems(w))
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.add({ title: 'Failed to load reference data', description: getApiError(err), type: 'error' })
|
||||
})
|
||||
}, [open])
|
||||
|
||||
async function onSubmit(values: FormValues) {
|
||||
try {
|
||||
await ridesApi.create(values)
|
||||
toast.add({ title: 'Ride created', type: 'success' })
|
||||
onSuccess()
|
||||
onClose()
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to create ride', description: getApiError(err), type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
||||
<DialogContent className="overflow-y-auto sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Ride</DialogTitle>
|
||||
<DialogDescription>Start a new delivery or sales run.</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"
|
||||
label="Vehicle"
|
||||
required
|
||||
render={({ field }) => (
|
||||
<Select value={field.value as string} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select available vehicle..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="" disabled>Select available vehicle...</SelectItem>
|
||||
{vehiclesList.map((v) => (
|
||||
<SelectItem key={v.id} value={v.id}>
|
||||
{v.regNumber} — {v.numberPlate}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="driverProfileId"
|
||||
label="Driver"
|
||||
required
|
||||
render={({ field }) => (
|
||||
<Select value={field.value as string} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select driver..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="" disabled>Select driver...</SelectItem>
|
||||
{driversList.map((d) => (
|
||||
<SelectItem key={d.id} value={d.id}>
|
||||
{d.userFullName} — {d.licenseNumber}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
|
||||
<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"
|
||||
label="Meter Start (km)"
|
||||
required
|
||||
render={({ field, invalid }) => (
|
||||
<Input
|
||||
id="meterstart"
|
||||
name={field.name}
|
||||
ref={field.ref}
|
||||
type="number"
|
||||
min={0}
|
||||
value={Number(field.value as number)}
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
onBlur={field.onBlur}
|
||||
placeholder="0"
|
||||
aria-invalid={invalid}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FieldGroup>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
{form.formState.isSubmitting ? 'Creating…' : 'Create Ride'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
'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 { rides as ridesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
|
||||
import type { RideResponse, RideStatus, RideType } from '@/types/api'
|
||||
|
||||
import { RideSheet } from './ride-sheet'
|
||||
|
||||
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',
|
||||
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)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(20)
|
||||
|
||||
const [sheetOpen, setSheetOpen] = useState(false)
|
||||
|
||||
const fetchData = useCallback(async (p: number, ps: number) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await ridesApi.list({ page: p, pageSize: ps })
|
||||
setData(getPaginatedItems(res))
|
||||
setTotal(res.total)
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to load rides', description: getApiError(err), type: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(page, pageSize)
|
||||
}, [fetchData, page, pageSize])
|
||||
|
||||
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' })
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClose(row: RideResponse) {
|
||||
const input = window.prompt('Enter meter end reading:')
|
||||
if (input === null) return
|
||||
const meterend = Number(input)
|
||||
if (isNaN(meterend) || meterend < 0) {
|
||||
toast.add({ title: 'Invalid meter reading', type: 'error' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
await ridesApi.close(row.id, meterend)
|
||||
toast.add({ title: 'Ride closed', type: 'success' })
|
||||
fetchData(page, pageSize)
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to close ride', description: getApiError(err), type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
const tableConfig = useMemo<TableConfig<RideResponse>>(() => ({
|
||||
rowKey: 'id',
|
||||
serverSide: true,
|
||||
stickyHeader: true,
|
||||
emptyMessage: 'No rides found.',
|
||||
pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
|
||||
columns: [
|
||||
{
|
||||
key: 'vehicle',
|
||||
title: 'Vehicle / Driver',
|
||||
fields: ['vehicleNumberPlate', 'driverFullName'],
|
||||
minWidth: 200,
|
||||
cellRender: (row) => (
|
||||
<div>
|
||||
<p className="text-sm font-medium">{row.vehicleNumberPlate}</p>
|
||||
<p className="text-xs text-muted-foreground">{row.driverFullName}</p>
|
||||
</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,
|
||||
cellRender: (row) => (
|
||||
<Badge variant={RIDE_STATUS_VARIANT[row.status]}>{row.status}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'Created',
|
||||
fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
|
||||
width: 140,
|
||||
},
|
||||
],
|
||||
rowActions: {
|
||||
actions: () => [
|
||||
{
|
||||
action: 'activate',
|
||||
label: 'Activate ride',
|
||||
onClick: handleActivate,
|
||||
visible: (target) => target.status === 'Open',
|
||||
},
|
||||
{
|
||||
action: 'close',
|
||||
label: 'Close ride',
|
||||
onClick: handleClose,
|
||||
visible: (target) => target.status === 'Active',
|
||||
},
|
||||
],
|
||||
},
|
||||
}), [pageSize])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Rides</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
Delivery runs assigned to a driver and vehicle
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setSheetOpen(true)}>
|
||||
<HugeiconsIcon icon={Add01Icon} size={16} />
|
||||
Add Ride
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
config={tableConfig}
|
||||
data={data}
|
||||
loading={loading}
|
||||
totalCount={total}
|
||||
onServerSideChange={({ page: p }) => {
|
||||
setPage(p.page)
|
||||
setPageSize(p.pageSize)
|
||||
}}
|
||||
/>
|
||||
|
||||
<RideSheet
|
||||
open={sheetOpen}
|
||||
onClose={() => setSheetOpen(false)}
|
||||
onSuccess={() => fetchData(page, pageSize)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { RidesClient } from './_components/rides-client'
|
||||
|
||||
export default function RidesPage() {
|
||||
return <RidesClient />
|
||||
}
|
||||
Reference in New Issue
Block a user