changes

apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx

@@ -13,6 +13,7 @@ import {
     Loader,
     Modal,
     Stack,
+    Tabs,
     Text,
     Tooltip,
 } from "@mantine/core";
@@ -94,7 +95,14 @@ const yardOptionsForLegEnd = (
   let country: string | undefined;
   if (appliesTo === "INTERCITY") {
     country = "Ethiopia";
-  } else if (appliesTo === "CONTAINER" || appliesTo === "BULK") {
+  } else if (
+    appliesTo === "CONTAINER" ||
+    appliesTo === "BULK" ||
+    // Customs clearance + empty-container return are sold per direction +
+    // route, so their yard dropdowns narrow exactly like base freight.
+    (appliesTo === "OTHER" &&
+      ["CUSTOMS_CLEARANCE", "WITH_RETURN"].includes(String(values.trigger ?? "")))
+  ) {
     const direction = String(values.tradeDirection ?? "");
     // Direction is what decides the countries, so offer nothing until it is set
     // rather than defaulting to one and letting it read as a real choice.
@@ -124,6 +132,10 @@ const RuleEngineResourcePage = () => {
 
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [search, setSearch] = useState("");
+  // Category tabs (rates page): the active tab's filters go to the backend.
+  const [activeTab, setActiveTab] = useState<string>(
+    config?.listTabs?.[0]?.key ?? "",
+  );
   const [formOpen, setFormOpen] = useState(false);
   const [editing, setEditing] = useState<RuleEngineRecord | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<RuleEngineRecord | null>(
@@ -153,10 +165,13 @@ const RuleEngineResourcePage = () => {
           sortOrder: "ASC" as const,
         }
         : {}),
+      ...(config?.listTabs?.find((t) => t.key === activeTab)?.filters ?? {}),
     }),
     [
       config?.orderConfig,
       config?.supportsSearch,
+      config?.listTabs,
+      activeTab,
       search,
       pagination.pageIndex,
       pagination.pageSize,
@@ -166,7 +181,8 @@ const RuleEngineResourcePage = () => {
   useEffect(() => {
     setPagination((prev) => ({ pageIndex: 0, pageSize: prev.pageSize }));
     setSearch("");
-  }, [config?.slug, setPagination]);
+    setActiveTab(config?.listTabs?.[0]?.key ?? "");
+  }, [config?.slug, config?.listTabs, setPagination]);
 
   const { data, isLoading, isError, error } = useRuleEngineList(
     config?.slug ?? DEFAULT_CONFIGURATION_SLUG,
@@ -685,6 +701,25 @@ const RuleEngineResourcePage = () => {
 
       <Card p={0}>
         <Stack gap={0}>
+          {config.listTabs && (
+            <Tabs
+              value={activeTab}
+              onChange={(v) => {
+                setActiveTab(v ?? config.listTabs![0].key);
+                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+              }}
+              px="md"
+              pt="sm"
+            >
+              <Tabs.List>
+                {config.listTabs.map((tab) => (
+                  <Tabs.Tab key={tab.key} value={tab.key}>
+                    {tab.label}
+                  </Tabs.Tab>
+                ))}
+              </Tabs.List>
+            </Tabs>
+          )}
           <Box px="md" pt="md" pb="sm" w="100%">
             <RuleEngineToolbar
               search={search}