changes

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -7,7 +7,6 @@ import {
   MultiSelect,
   Select,
   Stack,
-  Tabs,
   Text,
   TextInput,
 } from "@mantine/core";
@@ -33,7 +32,6 @@ 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.
@@ -60,10 +58,10 @@ import {
   type ColumnDef,
 } from "@edr/ui-common";
 
-/** 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_TABS: { value: BookingKindTab; label: string }[] = [
+const BOOKING_KIND_OPTIONS: { value: BookingKind; label: string }[] = [
   { value: "ONE_TIME", label: "One-time booking" },
   { value: "GENERAL_CONTRACT", label: "General booking" },
 ];
@@ -128,9 +126,9 @@ export default function BookingRequestsPage() {
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [query, setQuery] = useState("");
   const [debouncedQuery] = useDebouncedValue(query, 300);
-  // Booking-kind tabs (one-time vs general contract) replace the old status tabs.
-  const [kindTab, setKindTab] = useState<BookingKindTab>("ONE_TIME");
-  // Per-tab filter controls (empty/null = "all").
+  // Booking kind is a filter now — one list holds both kinds (null = "all").
+  const [kindFilter, setKindFilter] = useState<BookingKind | null>(null);
+  // Filter controls (empty/null = "all").
   const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [directionFilter, setDirectionFilter] = useState<string | null>(null);
   const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(null);
@@ -158,9 +156,9 @@ export default function BookingRequestsPage() {
       pageSize: pagination.pageSize,
       sortBy: "createdAt",
       sortOrder: "DESC",
-      // React Query cache key per kind tab.
-      tab: kindTab,
-      bookingType: kindTab,
+      // React Query cache key per kind selection ("ALL" when unfiltered).
+      tab: kindFilter ?? "ALL",
+      ...(kindFilter ? { bookingType: kindFilter } : {}),
       // Server-side free-text search (booking ref, customer, contract ref).
       ...(debouncedQuery.trim() ? { search: debouncedQuery.trim() } : {}),
       ...(statusFilter.length ? { statuses: statusFilter.join(",") } : {}),
@@ -182,7 +180,7 @@ export default function BookingRequestsPage() {
   }, [
     pagination.pageIndex,
     pagination.pageSize,
-    kindTab,
+    kindFilter,
     debouncedQuery,
     statusFilter,
     directionFilter,
@@ -226,6 +224,7 @@ export default function BookingRequestsPage() {
   }, [setPagination, pagination.pageSize]);
 
   const activeFilterCount =
+    (kindFilter ? 1 : 0) +
     (statusFilter.length ? 1 : 0) +
     (directionFilter ? 1 : 0) +
     (freightTypeFilter ? 1 : 0) +
@@ -237,6 +236,7 @@ export default function BookingRequestsPage() {
     (scheduledFrom || scheduledTo ? 1 : 0);
 
   const clearFilters = useCallback(() => {
+    setKindFilter(null);
     setStatusFilter([]);
     setDirectionFilter(null);
     setFreightTypeFilter(null);
@@ -327,6 +327,23 @@ export default function BookingRequestsPage() {
         );
       },
     },
+    {
+      id: "bookingKind",
+      header: () => <span className={bookingTable.headerCell}>Type</span>,
+      cell: ({ row }) => {
+        const isGeneral = row.original.bookingKind === "GENERAL_CONTRACT";
+        return (
+          <div className="py-1">
+            <Badge
+              variant={isGeneral ? "secondary" : "outline"}
+              className="h-5 px-1.5 text-[10px] font-medium"
+            >
+              {isGeneral ? "General" : "One-time"}
+            </Badge>
+          </div>
+        );
+      },
+    },
     {
       id: "route",
       header: () => <span className={bookingTable.headerCell}>Route</span>,
@@ -376,13 +393,6 @@ export default function BookingRequestsPage() {
         cellClassName: "min-w-[11rem]",
       },
     },
-    {
-      id: "approval",
-      header: () => (
-        <span className={bookingTable.headerCell}>Approval</span>
-      ),
-      cell: ({ row }) => <BookingApprovalProgressCell row={row.original} />,
-    },
     {
       id: "scheduled",
       header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
@@ -482,22 +492,6 @@ export default function BookingRequestsPage() {
           />
           */}
 
-          <Tabs
-            value={kindTab}
-            onChange={(value) => {
-              setKindTab((value as BookingKindTab) ?? "ONE_TIME");
-              setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-            }}
-          >
-            <Tabs.List>
-              {BOOKING_KIND_TABS.map((t) => (
-                <Tabs.Tab key={t.value} value={t.value}>
-                  {t.label}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-          </Tabs>
-
           <Card p={0}>
             <Stack gap={0}>
               <Box px="md" pt="md" pb="sm" w="100%">
@@ -535,6 +529,18 @@ export default function BookingRequestsPage() {
                     </Text>
                   </Group>
                   <Group gap="sm" wrap="wrap">
+                    <Select
+                      placeholder="All booking types"
+                      data={BOOKING_KIND_OPTIONS}
+                      value={kindFilter}
+                      onChange={(v) => {
+                        setKindFilter((v as BookingKind | null) ?? null);
+                        resetPage();
+                      }}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 190 }}
+                    />
                     <MultiSelect
                       placeholder={statusFilter.length ? undefined : "All statuses"}
                       data={STATUS_OPTIONS}