implement booking flow

This commit is contained in:
marshal
2026-06-04 15:16:27 +03:00
parent a5578ce714
commit 125ee18308
89 changed files with 6190 additions and 1724 deletions

View File

@@ -0,0 +1,268 @@
import type { LucideIcon } from "lucide-react";
import {
Ban,
Check,
FileSignature,
FileText,
MessageSquareWarning,
Play,
ShieldCheck,
Truck,
Wallet,
XCircle,
} from "lucide-react";
import type {
BookingApprovalStep,
BookingDetail,
BookingStatus,
} from "@/types/booking";
export type BookingActionId =
| "accept"
| "requestChanges"
| "reject"
| "approve"
| "rejectApproval"
| "generateContract"
| "viewContract"
| "generatePnr"
| "verifyPayment"
| "startTransit"
| "complete";
export type BookingActionInputKind = "note" | "reason";
export interface BookingActionDef {
id: BookingActionId;
label: string;
shortLabel: string;
description: string;
confirmTitle: string;
confirmDescription: string;
variant: "default" | "destructive" | "outline";
icon: LucideIcon;
input?: BookingActionInputKind;
inputLabel?: string;
inputPlaceholder?: string;
primary?: boolean;
}
export type BookingActionContext = Pick<
BookingDetail,
"status" | "paymentCurrency" | "approvalSteps" | "reference"
>;
export function getNextPendingApprovalStep(
steps?: BookingApprovalStep[] | null,
): BookingApprovalStep | undefined {
if (!steps?.length) return undefined;
return [...steps]
.sort((a, b) => a.stepOrder - b.stepOrder)
.find((s) => s.status === "PENDING");
}
function approvalActions(
steps?: BookingApprovalStep[] | null,
): BookingActionDef[] {
const next = getNextPendingApprovalStep(steps);
if (!next) return [];
return [
{
id: "approve",
label: `Approve (${next.requiredRole})`,
shortLabel: "Approve",
description: `Complete step ${next.stepOrder} as ${next.requiredRole}`,
confirmTitle: `Approve as ${next.requiredRole}?`,
confirmDescription:
"This records your approval and advances the booking to the next step in the chain.",
variant: "default",
icon: Check,
primary: true,
},
{
id: "rejectApproval",
label: "Reject approval",
shortLabel: "Reject",
description: "Reject at the current approval step",
confirmTitle: "Reject at approval step?",
confirmDescription:
"The booking will be marked rejected. This action cannot be undone from the UI.",
variant: "destructive",
icon: XCircle,
input: "reason",
inputLabel: "Rejection reason",
inputPlaceholder: "Explain why this booking is rejected…",
},
];
}
const SUBMITTED_ACTIONS: BookingActionDef[] = [
{
id: "accept",
label: "Accept for approval",
shortLabel: "Accept",
description: "Start the formal approval chain",
confirmTitle: "Accept submission?",
confirmDescription:
"The booking moves to pending approval and approval steps are created from the rule engine.",
variant: "default",
icon: ShieldCheck,
primary: true,
},
{
id: "requestChanges",
label: "Request changes",
shortLabel: "Changes",
description: "Ask the customer to update and resubmit",
confirmTitle: "Request changes from customer?",
confirmDescription:
"The customer will see your note and can edit the booking before resubmitting.",
variant: "outline",
icon: MessageSquareWarning,
input: "note",
inputLabel: "Message to customer",
inputPlaceholder: "Describe what needs to be corrected or added…",
},
{
id: "reject",
label: "Reject booking",
shortLabel: "Reject",
description: "Reject this submission",
confirmTitle: "Reject booking?",
confirmDescription:
"The booking will be marked rejected and removed from active queues.",
variant: "destructive",
icon: Ban,
input: "reason",
inputLabel: "Rejection reason",
inputPlaceholder: "Reason for rejection…",
},
];
/** Actions available for the current booking status (detail or list). */
export function getBookingActions(ctx: BookingActionContext): BookingActionDef[] {
const { status, paymentCurrency, approvalSteps } = ctx;
switch (status) {
case "SUBMITTED":
return SUBMITTED_ACTIONS;
case "PENDING_APPROVAL":
case "APPROVED_PENDING_SIGNATURE":
return approvalActions(approvalSteps);
case "APPROVED":
return [
{
id: "generateContract",
label: "Generate contract",
shortLabel: "Contract",
description: "Create contract document",
confirmTitle: "Generate contract?",
confirmDescription:
"A contract will be generated and the booking moves to contract ready.",
variant: "default",
icon: FileText,
primary: true,
},
];
case "CONTRACT_READY":
case "SIGNED_CUSTOMER":
case "FULLY_EXECUTED":
return [
{
id: "viewContract",
label:
status === "SIGNED_CUSTOMER"
? "View & sign contract (staff)"
: status === "CONTRACT_READY"
? "View contract"
: "View executed contract",
shortLabel: "Contract",
description: "Open contract document and signatures",
confirmTitle: "",
confirmDescription: "",
variant: "default",
icon: FileSignature,
primary: true,
},
];
case "FULLY_EXECUTED":
if (paymentCurrency === "ETB") {
return [
{
id: "generatePnr",
label: "Generate PNR",
shortLabel: "PNR",
description: "Issue PNR for ETB bank payment",
confirmTitle: "Generate PNR?",
confirmDescription:
"A payment reference number will be issued for the customer.",
variant: "default",
icon: Wallet,
primary: true,
},
];
}
return [];
case "PAYMENT_VERIFICATION_IN_PROGRESS":
return [
{
id: "verifyPayment",
label: "Verify payment",
shortLabel: "Verify",
description: "Confirm USD payment proof",
confirmTitle: "Verify payment?",
confirmDescription:
"Finance confirms the uploaded proof and marks the booking as paid.",
variant: "default",
icon: Check,
primary: true,
},
];
case "PAID":
case "PNR_GENERATED":
return [
{
id: "startTransit",
label: "Start transit",
shortLabel: "Transit",
description: "Begin rail movement",
confirmTitle: "Start transit?",
confirmDescription: "The booking will move to in transit status.",
variant: "default",
icon: Truck,
primary: true,
},
];
case "IN_TRANSIT":
return [
{
id: "complete",
label: "Complete booking",
shortLabel: "Complete",
description: "Mark journey finished",
confirmTitle: "Complete booking?",
confirmDescription:
"Marks the booking as completed. No further staff transitions apply.",
variant: "default",
icon: Play,
primary: true,
},
];
default:
return [];
}
}
export function listRowHasActions(row: {
status: BookingStatus;
paymentCurrency: string;
}): boolean {
const actions = getBookingActions({
status: row.status,
paymentCurrency: row.paymentCurrency,
reference: "",
});
if (actions.length > 0) return true;
return row.status === "FULLY_EXECUTED" && row.paymentCurrency === "USD";
}

