From b883c2d87802bd12ef95ac2201d25dd4a3868d0e Mon Sep 17 00:00:00 2001 From: ghost2023 Date: Tue, 16 Jun 2026 14:10:31 +0300 Subject: [PATCH 1/3] feat(onboarding): Implement company profile creation on Settings page --- .../portal/src/pages/MyPortalPage.tsx | 8 +- .../portal/src/pages/SettingsPage.tsx | 253 ++++++++++++++++-- 2 files changed, 236 insertions(+), 25 deletions(-) diff --git a/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx b/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx index 7b488bc7d..e05e3a503 100644 --- a/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/MyPortalPage.tsx @@ -438,7 +438,7 @@ export default function MyPortalPage() { - {!customer&& ( + {!customer && ( @@ -446,9 +446,10 @@ export default function MyPortalPage() { Setup your Company Profile - Complete your company information to unlock all features and start booking shipments. + Complete your company information to unlock all features and + start booking shipments. - + Complete Setup @@ -464,7 +465,6 @@ export default function MyPortalPage() { )} - {/* ── Stats Strip ───────────────────────────────────────────────────── */} diff --git a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx index 755f85b45..71f9f7bc9 100644 --- a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx @@ -1,15 +1,39 @@ import { useSearchParams } from "react-router-dom"; -import { useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { + AlertCircle, Building2, - User, Briefcase, - UserCheck, + CheckCircle2, FileCheck, + Loader2, + Save, + User, + UserCheck, + XCircle, } from "lucide-react"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; import { api } from "@/services/api"; -import { Badge } from "@edr/ui-common"; +import { + Badge, + Button, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, + Field, + FieldError, + FieldGroup, + FieldLabel, + Input, +} from "@edr/ui-common"; import { cn } from "@/lib/utils"; +import PhoneInput from "@/components/auth/PhoneInput"; +import type { CreateCompanyPayload } from "@/services/companies.service"; import TabCompanyProfile from "./settings/TabCompanyProfile"; import TabContactPerson from "./settings/TabContactPerson"; import TabGeneralManager from "./settings/TabGeneralManager"; @@ -32,6 +56,7 @@ const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [ ]; export default function SettingsPage() { + const queryClient = useQueryClient(); const [searchParams, setSearchParams] = useSearchParams(); const tab = (searchParams.get("tab") as SettingsTab) || "company"; const setTab = (t: SettingsTab) => { @@ -48,6 +73,54 @@ export default function SettingsPage() { const profile = profileQuery.data; + const createCompanyMutation = useMutation({ + mutationFn: (payload: CreateCompanyPayload) => + api.companies.create.call(payload), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: api.companies.getProfile.queryKey(), + }); + }, + }); + + const onboardingSchema = z.object({ + companyName: z.string().min(1, "Company name is required"), + companyEmail: z.string().email("Invalid email address"), + companyPhone: z.string().min(1, "Company phone is required"), + companyPhoneCountryCode: z.string().min(1, "Country code is required"), + companyLocation: z.string().min(1, "Location is required"), + companyAddress: z.string().min(1, "Address is required"), + tinNumber: z.string().length(10, "TIN must be exactly 10 digits"), + fanNumber: z.string().length(16, "FAN must be exactly 16 digits"), + }); + + type OnboardingFormData = z.infer; + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(onboardingSchema), + defaultValues: { + companyPhoneCountryCode: "+251", + }, + }); + + const onSubmitOnboarding = (data: OnboardingFormData) => { + const payload: CreateCompanyPayload = { + companyType: "customer", + companyName: data.companyName, + companyEmail: data.companyEmail, + companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`, + companyLocation: data.companyLocation, + companyAddress: data.companyAddress, + tin: data.tinNumber, + fanNumber: data.fanNumber, + }; + createCompanyMutation.mutate(payload); + }; + if (profileQuery.isPending) { return (
@@ -56,14 +129,6 @@ export default function SettingsPage() { ); } - if (!profile) { - return ( -
-

No company profile found.

-
- ); - } - return (
@@ -75,9 +140,11 @@ export default function SettingsPage() { Manage your company profile, personnel, and documents

- - Verified - + {profile && ( + + Verified + + )}
{/* Tab Bar */} @@ -86,12 +153,16 @@ export default function SettingsPage() {
- {tab === "company" && } - {tab === "contact" && } - {tab === "gm" && } - {tab === "poa" && } - {tab === "documents" && } + {/* Tab Content */} + {!profile ? ( + <> + {tab === "company" ? ( + + + + + Company Profile + + + Enter your company registration details to get started + + +
+ + + + Company Name + + + + +
+ + Company Email + + + + + +
+ +
+ + Location + + + + + + Address + + + +
+ +
+ + TIN Number (10 digits) + + + + + + FAN Number (16 digits) + + + +
+ + + +
+ {createCompanyMutation.isSuccess && ( + + + Profile created successfully + + )} + {createCompanyMutation.isError && ( + + + Failed to create profile + + )} +
+ + +
+ + ) : ( + + +
+ +

+ Please complete the company profile first. +

+
+ + + )} + + ) : ( + <> + {tab === "company" && } + {tab === "contact" && } + {tab === "gm" && } + {tab === "poa" && } + {tab === "documents" && } + + )} ); } From d6ad094d5a69c69542badf19fa3d677fe79e5e81 Mon Sep 17 00:00:00 2001 From: ghost2023 Date: Tue, 16 Jun 2026 14:16:55 +0300 Subject: [PATCH 2/3] style: use mantine in settings page --- .../portal/src/pages/SettingsPage.tsx | 434 ++++++++++-------- .../src/pages/settings/TabCompanyProfile.tsx | 219 +++++---- .../src/pages/settings/TabContactPerson.tsx | 126 +++-- .../src/pages/settings/TabDocuments.tsx | 133 +++--- .../src/pages/settings/TabGeneralManager.tsx | 139 +++--- .../src/pages/settings/TabPowerOfAttorney.tsx | 186 ++++---- 6 files changed, 619 insertions(+), 618 deletions(-) diff --git a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx index 71f9f7bc9..50d55f478 100644 --- a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx @@ -1,12 +1,27 @@ import { useSearchParams } from "react-router-dom"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + Container, + Group, + Stack, + Title, + Text, + Tabs, + Card, + TextInput, + Button, + Badge, + Alert, + Center, + Loader, + Grid, +} from "@mantine/core"; import { AlertCircle, Building2, Briefcase, CheckCircle2, FileCheck, - Loader2, Save, User, UserCheck, @@ -16,43 +31,22 @@ import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { api } from "@/services/api"; -import { - Badge, - Button, - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, - Field, - FieldError, - FieldGroup, - FieldLabel, - Input, -} from "@edr/ui-common"; -import { cn } from "@/lib/utils"; -import PhoneInput from "@/components/auth/PhoneInput"; import type { CreateCompanyPayload } from "@/services/companies.service"; +import PhoneInput from "@/components/auth/PhoneInput"; import TabCompanyProfile from "./settings/TabCompanyProfile"; import TabContactPerson from "./settings/TabContactPerson"; import TabGeneralManager from "./settings/TabGeneralManager"; import TabPowerOfAttorney from "./settings/TabPowerOfAttorney"; import TabDocuments from "./settings/TabDocuments"; -type SettingsTab = - | "company" - | "contact" - | "gm" - | "poa" - | "documents"; +type SettingsTab = "company" | "contact" | "gm" | "poa" | "documents"; const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [ - { id: "company", label: "Company Profile", icon: }, - { id: "contact", label: "Contact Person", icon: }, - { id: "gm", label: "General Manager", icon: }, - { id: "poa", label: "Power of Attorney", icon: }, - { id: "documents", label: "Documents", icon: }, + { id: "company", label: "Company Profile", icon: }, + { id: "contact", label: "Contact Person", icon: }, + { id: "gm", label: "General Manager", icon: }, + { id: "poa", label: "Power of Attorney", icon: }, + { id: "documents", label: "Documents", icon: }, ]; export default function SettingsPage() { @@ -60,16 +54,17 @@ export default function SettingsPage() { const [searchParams, setSearchParams] = useSearchParams(); const tab = (searchParams.get("tab") as SettingsTab) || "company"; const setTab = (t: SettingsTab) => { - setSearchParams((prev) => { - const next = new URLSearchParams(prev); - next.set("tab", t); - return next; - }, { replace: true }); + setSearchParams( + (prev) => { + const next = new URLSearchParams(prev); + next.set("tab", t); + return next; + }, + { replace: true }, + ); }; - const profileQuery = useQuery( - api.companies.getProfile.queryOptions(), - ); + const profileQuery = useQuery(api.companies.getProfile.queryOptions()); const profile = profileQuery.data; @@ -123,93 +118,80 @@ export default function SettingsPage() { if (profileQuery.isPending) { return ( -
-
-
+
+ +
); } return ( -
-
+ +
-

+ Account Settings - </h1> - <p className="mt-1 text-sm text-muted-foreground"> + + Manage your company profile, personnel, and documents -

+

- {profile && ( - - Verified - - )} -
+ {profile && Verified} + - {/* Tab Bar */} -
- {TABS.map((t) => ( - - ))} -
+ { + if (!value) return; + if (!profile && value !== "company") return; + setTab(value as SettingsTab); + }} + > + + {TABS.map((t) => ( + + {t.label} + + ))} + - {/* Tab Content */} - {!profile ? ( - <> - {tab === "company" ? ( - - - - - Company Profile - - + + {!profile ? ( + + + + + Company Profile + + Enter your company registration details to get started - - + + +
- - - - Company Name - + + + + + - - - -
- - Company Email - - - - + + -
+ + -
- - Location - - - + + + + + + + + - - Address - - - -
+ + + + + + + + + -
- - TIN Number (10 digits) - - - - - - FAN Number (16 digits) - - - -
- - - -
+ + {createCompanyMutation.isSuccess && ( - - - Profile created successfully - + + + + Profile created successfully + + )} {createCompanyMutation.isError && ( - - - Failed to create profile - - )} -
- - +
) : ( - - -
- -

- Please complete the company profile first. -

-
- + + )} + + + + {profile ? ( + + ) : ( + +
+ } + color="gray" + variant="light" + > + Please complete the company profile first. + +
)} - - ) : ( - <> - {tab === "company" && } - {tab === "contact" && } - {tab === "gm" && } - {tab === "poa" && } - {tab === "documents" && } - - )} -
+ + + + {profile ? ( + + ) : ( + +
+ } + color="gray" + variant="light" + > + Please complete the company profile first. + +
+ + )} + + + + {profile ? ( + + ) : ( + +
+ } + color="gray" + variant="light" + > + Please complete the company profile first. + +
+ + )} + + + + {profile ? ( + + ) : ( + +
+ } + color="gray" + variant="light" + > + Please complete the company profile first. + +
+ + )} + + + ); } -// \ No newline at end of file diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabCompanyProfile.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabCompanyProfile.tsx index b64419565..0ba3d99a2 100644 --- a/apps/edr-freight-web/portal/src/pages/settings/TabCompanyProfile.tsx +++ b/apps/edr-freight-web/portal/src/pages/settings/TabCompanyProfile.tsx @@ -3,23 +3,19 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { Building2, CheckCircle2, Loader2, Save, XCircle } from "lucide-react"; -import { api } from "@/services/api"; -import PhoneInput from "@/components/auth/PhoneInput"; +import { Building2, CheckCircle2, Save, XCircle } from "lucide-react"; import { Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, - CardFooter, + Group, + Stack, + Title, + Text, + TextInput, Button, - Input, - Field, - FieldLabel, - FieldError, - FieldGroup, -} from "@edr/ui-common"; + Grid, +} from "@mantine/core"; +import { api } from "@/services/api"; +import PhoneInput from "@/components/auth/PhoneInput"; import type { ProfileResponse } from "@/types/profile"; const schema = z.object({ @@ -88,114 +84,107 @@ export default function TabCompanyProfile({ profile }: { profile: ProfileRespons const onSubmit = (data: FormData) => mutation.mutate(data); return ( - - - - - Company Profile - - Edit your company registration details - + + + + Company Profile + + + Edit your company registration details + +
- - - - Company Name - + + + + + - - - -
- - Company Email - - - - + + -
+ + -
- - Location - - - + + + + + + + + - - Address - - - -
+ + + + + + + + + -
- - TIN Number (10 digits) - - - - - - FAN Number (16 digits) - - - -
- - - -
+ + {mutation.isSuccess && ( - - - Saved successfully - + + + Saved successfully + )} {mutation.isError && ( - - - Save failed - + + + Save failed + )} -
-
+ + - -
- + +
); diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabContactPerson.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabContactPerson.tsx index bb2401be8..837307a87 100644 --- a/apps/edr-freight-web/portal/src/pages/settings/TabContactPerson.tsx +++ b/apps/edr-freight-web/portal/src/pages/settings/TabContactPerson.tsx @@ -3,23 +3,18 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { CheckCircle2, Loader2, Save, User, XCircle } from "lucide-react"; -import { api } from "@/services/api"; -import PhoneInput from "@/components/auth/PhoneInput"; +import { CheckCircle2, Save, User, XCircle } from "lucide-react"; import { Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, - CardFooter, + Group, + Stack, + Title, + Text, + TextInput, Button, - Input, - Field, - FieldLabel, - FieldError, - FieldGroup, -} from "@edr/ui-common"; +} from "@mantine/core"; +import { api } from "@/services/api"; +import PhoneInput from "@/components/auth/PhoneInput"; import type { ProfileResponse } from "@/types/profile"; const schema = z.object({ @@ -73,55 +68,54 @@ export default function TabContactPerson({ profile }: { profile: ProfileResponse const onSubmit = (data: FormData) => mutation.mutate(data); return ( - - - - - Contact Person - - Manage the primary contact person for your account - -
- - - - Full Name - - - + + + + Contact Person + + + Manage the primary contact person for your account + - - - - -
+ + + + + + + + + {mutation.isSuccess && ( - - - Saved successfully - + + + Saved successfully + )} {mutation.isError && ( - - - Save failed - + + + Save failed + )} -
-
+ + - -
- + +
); diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx index 298f7ad7c..e9b458060 100644 --- a/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx +++ b/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx @@ -7,17 +7,17 @@ import { UploadCloud, XCircle, } from "lucide-react"; -import { api } from "@/services/api"; -import { companiesService } from "@/services/companies.service"; import { Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, + Group, + Title, + Text, Button, - SmartFileInput, -} from "@edr/ui-common"; + Center, +} from "@mantine/core"; +import { api } from "@/services/api"; +import { companiesService } from "@/services/companies.service"; +import { SmartFileInput } from "@edr/ui-common"; import type { ProfileResponse } from "@/types/profile"; export default function TabDocuments({ profile }: { profile: ProfileResponse }) { @@ -39,69 +39,62 @@ export default function TabDocuments({ profile }: { profile: ProfileResponse }) }); return ( - - - - - Documents - - - Upload and manage required business documents - - - - {docSettingQuery.isLoading ? ( -
- -
- ) : !docSettingQuery.data ? ( -

- No document requirements configured for your account. -

- ) : ( - - )} + + + + Documents + + + Upload and manage required business documents + - {docSettingQuery.data && ( -
-
- {docUploadMutation.isSuccess && ( - - - Documents uploaded successfully - - )} - {docUploadMutation.isError && ( - - - Upload failed - - )} -
- -
- )} - + {docSettingQuery.isLoading ? ( +
+ +
+ ) : !docSettingQuery.data ? ( + + No document requirements configured for your account. + + ) : ( + + )} + + {docSettingQuery.data && ( + + + {docUploadMutation.isSuccess && ( + + + Documents uploaded successfully + + )} + {docUploadMutation.isError && ( + + + Upload failed + + )} + + + + )} ); } diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabGeneralManager.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabGeneralManager.tsx index 7c7f0d4d3..84f365d5d 100644 --- a/apps/edr-freight-web/portal/src/pages/settings/TabGeneralManager.tsx +++ b/apps/edr-freight-web/portal/src/pages/settings/TabGeneralManager.tsx @@ -3,23 +3,19 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; -import { Briefcase, CheckCircle2, Loader2, Save, XCircle } from "lucide-react"; -import { api } from "@/services/api"; -import PhoneInput from "@/components/auth/PhoneInput"; +import { Briefcase, CheckCircle2, Save, XCircle } from "lucide-react"; import { Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, - CardFooter, + Group, + Stack, + Title, + Text, + TextInput, Button, - Input, - Field, - FieldLabel, - FieldError, - FieldGroup, -} from "@edr/ui-common"; + Grid, +} from "@mantine/core"; +import { api } from "@/services/api"; +import PhoneInput from "@/components/auth/PhoneInput"; import type { ProfileResponse } from "@/types/profile"; const schema = z.object({ @@ -76,68 +72,67 @@ export default function TabGeneralManager({ profile }: { profile: ProfileRespons const onSubmit = (data: FormData) => mutation.mutate(data); return ( - - - - - General Manager - - Manage the general manager information - + + + + General Manager + + + Manage the general manager information + +
- - - - Full Name - + + + + + - - - -
- - Email Address - - - - + + -
- - - -
+ + + + + + {mutation.isSuccess && ( - - - Saved successfully - + + + Saved successfully + )} {mutation.isError && ( - - - Save failed - + + + Save failed + )} -
-
+ + - -
- + +
); diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx index e5d977e2d..00ecbfdf6 100644 --- a/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx +++ b/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx @@ -4,22 +4,18 @@ import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { CheckCircle2, Loader2, Save, UserCheck, XCircle } from "lucide-react"; -import { api } from "@/services/api"; -import PhoneInput from "@/components/auth/PhoneInput"; import { Card, - CardHeader, - CardTitle, - CardDescription, - CardContent, - CardFooter, + Group, + Stack, + Title, + Text, + TextInput, Button, - Input, - Field, - FieldLabel, - FieldError, - FieldGroup, -} from "@edr/ui-common"; + Grid, +} from "@mantine/core"; +import { api } from "@/services/api"; +import PhoneInput from "@/components/auth/PhoneInput"; import type { ProfileResponse } from "@/types/profile"; const schema = z.object({ @@ -66,7 +62,6 @@ export default function TabPowerOfAttorney({ formState: { errors, isDirty }, } = useForm({ resolver: zodResolver(schema), - values: defaultValues, }); @@ -92,47 +87,41 @@ export default function TabPowerOfAttorney({ const onSubmit = (data: FormData) => mutation.mutate(data); return ( - - - - - Power of Attorney - - - Power of Attorney details are optional. Fill them in if you have an - authorized representative, or leave blank. - - + + + + Power of Attorney + + + Power of Attorney details are optional. Fill them in if you have an + authorized representative, or leave blank. + +
- - -

- Power of Attorney details are optional. Fill them in if you have - an authorized representative, or leave blank. -

+ + + Power of Attorney details are optional. Fill them in if you have + an authorized representative, or leave blank. + - - PoA Full Name - + + + + - - - -
- - PoA Email - - - - + + -
+ + -
- - PoA Location - - - + + + + + + + + + - - PoA Address - - - -
- - - -
+ + {mutation.isSuccess && ( - - - Saved successfully - + + + Saved successfully + )} {mutation.isError && ( - - - Save failed - + + + Save failed + )} -
-
+ + - -
- + +
); From e47340c2c834d31ae16e0371d63d232cf722d3b8 Mon Sep 17 00:00:00 2001 From: ghost2023 Date: Tue, 16 Jun 2026 14:26:47 +0300 Subject: [PATCH 3/3] fixes --- .../src/pages/bookings/BookingDetailPage.tsx | 28 ++-- apps/edr-freight-web/portal/src/App.tsx | 2 +- .../portal/src/lib/currentCustomer.ts | 15 +- .../src/pages/bookings/NewBookingPage.tsx | 34 ++-- .../new-booking-form/step1-contract-type.tsx | 147 ++++++++++++++---- .../portal/src/types/userTypeRequest.ts | 10 -- packages/ui-common/package.json | 1 + pnpm-lock.yaml | 67 +++++++- 8 files changed, 219 insertions(+), 85 deletions(-) delete mode 100644 apps/edr-freight-web/portal/src/types/userTypeRequest.ts diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx index 42cde3d90..481eeb407 100644 --- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingDetailPage.tsx @@ -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 }, ]} /> -{/* + {/* { - + {/* LEFT — primary content */} - - + + @@ -139,9 +146,12 @@ const BookingDetailPage = () => { {/* RIGHT — summary sidebar */} - {booking.status === "SELECTED_FOR_BATCH" && booking.paymentDeadline && ( - - )} + {booking.status === "SELECTED_FOR_BATCH" && + booking.paymentDeadline && ( + + )} ; diff --git a/apps/edr-freight-web/portal/src/lib/currentCustomer.ts b/apps/edr-freight-web/portal/src/lib/currentCustomer.ts index 0a68cd4f5..8fee820e6 100644 --- a/apps/edr-freight-web/portal/src/lib/currentCustomer.ts +++ b/apps/edr-freight-web/portal/src/lib/currentCustomer.ts @@ -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)); diff --git a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx index 513b93a45..3a1f7ec27 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx @@ -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. - @@ -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() { )} - {step === 1 && } + {step === 1 && ( + + )} {step === 2 && ( )} diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx index 55b81a816..ae52a8645 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx @@ -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; +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(() => { 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 (
diff --git a/apps/edr-freight-web/portal/src/types/userTypeRequest.ts b/apps/edr-freight-web/portal/src/types/userTypeRequest.ts deleted file mode 100644 index 7e36d9cb2..000000000 --- a/apps/edr-freight-web/portal/src/types/userTypeRequest.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type UserTypeRequest { - email: string; - username: string; - phoneNumber: string; - userType: string; - name: { - am?: string; - en: string; - }; -} \ No newline at end of file diff --git a/packages/ui-common/package.json b/packages/ui-common/package.json index 2d0cee50d..0fa74439b 100644 --- a/packages/ui-common/package.json +++ b/packages/ui-common/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c100f5c77..d9477430a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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