This commit is contained in:
ghost2023
2026-06-16 14:26:47 +03:00
parent d6ad094d5a
commit e47340c2c8
8 changed files with 219 additions and 85 deletions

View File

@@ -13,7 +13,7 @@ import {
BookingReviewNotesCard,
BookingRouteCard,
detailStyles,
type BookingDetailView
type BookingDetailView,
} from "@/components/bookings/detail";
import Breadcrumbs from "@/components/ui/Breadcrumbs";
@@ -101,7 +101,9 @@ const BookingDetailPage = () => {
};
const approvalSteps = booking.approvalSteps ?? [];
const approvedCount = approvalSteps.filter((s) => s.status === "APPROVED").length;
const approvedCount = approvalSteps.filter(
(s) => s.status === "APPROVED",
).length;
const totalSteps = approvalSteps.length;
return (
@@ -116,7 +118,7 @@ const BookingDetailPage = () => {
{ label: booking.reference },
]}
/>
{/*
{/*
<BookingDetailHeader
booking={booking}
approvedCount={approvedCount}
@@ -125,13 +127,18 @@ const BookingDetailPage = () => {
<BookingLifecycleStepper status={booking.status} />
<Grid gutter="lg">
<Grid>
{/* LEFT — primary content */}
<Grid.Col span={{ base: 12, lg: 8 }}>
<Stack gap="lg">
<BookingRouteCard booking={booking} />
<BookingContainersCard containers={booking.bookingContainers ?? []} />
<BookingApprovalCard steps={approvalSteps} approvedCount={approvedCount} />
<BookingContainersCard
containers={booking.bookingContainers ?? []}
/>
<BookingApprovalCard
steps={approvalSteps}
approvedCount={approvedCount}
/>
<BookingReviewNotesCard notes={booking.reviewNotes ?? []} />
</Stack>
</Grid.Col>
@@ -139,9 +146,12 @@ const BookingDetailPage = () => {
{/* RIGHT — summary sidebar */}
<Grid.Col span={{ base: 12, lg: 4 }}>
<Stack gap="lg">
{booking.status === "SELECTED_FOR_BATCH" && booking.paymentDeadline && (
<BookingPaymentCountdownCard paymentDeadline={booking.paymentDeadline} />
)}
{booking.status === "SELECTED_FOR_BATCH" &&
booking.paymentDeadline && (
<BookingPaymentCountdownCard
paymentDeadline={booking.paymentDeadline}
/>
)}
<BookingPaymentCard
totalAmount={booking.totalAmount}
currency={booking.paymentCurrency}

View File

@@ -75,7 +75,7 @@ function RequireAuth() {
* Only redirects on a confirmed "no company" response — never on a
* transient query error.
*/
function RequireCompany({path}: {path: string}) {
function RequireCompany() {
const { customerQuery } = useAuth();
if (customerQuery.isPending) return <FullScreenSpinner />;

View File

@@ -1,13 +1,6 @@
import { customers, type Customer } from "@/pages/customers/customers.mock";
import { bookings, type Booking } from "@/pages/bookings/bookings.mock";
import {
consignments,
type Consignment,
} from "@/pages/consignments/consignments.mock";
import {
shipments,
type Shipment,
} from "@/pages/tracking/shipments.mock";
import { shipments, type Shipment } from "@/pages/tracking/shipments.mock";
import { invoices, type Invoice } from "@/pages/billing/invoices.mock";
/**
@@ -28,12 +21,6 @@ export function getMyBookings(): Booking[] {
return bookings.filter((b) => b.customerId === me.id);
}
export function getMyConsignments(): Consignment[] {
const me = getCurrentCustomer();
const myBookingIds = new Set(getMyBookings().map((b) => b.id));
return consignments.filter((c) => myBookingIds.has(c.bookingId));
}
export function getMyShipments(): Shipment[] {
const myBookingIds = new Set(getMyBookings().map((b) => b.id));
return shipments.filter((s) => myBookingIds.has(s.bookingId));

View File

@@ -63,11 +63,7 @@ export default function NewBookingPage() {
You need to complete your company onboarding before you can create
bookings. Please follow the onboarding process to get started.
</Text>
<Button
color="orange"
onClick={() => navigate("/onboarding")}
mt="md"
>
<Button color="orange" onClick={() => navigate("/settings")} mt="md">
Go to Onboarding
</Button>
</Alert>
@@ -110,18 +106,15 @@ export default function NewBookingPage() {
const originYard = form.watch("originYard");
const destinationYard = form.watch("destinationYard");
const direction = useMemo(
() =>{
const origin = referenceData?.yard.find((y) => y.id === originYard);
const destination = referenceData?.yard.find((y) => y.id === destinationYard);
const route = getRouteDirection(
origin,destination
)
return route
},
[originYard, destinationYard],
);
const direction = useMemo(() => {
const origin = referenceData?.yard.find((y) => y.id === originYard);
const destination = referenceData?.yard.find(
(y) => y.id === destinationYard,
);
const route = getRouteDirection(origin, destination);
return route;
}, [originYard, destinationYard]);
async function handleContinue() {
const valid = await form.trigger(stepFields[step], { shouldFocus: true });
@@ -171,8 +164,7 @@ export default function NewBookingPage() {
.flatMap((g) => g.children ?? [])
.find((c) => c.id === childId);
const cargoTypeId =
data.cargoType === "bulk" ? childId : undefined;
const cargoTypeId = data.cargoType === "bulk" ? childId : undefined;
const cargoFreeText = bulkChild?.show_free_text_box
? data.cargoFreeText
@@ -304,7 +296,9 @@ export default function NewBookingPage() {
</Alert>
)}
{step === 1 && <Step1ContractType form={form} referenceData={referenceData} />}
{step === 1 && (
<Step1ContractType form={form} referenceData={referenceData} />
)}
{step === 2 && (
<Step2ServiceType referenceData={referenceData} form={form} />
)}

View File

@@ -4,10 +4,7 @@ import { useQuery } from "@tanstack/react-query";
import { FileText, RefreshCw } from "lucide-react";
import { useMemo, useState } from "react";
import { Controller, type UseFormReturn } from "react-hook-form";
import {
BookingFormInputValues,
type BookingFormValues,
} from "./schema";
import { BookingFormInputValues, type BookingFormValues } from "./schema";
import {
AlertBox,
AsyncComboboxField,
@@ -16,7 +13,11 @@ import {
StepHeader,
} from "./shared";
type BookingForm = UseFormReturn<BookingFormInputValues, any, BookingFormValues>;
type BookingForm = UseFormReturn<
BookingFormInputValues,
any,
BookingFormValues
>;
interface PreviousContractOption {
value: string;
@@ -35,21 +36,24 @@ export function Step1ContractType({
const previousContractRef = form.watch("previousContractRef");
const [searchQuery, setSearchQuery] = useState("");
const { data: bookings, isLoading, error } = useQuery(
api.bookings.list.queryOptions({
input: {
const {
data: bookings,
isLoading,
error,
} = useQuery(
api.bookings.list.queryOptions({
input: {
page: 1,
pageSize: 100,
sortBy: "createdAt",
sortOrder: "DESC",
}
})
},
}),
);
const contractOptions = useMemo<PreviousContractOption[]>(() => {
console.log("Bookings data:", bookings);
if(!bookings) return []
if (!bookings) return [];
return bookings?.items
.map((booking) => {
@@ -62,35 +66,120 @@ api.bookings.list.queryOptions({
};
})
.filter((opt) =>
opt.label.toLowerCase().includes(searchQuery.toLowerCase())
opt.label.toLowerCase().includes(searchQuery.toLowerCase()),
);
}, [bookings, searchQuery]);
const handleSelectContract = async (contractId: string) => {
const handleSelectContract = (contractId: string) => {
const selected = contractOptions.find((opt) => opt.value === contractId);
if (!selected) return;
form.setValue("previousContractRef", contractId);
// Auto-fill from previous contract
const booking = selected.booking;
if (booking) {
form.setValue("serviceTypeId", booking.serviceTypeId);
form.setValue("cargoType", booking.freightType === "CONTAINER" ? "container" : "bulk");
form.setValue("equipmentReturn", booking.equipmentReturn === "WITH_RETURN" ? "with_return" : "without_return");
if (booking.isHazardous) form.setValue("isHazardous", booking.isHazardous);
if (!booking) return;
// Look up shipping line name from reference data
if (booking.shippingLineId && referenceData?.shipping_line) {
const shippingLine = referenceData.shipping_line.find(
(sl) => sl.id === booking.shippingLineId,
);
if (shippingLine) {
form.setValue("shippingLine", shippingLine.name);
}
// ── Service type ────────────────────────────────────────────────────
const service = booking.serviceType
? referenceData?.service.find((s) => s.code === booking.serviceType)
: undefined;
const serviceId = service?.id || booking.serviceTypeId;
if (serviceId) form.setValue("serviceTypeId", serviceId);
// ── First / last mile ───────────────────────────────────────────────
form.setValue("firstMile.enabled", booking.firstMileEnabled);
if (booking.firstMilePickupAddress) {
form.setValue("firstMile.pickUpAddress", booking.firstMilePickupAddress);
}
form.setValue("lastMile.enabled", booking.lastMileEnabled);
if (booking.lastMileDeliveryAddress) {
form.setValue(
"lastMile.deliveryAddress",
booking.lastMileDeliveryAddress,
);
}
// ── Equipment return ────────────────────────────────────────────────
form.setValue(
"equipmentReturn",
booking.equipmentReturn === "WITH_RETURN"
? "with_return"
: "without_return",
);
// ── Customs ─────────────────────────────────────────────────────────
if (service) {
form.setValue("customsClearingEnabled", service.includesCustoms);
}
// ── Route ───────────────────────────────────────────────────────────
if (booking.originYard?.id) {
form.setValue("originYard", booking.originYard.id);
}
if (booking.destinationYard?.id) {
form.setValue("destinationYard", booking.destinationYard.id);
}
// ── Shipping line ───────────────────────────────────────────────────
if (booking.shippingLineId && referenceData?.shipping_line) {
const shippingLine = referenceData.shipping_line.find(
(sl) => sl.id === booking.shippingLineId,
);
if (shippingLine) {
form.setValue("shippingLine", shippingLine.name);
}
}
}
// ── Cargo type ──────────────────────────────────────────────────────
form.setValue(
"cargoType",
booking.freightType === "CONTAINER" ? "container" : "bulk",
);
// ── Cargo weight (bulk) ─────────────────────────────────────────────
if (booking.cargoTotalWeightVgm > 0) {
form.setValue("cargoWeight", String(booking.cargoTotalWeightVgm));
}
// ── Hazardous / refrigerated ────────────────────────────────────────
form.setValue("isHazardous", booking.isHazardous);
form.setValue("isRefrigerated", booking.isRefrigerated);
// ── Containers ──────────────────────────────────────────────────────
if (
booking.freightType === "CONTAINER" &&
booking.containers &&
booking.containers.length > 0
) {
const mappedContainers = booking.containers.map((c) => {
let containerTypeName = "";
for (const group of referenceData?.containers ?? []) {
const ct = group.types.find(
(t) => t.code === c.type || t.name === c.type,
);
if (ct) {
containerTypeName = ct.name;
break;
}
}
return {
type: (c.type === "40ft" ? "40ft" : "20ft") as "20ft" | "40ft",
containerType: containerTypeName,
qty: String(c.qty),
vgm: String(c.vgm),
};
});
form.setValue("containers", mappedContainers);
}
// ── Consolidation ───────────────────────────────────────────────────
form.setValue("consolidationEnabled", booking.allowConsolidation);
// ── Scheduled date ──────────────────────────────────────────────────
if (booking.scheduledDate) {
form.setValue("scheduledDate", booking.scheduledDate);
}
};
return (
<div className="space-y-6">

View File

@@ -1,10 +0,0 @@
export type UserTypeRequest {
email: string;
username: string;
phoneNumber: string;
userType: string;
name: {
am?: string;
en: string;
};
}

View File

@@ -23,6 +23,7 @@
},
"dependencies": {
"@edr/types": "workspace:*",
"@mantine/core": "^9.3.0",
"@tanstack/react-table": "^8.21.3",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",

67
pnpm-lock.yaml generated
View File

@@ -915,6 +915,9 @@ importers:
'@edr/types':
specifier: workspace:*
version: link:../types
'@mantine/core':
specifier: ^9.3.0
version: 9.3.0(@mantine/hooks@9.3.0(react@18.3.1))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@tanstack/react-table':
specifier: ^8.21.3
version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4317,6 +4320,9 @@ packages:
'@types/jsonwebtoken@9.0.5':
resolution: {integrity: sha512-VRLSGzik+Unrup6BsouBeHsf4d1hOEgYWTm/7Nmw1sXoN1+tRly/Gy/po3yeahnP4jfnQWWAhQAqcNfH7ngOkA==}
'@types/lodash@4.17.24':
resolution: {integrity: sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==}
'@types/luxon@3.7.1':
resolution: {integrity: sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==}
@@ -13549,6 +13555,14 @@ snapshots:
react: 19.2.6
react-dom: 19.2.6(react@19.2.6)
'@floating-ui/react@0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@floating-ui/react-dom': 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@floating-ui/utils': 0.2.11
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
tabbable: 6.4.0
'@floating-ui/react@0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
dependencies:
'@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -14041,6 +14055,19 @@ snapshots:
transitivePeerDependencies:
- '@types/react'
'@mantine/core@9.3.0(@mantine/hooks@9.3.0(react@18.3.1))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@floating-ui/react': 0.27.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mantine/hooks': 9.3.0(react@18.3.1)
clsx: 2.1.1
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-number-format: 5.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-remove-scroll: 2.7.2(@types/react@18.3.31)(react@18.3.1)
type-fest: 5.7.0
transitivePeerDependencies:
- '@types/react'
'@mantine/core@9.3.0(@mantine/hooks@9.3.0(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
dependencies:
'@floating-ui/react': 0.27.19(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -14067,6 +14094,10 @@ snapshots:
dependencies:
react: 19.2.6
'@mantine/hooks@9.3.0(react@18.3.1)':
dependencies:
react: 18.3.1
'@mantine/hooks@9.3.0(react@19.2.6)':
dependencies:
react: 19.2.6
@@ -14409,7 +14440,7 @@ snapshots:
tslib: 2.8.1
uid: 2.0.2
optionalDependencies:
'@nestjs/microservices': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(amqp-connection-manager@5.0.0(amqplib@2.0.1))(amqplib@2.0.1)(reflect-metadata@0.2.2)(rxjs@7.8.2)
'@nestjs/microservices': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(amqp-connection-manager@5.0.0(amqplib@0.10.9))(amqplib@0.10.9)(reflect-metadata@0.2.2)(rxjs@7.8.2)
'@nestjs/platform-express': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)
'@nestjs/event-emitter@2.1.1(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)':
@@ -14440,6 +14471,19 @@ snapshots:
class-transformer: 0.5.1
class-validator: 0.14.4
'@nestjs/microservices@11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(amqp-connection-manager@5.0.0(amqplib@0.10.9))(amqplib@0.10.9)(reflect-metadata@0.2.2)(rxjs@7.8.2)':
dependencies:
'@nestjs/common': 11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2)
'@nestjs/core': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/microservices@11.1.24)(@nestjs/platform-express@11.1.24)(reflect-metadata@0.2.2)(rxjs@7.8.2)
iterare: 1.2.1
reflect-metadata: 0.2.2
rxjs: 7.8.2
tslib: 2.8.1
optionalDependencies:
amqp-connection-manager: 5.0.0(amqplib@0.10.9)
amqplib: 0.10.9
optional: true
'@nestjs/microservices@11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(amqp-connection-manager@5.0.0(amqplib@2.0.1))(amqplib@2.0.1)(reflect-metadata@0.2.2)(rxjs@7.8.2)':
dependencies:
'@nestjs/common': 11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2)
@@ -14524,7 +14568,7 @@ snapshots:
'@nestjs/core': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/microservices@11.1.24)(@nestjs/platform-express@11.1.24)(reflect-metadata@0.2.2)(rxjs@7.8.2)
tslib: 2.8.1
optionalDependencies:
'@nestjs/microservices': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(amqp-connection-manager@5.0.0(amqplib@2.0.1))(amqplib@2.0.1)(reflect-metadata@0.2.2)(rxjs@7.8.2)
'@nestjs/microservices': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(amqp-connection-manager@5.0.0(amqplib@0.10.9))(amqplib@0.10.9)(reflect-metadata@0.2.2)(rxjs@7.8.2)
'@nestjs/platform-express': 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)
'@nestjs/throttler@6.5.0(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(reflect-metadata@0.2.2)':
@@ -17500,6 +17544,8 @@ snapshots:
dependencies:
'@types/node': 20.19.42
'@types/lodash@4.17.24': {}
'@types/luxon@3.7.1': {}
'@types/methods@1.1.4': {}
@@ -18599,6 +18645,12 @@ snapshots:
amqplib: 0.10.9
promise-breaker: 6.0.0
amqp-connection-manager@5.0.0(amqplib@0.10.9):
dependencies:
amqplib: 0.10.9
promise-breaker: 6.0.0
optional: true
amqp-connection-manager@5.0.0(amqplib@2.0.1):
dependencies:
amqplib: 2.0.1
@@ -25008,6 +25060,11 @@ snapshots:
transitivePeerDependencies:
- '@types/react'
react-number-format@5.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-number-format@5.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
dependencies:
react: 19.2.6
@@ -27058,6 +27115,12 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.31
use-deep-compare-effect@1.8.1(react@19.2.6):
dependencies:
'@babel/runtime': 7.29.7
dequal: 2.0.3
react: 19.2.6
use-isomorphic-layout-effect@1.2.1(@types/react@18.3.31)(react@19.2.6):
dependencies:
react: 19.2.6