From 8e74604a07db647dbb0de2a3b027c4d1e054dacf Mon Sep 17 00:00:00 2001 From: marshalyordanos Date: Mon, 20 Jul 2026 22:35:01 +0300 Subject: [PATCH] Fix CSS formatting for bookings table class to ensure proper styling and layout. --- .../pages/bookings/BookingRequestsPage.tsx | 143 ++++++++---------- .../src/pages/bookings/bookings-table.css | 2 +- 2 files changed, 65 insertions(+), 80 deletions(-) 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 1345d2855..3eb775e95 100644 --- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx +++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx @@ -7,6 +7,7 @@ import { MultiSelect, Select, Stack, + Tabs, Text, TextInput, } from "@mantine/core"; @@ -32,6 +33,7 @@ import { useNavigate } from "react-router-dom"; import { useQuery } from "@tanstack/react-query"; import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu"; +import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell"; import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge"; import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge"; // BookingStatusTabs / Operations* queues removed — replaced by booking-kind tabs. @@ -58,12 +60,10 @@ import { type ColumnDef, } from "@edr/ui-common"; -import "./booking-requests-table.css"; +/** The two booking-kind tabs: one-time vs general-contract bookings. */ +type BookingKindTab = "ONE_TIME" | "GENERAL_CONTRACT"; -/** Booking kind: one-time vs general-contract bookings. Now a filter, not a tab. */ -type BookingKind = "ONE_TIME" | "GENERAL_CONTRACT"; - -const BOOKING_KIND_OPTIONS: { value: BookingKind; label: string }[] = [ +const BOOKING_KIND_TABS: { value: BookingKindTab; label: string }[] = [ { value: "ONE_TIME", label: "One-time booking" }, { value: "GENERAL_CONTRACT", label: "General booking" }, ]; @@ -128,9 +128,9 @@ export default function BookingRequestsPage() { const { pagination, setPagination } = usePagination({ pageSize: 10 }); const [query, setQuery] = useState(""); const [debouncedQuery] = useDebouncedValue(query, 300); - // Booking kind is a filter now — one list holds both kinds (null = "all"). - const [kindFilter, setKindFilter] = useState(null); - // Filter controls (empty/null = "all"). + // Booking-kind tabs (one-time vs general contract) replace the old status tabs. + const [kindTab, setKindTab] = useState("ONE_TIME"); + // Per-tab filter controls (empty/null = "all"). const [statusFilter, setStatusFilter] = useState([]); const [directionFilter, setDirectionFilter] = useState(null); const [freightTypeFilter, setFreightTypeFilter] = useState(null); @@ -158,9 +158,9 @@ export default function BookingRequestsPage() { pageSize: pagination.pageSize, sortBy: "createdAt", sortOrder: "DESC", - // React Query cache key per kind selection ("ALL" when unfiltered). - tab: kindFilter ?? "ALL", - ...(kindFilter ? { bookingType: kindFilter } : {}), + // React Query cache key per kind tab. + tab: kindTab, + bookingType: kindTab, // Server-side free-text search (booking ref, customer, contract ref). ...(debouncedQuery.trim() ? { search: debouncedQuery.trim() } : {}), ...(statusFilter.length ? { statuses: statusFilter.join(",") } : {}), @@ -182,7 +182,7 @@ export default function BookingRequestsPage() { }, [ pagination.pageIndex, pagination.pageSize, - kindFilter, + kindTab, debouncedQuery, statusFilter, directionFilter, @@ -226,7 +226,6 @@ export default function BookingRequestsPage() { }, [setPagination, pagination.pageSize]); const activeFilterCount = - (kindFilter ? 1 : 0) + (statusFilter.length ? 1 : 0) + (directionFilter ? 1 : 0) + (freightTypeFilter ? 1 : 0) + @@ -238,7 +237,6 @@ export default function BookingRequestsPage() { (scheduledFrom || scheduledTo ? 1 : 0); const clearFilters = useCallback(() => { - setKindFilter(null); setStatusFilter([]); setDirectionFilter(null); setFreightTypeFilter(null); @@ -284,8 +282,6 @@ export default function BookingRequestsPage() { const columns: ColumnDef[] = [ { id: "booking", - size: 60, - minSize: 40, header: () => Booking, cell: ({ row }) => { const b = row.original; @@ -307,8 +303,6 @@ export default function BookingRequestsPage() { }, { id: "contract", - size: 60, - minSize: 40, header: () => Contract, cell: ({ row }) => { const ref = row.original.contractReference; @@ -333,29 +327,8 @@ export default function BookingRequestsPage() { ); }, }, - { - id: "bookingKind", - size: 60, - minSize: 40, - header: () => Type, - cell: ({ row }) => { - const isGeneral = row.original.bookingKind === "GENERAL_CONTRACT"; - return ( -
- - {isGeneral ? "General" : "One-time"} - -
- ); - }, - }, { id: "route", - size: 60, - minSize: 40, header: () => Route, cell: ({ row }) => { const b = row.original; @@ -386,8 +359,8 @@ export default function BookingRequestsPage() { }, { id: "status", - size: 60, - minSize: 40, + size: 200, + minSize: 180, header: () => Status, cell: ({ row }) => (
@@ -398,11 +371,20 @@ export default function BookingRequestsPage() { />
), + meta: { + headerClassName: "min-w-[11rem]", + cellClassName: "min-w-[11rem]", + }, + }, + { + id: "approval", + header: () => ( + Approval + ), + cell: ({ row }) => , }, { id: "scheduled", - size: 60, - minSize: 40, header: () => Scheduled, cell: ({ row }) => ( @@ -413,8 +395,6 @@ export default function BookingRequestsPage() { }, { id: "priority", - size: 60, - minSize: 40, header: () => Priority, cell: ({ row }) => ( @@ -422,8 +402,7 @@ export default function BookingRequestsPage() { }, { id: "actions", - size: 60, - minSize: 40, + size: 140, cell: ({ row }) => ( */} + { + setKindTab((value as BookingKindTab) ?? "ONE_TIME"); + setPagination({ pageIndex: 0, pageSize: pagination.pageSize }); + }} + > + + {BOOKING_KIND_TABS.map((t) => ( + + {t.label} + + ))} + + + @@ -540,18 +535,6 @@ export default function BookingRequestsPage() { -