mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 12:58:13 +00:00
Last mile confirmation request , approval, payment Feature
This commit is contained in:
Hagernesh
@@ -0,0 +1,290 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Group,
|
||||
Modal,
|
||||
NumberInput,
|
||||
Stack,
|
||||
Text,
|
||||
Textarea,
|
||||
} from "@mantine/core";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { ColumnDef } from "@edr/ui-common";
|
||||
import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
|
||||
|
||||
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useAuth } from "@/auth/useAuth";
|
||||
import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
|
||||
import {
|
||||
lastMileRequestsService,
|
||||
type LastMileRequest,
|
||||
type LastMileRequestStatus,
|
||||
} from "@/services/last-mile-requests.service";
|
||||
|
||||
const STATUS_META: Record<LastMileRequestStatus, { label: string; color: string }> = {
|
||||
AWAITING_CONFIRMATION: { label: "Awaiting Confirmation", color: "gray" },
|
||||
SUBMITTED: { label: "Submitted", color: "yellow" },
|
||||
APPROVED: { label: "Approved", color: "green" },
|
||||
REJECTED: { label: "Rejected", color: "red" },
|
||||
};
|
||||
|
||||
type StatusFilter = "ALL" | LastMileRequestStatus;
|
||||
|
||||
const FILTER_OPTIONS: { value: StatusFilter; label: string }[] = [
|
||||
{ value: "SUBMITTED", label: "Submitted" },
|
||||
{ value: "APPROVED", label: "Approved" },
|
||||
{ value: "REJECTED", label: "Rejected" },
|
||||
{ value: "AWAITING_CONFIRMATION", label: "Awaiting Confirmation" },
|
||||
{ value: "ALL", label: "All" },
|
||||
];
|
||||
|
||||
const fmtDate = (iso?: string | null) =>
|
||||
iso ? new Date(iso).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" }) : "—";
|
||||
|
||||
export function LastMileRequestsPanel() {
|
||||
const { toast } = useToast();
|
||||
const qc = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
const canApprove = hasPermission(user, FREIGHT_PERMS.lastMile.requestApprove);
|
||||
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>("SUBMITTED");
|
||||
const { pagination, setPagination } = usePagination({ pageSize: 10 });
|
||||
const [approveTarget, setApproveTarget] = useState<LastMileRequest | null>(null);
|
||||
const [rejectTarget, setRejectTarget] = useState<LastMileRequest | null>(null);
|
||||
const [advanceAmount, setAdvanceAmount] = useState<number | string>("");
|
||||
const [rejectReason, setRejectReason] = useState("");
|
||||
|
||||
const filter = {
|
||||
...(statusFilter !== "ALL" ? { status: statusFilter } : {}),
|
||||
page: pagination.pageIndex + 1,
|
||||
pageSize: pagination.pageSize,
|
||||
};
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: QUERY_KEYS.LAST_MILE_REQUESTS.list(filter),
|
||||
queryFn: async () => (await lastMileRequestsService.list(filter)).data,
|
||||
});
|
||||
const rows = data?.data ?? [];
|
||||
const meta = data?.meta;
|
||||
|
||||
const { data: freeTrucks } = useQuery({
|
||||
queryKey: QUERY_KEYS.LAST_MILE_REQUESTS.freeTruckCount,
|
||||
queryFn: async () => (await lastMileRequestsService.freeTruckCount()).data,
|
||||
});
|
||||
|
||||
const invalidate = () =>
|
||||
qc.invalidateQueries({ queryKey: QUERY_KEYS.LAST_MILE_REQUESTS.ROOT });
|
||||
|
||||
const approve = useMutation({
|
||||
mutationFn: () =>
|
||||
lastMileRequestsService.approve(approveTarget!.id, Number(advanceAmount)),
|
||||
onSuccess: () => {
|
||||
void invalidate();
|
||||
toast({ title: "Request approved" });
|
||||
setApproveTarget(null);
|
||||
setAdvanceAmount("");
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
const description = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
|
||||
toast({ title: "Approve failed", description, variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const reject = useMutation({
|
||||
mutationFn: () => lastMileRequestsService.reject(rejectTarget!.id, rejectReason.trim()),
|
||||
onSuccess: () => {
|
||||
void invalidate();
|
||||
toast({ title: "Request rejected" });
|
||||
setRejectTarget(null);
|
||||
setRejectReason("");
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
const description = (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
|
||||
toast({ title: "Reject failed", description, variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const columns: ColumnDef<LastMileRequest>[] = [
|
||||
{
|
||||
id: "booking",
|
||||
header: () => <span>Booking</span>,
|
||||
cell: ({ row }) => {
|
||||
const r = row.original;
|
||||
return (
|
||||
<Stack gap={0}>
|
||||
<Text size="sm" fw={600}>{r.booking?.reference ?? r.bookingId}</Text>
|
||||
<Text size="xs" c="dimmed">{r.booking?.company?.name ?? "—"}</Text>
|
||||
</Stack>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "containers",
|
||||
header: () => <span>Requested Containers</span>,
|
||||
cell: ({ row }) => {
|
||||
const nums = row.original.requestedContainerNumbers;
|
||||
return <Text size="sm">{nums?.length ? nums.join(", ") : "—"}</Text>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "submittedAt",
|
||||
header: () => <span>Submitted</span>,
|
||||
cell: ({ row }) => <Text size="sm">{fmtDate(row.original.submittedAt)}</Text>,
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
header: () => <span>Status</span>,
|
||||
cell: ({ row }) => {
|
||||
const meta = STATUS_META[row.original.status];
|
||||
return (
|
||||
<Badge color={meta.color} variant="light" size="sm">
|
||||
{meta.label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
...(canApprove
|
||||
? [
|
||||
{
|
||||
id: "actions",
|
||||
header: () => <span>Actions</span>,
|
||||
cell: ({ row }: { row: { original: LastMileRequest } }) => {
|
||||
const r = row.original;
|
||||
if (r.status !== "SUBMITTED") return null;
|
||||
return (
|
||||
<Group gap="xs">
|
||||
<Button size="xs" variant="light" color="green" onClick={() => setApproveTarget(r)}>
|
||||
Approve
|
||||
</Button>
|
||||
<Button size="xs" variant="light" color="red" onClick={() => setRejectTarget(r)}>
|
||||
Reject
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
},
|
||||
} as ColumnDef<LastMileRequest>,
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
return (
|
||||
<Card radius="lg" padding={0} withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
|
||||
<Stack gap={0}>
|
||||
<Box px="md" pt="md" pb="sm" w="100%">
|
||||
<Stack gap="sm">
|
||||
<Text size="sm" c="dimmed">
|
||||
{freeTrucks?.count ?? 0} truck{freeTrucks?.count === 1 ? "" : "s"} currently free
|
||||
</Text>
|
||||
<Group gap="xs" wrap="wrap">
|
||||
{FILTER_OPTIONS.map((option) => {
|
||||
const active = statusFilter === option.value;
|
||||
return (
|
||||
<Button
|
||||
key={option.value}
|
||||
size="xs"
|
||||
variant={active ? "filled" : "default"}
|
||||
styles={{ label: { fontWeight: 500 } }}
|
||||
onClick={() => {
|
||||
setStatusFilter(option.value);
|
||||
setPagination((p) => ({ ...p, pageIndex: 0 }));
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
status={isLoading ? "loading" : "success"}
|
||||
emptyMessage="No last-mile confirmation requests found"
|
||||
pagination={{
|
||||
pageIndex: pagination.pageIndex,
|
||||
pageSize: pagination.pageSize,
|
||||
pageCount: meta?.totalPages ?? 1,
|
||||
totalCount: meta?.total ?? 0,
|
||||
}}
|
||||
tableOptions={{
|
||||
manualPagination: true,
|
||||
pageCount: meta?.totalPages ?? 1,
|
||||
state: { pagination },
|
||||
onPaginationChange: setPagination,
|
||||
}}
|
||||
containerClassName="border-0 shadow-none bg-transparent"
|
||||
footer={({ table, pagination: fp }) => (
|
||||
<DataTableFooter table={table} pagination={fp} options={{ labels: { items: "requests" } }} />
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Modal
|
||||
opened={Boolean(approveTarget)}
|
||||
onClose={() => setApproveTarget(null)}
|
||||
title={<Text fw={700}>Approve request{approveTarget?.booking?.reference ? ` · ${approveTarget.booking.reference}` : ""}</Text>}
|
||||
centered
|
||||
>
|
||||
<Stack gap="md">
|
||||
<NumberInput
|
||||
label="Advance amount"
|
||||
placeholder="0.00"
|
||||
required
|
||||
min={0.01}
|
||||
value={advanceAmount}
|
||||
onChange={setAdvanceAmount}
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => setApproveTarget(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
disabled={!(Number(advanceAmount) > 0)}
|
||||
loading={approve.isPending}
|
||||
onClick={() => approve.mutate()}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
opened={Boolean(rejectTarget)}
|
||||
onClose={() => setRejectTarget(null)}
|
||||
title={<Text fw={700}>Reject request{rejectTarget?.booking?.reference ? ` · ${rejectTarget.booking.reference}` : ""}</Text>}
|
||||
centered
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Textarea
|
||||
label="Reason"
|
||||
placeholder="Why is this request being rejected?"
|
||||
required
|
||||
minRows={3}
|
||||
value={rejectReason}
|
||||
onChange={(e) => setRejectReason(e.currentTarget.value)}
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => setRejectTarget(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
disabled={!rejectReason.trim()}
|
||||
loading={reject.isPending}
|
||||
onClick={() => reject.mutate()}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user