diff --git a/apps/edr-freight-web/backoffice/src/hooks/hooks/useBookings.ts b/apps/edr-freight-web/backoffice/src/hooks/hooks/useBookings.ts deleted file mode 100644 index 7f353d50a..000000000 --- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useBookings.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; - -import { bookingsService } from "../services/bookings.service"; - -export const useBookings = () => - useQuery({ - queryKey: ["bookings"], - queryFn: bookingsService.list, - }); - -export const useBooking = (id: string) => - useQuery({ - queryKey: ["bookings", id], - queryFn: () => bookingsService.get(id), - enabled: Boolean(id), - }); diff --git a/apps/edr-freight-web/backoffice/src/hooks/hooks/useConsignments.ts b/apps/edr-freight-web/backoffice/src/hooks/hooks/useConsignments.ts deleted file mode 100644 index 593c6be5d..000000000 --- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useConsignments.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; - -import { consignmentsService } from "../services/consignments.service"; - -export const useConsignments = () => - useQuery({ - queryKey: ["consignments"], - queryFn: consignmentsService.list, - }); - -export const useConsignment = (id: string) => - useQuery({ - queryKey: ["consignments", id], - queryFn: () => consignmentsService.get(id), - enabled: Boolean(id), - }); diff --git a/apps/edr-freight-web/backoffice/src/hooks/hooks/useCustomers.ts b/apps/edr-freight-web/backoffice/src/hooks/hooks/useCustomers.ts deleted file mode 100644 index ec26af310..000000000 --- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useCustomers.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; - -import { customersService } from "@/services/customers.service"; -import type { - CreateCustomerDto, - UpdateCustomerDto, -} from "@/types/customers"; - -const KEY = ["customers"] as const; - -export const useCustomers = () => - useQuery({ - queryKey: KEY, - queryFn: customersService.list, - }); - -export const useCustomer = (id: string | undefined) => - useQuery({ - queryKey: [...KEY, "id", id], - queryFn: () => customersService.getById(id!), - enabled: Boolean(id), - }); - -export const useCreateCustomer = () => { - const qc = useQueryClient(); - return useMutation({ - mutationFn: (dto: CreateCustomerDto) => customersService.create(dto), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), - }); -}; - -export const useUpdateCustomer = () => { - const qc = useQueryClient(); - return useMutation({ - mutationFn: ({ id, dto }: { id: string; dto: UpdateCustomerDto }) => - customersService.update(id, dto), - onSuccess: (_data, { id }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", id] }); - }, - }); -}; - -export const useDeleteCustomer = () => { - const qc = useQueryClient(); - return useMutation({ - mutationFn: (id: string) => customersService.remove(id), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), - }); -}; diff --git a/apps/edr-freight-web/backoffice/src/hooks/hooks/useTracking.ts b/apps/edr-freight-web/backoffice/src/hooks/hooks/useTracking.ts deleted file mode 100644 index 403dac071..000000000 --- a/apps/edr-freight-web/backoffice/src/hooks/hooks/useTracking.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; - -import { trackingService } from "../services/tracking.service"; - -export const useTracking = (consignmentId: string) => - useQuery({ - queryKey: ["tracking", consignmentId], - queryFn: () => trackingService.forConsignment(consignmentId), - enabled: Boolean(consignmentId), - }); diff --git a/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts b/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts index 1d6360209..8430c8f1c 100644 --- a/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts +++ b/apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts @@ -1,11 +1,8 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import toast from "react-hot-toast"; -import { QUERY_KEYS } from "@/constants/TANSTACK_QUEY_KEY"; -import { - ruleEngineService, - type RuleEngineListParams, -} from "@/services/ruleEngine/ruleEngine.service"; +import { api } from "@/services/api"; +import type { RuleEngineListParams } from "@/services/ruleEngine/ruleEngine.service"; import { RULE_ENGINE_SELECT_NONE } from "@/pages/ruleEngine/config/resources"; import type { ApproveRatePayload, @@ -16,26 +13,29 @@ import type { const CARGO_TYPE_PARENT_PAGE_SIZE = 500; const CONTAINER_TYPE_OPTIONS_PAGE_SIZE = 500; +const listKey = (resource: RuleEngineResourceSlug) => + ["rule-engine", resource] as const; + export const useRuleEngineList = ( resource: RuleEngineResourceSlug, params: RuleEngineListParams, ) => - useQuery({ - queryKey: [...QUERY_KEYS.RULE_ENGINE.list(resource), params], - queryFn: () => ruleEngineService.list(resource, params), - }); + useQuery( + api.ruleEngine.list.queryOptions({ + input: { resource, params }, + }), + ); export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) => useQuery({ - queryKey: [ - ...QUERY_KEYS.RULE_ENGINE.list("cargo-types"), - "parent-options", - excludeId ?? "", - ], + queryKey: api.ruleEngine.list.queryKey({ + resource: "cargo-types", + params: { page: 1, pageSize: CARGO_TYPE_PARENT_PAGE_SIZE }, + }), queryFn: () => - ruleEngineService.list("cargo-types", { - page: 1, - pageSize: CARGO_TYPE_PARENT_PAGE_SIZE, + api.ruleEngine.list.call({ + resource: "cargo-types", + params: { page: 1, pageSize: CARGO_TYPE_PARENT_PAGE_SIZE }, }), enabled, select: (result) => { @@ -46,7 +46,9 @@ export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) => const name = String(row.cargoTypeName ?? "").trim(); const code = String(row.code ?? "").trim(); const label = - name && code ? `${name} (${code})` : name || code || String(row.id); + name && code + ? `${name} (${code})` + : name || code || String(row.id); return { label, value: String(row.id) }; }); return [noneOption, ...parents]; @@ -84,20 +86,20 @@ export const useContainerTypeOptions = (enabled = true) => }); export const useApprovalChain = (enabled: boolean) => - useQuery({ - queryKey: QUERY_KEYS.RULE_ENGINE.chain, - queryFn: () => ruleEngineService.getApprovalChain(), - enabled, - }); + useQuery( + api.ruleEngine.getApprovalChain.queryOptions({ + enabled, + }), + ); export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => { const qc = useQueryClient(); const invalidate = () => - qc.invalidateQueries({ queryKey: QUERY_KEYS.RULE_ENGINE.list(resource) }); + qc.invalidateQueries({ queryKey: listKey(resource) }); const create = useMutation({ mutationFn: (payload: Record) => - ruleEngineService.create(resource, payload), + api.ruleEngine.create.call({ resource, payload }), onSuccess: () => { toast.success("Created successfully"); invalidate(); @@ -112,7 +114,7 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => { }: { id: string; payload: Record; - }) => ruleEngineService.update(resource, id, payload), + }) => api.ruleEngine.update.call({ resource, id, payload }), onSuccess: () => { toast.success("Updated successfully"); invalidate(); @@ -121,7 +123,8 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => { }); const remove = useMutation({ - mutationFn: (id: string) => ruleEngineService.remove(resource, id), + mutationFn: (id: string) => + api.ruleEngine.remove.call({ resource, id }), onSuccess: () => { toast.success("Deleted successfully"); invalidate(); @@ -135,10 +138,10 @@ export const useRuleEngineMutations = (resource: RuleEngineResourceSlug) => { export const useRateWorkflow = () => { const qc = useQueryClient(); const invalidate = () => - qc.invalidateQueries({ queryKey: QUERY_KEYS.RULE_ENGINE.list("rates") }); + qc.invalidateQueries({ queryKey: listKey("rates") }); const submit = useMutation({ - mutationFn: (id: string) => ruleEngineService.submitRate(id), + mutationFn: (id: string) => api.ruleEngine.submitRate.call({ id }), onSuccess: () => { toast.success("Rate submitted for approval"); invalidate(); @@ -147,8 +150,13 @@ export const useRateWorkflow = () => { }); const approve = useMutation({ - mutationFn: ({ id, payload }: { id: string; payload: ApproveRatePayload }) => - ruleEngineService.approveRate(id, payload), + mutationFn: ({ + id, + payload, + }: { + id: string; + payload: ApproveRatePayload; + }) => api.ruleEngine.approveRate.call({ id, payload }), onSuccess: () => { toast.success("Rate approved"); invalidate(); diff --git a/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts b/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts new file mode 100644 index 000000000..5ee2e5749 --- /dev/null +++ b/apps/edr-freight-web/backoffice/src/hooks/useBookings.ts @@ -0,0 +1,48 @@ +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +import { api } from "@/services/api"; +import type { BookingListFilter } from "@/services/bookings.service"; + +export const useBookingList = (filter?: BookingListFilter) => { + const input = { filter }; + return { + queryKey: api.bookings.list.queryKey(input), + queryFn: () => api.bookings.list.call(input), + }; +}; + +export const useBooking = (id: string) => ({ + queryKey: api.bookings.getById.queryKey({ id }), + queryFn: () => api.bookings.getById.call({ id }), + enabled: Boolean(id), +}); + +export const useUpdateBookingStatus = () => { + const qc = useQueryClient(); + return useMutation({ + mutationFn: ({ + id, + action, + reason, + }: { + id: string; + action: string; + reason?: string; + }) => api.bookings.updateStatus.call({ id, action, reason }), + onSuccess: (_data, { id }) => { + qc.invalidateQueries({ queryKey: api.bookings.list.queryKey() }); + qc.invalidateQueries({ + queryKey: api.bookings.getById.queryKey({ id }), + }); + }, + }); +}; + +export const useDeleteBooking = () => { + const qc = useQueryClient(); + return useMutation({ + mutationFn: (id: string) => api.bookings.remove.call({ id }), + onSuccess: () => + qc.invalidateQueries({ queryKey: api.bookings.list.queryKey() }), + }); +}; diff --git a/apps/edr-freight-web/backoffice/src/hooks/useDropdownSettings.ts b/apps/edr-freight-web/backoffice/src/hooks/useDropdownSettings.ts index c2b8a4423..256fc1702 100644 --- a/apps/edr-freight-web/backoffice/src/hooks/useDropdownSettings.ts +++ b/apps/edr-freight-web/backoffice/src/hooks/useDropdownSettings.ts @@ -1,6 +1,6 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { dropdownSettingsService } from "@/services/dropdownSettings.service"; +import { api } from "@/services/api"; import type { CreateDropdownOptionDto, CreateDropdownSettingDto, @@ -8,38 +8,15 @@ import type { UpdateDropdownSettingDto, } from "@/types/dropdownSettings"; -const KEY = ["dropdown-settings"] as const; - -/* ------------------------------ Queries ------------------------------ */ - -export const useDropdownSettings = () => - useQuery({ - queryKey: KEY, - queryFn: dropdownSettingsService.list, - }); - -export const useDropdownSetting = (id: string) => - useQuery({ - queryKey: [...KEY, "id", id], - queryFn: () => dropdownSettingsService.getById(id), - enabled: Boolean(id), - }); - -export const useDropdownSettingByCode = (code: string) => - useQuery({ - queryKey: [...KEY, "code", code], - queryFn: () => dropdownSettingsService.getByCode(code), - enabled: Boolean(code), - }); - /* ----------------------------- Mutations ----------------------------- */ export const useCreateDropdownSetting = () => { const qc = useQueryClient(); return useMutation({ mutationFn: (dto: CreateDropdownSettingDto) => - dropdownSettingsService.create(dto), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + api.dropdownSettings.create.call(dto), + onSuccess: () => + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }), }); }; @@ -52,10 +29,12 @@ export const useUpdateDropdownSetting = () => { }: { id: string; dto: UpdateDropdownSettingDto; - }) => dropdownSettingsService.update(id, dto), + }) => api.dropdownSettings.update.call({ id, dto }), onSuccess: (_data, { id }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", id] }); + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }); + qc.invalidateQueries({ + queryKey: api.dropdownSettings.getById.queryKey({ id }), + }); }, }); }; @@ -63,8 +42,9 @@ export const useUpdateDropdownSetting = () => { export const useDeleteDropdownSetting = () => { const qc = useQueryClient(); return useMutation({ - mutationFn: (id: string) => dropdownSettingsService.remove(id), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + mutationFn: (id: string) => api.dropdownSettings.remove.call({ id }), + onSuccess: () => + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }), }); }; @@ -77,10 +57,12 @@ export const useReplaceDropdownOptions = () => { }: { settingId: string; options: CreateDropdownOptionDto[]; - }) => dropdownSettingsService.replaceOptions(settingId, options), + }) => api.dropdownSettings.replaceOptions.call({ id: settingId, options }), onSuccess: (_data, { settingId }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] }); + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }); + qc.invalidateQueries({ + queryKey: api.dropdownSettings.getById.queryKey({ id: settingId }), + }); }, }); }; @@ -94,10 +76,12 @@ export const useAddDropdownOption = () => { }: { settingId: string; dto: CreateDropdownOptionDto; - }) => dropdownSettingsService.addOption(settingId, dto), + }) => api.dropdownSettings.addOption.call({ id: settingId, dto }), onSuccess: (_data, { settingId }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] }); + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }); + qc.invalidateQueries({ + queryKey: api.dropdownSettings.getById.queryKey({ id: settingId }), + }); }, }); }; @@ -111,8 +95,9 @@ export const useUpdateDropdownOption = () => { }: { optionId: string; dto: UpdateDropdownOptionDto; - }) => dropdownSettingsService.updateOption(optionId, dto), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + }) => api.dropdownSettings.updateOption.call({ optionId, dto }), + onSuccess: () => + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }), }); }; @@ -120,7 +105,8 @@ export const useRemoveDropdownOption = () => { const qc = useQueryClient(); return useMutation({ mutationFn: (optionId: string) => - dropdownSettingsService.removeOption(optionId), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + api.dropdownSettings.removeOption.call({ optionId }), + onSuccess: () => + qc.invalidateQueries({ queryKey: api.dropdownSettings.list.queryKey() }), }); }; diff --git a/apps/edr-freight-web/backoffice/src/hooks/useFileUploadSettings.ts b/apps/edr-freight-web/backoffice/src/hooks/useFileUploadSettings.ts index f916915f9..748de4f88 100644 --- a/apps/edr-freight-web/backoffice/src/hooks/useFileUploadSettings.ts +++ b/apps/edr-freight-web/backoffice/src/hooks/useFileUploadSettings.ts @@ -1,6 +1,6 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; -import { fileUploadSettingsService } from "@/services/fileUploadSettings.service"; +import { api } from "@/services/api"; import type { CreateFileUploadFieldDto, CreateFileUploadSettingDto, @@ -8,38 +8,17 @@ import type { UpdateFileUploadSettingDto, } from "@/types/fileUploadSettings"; -const KEY = ["file-upload-settings"] as const; - -/* ------------------------------ Queries ------------------------------ */ - -export const useFileUploadSettings = () => - useQuery({ - queryKey: KEY, - queryFn: fileUploadSettingsService.list, - }); - -export const useFileUploadSetting = (id: string) => - useQuery({ - queryKey: [...KEY, "id", id], - queryFn: () => fileUploadSettingsService.getById(id), - enabled: Boolean(id), - }); - -export const useFileUploadSettingByCode = (code: string) => - useQuery({ - queryKey: [...KEY, "code", code], - queryFn: () => fileUploadSettingsService.getByCode(code), - enabled: Boolean(code), - }); - /* ----------------------------- Mutations ----------------------------- */ export const useCreateFileUploadSetting = () => { const qc = useQueryClient(); return useMutation({ mutationFn: (dto: CreateFileUploadSettingDto) => - fileUploadSettingsService.create(dto), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + api.fileUploadSettings.create.call(dto), + onSuccess: () => + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }), }); }; @@ -52,10 +31,14 @@ export const useUpdateFileUploadSetting = () => { }: { id: string; dto: UpdateFileUploadSettingDto; - }) => fileUploadSettingsService.update(id, dto), + }) => api.fileUploadSettings.update.call({ id, dto }), onSuccess: (_data, { id }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", id] }); + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }); + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.getById.queryKey({ id }), + }); }, }); }; @@ -63,8 +46,11 @@ export const useUpdateFileUploadSetting = () => { export const useDeleteFileUploadSetting = () => { const qc = useQueryClient(); return useMutation({ - mutationFn: (id: string) => fileUploadSettingsService.remove(id), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + mutationFn: (id: string) => api.fileUploadSettings.remove.call({ id }), + onSuccess: () => + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }), }); }; @@ -77,10 +63,14 @@ export const useReplaceFileUploadFields = () => { }: { settingId: string; fields: CreateFileUploadFieldDto[]; - }) => fileUploadSettingsService.replaceFields(settingId, fields), + }) => api.fileUploadSettings.replaceFields.call({ id: settingId, fields }), onSuccess: (_data, { settingId }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] }); + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }); + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.getById.queryKey({ id: settingId }), + }); }, }); }; @@ -94,10 +84,14 @@ export const useAddFileUploadField = () => { }: { settingId: string; dto: CreateFileUploadFieldDto; - }) => fileUploadSettingsService.addField(settingId, dto), + }) => api.fileUploadSettings.addField.call({ settingId, dto }), onSuccess: (_data, { settingId }) => { - qc.invalidateQueries({ queryKey: KEY }); - qc.invalidateQueries({ queryKey: [...KEY, "id", settingId] }); + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }); + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.getById.queryKey({ id: settingId }), + }); }, }); }; @@ -111,8 +105,11 @@ export const useUpdateFileUploadField = () => { }: { fieldId: string; dto: UpdateFileUploadFieldDto; - }) => fileUploadSettingsService.updateField(fieldId, dto), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + }) => api.fileUploadSettings.updateField.call({ fieldId, dto }), + onSuccess: () => + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }), }); }; @@ -120,7 +117,10 @@ export const useRemoveFileUploadField = () => { const qc = useQueryClient(); return useMutation({ mutationFn: (fieldId: string) => - fileUploadSettingsService.removeField(fieldId), - onSuccess: () => qc.invalidateQueries({ queryKey: KEY }), + api.fileUploadSettings.removeField.call({ fieldId }), + onSuccess: () => + qc.invalidateQueries({ + queryKey: api.fileUploadSettings.list.queryKey(), + }), }); }; diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx index 86b4f483e..3bb75b6bf 100644 --- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestDetailPage.tsx @@ -1,5 +1,5 @@ -import { useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; +import { useQuery } from "@tanstack/react-query"; import { AlertCircle, AlertTriangle, @@ -27,14 +27,9 @@ import { 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 { api } from "@/services/api"; +import { useUpdateBookingStatus } from "@/hooks/useBookings"; +import { mapBookingToRequest, BOOKING_STATUSES } from "./booking-requests.mock"; import { Badge, Button, @@ -233,9 +228,16 @@ const STATUS_CONFIG: Record< export default function BookingRequestDetailPage() { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); - const [booking, setBooking] = useState( - id ? getBookingRequestById(id) : undefined, + + const { data: bookingData } = useQuery( + api.bookings.getById.queryOptions({ + input: { id: id ?? "" }, + enabled: Boolean(id), + }), ); + const updateStatus = useUpdateBookingStatus(); + + const booking = bookingData ? mapBookingToRequest(bookingData) : undefined; if (!booking) { return ( @@ -270,20 +272,20 @@ export default function BookingRequestDetailPage() { booking.status, ); + const isPending = updateStatus.isPending; + function handleApprove() { if (!booking) return; - const nextStatus = + const action = booking.status === "RFQ_SUBMITTED" - ? ("QUOTATION_SENT" as const) - : ("APPROVED" as const); - updateBookingRequestStatus(booking.id, nextStatus); - setBooking(getBookingRequestById(booking.id)); + ? "SEND_QUOTATION" + : "APPROVE"; + updateStatus.mutate({ id: booking.id, action }); } function handleReject() { if (!booking) return; - updateBookingRequestStatus(booking.id, "CANCELLED"); - setBooking(getBookingRequestById(booking.id)); + updateStatus.mutate({ id: booking.id, action: "CANCEL", reason: "Cancelled by backoffice" }); } return ( diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx index d59658131..643257bbd 100644 --- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx @@ -1,5 +1,6 @@ import { useMemo, useState } from "react"; import { useNavigate } from "react-router-dom"; +import { useQuery } from "@tanstack/react-query"; import { AlertCircle, ArrowRight, @@ -18,10 +19,11 @@ import { import Breadcrumbs from "@/components/ui/Breadcrumbs"; import { cn } from "@/lib/utils"; +import { api } from "@/services/api"; import { - getBookingRequests, BOOKING_STATUSES, type BookingRequest, + mapBookingToRequest, } from "./booking-requests.mock"; import { DataTable, @@ -153,7 +155,13 @@ export default function BookingRequestsPage() { const [query, setQuery] = useState(""); const [statusFilter, setStatusFilter] = useState(null); - const bookingRequests = useMemo(() => getBookingRequests(), []); + const { data: bookingData } = useQuery( + api.bookings.list.queryOptions({ input: { filter: { page: pagination.pageIndex + 1, pageSize: pagination.pageSize } } }), + ); + const bookingRequests = useMemo( + () => (bookingData?.items ?? []).map(mapBookingToRequest), + [bookingData], + ); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts b/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts index a5d13cbc0..9adb8eb33 100644 --- a/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts +++ b/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests.mock.ts @@ -1,3 +1,5 @@ +import type { Freight } from "@edr/types"; + export interface BookingRequest { id: string; reference: string; @@ -131,6 +133,36 @@ export function updateBookingRequestStatus(id: string, newStatus: (typeof BOOKIN saveBookingRequestsToStorage(requests); } +export function mapBookingToRequest(booking: Freight.IBooking): BookingRequest { + return { + id: booking.id, + reference: booking.reference, + customer: booking.customerId, + status: booking.status as BookingRequest["status"], + scheduledDate: booking.scheduledDate, + totalAmount: booking.totalAmount, + paymentStatus: booking.paymentStatus, + contractType: booking.contractType, + serviceType: + booking.serviceType === "RAIL_ONLY" ? "RAIL" : (booking.serviceType as string), + tradeDirection: booking.tradeDirection as string, + originYard: booking.originStation, + destinationYard: booking.destinationStation, + cargoType: booking.freightType ?? booking.freightSubtype ?? "", + cargoTotalWeightVgm: booking.cargoTotalWeightVgm, + isHazardous: booking.isHazardous, + paymentCurrency: booking.paymentCurrency, + priorityScore: booking.priorityScore, + firstMilePickupAddress: booking.firstMilePickupAddress ?? null, + lastMileDeliveryAddress: booking.lastMileDeliveryAddress ?? null, + shippingLine: null, + pnrCode: null, + createdBy: booking.customerId, + createdAt: booking.createdAt, + updatedAt: booking.updatedAt, + }; +} + export function getBookingRequests(): BookingRequest[] { if (typeof window === "undefined" || !window.localStorage) { return INITIAL_REQUESTS; diff --git a/apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx index ce2163bad..9cb0e94e3 100644 --- a/apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/documents/FileUploadSettingsPage.tsx @@ -20,12 +20,16 @@ import ManageFileUploadFieldsDialog from "./ManageFileUploadFieldsDialog"; import DeleteFileUploadSettingDialog from "./DeleteFileUploadSettingDialog"; import Breadcrumbs from "@/components/ui/Breadcrumbs"; import { getMinFiles } from "@/types/fileUploadSettings"; -import { useDeleteFileUploadSetting, useFileUploadSettings } from "@/hooks/useFileUploadSettings"; +import { useQuery } from "@tanstack/react-query"; +import { api } from "@/services/api"; +import { useDeleteFileUploadSetting } from "@/hooks/useFileUploadSettings"; export default function FileUploadSettingsPage() { const [query, setQuery] = useState(""); - const { data, isLoading, isError, error } = useFileUploadSettings(); + const { data, isLoading, isError, error } = useQuery( + api.fileUploadSettings.list.queryOptions(), + ); const deleteMutation = useDeleteFileUploadSetting(); const fileUploadSettings = useMemo( diff --git a/apps/edr-freight-web/backoffice/src/pages/dropdown_settings/DropdownSettingsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dropdown_settings/DropdownSettingsPage.tsx index 8a336cdaf..7edaeb7b1 100644 --- a/apps/edr-freight-web/backoffice/src/pages/dropdown_settings/DropdownSettingsPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/dropdown_settings/DropdownSettingsPage.tsx @@ -21,10 +21,9 @@ import Breadcrumbs from "@/components/ui/Breadcrumbs"; import EditDropdownSettingDialog from "./EditDropdownSettingDialog"; import ManageDropdownOptionsDialog from "./ManageDropdownOptionsDialog"; import DeleteDropdownSettingDialog from "./DeleteDropdownSettingDialog"; -import { - useDeleteDropdownSetting, - useDropdownSettings, -} from "@/hooks/useDropdownSettings"; +import { useQuery } from "@tanstack/react-query"; +import { api } from "@/services/api"; +import { useDeleteDropdownSetting } from "@/hooks/useDropdownSettings"; import type { DropdownSetting } from "@/types/dropdownSettings"; import { DataTable, @@ -86,7 +85,9 @@ export default function DropdownSettingsPage() { return () => cancelAnimationFrame(id); }, [activeDialog]); - const { data, isLoading, isError, error } = useDropdownSettings(); + const { data, isLoading, isError, error } = useQuery( + api.dropdownSettings.list.queryOptions(), + ); const deleteMutation = useDeleteDropdownSetting(); const dropdownSettings = useMemo( diff --git a/apps/edr-freight-web/backoffice/src/services/api.ts b/apps/edr-freight-web/backoffice/src/services/api.ts new file mode 100644 index 000000000..f0d585859 --- /dev/null +++ b/apps/edr-freight-web/backoffice/src/services/api.ts @@ -0,0 +1,251 @@ +import { endpoint } from "@/utils/endpoint"; +import type { + CreateFileUploadFieldDto, + CreateFileUploadSettingDto, + FileUploadField, + FileUploadSetting, + UpdateFileUploadFieldDto, + UpdateFileUploadSettingDto, +} from "@/types/fileUploadSettings"; +import { + CreateDropdownOptionDto, + CreateDropdownSettingDto, + DropdownOption, + DropdownSetting, + UpdateDropdownOptionDto, + UpdateDropdownSettingDto, +} from "@/types/dropdownSettings"; +import { + ApproveRatePayload, + RuleEngineListResult, + RuleEngineRecord, + RuleEngineResourceSlug, +} from "@/types/rule-engine"; +import { fileUploadSettingsService } from "./fileUploadSettings.service"; +import { dropdownSettingsService } from "./dropdownSettings.service"; +import { + ruleEngineService, + RuleEngineListParams, +} from "./ruleEngine/ruleEngine.service"; +import { bookingsService, BookingListFilter } from "./bookings.service"; +import type { Freight, PaginatedResponse } from "@edr/types"; + +export const api = { + fileUploadSettings: { + list: endpoint( + "file-upload-settings", + "list", + fileUploadSettingsService.list, + ), + + getById: endpoint<{ id: string }, FileUploadSetting>( + "file-upload-settings", + "getById", + ({ id }) => fileUploadSettingsService.getById(id), + ), + + getByCode: endpoint<{ code: string }, FileUploadSetting>( + "file-upload-settings", + "getByCode", + ({ code }) => fileUploadSettingsService.getByCode(code), + ), + + create: endpoint( + "file-upload-settings", + "create", + (payload) => fileUploadSettingsService.create(payload), + ), + + update: endpoint< + { id: string; dto: UpdateFileUploadSettingDto }, + FileUploadSetting + >("file-upload-settings", "update", ({ id, dto }) => + fileUploadSettingsService.update(id, dto), + ), + + remove: endpoint<{ id: string }, void>( + "file-upload-settings", + "remove", + ({ id }) => fileUploadSettingsService.remove(id), + ), + + replaceFields: endpoint< + { id: string; fields: CreateFileUploadFieldDto[] }, + FileUploadField[] + >("file-upload-settings", "replaceFields", ({ id, fields }) => + fileUploadSettingsService.replaceFields(id, fields), + ), + + addField: endpoint< + { settingId: string; dto: CreateFileUploadFieldDto }, + FileUploadField + >("file-upload-settings", "addField", ({ settingId, dto }) => + fileUploadSettingsService.addField(settingId, dto), + ), + + updateField: endpoint< + { fieldId: string; dto: UpdateFileUploadFieldDto }, + FileUploadField + >("file-upload-settings", "updateField", ({ fieldId, dto }) => + fileUploadSettingsService.updateField(fieldId, dto), + ), + + removeField: endpoint<{ fieldId: string }, void>( + "file-upload-settings", + "removeField", + ({ fieldId }) => fileUploadSettingsService.removeField(fieldId), + ), + }, + + dropdownSettings: { + list: endpoint( + "dropdown-settings", + "list", + dropdownSettingsService.list, + ), + + getById: endpoint<{ id: string }, DropdownSetting>( + "dropdown-settings", + "getById", + ({ id }) => dropdownSettingsService.getById(id), + ), + + getByCode: endpoint<{ code: string }, DropdownSetting>( + "dropdown-settings", + "getByCode", + ({ code }) => dropdownSettingsService.getByCode(code), + ), + + create: endpoint( + "dropdown-settings", + "create", + (payload) => dropdownSettingsService.create(payload), + ), + + update: endpoint< + { id: string; dto: UpdateDropdownSettingDto }, + DropdownSetting + >("dropdown-settings", "update", ({ id, dto }) => + dropdownSettingsService.update(id, dto), + ), + + remove: endpoint<{ id: string }, void>( + "dropdown-settings", + "remove", + ({ id }) => dropdownSettingsService.remove(id), + ), + + replaceOptions: endpoint< + { id: string; options: CreateDropdownOptionDto[] }, + DropdownOption[] + >("dropdown-settings", "replaceOptions", ({ id, options }) => + dropdownSettingsService.replaceOptions(id, options), + ), + + addOption: endpoint< + { id: string; dto: CreateDropdownOptionDto }, + DropdownOption + >("dropdown-settings", "addOption", ({ id, dto }) => + dropdownSettingsService.addOption(id, dto), + ), + + updateOption: endpoint< + { optionId: string; dto: UpdateDropdownOptionDto }, + DropdownOption + >("dropdown-settings", "updateOption", ({ optionId, dto }) => + dropdownSettingsService.updateOption(optionId, dto), + ), + + removeOption: endpoint<{ optionId: string }, void>( + "dropdown-settings", + "removeOption", + ({ optionId }) => dropdownSettingsService.removeOption(optionId), + ), + }, + + ruleEngine: { + list: endpoint< + { resource: RuleEngineResourceSlug; params?: RuleEngineListParams }, + RuleEngineListResult + >("rule-engine", "list", ({ resource, params }) => + ruleEngineService.list(resource, params), + ), + + getById: endpoint< + { resource: RuleEngineResourceSlug; id: string }, + RuleEngineRecord + >("rule-engine", "getById", ({ resource, id }) => + ruleEngineService.getById(resource, id), + ), + + create: endpoint< + { resource: RuleEngineResourceSlug; payload: Record }, + RuleEngineRecord + >("rule-engine", "create", ({ resource, payload }) => + ruleEngineService.create(resource, payload), + ), + + update: endpoint< + { + resource: RuleEngineResourceSlug; + id: string; + payload: Record; + }, + RuleEngineRecord + >("rule-engine", "update", ({ resource, id, payload }) => + ruleEngineService.update(resource, id, payload), + ), + + remove: endpoint< + { resource: RuleEngineResourceSlug; id: string }, + void + >("rule-engine", "remove", ({ resource, id }) => + ruleEngineService.remove(resource, id), + ), + + submitRate: endpoint<{ id: string }, RuleEngineRecord>( + "rule-engine", + "submitRate", + ({ id }) => ruleEngineService.submitRate(id), + ), + + approveRate: endpoint< + { id: string; payload: ApproveRatePayload }, + RuleEngineRecord + >("rule-engine", "approveRate", ({ id, payload }) => + ruleEngineService.approveRate(id, payload), + ), + + getApprovalChain: endpoint( + "rule-engine", + "getApprovalChain", + () => ruleEngineService.getApprovalChain(), + ), + }, + + bookings: { + list: endpoint< + { filter?: BookingListFilter }, + PaginatedResponse + >("bookings", "list", ({ filter }) => bookingsService.list(filter)), + + getById: endpoint<{ id: string }, Freight.IBooking>( + "bookings", + "getById", + ({ id }) => bookingsService.getById(id), + ), + + updateStatus: endpoint< + { id: string; action: string; reason?: string }, + Freight.IBooking + >("bookings", "updateStatus", ({ id, action, reason }) => + bookingsService.updateStatus(id, { action, reason }), + ), + + remove: endpoint<{ id: string }, void>( + "bookings", + "remove", + ({ id }) => bookingsService.remove(id), + ), + }, +}; diff --git a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts new file mode 100644 index 000000000..e823b2146 --- /dev/null +++ b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts @@ -0,0 +1,51 @@ +import type { Freight, PaginatedResponse } from "@edr/types"; + +import { api as client } from "../auth/http"; +import { unwrap } from "@/utils/endpoint"; +import { URL_CONSTANTS } from "@/constants/URLS"; + +const BASE = URL_CONSTANTS.BOOKINGS.BASE; + +export interface BookingListFilter { + status?: string; + customerId?: string; + search?: string; + page?: number; + pageSize?: number; + sortBy?: string; + sortOrder?: "ASC" | "DESC"; +} + +export const bookingsService = { + list: async ( + filter?: BookingListFilter, + ): Promise> => { + const response = await client.get>( + BASE, + { params: filter }, + ); + return unwrap(response.data); + }, + + getById: async (id: string): Promise => { + const response = await client.get( + URL_CONSTANTS.BOOKINGS.BY_ID(id), + ); + return unwrap(response.data); + }, + + updateStatus: async ( + id: string, + payload: { action: string; reason?: string }, + ): Promise => { + const response = await client.patch( + `${URL_CONSTANTS.BOOKINGS.BY_ID(id)}/status`, + payload, + ); + return unwrap(response.data); + }, + + remove: async (id: string): Promise => { + await client.delete(URL_CONSTANTS.BOOKINGS.BY_ID(id)); + }, +}; diff --git a/apps/edr-freight-web/backoffice/src/services/fileUploadSettings.service.ts b/apps/edr-freight-web/backoffice/src/services/fileUploadSettings.service.ts index 0313a0561..777100dc8 100644 --- a/apps/edr-freight-web/backoffice/src/services/fileUploadSettings.service.ts +++ b/apps/edr-freight-web/backoffice/src/services/fileUploadSettings.service.ts @@ -8,10 +8,8 @@ import type { UpdateFileUploadFieldDto, UpdateFileUploadSettingDto, } from "@/types/fileUploadSettings"; -import { URL_CONSTANTS } from "@/constants/URLS"; -import { QUERY_KEYS } from "@/constants/TANSTACK_QUEY_KEY"; import { ApiResponse } from "@/types/apiResponse"; -import { endpoint, unwrap } from "@/utils/endpoint"; +import { unwrap } from "@/utils/endpoint"; const BASE = "/file-upload-settings"; @@ -124,14 +122,3 @@ export const fileUploadSettingsService = { await client.delete(`${BASE}/fields/${fieldId}`); }, }; - -export const getFileUploadSettingByCode = endpoint( - QUERY_KEYS.FILES.FILE_UPLOAD_SETTINGS, - QUERY_KEYS.FILES.BY_CODE, - (code: any) => - client - .get< - ApiResponse - >(`${URL_CONSTANTS.FILES.FILE_UPLOAD_SETTINGS_BY_CODE}/${code}`) - .then((res: any) => res.data.data), -); diff --git a/apps/edr-freight-web/backoffice/src/utils/result.ts b/apps/edr-freight-web/backoffice/src/utils/result.ts new file mode 100644 index 000000000..3e9627445 --- /dev/null +++ b/apps/edr-freight-web/backoffice/src/utils/result.ts @@ -0,0 +1,29 @@ +export type Result = + | { success: true; data: T } + | { success: false; error: E }; + +export type ApiError = { + code: string; + message: string; + statusCode?: number; +}; + +export function extractApiError(err: unknown): ApiError { + if (err && typeof err === "object") { + const obj = err as Record; + const response = obj.response as Record | undefined; + if (response) { + const statusCode = response.status as number | undefined; + const data = response.data as Record | undefined; + return { + code: (data?.error as string) || (data?.message as string) || "api_error", + message: (data?.message as string) || (data?.error as string) || "An unexpected error occurred", + statusCode, + }; + } + if (obj.message && typeof obj.message === "string") { + return { code: "client_error", message: obj.message }; + } + } + return { code: "unknown_error", message: "An unexpected error occurred" }; +} diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx index d16a70175..1187422f8 100644 --- a/apps/edr-freight-web/portal/src/App.tsx +++ b/apps/edr-freight-web/portal/src/App.tsx @@ -32,8 +32,6 @@ import NewBookingPage from "./pages/bookings/NewBookingPage"; import TrackingPage from "./pages/tracking/TrackingPage"; import BillingPage from "./pages/billing/BillingPage"; import { useEffect } from "react"; -import CustomerOnBoarding from "./pages/customers/on_boarding/TransportrOnBoarding"; -import CustomerOnboardingPage from "./pages/customers/on_boarding/CustomerOnboardingPage"; const sidebarItems: SidebarItem[] = [ { label: "Home", href: "/portal", icon: }, @@ -46,12 +44,13 @@ const sidebarItems: SidebarItem[] = [ const App = () => { const navigate = useNavigate(); const location = useLocation(); - const { user, isPending, logout, customer } = useAuth(); + const { user, isPending, logout, customer, customerQuery } = useAuth(); useEffect(() => { if (isPending) return; const isInProtectedRoutes = sidebarItems.find((item) => location.pathname.startsWith(item.href), ); + console.log({ isInProtectedRoutes, location }); if (!user) { if (isInProtectedRoutes) return navigate("/login"); return; diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx index 8b153515d..6a4f13227 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx @@ -1,4 +1,5 @@ import { useNavigate, useParams } from "react-router-dom"; +import { useQuery } from "@tanstack/react-query"; import { Calendar, MapPin, @@ -22,10 +23,12 @@ import { CreditCard, FileSignature, PackageCheck, + LoaderCircle, } from "lucide-react"; import Breadcrumbs from "@/components/Breadcrumbs"; -import { getBookingById } from "./bookings.mock"; +import { api } from "@/services/api"; +import type { Freight } from "@edr/types"; import { Card, CardHeader, @@ -37,45 +40,67 @@ import { } from "@edr/ui-common"; import { cn } from "@/lib/utils"; -// Grouping the 15 granular statuses into 6 logical progress stages for the UI tracker const PROGRESS_STAGES = [ - { label: "Request", icon: FileText, statuses: ["DRAFT", "RFQ_SUBMITTED"] }, - { label: "Quotation", icon: ClipboardCheck, statuses: ["QUOTATION_SENT", "QUOTATION_APPROVED", "QUOTATION_REJECTED"] }, - { label: "Approval", icon: ShieldCheck, statuses: ["PENDING_APPROVAL", "APPROVED"] }, - { label: "Execution", icon: FileSignature, statuses: ["SIGNED_CUSTOMER", "FULLY_EXECUTED", "PAID"] }, - { label: "In Transit", icon: Train, statuses: ["IN_TRANSIT", "PENDING_CONSOLIDATION", "CONSOLIDATED"] }, - { label: "Complete", icon: PackageCheck, statuses: ["COMPLETED"] }, + { label: "Request", icon: FileText, statuses: ["DRAFT"] }, + { label: "Approval", icon: ClipboardCheck, statuses: ["CONFIRMED"] }, + { label: "In Transit", icon: Train, statuses: ["IN_TRANSIT"] }, + { label: "Complete", icon: PackageCheck, statuses: ["DELIVERED"] }, ]; const STATUS_MAP: Record = { DRAFT: { title: "Drafting Request", description: "Booking is being prepared and has not been submitted.", color: "text-slate-500", stage: 0 }, - RFQ_SUBMITTED: { title: "RFQ Submitted", description: "Request for Quotation has been sent to the operations team.", color: "text-amber-600", stage: 0 }, - QUOTATION_SENT: { title: "Quotation Received", description: "EDR has sent a formal quotation for your review.", color: "text-sky-600", stage: 1 }, - QUOTATION_APPROVED: { title: "Quotation Approved", description: "You have accepted the quotation terms.", color: "text-emerald-600", stage: 1 }, - QUOTATION_REJECTED: { title: "Quotation Rejected", description: "The quotation was not accepted.", color: "text-red-600", stage: 1 }, - PENDING_APPROVAL: { title: "Internal Approval", description: "Booking is undergoing final administrative review.", color: "text-amber-600", stage: 2 }, - APPROVED: { title: "Booking Approved", description: "Request is fully approved and ready for execution.", color: "text-emerald-600", stage: 2 }, - SIGNED_CUSTOMER: { title: "Customer Signed", description: "Contract has been signed by the customer.", color: "text-sky-600", stage: 3 }, - FULLY_EXECUTED: { title: "Contract Executed", description: "All parties have signed. Operational setup in progress.", color: "text-indigo-600", stage: 3 }, - PAID: { title: "Payment Received", description: "Initial payments confirmed. Cargo ready for dispatch.", color: "text-emerald-600", stage: 3 }, - IN_TRANSIT: { title: "Cargo Moving", description: "Shipment is currently moving through the rail network.", color: "text-sky-600", stage: 4 }, - PENDING_CONSOLIDATION: { title: "Consolidation Node", description: "Cargo is waiting to be consolidated with other shipments.", color: "text-amber-500", stage: 4 }, - CONSOLIDATED: { title: "Load Consolidated", description: "Cargo has been successfully merged into a larger shipment.", color: "text-indigo-500", stage: 4 }, - COMPLETED: { title: "Service Complete", description: "Cargo delivered and service successfully terminated.", color: "text-emerald-600", stage: 5 }, + CONFIRMED: { title: "Booking Confirmed", description: "Booking has been confirmed and approved.", color: "text-emerald-600", stage: 1 }, + IN_TRANSIT: { title: "Cargo Moving", description: "Shipment is currently moving through the rail network.", color: "text-sky-600", stage: 2 }, + DELIVERED: { title: "Service Complete", description: "Cargo delivered and service successfully terminated.", color: "text-emerald-600", stage: 3 }, CANCELLED: { title: "Cancelled", description: "This booking process has been terminated.", color: "text-red-600", stage: -1 }, }; export default function BookingDetailPage() { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); - const booking = id ? getBookingById(id) : undefined; + + const { data: booking, isLoading, isError, error } = useQuery( + api.bookings.get.queryOptions({ + input: { id: id! }, + enabled: !!id, + }), + ); + + if (isLoading) { + return ( +
+
+ +

Loading booking details…

+
+
+ ); + } + + if (isError) { + return ( +
+ +
+ +
+

+ Failed to load booking +

+

+ {error instanceof Error ? error.message : "An unexpected error occurred."} +

+ +
+ ); + } if (!booking) { return (
- +

Booking not found @@ -85,16 +110,17 @@ export default function BookingDetailPage() { ); } - // Normalize status to upper case for mapping - const normalizedStatus = (booking.status === "In Transit" ? "IN_TRANSIT" : booking.status === "Pending" ? "RFQ_SUBMITTED" : booking.status.toUpperCase()) as keyof typeof STATUS_MAP; + const normalizedStatus = booking.status as keyof typeof STATUS_MAP; const statusConfig = STATUS_MAP[normalizedStatus] || STATUS_MAP.DRAFT; const currentStageIndex = statusConfig.stage; + const containerCount = booking.containers?.reduce((sum, c) => sum + c.qty, 0) ?? 0; + const containerType = booking.containers?.[0]?.type ?? null; + return (
- {/* Breadcrumbs Restored */} - {/* Compact Header Card */}
@@ -117,11 +142,9 @@ export default function BookingDetailPage() {
- {booking.customer} - - {booking.requestedDate} + {booking.scheduledDate ?? booking.createdAt}
@@ -129,7 +152,6 @@ export default function BookingDetailPage() { - {/* Granular Status Lifecycle */} @@ -140,7 +162,6 @@ export default function BookingDetailPage() {
- {/* Progress Line */}
- {normalizedStatus !== "CANCELLED" && normalizedStatus !== "COMPLETED" && ( + {normalizedStatus !== "CANCELLED" && normalizedStatus !== "DELIVERED" && (

Est. Waiting

@@ -200,7 +221,6 @@ export default function BookingDetailPage() {
- {/* Route & Core Service Card */} @@ -232,14 +252,13 @@ export default function BookingDetailPage() {
- } label="Service" value="Rail & Forwarding" /> - } label="Return" value="With Return" /> - } label="Customs" value="Enabled" /> + } label="Service" value={booking.serviceType === "RAIL_AND_FORWARDING" ? "Rail & Forwarding" : "Rail Only"} /> + } label="Return" value={booking.equipmentReturn === "WITH_RETURN" ? "With Return" : "Without Return"} /> + } label="Trade" value={booking.tradeDirection === "IMPORT" ? "Import" : "Export"} />
- {/* Mile Services Card */} @@ -252,18 +271,19 @@ export default function BookingDetailPage() {

First Mile

- +

Last Mile

-

Not requested

+

+ {booking.lastMileEnabled && booking.lastMileDeliveryAddress ? booking.lastMileDeliveryAddress : "Not requested"} +

- {/* Cargo Specifications Card */} @@ -273,40 +293,44 @@ export default function BookingDetailPage() {
- } label="Category" value={booking.cargoType} /> - } label="Weight" value={`${booking.weightTons} Tons`} /> - } label="Shipping Line" value="MSC" /> + } label="Freight Type" value={booking.freightType === "BULK" ? "Bulk" : "Break Bulk"} /> + } label="Weight (VGM)" value={`${booking.cargoTotalWeightVgm} Tons`} /> + } label="Currency" value={booking.paymentCurrency} />
- - -
-

