Merge pull request #852 from Tria-plc/freight_feature/usermanagement

Fix CSS formatting for bookings table class to ensure proper styling …
2026-08-26 18:42:49 +00:00 · 2026-07-20 22:35:50 +03:00
parent 6543ba5266 8e74604a07
commit 92375caa59
2 changed files with 65 additions and 80 deletions
--- 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<BookingKind | null>(null);
-  // Filter controls (empty/null = "all").
+  // 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").
  const [statusFilter, setStatusFilter] = useState<string[]>([]);
  const [directionFilter, setDirectionFilter] = useState<string | null>(null);
  const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(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<BookingListRow>[] = [
    {
      id: "booking",
-      size: 60,
-      minSize: 40,
      header: () => <span className={bookingTable.headerCell}>Booking</span>,
      cell: ({ row }) => {
        const b = row.original;
@@ -307,8 +303,6 @@ export default function BookingRequestsPage() {
    },
    {
      id: "contract",
-      size: 60,
-      minSize: 40,
      header: () => <span className={bookingTable.headerCell}>Contract</span>,
      cell: ({ row }) => {
        const ref = row.original.contractReference;
@@ -333,29 +327,8 @@ export default function BookingRequestsPage() {
        );
      },
    },
-    {
-      id: "bookingKind",
-      size: 60,
-      minSize: 40,
-      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",
-      size: 60,
-      minSize: 40,
      header: () => <span className={bookingTable.headerCell}>Route</span>,
      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: () => <span className={bookingTable.headerCell}>Status</span>,
      cell: ({ row }) => (
        <div className="py-1">
@@ -398,11 +371,20 @@ export default function BookingRequestsPage() {
          />
        </div>
      ),
+      meta: {
+        headerClassName: "min-w-[11rem]",
+        cellClassName: "min-w-[11rem]",
+      },
+    },
+    {
+      id: "approval",
+      header: () => (
+        <span className={bookingTable.headerCell}>Approval</span>
+      ),
+      cell: ({ row }) => <BookingApprovalProgressCell row={row.original} />,
    },
    {
      id: "scheduled",
-      size: 60,
-      minSize: 40,
      header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
      cell: ({ row }) => (
        <span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
@@ -413,8 +395,6 @@ export default function BookingRequestsPage() {
    },
    {
      id: "priority",
-      size: 60,
-      minSize: 40,
      header: () => <span className={bookingTable.headerCell}>Priority</span>,
      cell: ({ row }) => (
        <BookingPriorityBadge score={row.original.priorityScore} />
@@ -422,8 +402,7 @@ export default function BookingRequestsPage() {
    },
    {
      id: "actions",
-      size: 60,
-      minSize: 40,
+      size: 140,
      cell: ({ row }) => (
        <BookingActionsMenu
          row={row.original}
@@ -503,6 +482,22 @@ 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%">
@@ -540,18 +535,6 @@ 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}
@@ -713,26 +696,28 @@ export default function BookingRequestsPage() {
                  />
                </Box>
              ) : (
-                <DataTable
-                  columns={columns}
-                  data={rows}
-                  status={isLoading ? "loading" : isError ? "error" : "success"}
-                  onRowClick={handleRowClick}
-                  pagination={{
-                    pageIndex: pagination.pageIndex,
-                    pageSize: pagination.pageSize,
-                    pageCount,
-                    totalCount: total,
-                  }}
-                  tableOptions={{
-                    state: { pagination },
-                    onPaginationChange: setPagination,
-                    manualPagination: true,
-                    pageCount,
-                  }}
-                  containerClassName="edr-booking-requests-table border-0 shadow-none bg-transparent"
-                  footer={DataTableFooter}
-                />
+                <Box style={{ overflowX: "auto" }} w="100%">
+                  <DataTable
+                    columns={columns}
+                    data={rows}
+                    status={isLoading ? "loading" : isError ? "error" : "success"}
+                    onRowClick={handleRowClick}
+                    pagination={{
+                      pageIndex: pagination.pageIndex,
+                      pageSize: pagination.pageSize,
+                      pageCount,
+                      totalCount: total,
+                    }}
+                    tableOptions={{
+                      state: { pagination },
+                      onPaginationChange: setPagination,
+                      manualPagination: true,
+                      pageCount,
+                    }}
+                    containerClassName="border-0 shadow-none bg-transparent"
+                    footer={DataTableFooter}
+                  />
+                </Box>
              )}
            </Stack>
          </Card>
--- a/apps/edr-freight-web/portal/src/pages/bookings/bookings-table.css
+++ b/apps/edr-freight-web/portal/src/pages/bookings/bookings-table.css
@@ -4,7 +4,7 @@
 * content-sized columns with a 40px floor, horizontal scroll when the table
 * outgrows the card, and a sticky shadowed action column.
 */
-.edr-bookings-table {
+ .edr-bookings-table {
  overflow-x: auto;
 }