mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 13:28:11 +00:00
Merge pull request #64 from Tria-plc/freight/feature/booking-page
feat(backoffice): Add Booking Requests routes and sidebar navigation
This commit is contained in:
yaschalew10
@@ -1,7 +1,7 @@
|
|||||||
import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
|
import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { DashboardLayout, type SidebarItem } from "@edr/ui-common";
|
import { DashboardLayout, type SidebarItem } from "@edr/ui-common";
|
||||||
import { LayoutDashboard, Network, Paperclip, Settings } from "lucide-react";
|
import { FileText, LayoutDashboard, Network, Paperclip, Settings } from "lucide-react";
|
||||||
import { useAuth } from "./auth/useAuth";
|
import { useAuth } from "./auth/useAuth";
|
||||||
import LoginPage from "./pages/auth/LoginPage";
|
import LoginPage from "./pages/auth/LoginPage";
|
||||||
import OverviewPage from "./pages/dashboard/OverviewPage";
|
import OverviewPage from "./pages/dashboard/OverviewPage";
|
||||||
@@ -16,6 +16,8 @@ import DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage
|
|||||||
import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
|
import DemoUser1Page from "./pages/dashboard/demo/DemoUser1Page";
|
||||||
import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
|
import DemoUser2Page from "./pages/dashboard/demo/DemoUser2Page";
|
||||||
import { RuleEnginePage } from "./pages/ruleEngine/RuleEngine";
|
import { RuleEnginePage } from "./pages/ruleEngine/RuleEngine";
|
||||||
|
import BookingRequestsPage from "./pages/bookings/BookingRequestsPage";
|
||||||
|
import BookingRequestDetailPage from "./pages/bookings/BookingRequestDetailPage";
|
||||||
|
|
||||||
const queryClient = new QueryClient({
|
const queryClient = new QueryClient({
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
@@ -33,6 +35,11 @@ const baseSidebarItems: SidebarItem[] = [
|
|||||||
href: "/dashboard/overview",
|
href: "/dashboard/overview",
|
||||||
icon: <LayoutDashboard />,
|
icon: <LayoutDashboard />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "Booking Requests",
|
||||||
|
href: "/dashboard/booking-requests",
|
||||||
|
icon: <FileText />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "User management",
|
label: "User management",
|
||||||
href: "/dashboard/user-management",
|
href: "/dashboard/user-management",
|
||||||
@@ -159,6 +166,9 @@ const App = () => {
|
|||||||
<Route path="/dashboard" element={<DashboardShell />}>
|
<Route path="/dashboard" element={<DashboardShell />}>
|
||||||
<Route path="overview" element={<OverviewPage />} />
|
<Route path="overview" element={<OverviewPage />} />
|
||||||
|
|
||||||
|
<Route path="booking-requests" element={<BookingRequestsPage />} />
|
||||||
|
<Route path="booking-requests/:id" element={<BookingRequestDetailPage />} />
|
||||||
|
|
||||||
<Route path="user-management" element={<UserManagementPage />} />
|
<Route path="user-management" element={<UserManagementPage />} />
|
||||||
<Route path="user-management/users" element={<UsersPage />} />
|
<Route path="user-management/users" element={<UsersPage />} />
|
||||||
<Route path="user-management/employees" element={<EmployeesPage />} />
|
<Route path="user-management/employees" element={<EmployeesPage />} />
|
||||||
|
|||||||
@@ -0,0 +1,734 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
AlertCircle,
|
||||||
|
AlertTriangle,
|
||||||
|
Anchor,
|
||||||
|
ArrowLeft,
|
||||||
|
ArrowRight,
|
||||||
|
Calendar,
|
||||||
|
Check,
|
||||||
|
CheckCircle2,
|
||||||
|
Clock,
|
||||||
|
FileSignature,
|
||||||
|
FileText,
|
||||||
|
History,
|
||||||
|
Info,
|
||||||
|
MapPin,
|
||||||
|
Package,
|
||||||
|
ShieldCheck,
|
||||||
|
Ship,
|
||||||
|
StickyNote,
|
||||||
|
Train,
|
||||||
|
Truck,
|
||||||
|
Weight,
|
||||||
|
X,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import Breadcrumbs from "@/components/ui/Breadcrumbs";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
getBookingRequestById,
|
||||||
|
getBookingRequests,
|
||||||
|
saveBookingRequestsToStorage,
|
||||||
|
updateBookingRequestStatus,
|
||||||
|
BOOKING_STATUSES,
|
||||||
|
type BookingRequest,
|
||||||
|
} from "./booking-requests.mock";
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
Separator,
|
||||||
|
} from "@edr/ui-common";
|
||||||
|
|
||||||
|
const STATUS_STYLES: Record<string, { label: string; color: string }> = {
|
||||||
|
DRAFT: {
|
||||||
|
label: "Draft",
|
||||||
|
color: "bg-slate-100 text-slate-700 border-slate-300",
|
||||||
|
},
|
||||||
|
RFQ_SUBMITTED: {
|
||||||
|
label: "RFQ Submitted",
|
||||||
|
color: "bg-amber-50 text-amber-700 border-amber-200",
|
||||||
|
},
|
||||||
|
QUOTATION_SENT: {
|
||||||
|
label: "Quotation Sent",
|
||||||
|
color: "bg-sky-50 text-sky-700 border-sky-200",
|
||||||
|
},
|
||||||
|
QUOTATION_APPROVED: {
|
||||||
|
label: "Quotation Approved",
|
||||||
|
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||||
|
},
|
||||||
|
QUOTATION_REJECTED: {
|
||||||
|
label: "Quotation Rejected",
|
||||||
|
color: "bg-red-50 text-red-700 border-red-200",
|
||||||
|
},
|
||||||
|
PENDING_APPROVAL: {
|
||||||
|
label: "Pending Approval",
|
||||||
|
color: "bg-amber-50 text-amber-700 border-amber-200",
|
||||||
|
},
|
||||||
|
APPROVED: {
|
||||||
|
label: "Approved",
|
||||||
|
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||||
|
},
|
||||||
|
SIGNED_CUSTOMER: {
|
||||||
|
label: "Customer Signed",
|
||||||
|
color: "bg-sky-50 text-sky-700 border-sky-200",
|
||||||
|
},
|
||||||
|
FULLY_EXECUTED: {
|
||||||
|
label: "Fully Executed",
|
||||||
|
color: "bg-indigo-50 text-indigo-700 border-indigo-200",
|
||||||
|
},
|
||||||
|
PAID: {
|
||||||
|
label: "Paid",
|
||||||
|
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||||
|
},
|
||||||
|
IN_TRANSIT: {
|
||||||
|
label: "In Transit",
|
||||||
|
color: "bg-sky-50 text-sky-700 border-sky-200",
|
||||||
|
},
|
||||||
|
COMPLETED: {
|
||||||
|
label: "Completed",
|
||||||
|
color: "bg-indigo-50 text-indigo-700 border-indigo-200",
|
||||||
|
},
|
||||||
|
CANCELLED: {
|
||||||
|
label: "Cancelled",
|
||||||
|
color: "bg-red-50 text-red-700 border-red-200",
|
||||||
|
},
|
||||||
|
PENDING_CONSOLIDATION: {
|
||||||
|
label: "Pending Consolidation",
|
||||||
|
color: "bg-amber-50 text-amber-700 border-amber-200",
|
||||||
|
},
|
||||||
|
CONSOLIDATED: {
|
||||||
|
label: "Consolidated",
|
||||||
|
color: "bg-indigo-50 text-indigo-700 border-indigo-200",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const PROGRESS_STAGES = [
|
||||||
|
{ label: "Request", icon: FileText, statuses: ["DRAFT", "RFQ_SUBMITTED"] },
|
||||||
|
{
|
||||||
|
label: "Quotation",
|
||||||
|
icon: ShieldCheck,
|
||||||
|
statuses: ["QUOTATION_SENT", "QUOTATION_APPROVED", "QUOTATION_REJECTED"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Approval",
|
||||||
|
icon: FileSignature,
|
||||||
|
statuses: ["PENDING_APPROVAL", "APPROVED"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Execution",
|
||||||
|
icon: CheckCircle2,
|
||||||
|
statuses: ["SIGNED_CUSTOMER", "FULLY_EXECUTED", "PAID"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "In Transit",
|
||||||
|
icon: Train,
|
||||||
|
statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
|
||||||
|
},
|
||||||
|
{ label: "Complete", icon: Check, statuses: ["COMPLETED"] },
|
||||||
|
];
|
||||||
|
|
||||||
|
const STATUS_CONFIG: Record<
|
||||||
|
string,
|
||||||
|
{ title: string; description: string; color: string; stage: number }
|
||||||
|
> = {
|
||||||
|
DRAFT: {
|
||||||
|
title: "Draft",
|
||||||
|
description: "Booking is being prepared.",
|
||||||
|
color: "text-slate-500",
|
||||||
|
stage: 0,
|
||||||
|
},
|
||||||
|
RFQ_SUBMITTED: {
|
||||||
|
title: "RFQ Submitted",
|
||||||
|
description: "Customer has submitted a request for quotation.",
|
||||||
|
color: "text-amber-600",
|
||||||
|
stage: 0,
|
||||||
|
},
|
||||||
|
QUOTATION_SENT: {
|
||||||
|
title: "Quotation Sent",
|
||||||
|
description: "A formal quotation has been sent to the customer.",
|
||||||
|
color: "text-sky-600",
|
||||||
|
stage: 1,
|
||||||
|
},
|
||||||
|
QUOTATION_APPROVED: {
|
||||||
|
title: "Quotation Approved",
|
||||||
|
description: "Customer approved the quotation.",
|
||||||
|
color: "text-emerald-600",
|
||||||
|
stage: 1,
|
||||||
|
},
|
||||||
|
QUOTATION_REJECTED: {
|
||||||
|
title: "Quotation Rejected",
|
||||||
|
description: "Customer rejected the quotation.",
|
||||||
|
color: "text-red-600",
|
||||||
|
stage: 1,
|
||||||
|
},
|
||||||
|
PENDING_APPROVAL: {
|
||||||
|
title: "Pending Approval",
|
||||||
|
description: "Booking requires your approval to proceed.",
|
||||||
|
color: "text-amber-600",
|
||||||
|
stage: 2,
|
||||||
|
},
|
||||||
|
APPROVED: {
|
||||||
|
title: "Approved",
|
||||||
|
description: "Booking has been approved by all parties.",
|
||||||
|
color: "text-emerald-600",
|
||||||
|
stage: 2,
|
||||||
|
},
|
||||||
|
SIGNED_CUSTOMER: {
|
||||||
|
title: "Customer Signed",
|
||||||
|
description: "Customer has signed the contract.",
|
||||||
|
color: "text-sky-600",
|
||||||
|
stage: 3,
|
||||||
|
},
|
||||||
|
FULLY_EXECUTED: {
|
||||||
|
title: "Fully Executed",
|
||||||
|
description: "All parties have signed.",
|
||||||
|
color: "text-indigo-600",
|
||||||
|
stage: 3,
|
||||||
|
},
|
||||||
|
PAID: {
|
||||||
|
title: "Paid",
|
||||||
|
description: "Payment received.",
|
||||||
|
color: "text-emerald-600",
|
||||||
|
stage: 3,
|
||||||
|
},
|
||||||
|
IN_TRANSIT: {
|
||||||
|
title: "In Transit",
|
||||||
|
description: "Cargo is moving through the rail network.",
|
||||||
|
color: "text-sky-600",
|
||||||
|
stage: 4,
|
||||||
|
},
|
||||||
|
PENDING_CONSOLIDATION: {
|
||||||
|
title: "Pending Consolidation",
|
||||||
|
description: "Cargo awaiting consolidation.",
|
||||||
|
color: "text-amber-500",
|
||||||
|
stage: 4,
|
||||||
|
},
|
||||||
|
CONSOLIDATED: {
|
||||||
|
title: "Consolidated",
|
||||||
|
description: "Cargo merged into larger shipment.",
|
||||||
|
color: "text-indigo-500",
|
||||||
|
stage: 4,
|
||||||
|
},
|
||||||
|
COMPLETED: {
|
||||||
|
title: "Completed",
|
||||||
|
description: "Service completed successfully.",
|
||||||
|
color: "text-emerald-600",
|
||||||
|
stage: 5,
|
||||||
|
},
|
||||||
|
CANCELLED: {
|
||||||
|
title: "Cancelled",
|
||||||
|
description: "Booking terminated.",
|
||||||
|
color: "text-red-600",
|
||||||
|
stage: -1,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function BookingRequestDetailPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [booking, setBooking] = useState<BookingRequest | undefined>(
|
||||||
|
id ? getBookingRequestById(id) : undefined,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!booking) {
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<Card className="flex flex-col items-center p-12 text-center">
|
||||||
|
<div className="flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-400">
|
||||||
|
<Package className="size-8" />
|
||||||
|
</div>
|
||||||
|
<h1 className="mt-4 text-2xl font-bold text-slate-900">
|
||||||
|
Booking not found
|
||||||
|
</h1>
|
||||||
|
<Button
|
||||||
|
className="mt-4"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => navigate("/dashboard/booking-requests")}
|
||||||
|
>
|
||||||
|
<ArrowLeft />
|
||||||
|
Back to Booking Requests
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusConfig = STATUS_CONFIG[booking.status] ?? STATUS_CONFIG.DRAFT;
|
||||||
|
const currentStage = statusConfig.stage;
|
||||||
|
|
||||||
|
const canApprove = ["PENDING_APPROVAL", "RFQ_SUBMITTED"].includes(
|
||||||
|
booking.status,
|
||||||
|
);
|
||||||
|
const canReject = !["COMPLETED", "CANCELLED", "QUOTATION_REJECTED"].includes(
|
||||||
|
booking.status,
|
||||||
|
);
|
||||||
|
|
||||||
|
function handleApprove() {
|
||||||
|
if (!booking) return;
|
||||||
|
const nextStatus =
|
||||||
|
booking.status === "RFQ_SUBMITTED"
|
||||||
|
? ("QUOTATION_SENT" as const)
|
||||||
|
: ("APPROVED" as const);
|
||||||
|
updateBookingRequestStatus(booking.id, nextStatus);
|
||||||
|
setBooking(getBookingRequestById(booking.id));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReject() {
|
||||||
|
if (!booking) return;
|
||||||
|
updateBookingRequestStatus(booking.id, "CANCELLED");
|
||||||
|
setBooking(getBookingRequestById(booking.id));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Breadcrumbs
|
||||||
|
items={[
|
||||||
|
{ label: "Booking Requests", href: "/dashboard/booking-requests" },
|
||||||
|
{ label: booking.reference },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<Card className="flex-1">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
|
||||||
|
<Package className="size-6" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-2xl font-black tracking-tight text-foreground">
|
||||||
|
{booking.reference}
|
||||||
|
</h1>
|
||||||
|
<StatusBadge status={booking.status} />
|
||||||
|
<PriorityBadge score={booking.priorityScore} />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
||||||
|
<span className="font-semibold">{booking.customer}</span>
|
||||||
|
<Separator orientation="vertical" className="h-3" />
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Calendar className="size-3" />
|
||||||
|
Requested {booking.scheduledDate}
|
||||||
|
</span>
|
||||||
|
<Separator orientation="vertical" className="h-3" />
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Clock className="size-3" />
|
||||||
|
{new Date(booking.createdAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="flex shrink-0 items-start gap-2">
|
||||||
|
{canReject && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="border-red-200 text-red-700 hover:bg-red-50"
|
||||||
|
onClick={handleReject}
|
||||||
|
>
|
||||||
|
<X />
|
||||||
|
Reject
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{canApprove && (
|
||||||
|
<Button onClick={handleApprove}>
|
||||||
|
<ShieldCheck />
|
||||||
|
{booking.status === "RFQ_SUBMITTED"
|
||||||
|
? "Send Quotation"
|
||||||
|
: "Approve"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<History className="size-4 text-primary" />
|
||||||
|
Status Lifecycle
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Track the booking from request to completion
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-8">
|
||||||
|
<div className="relative flex w-full justify-between px-2">
|
||||||
|
<div className="absolute left-0 top-4 h-0.5 w-full bg-muted">
|
||||||
|
<div
|
||||||
|
className="h-full bg-primary transition-all duration-500"
|
||||||
|
style={{
|
||||||
|
width:
|
||||||
|
currentStage >= 0
|
||||||
|
? `${(currentStage / (PROGRESS_STAGES.length - 1)) * 100}%`
|
||||||
|
: "0%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{PROGRESS_STAGES.map((stage, idx) => {
|
||||||
|
const isCompleted = idx < currentStage;
|
||||||
|
const isActive = idx === currentStage;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={stage.label}
|
||||||
|
className="relative z-10 flex flex-col items-center gap-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex size-8 items-center justify-center rounded-full border-2 bg-background transition-all duration-300",
|
||||||
|
isCompleted
|
||||||
|
? "border-primary text-primary"
|
||||||
|
: isActive
|
||||||
|
? "scale-110 border-primary text-primary shadow-[0_0_10px_rgba(16,185,129,0.3)]"
|
||||||
|
: "border-muted text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isCompleted ? (
|
||||||
|
<CheckCircle2 className="size-4" />
|
||||||
|
) : (
|
||||||
|
<stage.icon className="size-4" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"text-[9px] font-bold uppercase tracking-widest",
|
||||||
|
isActive ? "text-primary" : "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{stage.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4 rounded-xl border border-border/50 bg-muted/20 p-5 md:flex-row md:items-center">
|
||||||
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-background shadow-sm">
|
||||||
|
{booking.status === "CANCELLED" ? (
|
||||||
|
<AlertTriangle className="size-5 text-red-500" />
|
||||||
|
) : (
|
||||||
|
<Info className="size-5 text-primary" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<h4
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-black uppercase tracking-tight",
|
||||||
|
statusConfig.color,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{statusConfig.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">
|
||||||
|
{statusConfig.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||||
|
<div className="flex flex-col gap-8 lg:col-span-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<Anchor className="size-4 text-primary" />
|
||||||
|
Route & Service
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-col items-center justify-between gap-4 rounded-xl border bg-muted/30 p-4 md:flex-row">
|
||||||
|
<RouteEndpoint
|
||||||
|
label="Origin Yard"
|
||||||
|
station={booking.originYard}
|
||||||
|
icon={<MapPin />}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col items-center gap-1 text-primary">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Train className="size-5" />
|
||||||
|
<ArrowRight className="size-4" />
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-primary/20 bg-primary/5 text-[9px] font-bold uppercase"
|
||||||
|
>
|
||||||
|
{booking.serviceType.replace(/_/g, " ")}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<RouteEndpoint
|
||||||
|
label="Destination Yard"
|
||||||
|
station={booking.destinationYard}
|
||||||
|
icon={<MapPin />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||||
|
<InfoItem
|
||||||
|
icon={<Ship />}
|
||||||
|
label="Trade Direction"
|
||||||
|
value={booking.tradeDirection}
|
||||||
|
/>
|
||||||
|
<InfoItem
|
||||||
|
icon={<ShieldCheck />}
|
||||||
|
label="Return"
|
||||||
|
value={
|
||||||
|
booking.serviceType === "RAIL_AND_FORWARDING"
|
||||||
|
? "With Return"
|
||||||
|
: "Without Return"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{booking.shippingLine && (
|
||||||
|
<InfoItem
|
||||||
|
icon={<Ship />}
|
||||||
|
label="Shipping Line"
|
||||||
|
value={booking.shippingLine}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{(booking.firstMilePickupAddress ||
|
||||||
|
booking.lastMileDeliveryAddress) && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<Truck className="size-4 text-primary" />
|
||||||
|
Mile Services
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||||
|
{booking.firstMilePickupAddress && (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
|
||||||
|
First Mile
|
||||||
|
</h3>
|
||||||
|
<InfoItem
|
||||||
|
label="Pickup"
|
||||||
|
value={booking.firstMilePickupAddress}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{booking.lastMileDeliveryAddress && (
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<h3 className="border-l-4 border-primary pl-3 text-xs font-bold uppercase tracking-wide text-foreground">
|
||||||
|
Last Mile
|
||||||
|
</h3>
|
||||||
|
<InfoItem
|
||||||
|
label="Delivery"
|
||||||
|
value={booking.lastMileDeliveryAddress}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<Package className="size-4 text-primary" />
|
||||||
|
Cargo Specifications
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-6">
|
||||||
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||||
|
<InfoItem
|
||||||
|
icon={<Package />}
|
||||||
|
label="Type"
|
||||||
|
value={booking.cargoType}
|
||||||
|
/>
|
||||||
|
<InfoItem
|
||||||
|
icon={<Weight />}
|
||||||
|
label="Total Weight"
|
||||||
|
value={`${booking.cargoTotalWeightVgm} Tons`}
|
||||||
|
/>
|
||||||
|
{booking.shippingLine && (
|
||||||
|
<InfoItem
|
||||||
|
icon={<Ship />}
|
||||||
|
label="Shipping Line"
|
||||||
|
value={booking.shippingLine}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Badge variant="outline" className="bg-background text-[9px]">
|
||||||
|
Hazardous: {booking.isHazardous ? "Yes" : "No"}
|
||||||
|
</Badge>
|
||||||
|
{booking.pnrCode && (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-background text-[9px]"
|
||||||
|
>
|
||||||
|
PNR: {booking.pnrCode}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-8">
|
||||||
|
<Card className="border-primary/20 bg-primary/[0.02]">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
|
<FileText className="size-4 text-primary" />
|
||||||
|
Contract Info
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-4">
|
||||||
|
<InfoItem label="Type" value={booking.contractType} />
|
||||||
|
<InfoItem label="Currency" value={booking.paymentCurrency} />
|
||||||
|
<InfoItem
|
||||||
|
label="Amount"
|
||||||
|
value={`${booking.paymentCurrency} ${booking.totalAmount.toLocaleString()}`}
|
||||||
|
/>
|
||||||
|
<InfoItem label="Payment" value={booking.paymentStatus} />
|
||||||
|
<Separator />
|
||||||
|
<InfoItem label="Created By" value={booking.createdBy} />
|
||||||
|
<InfoItem
|
||||||
|
label="Created"
|
||||||
|
value={new Date(booking.createdAt).toLocaleDateString()}
|
||||||
|
/>
|
||||||
|
<InfoItem
|
||||||
|
label="Last Updated"
|
||||||
|
value={new Date(booking.updatedAt).toLocaleDateString()}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{canApprove && (
|
||||||
|
<Card className="border-amber-200 bg-amber-50/30">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-base text-amber-800">
|
||||||
|
<AlertCircle className="size-4" />
|
||||||
|
Approval Required
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-amber-700">
|
||||||
|
This booking is waiting for your review.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col gap-3">
|
||||||
|
<Button onClick={handleApprove}>
|
||||||
|
<ShieldCheck />
|
||||||
|
{booking.status === "RFQ_SUBMITTED"
|
||||||
|
? "Send Quotation"
|
||||||
|
: "Approve Booking"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="border-red-200 text-red-700 hover:bg-red-50"
|
||||||
|
onClick={handleReject}
|
||||||
|
>
|
||||||
|
<X />
|
||||||
|
Reject
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatusBadge({ status }: { status: string }) {
|
||||||
|
const style = STATUS_STYLES[status] ?? {
|
||||||
|
label: status,
|
||||||
|
color: "bg-muted text-muted-foreground border-border",
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-0.5 font-bold uppercase tracking-wider text-[9px]",
|
||||||
|
style.color,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{style.label}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PriorityBadge({ score }: { score: number }) {
|
||||||
|
if (score >= 3) {
|
||||||
|
return (
|
||||||
|
<span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">
|
||||||
|
Urgent
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (score === 2) {
|
||||||
|
return (
|
||||||
|
<span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700">
|
||||||
|
High
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-600">
|
||||||
|
Normal
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RouteEndpoint({
|
||||||
|
label,
|
||||||
|
station,
|
||||||
|
icon,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
station: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm">
|
||||||
|
<div className="[&_svg]:size-5">{icon}</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-[9px] font-bold uppercase tracking-wide text-muted-foreground">
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-black text-foreground">{station}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InfoItem({
|
||||||
|
icon,
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
}: {
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
label: string;
|
||||||
|
value?: string | number | null;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
{icon && (
|
||||||
|
<div className="mt-0.5 text-muted-foreground [&_svg]:size-3.5">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-[9px] font-bold uppercase tracking-tight text-muted-foreground">
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs font-bold text-foreground">{value ?? "—"}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,479 @@
|
|||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
AlertCircle,
|
||||||
|
ArrowRight,
|
||||||
|
Calendar,
|
||||||
|
Clock,
|
||||||
|
Eye,
|
||||||
|
FileText,
|
||||||
|
Filter,
|
||||||
|
MoreHorizontal,
|
||||||
|
Package,
|
||||||
|
Search,
|
||||||
|
ShieldCheck,
|
||||||
|
Train,
|
||||||
|
User,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import Breadcrumbs from "@/components/ui/Breadcrumbs";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
getBookingRequests,
|
||||||
|
BOOKING_STATUSES,
|
||||||
|
type BookingRequest,
|
||||||
|
} from "./booking-requests.mock";
|
||||||
|
import {
|
||||||
|
DataTable,
|
||||||
|
DataTableFooter,
|
||||||
|
type ColumnDef,
|
||||||
|
usePagination,
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
Input,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
Separator,
|
||||||
|
} from "@edr/ui-common";
|
||||||
|
|
||||||
|
const STATUS_STYLES: Record<string, { label: string; color: string }> = {
|
||||||
|
DRAFT: {
|
||||||
|
label: "Draft",
|
||||||
|
color: "bg-slate-100 text-slate-700 border-slate-300",
|
||||||
|
},
|
||||||
|
RFQ_SUBMITTED: {
|
||||||
|
label: "RFQ Submitted",
|
||||||
|
color: "bg-amber-50 text-amber-700 border-amber-200",
|
||||||
|
},
|
||||||
|
QUOTATION_SENT: {
|
||||||
|
label: "Quotation Sent",
|
||||||
|
color: "bg-sky-50 text-sky-700 border-sky-200",
|
||||||
|
},
|
||||||
|
QUOTATION_APPROVED: {
|
||||||
|
label: "Quotation Approved",
|
||||||
|
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||||
|
},
|
||||||
|
QUOTATION_REJECTED: {
|
||||||
|
label: "Quotation Rejected",
|
||||||
|
color: "bg-red-50 text-red-700 border-red-200",
|
||||||
|
},
|
||||||
|
PENDING_APPROVAL: {
|
||||||
|
label: "Pending Approval",
|
||||||
|
color: "bg-amber-50 text-amber-700 border-amber-200",
|
||||||
|
},
|
||||||
|
APPROVED: {
|
||||||
|
label: "Approved",
|
||||||
|
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||||
|
},
|
||||||
|
SIGNED_CUSTOMER: {
|
||||||
|
label: "Customer Signed",
|
||||||
|
color: "bg-sky-50 text-sky-700 border-sky-200",
|
||||||
|
},
|
||||||
|
FULLY_EXECUTED: {
|
||||||
|
label: "Fully Executed",
|
||||||
|
color: "bg-indigo-50 text-indigo-700 border-indigo-200",
|
||||||
|
},
|
||||||
|
PAID: {
|
||||||
|
label: "Paid",
|
||||||
|
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||||
|
},
|
||||||
|
IN_TRANSIT: {
|
||||||
|
label: "In Transit",
|
||||||
|
color: "bg-sky-50 text-sky-700 border-sky-200",
|
||||||
|
},
|
||||||
|
COMPLETED: {
|
||||||
|
label: "Completed",
|
||||||
|
color: "bg-indigo-50 text-indigo-700 border-indigo-200",
|
||||||
|
},
|
||||||
|
CANCELLED: {
|
||||||
|
label: "Cancelled",
|
||||||
|
color: "bg-red-50 text-red-700 border-red-200",
|
||||||
|
},
|
||||||
|
PENDING_CONSOLIDATION: {
|
||||||
|
label: "Pending Consolidation",
|
||||||
|
color: "bg-amber-50 text-amber-700 border-amber-200",
|
||||||
|
},
|
||||||
|
CONSOLIDATED: {
|
||||||
|
label: "Consolidated",
|
||||||
|
color: "bg-indigo-50 text-indigo-700 border-indigo-200",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function StatusBadge({ status }: { status: string }) {
|
||||||
|
const style = STATUS_STYLES[status] ?? {
|
||||||
|
label: status,
|
||||||
|
color: "bg-muted text-muted-foreground border-border",
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-0.5 font-bold uppercase tracking-wider text-[9px]",
|
||||||
|
style.color,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{style.label}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PriorityBadge({ score }: { score: number }) {
|
||||||
|
if (score >= 3) {
|
||||||
|
return (
|
||||||
|
<span className="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700">
|
||||||
|
Urgent
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (score === 2) {
|
||||||
|
return (
|
||||||
|
<span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700">
|
||||||
|
High
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-slate-600">
|
||||||
|
Normal
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BookingRequestsPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { pagination, setPagination } = usePagination({ pageSize: 10 });
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const bookingRequests = useMemo(() => getBookingRequests(), []);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
return bookingRequests.filter((b) => {
|
||||||
|
if (
|
||||||
|
q &&
|
||||||
|
!b.reference.toLowerCase().includes(q) &&
|
||||||
|
!b.customer.toLowerCase().includes(q)
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (statusFilter && b.status !== statusFilter) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}, [bookingRequests, query, statusFilter]);
|
||||||
|
|
||||||
|
const total = filtered.length;
|
||||||
|
const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
|
||||||
|
const start = pagination.pageIndex * pagination.pageSize;
|
||||||
|
const end = Math.min(start + pagination.pageSize, total);
|
||||||
|
|
||||||
|
const paginatedData = useMemo(
|
||||||
|
() => filtered.slice(start, end),
|
||||||
|
[start, end, filtered],
|
||||||
|
);
|
||||||
|
|
||||||
|
const pendingCount = bookingRequests.filter(
|
||||||
|
(b) => b.status === "PENDING_APPROVAL" || b.status === "RFQ_SUBMITTED",
|
||||||
|
).length;
|
||||||
|
const activeCount = bookingRequests.filter(
|
||||||
|
(b) => !["COMPLETED", "CANCELLED"].includes(b.status),
|
||||||
|
).length;
|
||||||
|
const urgentCount = bookingRequests.filter(
|
||||||
|
(b) => b.priorityScore >= 3,
|
||||||
|
).length;
|
||||||
|
|
||||||
|
const columns: ColumnDef<BookingRequest>[] = [
|
||||||
|
{
|
||||||
|
id: "booking",
|
||||||
|
header: "Booking",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row.original;
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
|
||||||
|
<Package className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-slate-900">{b.reference}</p>
|
||||||
|
<p className="flex items-center gap-1 text-xs text-slate-500">
|
||||||
|
<User className="h-3 w-3" />
|
||||||
|
{b.customer}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "route",
|
||||||
|
header: "Route",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row.original;
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<div className="flex items-center gap-1 text-xs font-medium text-slate-700">
|
||||||
|
<span>{b.originYard}</span>
|
||||||
|
<ArrowRight className="h-3 w-3 text-slate-400" />
|
||||||
|
<span>{b.destinationYard}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-[10px] uppercase tracking-wide text-slate-500">
|
||||||
|
{b.tradeDirection}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "status",
|
||||||
|
header: "Status",
|
||||||
|
cell: ({ row }) => <StatusBadge status={row.original.status} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "service",
|
||||||
|
header: "Service",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row.original;
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<span className="text-xs font-medium text-slate-700">
|
||||||
|
{b.serviceType.replace(/_/g, " ")}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1 text-[10px] text-slate-500">
|
||||||
|
<Calendar className="h-3 w-3" />
|
||||||
|
{b.scheduledDate}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "cargo",
|
||||||
|
header: "Cargo",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row.original;
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<span className="text-xs font-medium text-slate-700">
|
||||||
|
{b.cargoType}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-slate-500">
|
||||||
|
{b.cargoTotalWeightVgm}T
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "priority",
|
||||||
|
header: "Priority",
|
||||||
|
cell: ({ row }) => <PriorityBadge score={row.original.priorityScore} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "amount",
|
||||||
|
header: "Amount",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row.original;
|
||||||
|
return (
|
||||||
|
<span className="font-mono text-xs font-semibold text-slate-900">
|
||||||
|
{b.paymentCurrency} {b.totalAmount.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
size: 40,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const b = row.original;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="flex justify-end"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<DropdownMenu modal={false}>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon">
|
||||||
|
<MoreHorizontal />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem
|
||||||
|
onSelect={() =>
|
||||||
|
navigate(`/dashboard/booking-requests/${b.id}`)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Eye />
|
||||||
|
View Details
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
variant="destructive"
|
||||||
|
onSelect={() =>
|
||||||
|
navigate(`/dashboard/booking-requests/${b.id}`)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<AlertCircle />
|
||||||
|
Review
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen p-6">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Breadcrumbs items={[{ label: "Booking Requests" }]} />
|
||||||
|
|
||||||
|
<Card className="flex-row justify-between p-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight text-slate-900">
|
||||||
|
Booking Requests
|
||||||
|
</h1>
|
||||||
|
<p className="mt-1 text-sm text-secondary-foreground">
|
||||||
|
Review, approve, or reject customer booking requests across the
|
||||||
|
freight network.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
|
||||||
|
<div className="relative w-full sm:w-72">
|
||||||
|
<Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
type="search"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => {
|
||||||
|
setQuery(e.target.value);
|
||||||
|
setPagination({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
placeholder="Search reference or customer..."
|
||||||
|
className="pl-8!"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
<StatCard
|
||||||
|
label="Total Requests"
|
||||||
|
value={bookingRequests.length}
|
||||||
|
icon={<FileText />}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Pending Action"
|
||||||
|
value={pendingCount}
|
||||||
|
icon={<Clock />}
|
||||||
|
/>
|
||||||
|
<StatCard label="Active" value={activeCount} icon={<Train />} />
|
||||||
|
<StatCard label="Urgent" value={urgentCount} icon={<AlertCircle />} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="gap-0">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between border-b">
|
||||||
|
<div>
|
||||||
|
<CardTitle>All Booking Requests</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
{total} request{total !== 1 ? "s" : ""} found
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{statusFilter && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setStatusFilter(null)}
|
||||||
|
>
|
||||||
|
Clear filter
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<DropdownMenu modal={false}>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="secondary" size="sm">
|
||||||
|
<Filter />
|
||||||
|
{statusFilter
|
||||||
|
? (STATUS_STYLES[statusFilter]?.label ?? "Filter")
|
||||||
|
: "Filter"}
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
{BOOKING_STATUSES.map((s) => (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={s}
|
||||||
|
onSelect={() => setStatusFilter(s)}
|
||||||
|
>
|
||||||
|
{STATUS_STYLES[s]?.label ?? s}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="px-0">
|
||||||
|
<DataTable
|
||||||
|
columns={columns}
|
||||||
|
data={paginatedData}
|
||||||
|
status="success"
|
||||||
|
onRowClick={(row) =>
|
||||||
|
navigate(`/dashboard/booking-requests/${row.id}`)
|
||||||
|
}
|
||||||
|
pagination={{
|
||||||
|
pageIndex: pagination.pageIndex,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
pageCount,
|
||||||
|
totalCount: total,
|
||||||
|
}}
|
||||||
|
tableOptions={{
|
||||||
|
state: { pagination },
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
}}
|
||||||
|
containerClassName="border-b shadow-none"
|
||||||
|
footer={DataTableFooter}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
icon,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-slate-500">{label}</p>
|
||||||
|
<h3 className="mt-2 text-3xl font-bold text-slate-900">{value}</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
export interface BookingRequest {
|
||||||
|
id: string;
|
||||||
|
reference: string;
|
||||||
|
customer: string;
|
||||||
|
status: (typeof BOOKING_STATUSES)[number];
|
||||||
|
scheduledDate: string;
|
||||||
|
totalAmount: number;
|
||||||
|
paymentStatus: string;
|
||||||
|
contractType: string;
|
||||||
|
serviceType: string;
|
||||||
|
tradeDirection: string;
|
||||||
|
originYard: string;
|
||||||
|
destinationYard: string;
|
||||||
|
cargoType: string;
|
||||||
|
cargoTotalWeightVgm: number;
|
||||||
|
isHazardous: boolean;
|
||||||
|
paymentCurrency: string;
|
||||||
|
priorityScore: number;
|
||||||
|
firstMilePickupAddress: string | null;
|
||||||
|
lastMileDeliveryAddress: string | null;
|
||||||
|
shippingLine: string | null;
|
||||||
|
pnrCode: string | null;
|
||||||
|
createdBy: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BOOKING_STATUSES = [
|
||||||
|
"DRAFT",
|
||||||
|
"RFQ_SUBMITTED",
|
||||||
|
"QUOTATION_SENT",
|
||||||
|
"QUOTATION_APPROVED",
|
||||||
|
"QUOTATION_REJECTED",
|
||||||
|
"PENDING_APPROVAL",
|
||||||
|
"APPROVED",
|
||||||
|
"SIGNED_CUSTOMER",
|
||||||
|
"FULLY_EXECUTED",
|
||||||
|
"PAID",
|
||||||
|
"IN_TRANSIT",
|
||||||
|
"COMPLETED",
|
||||||
|
"CANCELLED",
|
||||||
|
"PENDING_CONSOLIDATION",
|
||||||
|
"CONSOLIDATED",
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const customers = [
|
||||||
|
"Ethio Cargo Logistics",
|
||||||
|
"Djibouti Shipping PLC",
|
||||||
|
"Horn of Africa Traders",
|
||||||
|
"Addis Freight Forwarders",
|
||||||
|
"Red Sea Maritime Services",
|
||||||
|
"Dire Dawa Imports Ltd",
|
||||||
|
"Awash Agro Industry",
|
||||||
|
"Mieso Mineral Exports",
|
||||||
|
];
|
||||||
|
|
||||||
|
const yards = [
|
||||||
|
"Addis Ababa Dry Port",
|
||||||
|
"Mojo Inland Container Depot",
|
||||||
|
"Dire Dawa Freight Station",
|
||||||
|
"Djibouti Port Terminal",
|
||||||
|
"Adama Logistics Hub",
|
||||||
|
"Awash Cargo Center",
|
||||||
|
];
|
||||||
|
|
||||||
|
const serviceTypes = ["RAIL", "RAIL_AND_FORWARDING"];
|
||||||
|
const tradeDirections = ["EXPORT", "IMPORT", "DOMESTIC"];
|
||||||
|
const cargoTypes = ["Containerized", "Bulk", "Liquid", "Refrigerated", "Hazardous"];
|
||||||
|
const shippingLines = ["MSC", "CMA CGM", "Maersk", "COSCO", "Hapag-Lloyd", null];
|
||||||
|
|
||||||
|
function pick<T>(arr: T[], index: number): T {
|
||||||
|
return arr[index % arr.length];
|
||||||
|
}
|
||||||
|
|
||||||
|
function randDate(daysAgo: number): string {
|
||||||
|
const d = new Date(2026, 4, 28 - daysAgo);
|
||||||
|
return d.toISOString();
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
const INITIAL_REQUESTS: BookingRequest[] = Array.from({ length: 25 }, (_, i) => {
|
||||||
|
const statusIndex = i % BOOKING_STATUSES.length;
|
||||||
|
const status = BOOKING_STATUSES[statusIndex];
|
||||||
|
const customer = pick(customers, i);
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: String(i + 1),
|
||||||
|
reference: `EDR-BK-${String(2026001 + i).slice(-6)}`,
|
||||||
|
customer,
|
||||||
|
status,
|
||||||
|
scheduledDate: new Date(2026, 5, 1 + (i % 28)).toISOString().slice(0, 10),
|
||||||
|
totalAmount: 1500 + i * 320 + (i % 7) * 100,
|
||||||
|
paymentStatus: status === "PAID" || status === "COMPLETED" ? "PAID" : status === "CANCELLED" ? "REFUNDED" : "PENDING",
|
||||||
|
contractType: i % 5 === 0 ? "RENEWAL" : "NEW",
|
||||||
|
serviceType: pick(serviceTypes, i),
|
||||||
|
tradeDirection: pick(tradeDirections, i),
|
||||||
|
originYard: pick(yards, i),
|
||||||
|
destinationYard: pick(yards, i + 3),
|
||||||
|
cargoType: pick(cargoTypes, i),
|
||||||
|
cargoTotalWeightVgm: 10 + ((i * 7) % 90),
|
||||||
|
isHazardous: i % 7 === 0,
|
||||||
|
paymentCurrency: "USD",
|
||||||
|
priorityScore: i % 4 === 0 ? 3 : i % 3 === 0 ? 2 : 1,
|
||||||
|
firstMilePickupAddress: i % 3 === 0 ? "Bole Industrial Zone, Addis Ababa" : null,
|
||||||
|
lastMileDeliveryAddress: i % 4 === 0 ? "Port Boulevard, Djibouti City" : null,
|
||||||
|
shippingLine: pick(shippingLines, i),
|
||||||
|
pnrCode: i % 6 === 0 ? `PNR-${202600 + i}` : null,
|
||||||
|
createdBy: customer,
|
||||||
|
createdAt: randDate(30 - i),
|
||||||
|
updatedAt: randDate(2),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
export function saveBookingRequestsToStorage(data: BookingRequest[]) {
|
||||||
|
if (typeof window !== "undefined" && window.localStorage) {
|
||||||
|
localStorage.setItem("edr_backoffice_booking_requests", JSON.stringify(data));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBookingRequestById(id: string): BookingRequest | undefined {
|
||||||
|
const requests = getBookingRequests();
|
||||||
|
return requests.find((r) => r.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateBookingRequestStatus(id: string, newStatus: (typeof BOOKING_STATUSES)[number]) {
|
||||||
|
const requests = getBookingRequests();
|
||||||
|
const idx = requests.findIndex((r) => r.id === id);
|
||||||
|
if (idx === -1) return;
|
||||||
|
requests[idx] = { ...requests[idx], status: newStatus, updatedAt: new Date().toISOString() };
|
||||||
|
saveBookingRequestsToStorage(requests);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBookingRequests(): BookingRequest[] {
|
||||||
|
if (typeof window === "undefined" || !window.localStorage) {
|
||||||
|
return INITIAL_REQUESTS;
|
||||||
|
}
|
||||||
|
const data = localStorage.getItem("edr_backoffice_booking_requests");
|
||||||
|
if (!data) {
|
||||||
|
localStorage.setItem("edr_backoffice_booking_requests", JSON.stringify(INITIAL_REQUESTS));
|
||||||
|
return INITIAL_REQUESTS;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
return JSON.parse(data);
|
||||||
|
} catch {
|
||||||
|
return INITIAL_REQUESTS;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -12,15 +12,12 @@ import {
|
|||||||
LoaderCircle,
|
LoaderCircle,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Button } from "@edr/ui-common";
|
import { Button } from "@edr/ui-common";
|
||||||
import type { Freight } from "@edr/types";
|
|
||||||
import Breadcrumbs from "@/components/Breadcrumbs";
|
|
||||||
import { api } from "@/services/api";
|
import { api } from "@/services/api";
|
||||||
import type { CreateBookingPayload } from "@/services/bookings.service";
|
import type { CreateBookingPayload } from "@/services/bookings.service";
|
||||||
import {
|
import {
|
||||||
BookingFormInputValues,
|
BookingFormInputValues,
|
||||||
STEPS,
|
STEPS,
|
||||||
bookingFormSchema,
|
bookingFormSchema,
|
||||||
calcWagons,
|
|
||||||
getRouteDirection,
|
getRouteDirection,
|
||||||
initialBookingFormValues,
|
initialBookingFormValues,
|
||||||
stepFields,
|
stepFields,
|
||||||
@@ -135,14 +132,14 @@ export default function NewBookingPage() {
|
|||||||
return "";
|
return "";
|
||||||
};
|
};
|
||||||
|
|
||||||
const cargoTypeId =
|
const cargoTypeId = cargoTree[0].id;
|
||||||
data.cargoType === "container"
|
// data.cargoType === "container"
|
||||||
? findContainerCargoTypeId()
|
// ? findContainerCargoTypeId()
|
||||||
: (findCargoTypeId(
|
// : (findCargoTypeId(
|
||||||
data.freightType === "bulk"
|
// data.freightType === "bulk"
|
||||||
? data.bulkCommodity
|
// ? data.bulkCommodity
|
||||||
: data.breakBulkType,
|
// : data.breakBulkType,
|
||||||
) ?? "");
|
// ) ?? "");
|
||||||
|
|
||||||
const cargoFreeText =
|
const cargoFreeText =
|
||||||
data.cargoType === "container"
|
data.cargoType === "container"
|
||||||
|
|||||||
Reference in New Issue
Block a user