Load Details

-
- - - - - - - - - - - - - - - -
DescriptionUnitValue
Main Equipment20FT Container4 Units
-
-
+ {booking.containers && booking.containers.length > 0 && ( + <> + +
+

Load Details

+
+ + + + + + + + + + {booking.containers.map((c, i) => ( + + + + + + ))} + +
TypeQuantityVGM (Tons)
{c.type}{c.qty} Units{c.vgm}t
+
+
+ + )}
- {/* Contract Card */} @@ -315,40 +339,48 @@ export default function BookingDetailPage() { - - + +
- Hazardous: No + Hazardous: {booking.isHazardous ? "Yes" : "No"} - Refrigerated: No + Refrigerated: {booking.isRefrigerated ? "Yes" : "No"}
- {/* Notes Card */} Additional Info -
-

Description

-

"{booking.cargoDescription}"

-
- -
-

Instructions

-
-

- - {booking.specialInstructions} -

-
-
+ {booking.freightSubtype && ( +
+

Cargo Description

+

"{booking.freightSubtype}"

+
+ )} + {booking.financialTerms && ( + <> + +
+

Financial Terms

+
+

+ + {booking.financialTerms} +

+
+
+ + )} + {!booking.freightSubtype && !booking.financialTerms && ( +

No additional information provided.

+ )}
@@ -396,7 +428,7 @@ function InfoItem({ {icon &&
{icon}
}

{label}

-

{value || "—"}

+

{value ?? "—"}

); @@ -405,20 +437,10 @@ function InfoItem({ function StatusBadge({ status }: { status: string }) { const statusColors: Record = { DRAFT: "bg-slate-50 text-slate-700 border-slate-200", - RFQ_SUBMITTED: "bg-amber-50 text-amber-700 border-amber-200", - QUOTATION_SENT: "bg-sky-50 text-sky-700 border-sky-200", - QUOTATION_APPROVED: "bg-emerald-50 text-emerald-700 border-emerald-200", - QUOTATION_REJECTED: "bg-red-50 text-red-700 border-red-200", - PENDING_APPROVAL: "bg-amber-50 text-amber-700 border-amber-200", - APPROVED: "bg-emerald-50 text-emerald-700 border-emerald-200", - SIGNED_CUSTOMER: "bg-sky-50 text-sky-700 border-sky-200", - FULLY_EXECUTED: "bg-indigo-50 text-indigo-700 border-indigo-200", - PAID: "bg-emerald-50 text-emerald-700 border-emerald-200", + CONFIRMED: "bg-emerald-50 text-emerald-700 border-emerald-200", IN_TRANSIT: "bg-sky-50 text-sky-700 border-sky-200", - COMPLETED: "bg-indigo-50 text-indigo-700 border-indigo-200", + DELIVERED: "bg-indigo-50 text-indigo-700 border-indigo-200", CANCELLED: "bg-red-50 text-red-700 border-red-200", - PENDING_CONSOLIDATION: "bg-amber-50 text-amber-700 border-amber-200", - CONSOLIDATED: "bg-indigo-50 text-indigo-700 border-indigo-200", }; return ( diff --git a/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx b/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx index 9d8501df0..960d9c0f2 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/MyBookings.tsx @@ -1,5 +1,6 @@ import { useMemo, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; +import { useQuery } from "@tanstack/react-query"; import { ArrowRight, Clock, @@ -9,13 +10,11 @@ import { Package, Plus, Search, - Trash2, Truck, } from "lucide-react"; -import DeleteBookingDialog from "./DeleteBookingDialog"; -import { getMyBookings } from "@/lib/currentCustomer"; -import { deleteBooking, type Booking, type BookingStatus } from "./bookings.mock"; +import { api } from "@/services/api"; +import type { Freight } from "@edr/types"; import { DataTable, DataTableFooter, @@ -32,32 +31,30 @@ import { DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, - DropdownMenuSeparator, } from "@edr/ui-common"; export default function MyBookings() { const navigate = useNavigate(); const { pagination, setPagination } = usePagination({ pageSize: 10 }); const [searchTerm, setSearchTerm] = useState(""); - const [myBookings, setMyBookings] = useState(() => getMyBookings()); - const handleDeleteConfirm = (id: number) => { - deleteBooking(id); - setMyBookings(getMyBookings()); - }; + const { data, isLoading, isError } = useQuery( + api.bookings.list.queryOptions(), + ); + + const bookings = data?.items ?? []; const filteredData = useMemo(() => { - return myBookings.filter((b) => { + return bookings.filter((b) => { const term = searchTerm.toLowerCase(); return ( b.reference.toLowerCase().includes(term) || b.originStation.toLowerCase().includes(term) || b.destinationStation.toLowerCase().includes(term) || - b.cargoDescription.toLowerCase().includes(term) || b.status.toLowerCase().includes(term) ); }); - }, [myBookings, searchTerm]); + }, [bookings, searchTerm]); const total = filteredData.length; const pageCount = Math.ceil(total / pagination.pageSize); @@ -67,16 +64,16 @@ export default function MyBookings() { const paginatedData = useMemo(() => filteredData.slice(start, end), [filteredData, start, end]); const activeCount = useMemo(() => { - return myBookings.filter( - (b) => b.status === "Confirmed" || b.status === "In Transit", + return bookings.filter( + (b) => b.status === "CONFIRMED" || b.status === "IN_TRANSIT", ).length; - }, [myBookings]); + }, [bookings]); const pendingCount = useMemo(() => { - return myBookings.filter((b) => b.status === "Pending").length; - }, [myBookings]); + return bookings.filter((b) => b.status === "DRAFT").length; + }, [bookings]); - const columns: ColumnDef[] = [ + const columns: ColumnDef[] = [ { accessorKey: "reference", header: "Reference", @@ -89,7 +86,7 @@ export default function MyBookings() {

{booking.reference}

-

{booking.requestedDate}

+

{booking.scheduledDate ?? booking.createdAt}

); @@ -111,22 +108,24 @@ export default function MyBookings() { header: "Cargo", cell: ({ row }) => { const b = row.original; + const containerCount = b.containers?.reduce((sum, c) => sum + c.qty, 0) ?? 0; + const containerType = b.containers?.[0]?.type ?? null; return (
-

{b.cargoType}

+

{b.freightType === "BULK" ? "Bulk" : "Break Bulk"}

- {b.containerCount > 0 ? `${b.containerCount} × ${b.containerType} · ` : ""}{b.weightTons}t + {containerType && containerCount > 0 ? `${containerCount} × ${containerType} · ` : ""}{b.cargoTotalWeightVgm}t

); }, }, { - accessorKey: "transportMode", + id: "transportMode", header: "Transport", cell: ({ row }) => ( - {row.original.transportMode} + {row.original.serviceType === "RAIL_AND_FORWARDING" ? "Rail & Forwarding" : "Rail"} ), }, @@ -158,19 +157,6 @@ export default function MyBookings() { View - - handleDeleteConfirm(booking.id)} - > - e.preventDefault()} - variant="destructive" - > - - Delete - -
@@ -179,10 +165,11 @@ export default function MyBookings() { }, ]; + const dataTableStatus = isLoading ? "loading" : isError ? "error" : "success"; + return (
- {/* Header Section Card */}

@@ -214,14 +201,13 @@ export default function MyBookings() {

- {/* Stat Cards */}

Total Bookings

- {myBookings.length} + {bookings.length}

@@ -259,7 +245,6 @@ export default function MyBookings() {
- {/* Data Table */}
@@ -276,7 +261,7 @@ export default function MyBookings() { - {total === 0 ? ( + {total === 0 && dataTableStatus === "success" ? (

No bookings found

@@ -288,8 +273,8 @@ export default function MyBookings() { navigate(`/bookings/${(row as Booking).id}`)} + status={dataTableStatus} + onRowClick={(row) => navigate(`/bookings/${(row as Freight.IBooking).id}`)} pagination={{ pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, @@ -311,20 +296,20 @@ export default function MyBookings() { ); } -function StatusBadge({ status }: { status: BookingStatus }) { - const styles: Record = { - Pending: "bg-amber-100 text-amber-700", - Confirmed: "bg-sky-100 text-sky-700", - "In Transit": "bg-indigo-100 text-indigo-700", - Delivered: "bg-emerald-100 text-emerald-700", - Cancelled: "bg-red-100 text-red-700", +function StatusBadge({ status }: { status: string }) { + const styles: Record = { + DRAFT: "bg-amber-100 text-amber-700", + CONFIRMED: "bg-sky-100 text-sky-700", + IN_TRANSIT: "bg-indigo-100 text-indigo-700", + DELIVERED: "bg-emerald-100 text-emerald-700", + CANCELLED: "bg-red-100 text-red-700", }; return ( - {status} + {status.replace(/_/g, ' ')} ); } diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx index 758cdede0..ee54196e8 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx +++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx @@ -130,7 +130,7 @@ export function Step5CargoDetails({
-

Container

+

Containerized

Pre-packed containerized cargo (20ft / 40ft).

@@ -145,7 +145,7 @@ export function Step5CargoDetails({
-

Bulk

+

General Cargo

Bulk commodities or break-bulk cargo.

diff --git a/apps/edr-freight-web/portal/src/services/bookings.service.ts b/apps/edr-freight-web/portal/src/services/bookings.service.ts index dd4c9f0dd..6ac93a742 100644 --- a/apps/edr-freight-web/portal/src/services/bookings.service.ts +++ b/apps/edr-freight-web/portal/src/services/bookings.service.ts @@ -6,22 +6,22 @@ export type CreateBookingPayload = Freight.CreateBookingDto; export const bookingsService = { list: async (): Promise> => { - const { data } = await client.get("/bookings"); + const { data } = await client.get("/api/bookings"); return data.data; }, get: async (id: string): Promise => { - const { data } = await client.get(`/bookings/${id}`); + const { data } = await client.get(`/api/bookings/${id}`); return data.data; }, create: async (payload: CreateBookingPayload): Promise => { const { data } = await client.post("/api/bookings", payload); - return data.data; + return data.data.booking; }, getReferenceData: async (): Promise => { const { data } = await client.get("/api/bookings/reference-data"); return data.data; }, remove: async (id: string): Promise => { - await client.delete(`/bookings/${id}`); + await client.delete(`/api/bookings/${id}`); }, };