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

add contract clearance detail page and enhance contract requests fil…

apps/edr-freight-web/backoffice/src/pages/contracts/ClearanceDocumentsPage.tsx

@@ -452,7 +452,9 @@ export default function ClearanceDocumentsPage() {
                     data={contractRows}
                     status={tableStatus}
                     onRowClick={(row) =>
-                      navigate(`/dashboard/contracts/clearance/${row.id}`)
+                      navigate(
+                        `/dashboard/contracts/clearance-documents/${row.id}`,
+                      )
                     }
                     pagination={{
                       pageIndex: pagination.pageIndex,

apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import {
   Alert,
   Badge,
@@ -52,9 +52,21 @@ import {
 
 export default function ContractClearanceDetailPage() {
   const { id } = useParams<{ id: string }>();
+  const { pathname } = useLocation();
   const { view, viewer } = useFileViewer();
   const { user } = useAuth();
 
+  // The same detail page serves two hubs: the GL "Document Clearance" list and
+  // the Operations "Clearance Documents" list. Point back-navigation at
+  // whichever hub the user came through.
+  const fromOpsHub = pathname.startsWith(
+    "/dashboard/contracts/clearance-documents",
+  );
+  const hubHref = fromOpsHub
+    ? "/dashboard/contracts/clearance-documents"
+    : "/dashboard/contracts/clearance";
+  const hubLabel = fromOpsHub ? "Clearance Documents" : "Document Clearance";
+
   const { data: contract, refetch: refetchContract } = useContractDetail(id);
   const {
     data: clearance,
@@ -153,12 +165,9 @@ export default function ContractClearanceDetailPage() {
       <PageContainer>
         <PageHeader
           title="Clearance not found"
-          backTo="/dashboard/contracts/clearance"
+          backTo={hubHref}
           breadcrumbs={[
-            {
-              label: "Document Clearance",
-              href: "/dashboard/contracts/clearance",
-            },
+            { label: hubLabel, href: hubHref },
             { label: "Not found" },
           ]}
         />
@@ -176,12 +185,9 @@ export default function ContractClearanceDetailPage() {
       <Stack gap="lg">
         <PageHeader
           title={reference}
-          backTo="/dashboard/contracts/clearance"
+          backTo={hubHref}
           breadcrumbs={[
-            {
-              label: "Document Clearance",
-              href: "/dashboard/contracts/clearance",
-            },
+            { label: hubLabel, href: hubHref },
             { label: reference },
           ]}
           meta={

apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx

@@ -4,11 +4,14 @@ import {
   Button,
   Card,
   Group,
+  MultiSelect,
+  Select,
   Stack,
   Text,
   TextInput,
   ThemeIcon,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 import { useDebouncedValue } from "@mantine/hooks";
 import {
   AlertTriangle,
@@ -17,6 +20,7 @@ import {
   CheckCircle2,
   Clock,
   FileText,
+  FilterX,
   Inbox,
   LayoutList,
   RefreshCw,
@@ -36,7 +40,10 @@ import {
 } from "@/components/contracts/ContractStatusTabs";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
-import { CONTRACT_LIST_TABS } from "@/features/contracts/contract-status.config";
+import {
+  CONTRACT_LIST_TABS,
+  CONTRACT_STATUS_STYLES,
+} from "@/features/contracts/contract-status.config";
 import {
   getStaffRowAction,
   toContractListRow,
@@ -61,6 +68,63 @@ function getStatusesForTab(tab: ContractStatusTabKey): string | undefined {
   return match.statuses.join(",");
 }
 
+/** Statuses selectable in the status filter for a given tab ("all" → every tab status). */
+function getStatusOptionsForTab(
+  tab: ContractStatusTabKey,
+): { value: string; label: string }[] {
+  const match = CONTRACT_LIST_TABS.find((t) => t.key === tab);
+  const statuses = match?.statuses?.length
+    ? match.statuses
+    : CONTRACT_LIST_TABS.flatMap((t) => t.statuses ?? []);
+  return statuses.map((s) => ({
+    value: s,
+    label: CONTRACT_STATUS_STYLES[s]?.label ?? s,
+  }));
+}
+
+const TRADE_DIRECTION_OPTIONS = [
+  { value: "IMPORT", label: "Import" },
+  { value: "EXPORT", label: "Export" },
+  { value: "DOMESTIC", label: "Domestic" },
+];
+
+const FREIGHT_TYPE_OPTIONS = [
+  { value: "CONTAINER", label: "Container" },
+  { value: "BULK", label: "Bulk" },
+];
+
+const CONTRACT_KIND_OPTIONS = [
+  { value: "GENERAL", label: "General (recurring)" },
+  { value: "ONE_TIME", label: "One-time" },
+];
+
+const CURRENCY_OPTIONS = [
+  { value: "ETB", label: "ETB" },
+  { value: "USD", label: "USD" },
+];
+
+/** value = `${sortBy}:${sortOrder}` for the sort Select. */
+const SORT_OPTIONS = [
+  { value: "createdAt:DESC", label: "Newest first" },
+  { value: "createdAt:ASC", label: "Oldest first" },
+  { value: "contractValidUntil:ASC", label: "Expiring soonest" },
+  { value: "contractValidUntil:DESC", label: "Expiring latest" },
+];
+
+/** Local start-of-day → ISO, for inclusive "from" date filters. */
+function startOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x.toISOString();
+}
+
+/** Local end-of-day → ISO, for inclusive "to" date filters. */
+function endOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(23, 59, 59, 999);
+  return x.toISOString();
+}
+
 function formatDate(value: string | null | undefined): string {
   if (!value) return "—";
   const d = new Date(value);
@@ -79,32 +143,86 @@ export default function ContractRequestsPage() {
   const [query, setQuery] = useState("");
   const [debouncedQuery] = useDebouncedValue(query, 300);
   const [activeTab, setActiveTab] = useState<ContractStatusTabKey>("all");
+  // Filter controls (empty/null = "all").
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
+  const [directionFilter, setDirectionFilter] = useState<string | null>(null);
+  const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(
+    null,
+  );
+  const [kindFilter, setKindFilter] = useState<string | null>(null);
+  const [currencyFilter, setCurrencyFilter] = useState<string | null>(null);
+  const [createdFrom, setCreatedFrom] = useState<Date | null>(null);
+  const [createdTo, setCreatedTo] = useState<Date | null>(null);
+  const [sort, setSort] = useState<string>("createdAt:DESC");
 
   const tabStatuses = getStatusesForTab(activeTab);
+  const statusOptions = useMemo(
+    () => getStatusOptionsForTab(activeTab),
+    [activeTab],
+  );
 
   const resetPage = useCallback(() => {
     setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
   }, [setPagination, pagination.pageSize]);
 
-  const filter: ContractListFilter = useMemo(
-    () => ({
+  const filter: ContractListFilter = useMemo(() => {
+    const [sortBy, sortOrder] = sort.split(":") as [string, "ASC" | "DESC"];
+    return {
       page: pagination.pageIndex + 1,
       pageSize: pagination.pageSize,
-      sortBy: "createdAt",
-      sortOrder: "DESC",
+      sortBy,
+      sortOrder,
       tab: activeTab,
       // Server-side free-text search (contract reference, customer name).
       ...(debouncedQuery.trim() ? { search: debouncedQuery.trim() } : {}),
-      ...(tabStatuses ? { statuses: tabStatuses } : {}),
-    }),
-    [
-      pagination.pageIndex,
-      pagination.pageSize,
-      activeTab,
-      tabStatuses,
-      debouncedQuery,
-    ],
-  );
+      // Explicit status picks narrow within the tab; otherwise the tab's
+      // status group applies.
+      ...(statusFilter.length
+        ? { statuses: statusFilter.join(",") }
+        : tabStatuses
+          ? { statuses: tabStatuses }
+          : {}),
+      ...(directionFilter ? { tradeDirection: directionFilter } : {}),
+      ...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
+      ...(kindFilter ? { contractKind: kindFilter } : {}),
+      ...(currencyFilter ? { paymentCurrency: currencyFilter } : {}),
+      ...(createdFrom ? { createdFrom: startOfDayIso(createdFrom) } : {}),
+      ...(createdTo ? { createdTo: endOfDayIso(createdTo) } : {}),
+    };
+  }, [
+    pagination.pageIndex,
+    pagination.pageSize,
+    activeTab,
+    tabStatuses,
+    debouncedQuery,
+    statusFilter,
+    directionFilter,
+    freightTypeFilter,
+    kindFilter,
+    currencyFilter,
+    createdFrom,
+    createdTo,
+    sort,
+  ]);
+
+  const activeFilterCount =
+    (statusFilter.length ? 1 : 0) +
+    (directionFilter ? 1 : 0) +
+    (freightTypeFilter ? 1 : 0) +
+    (kindFilter ? 1 : 0) +
+    (currencyFilter ? 1 : 0) +
+    (createdFrom || createdTo ? 1 : 0);
+
+  const clearFilters = useCallback(() => {
+    setStatusFilter([]);
+    setDirectionFilter(null);
+    setFreightTypeFilter(null);
+    setKindFilter(null);
+    setCurrencyFilter(null);
+    setCreatedFrom(null);
+    setCreatedTo(null);
+    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+  }, [setPagination, pagination.pageSize]);
 
   const { data, isLoading, isError, refetch, isFetching } =
     useContractList(filter);
@@ -341,6 +459,8 @@ export default function ContractRequestsPage() {
           active={activeTab}
           onChange={(tab) => {
             setActiveTab(tab);
+            // Status picks belong to the previous tab's option set — reset.
+            setStatusFilter([]);
             setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
           }}
           counts={tabCounts}
@@ -349,38 +469,159 @@ export default function ContractRequestsPage() {
         <Card p={0}>
           <Stack gap={0}>
             <Box px="md" pt="md" pb="sm" w="100%">
-              <Group justify="space-between" gap="md" wrap="wrap">
-                <TextInput
-                  placeholder="Search reference or customer…"
-                  leftSection={<Search size={18} />}
-                  value={query}
-                  onChange={(e) => {
-                    setQuery(e.target.value);
-                    resetPage();
-                  }}
-                  rightSection={
-                    query && (
-                      <ActionIcon
-                        size="sm"
-                        color="gray"
-                        radius="md"
-                        variant="transparent"
-                        onClick={() => {
-                          setQuery("");
-                          resetPage();
-                        }}
-                      >
-                        <X size={16} />
-                      </ActionIcon>
-                    )
-                  }
-                  style={{ flex: 1, minWidth: "200px" }}
-                  radius="lg"
-                />
-                <Text size="sm" c="dimmed">
-                  {total} record{total !== 1 ? "s" : ""}
-                </Text>
-              </Group>
+              <Stack gap="sm">
+                <Group justify="space-between" gap="md" wrap="wrap">
+                  <TextInput
+                    placeholder="Search reference or customer…"
+                    leftSection={<Search size={18} />}
+                    value={query}
+                    onChange={(e) => {
+                      setQuery(e.target.value);
+                      resetPage();
+                    }}
+                    rightSection={
+                      query && (
+                        <ActionIcon
+                          size="sm"
+                          color="gray"
+                          radius="md"
+                          variant="transparent"
+                          onClick={() => {
+                            setQuery("");
+                            resetPage();
+                          }}
+                        >
+                          <X size={16} />
+                        </ActionIcon>
+                      )
+                    }
+                    style={{ flex: 1, minWidth: "200px" }}
+                    radius="lg"
+                  />
+                  <Select
+                    data={SORT_OPTIONS}
+                    value={sort}
+                    onChange={(v) => {
+                      setSort(v ?? "createdAt:DESC");
+                      resetPage();
+                    }}
+                    allowDeselect={false}
+                    radius="lg"
+                    style={{ minWidth: 170 }}
+                    aria-label="Sort contracts"
+                  />
+                  <Text size="sm" c="dimmed">
+                    {total} record{total !== 1 ? "s" : ""}
+                  </Text>
+                </Group>
+                <Group gap="sm" wrap="wrap">
+                  <MultiSelect
+                    placeholder={
+                      statusFilter.length ? undefined : "All statuses"
+                    }
+                    data={statusOptions}
+                    value={statusFilter}
+                    onChange={(v) => {
+                      setStatusFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    searchable
+                    radius="lg"
+                    style={{ minWidth: 220 }}
+                    aria-label="Filter by status"
+                  />
+                  <Select
+                    placeholder="All directions"
+                    data={TRADE_DIRECTION_OPTIONS}
+                    value={directionFilter}
+                    onChange={(v) => {
+                      setDirectionFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 150 }}
+                    aria-label="Filter by trade direction"
+                  />
+                  <Select
+                    placeholder="All freight types"
+                    data={FREIGHT_TYPE_OPTIONS}
+                    value={freightTypeFilter}
+                    onChange={(v) => {
+                      setFreightTypeFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 160 }}
+                    aria-label="Filter by freight type"
+                  />
+                  <Select
+                    placeholder="All kinds"
+                    data={CONTRACT_KIND_OPTIONS}
+                    value={kindFilter}
+                    onChange={(v) => {
+                      setKindFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 160 }}
+                    aria-label="Filter by contract kind"
+                  />
+                  <Select
+                    placeholder="All currencies"
+                    data={CURRENCY_OPTIONS}
+                    value={currencyFilter}
+                    onChange={(v) => {
+                      setCurrencyFilter(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 140 }}
+                    aria-label="Filter by payment currency"
+                  />
+                  <DateInput
+                    placeholder="Created from"
+                    value={createdFrom}
+                    onChange={(v) => {
+                      setCreatedFrom(v ? new Date(v) : null);
+                      resetPage();
+                    }}
+                    maxDate={createdTo ?? undefined}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 140 }}
+                    aria-label="Created from"
+                  />
+                  <DateInput
+                    placeholder="Created to"
+                    value={createdTo}
+                    onChange={(v) => {
+                      setCreatedTo(v ? new Date(v) : null);
+                      resetPage();
+                    }}
+                    minDate={createdFrom ?? undefined}
+                    clearable
+                    radius="lg"
+                    style={{ minWidth: 140 }}
+                    aria-label="Created to"
+                  />
+                  {activeFilterCount > 0 ? (
+                    <Button
+                      variant="subtle"
+                      color="gray"
+                      radius="lg"
+                      leftSection={<FilterX size={16} />}
+                      onClick={clearFilters}
+                    >
+                      Clear filters ({activeFilterCount})
+                    </Button>
+                  ) : null}
+                </Group>
+              </Stack>
             </Box>
 
             {showEmpty ? (