View File

@@ -0,0 +1,260 @@
import type { BookingStatus } from "@/types/booking";
export interface StatusStyle {
label: string;
color: string;
}
export const BOOKING_STATUS_STYLES: Record<string, StatusStyle> = {
DRAFT: {
label: "Draft",
color: "bg-slate-100 text-slate-700 border-slate-300",
},
SUBMITTED: {
label: "Submitted",
color: "bg-amber-50 text-amber-700 border-amber-200",
},
CHANGES_REQUESTED: {
label: "Changes Requested",
color: "bg-orange-50 text-orange-700 border-orange-200",
},
PENDING_APPROVAL: {
label: "Pending Approval",
color: "bg-amber-50 text-amber-700 border-amber-200",
},
APPROVED_PENDING_SIGNATURE: {
label: "Pending Signature",
color: "bg-sky-50 text-sky-700 border-sky-200",
},
APPROVED: {
label: "Approved",
color: "bg-emerald-50 text-emerald-700 border-emerald-200",
},
CONTRACT_READY: {
label: "Contract Ready",
color: "bg-indigo-50 text-indigo-700 border-indigo-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",
},
PNR_GENERATED: {
label: "PNR Generated",
color: "bg-violet-50 text-violet-700 border-violet-200",
},
PAYMENT_VERIFICATION_IN_PROGRESS: {
label: "Payment Verification",
color: "bg-amber-50 text-amber-800 border-amber-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",
},
REJECTED: {
label: "Rejected",
color: "bg-red-50 text-red-700 border-red-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",
},
};
export interface StatusMeta {
title: string;
description: string;
color: string;
stage: number;
}
export const BOOKING_STATUS_META: Record<string, StatusMeta> = {
DRAFT: {
title: "Draft",
description: "Booking is being prepared by the customer.",
color: "text-slate-500",
stage: 0,
},
SUBMITTED: {
title: "Submitted",
description: "Awaiting staff review.",
color: "text-amber-600",
stage: 0,
},
CHANGES_REQUESTED: {
title: "Changes Requested",
description: "Returned to customer for updates.",
color: "text-orange-600",
stage: 0,
},
PENDING_APPROVAL: {
title: "Pending Approval",
description: "Moving through internal approval chain.",
color: "text-amber-600",
stage: 1,
},
APPROVED_PENDING_SIGNATURE: {
title: "Pending Signature",
description: "Awaiting director or CEO signature steps.",
color: "text-sky-600",
stage: 1,
},
APPROVED: {
title: "Approved",
description: "Ready to generate contract.",
color: "text-emerald-600",
stage: 2,
},
CONTRACT_READY: {
title: "Contract Ready",
description: "Contract generated; awaiting customer signature.",
color: "text-indigo-600",
stage: 2,
},
SIGNED_CUSTOMER: {
title: "Customer Signed",
description: "Awaiting contract execution.",
color: "text-sky-600",
stage: 2,
},
FULLY_EXECUTED: {
title: "Fully Executed",
description: "Contract locked; proceed to payment.",
color: "text-indigo-600",
stage: 3,
},
PNR_GENERATED: {
title: "PNR Generated",
description: "ETB payment reference issued.",
color: "text-violet-600",
stage: 3,
},
PAYMENT_VERIFICATION_IN_PROGRESS: {
title: "Payment Verification",
description: "USD payment proof under review.",
color: "text-amber-700",
stage: 3,
},
PAID: {
title: "Paid",
description: "Payment confirmed; ready for operations.",
color: "text-emerald-600",
stage: 4,
},
IN_TRANSIT: {
title: "In Transit",
description: "Shipment is on the railway network.",
color: "text-sky-600",
stage: 4,
},
COMPLETED: {
title: "Completed",
description: "Booking fulfilled.",
color: "text-indigo-600",
stage: 5,
},
REJECTED: {
title: "Rejected",
description: "Booking was rejected.",
color: "text-red-600",
stage: -1,
},
CANCELLED: {
title: "Cancelled",
description: "Booking was cancelled.",
color: "text-red-600",
stage: -1,
},
PENDING_CONSOLIDATION: {
title: "Pending Consolidation",
description: "Waiting for consolidation partner.",
color: "text-amber-600",
stage: 4,
},
CONSOLIDATED: {
title: "Consolidated",
description: "Paired with another booking.",
color: "text-indigo-600",
stage: 4,
},
};
export const BOOKING_LIST_TABS = [
{ key: "all", label: "All bookings", status: null },
{ key: "SUBMITTED", label: "Submitted", status: "SUBMITTED" },
{ key: "PENDING_APPROVAL", label: "Pending Approval", status: "PENDING_APPROVAL" },
{
key: "APPROVED_PENDING_SIGNATURE",
label: "Pending Signature",
status: "APPROVED_PENDING_SIGNATURE",
},
{ key: "SIGNED_CUSTOMER", label: "Customer Signed", status: "SIGNED_CUSTOMER" },
{
key: "PAYMENT_VERIFICATION_IN_PROGRESS",
label: "Payment Verification",
status: "PAYMENT_VERIFICATION_IN_PROGRESS",
},
] as const;
export type BookingStatusTabKey = (typeof BOOKING_LIST_TABS)[number]["key"];
export const WORKFLOW_STAGES = [
{ label: "Submission", statuses: ["DRAFT", "SUBMITTED", "CHANGES_REQUESTED"] },
{
label: "Approval",
statuses: ["PENDING_APPROVAL", "APPROVED_PENDING_SIGNATURE"],
},
{
label: "Contract",
statuses: ["APPROVED", "CONTRACT_READY", "SIGNED_CUSTOMER", "FULLY_EXECUTED"],
},
{
label: "Payment",
statuses: [
"PNR_GENERATED",
"PAYMENT_VERIFICATION_IN_PROGRESS",
"PAID",
],
},
{
label: "Operations",
statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"],
},
{ label: "Done", statuses: ["COMPLETED"] },
] as const;
export function getStatusMeta(status: BookingStatus | string): StatusMeta {
return (
BOOKING_STATUS_META[status] ?? {
title: status,
description: "",
color: "text-muted-foreground",
stage: 0,
}
);
}
export function getWorkflowStageIndex(status: BookingStatus | string): number {
const meta = getStatusMeta(status);
if (meta.stage < 0) return -1;
return meta.stage;
}

View File

@@ -0,0 +1,34 @@
import type { BookingDetail, BookingListRow } from "@/types/booking";
function labelFromRef(
ref?: { name?: string; label?: string; code?: string; companyName?: string },
fallback = "—",
): string {
if (!ref) return fallback;
return (
ref.companyName ??
ref.label ??
ref.name ??
ref.code ??
fallback
);
}
export function toBookingListRow(booking: BookingDetail): BookingListRow {
return {
id: booking.id,
reference: booking.reference,
customerLabel: labelFromRef(booking.customer, booking.customerId),
status: booking.status,
scheduledDate: booking.scheduledDate,
totalAmount: Number(booking.totalAmount),
paymentCurrency: booking.paymentCurrency,
paymentStatus: booking.paymentStatus,
tradeDirection: booking.tradeDirection,
freightType: booking.freightType,
originLabel: labelFromRef(booking.originYard),
destinationLabel: labelFromRef(booking.destinationYard),
priorityScore: booking.priorityScore ?? 0,
createdAt: booking.createdAt,
};
}