braid-ui 1.0.35 → 1.0.36

package/dist/index.js

@@ -10631,11 +10631,121 @@ var mockCounterpartiesList = [
     modified: "2023-12-28"
   }
 ];
+var CounterpartiesView = ({
+  table,
+  filters,
+  onFilterChange,
+  onResetFilters,
+  onApplyFilters,
+  onCreateCounterparty
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-6 max-w-none", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: "Counterparties" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(Sheet, { children: [
+          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-2", children: [
+            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+            "Filters"
+          ] }) }),
+          /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
+            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Counterparty Filters" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-6 py-6", children: [
+              /* @__PURE__ */ jsx(
+                EnhancedInput,
+                {
+                  label: "Name",
+                  value: filters.name,
+                  onChange: (e) => onFilterChange("name", e.target.value),
+                  placeholder: "Enter counterparty name"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EnhancedSelect,
+                {
+                  label: "Type",
+                  value: filters.type,
+                  onValueChange: (value) => onFilterChange("type", value),
+                  placeholder: "Select type",
+                  options: [
+                    { value: "BUSINESS", label: "Business" },
+                    { value: "INDIVIDUAL", label: "Individual" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EnhancedSelect,
+                {
+                  label: "Status",
+                  value: filters.status,
+                  onValueChange: (value) => onFilterChange("status", value),
+                  placeholder: "Select status",
+                  options: [
+                    { value: "ACTIVE", label: "Active" },
+                    { value: "INACTIVE", label: "Inactive" },
+                    { value: "PENDING", label: "Pending" },
+                    { value: "SUSPENDED", label: "Suspended" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
+                  /* @__PURE__ */ jsx(
+                    DatePicker,
+                    {
+                      date: filters.createdDateStart,
+                      onDateChange: (date) => onFilterChange("createdDateStart", date),
+                      placeholder: "MM/DD/YYYY",
+                      buttonClassName: "w-full",
+                      className: "bg-background z-50"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
+                  /* @__PURE__ */ jsx(
+                    DatePicker,
+                    {
+                      date: filters.createdDateEnd,
+                      onDateChange: (date) => onFilterChange("createdDateEnd", date),
+                      placeholder: "MM/DD/YYYY",
+                      buttonClassName: "w-full",
+                      className: "bg-background z-50"
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onResetFilters, children: "Reset Filters" }),
+              /* @__PURE__ */ jsx(Button, { onClick: onApplyFilters, children: "Apply Filters" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick: onCreateCounterparty, children: "Create Counterparty" })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 mt-4 overflow-auto", children: table }) }) })
+  ] });
+};
+var mockProducts3 = {
+  "prod-001": "Business Banking Pro",
+  "prod-002": "Premium Banking",
+  "prod-003": "Business Banking Plus"
+};
+var mockBusinesses2 = {
+  "bus-001": "Tech Solutions LLC",
+  "bus-002": "Digital Ventures"
+};
+var mockIndividuals2 = {
+  "ind-001": "Cloud Services Corp",
+  "ind-002": "Wealth Management"
+};
 var Counterparties = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const { counterparties: enrichedCounterparties, loading: loadingEntities } = useCounterpartyEntity(mockCounterpartiesList);
-  const [filteredCounterparties, setFilteredCounterparties] = useState([]);
+  const [counterparties, setCounterparties] = useState([]);
   const [sortBy, setSortBy] = useState("created");
   const [sortDirection, setSortDirection] = useState("desc");
   const [filters, setFilters] = useState({
@@ -10645,43 +10755,78 @@ var Counterparties = () => {
     createdDateStart: void 0,
     createdDateEnd: void 0
   });
-  const handleFilterChange = (field, value) => {
-    setFilters((prev) => ({ ...prev, [field]: value }));
-  };
-  const applyFilters = () => {
-    let filtered = enrichedCounterparties;
+  useEffect(() => {
+    const enrichCounterparties = async () => {
+      const enriched = await Promise.all(
+        mockCounterpartiesList.map(async (counterparty) => {
+          let associatedEntity = "";
+          let entityType = null;
+          if (counterparty.productId) {
+            associatedEntity = mockProducts3[counterparty.productId] || counterparty.productId;
+            entityType = "product";
+          } else if (counterparty.businessId) {
+            associatedEntity = mockBusinesses2[counterparty.businessId] || counterparty.businessId;
+            entityType = "business";
+          } else if (counterparty.individualId) {
+            associatedEntity = mockIndividuals2[counterparty.individualId] || counterparty.individualId;
+            entityType = "individual";
+          } else if (counterparty.accountNumber) {
+            associatedEntity = counterparty.accountNumber;
+            entityType = "account";
+          }
+          return {
+            ...counterparty,
+            associatedEntity,
+            entityType
+          };
+        })
+      );
+      setCounterparties(enriched);
+    };
+    enrichCounterparties();
+  }, []);
+  const filteredCounterparties = useMemo(() => {
+    const customerId = searchParams.get("customerId");
+    let filtered = counterparties;
+    if (customerId) {
+      filtered = filtered.filter((cp) => cp.customerId === customerId);
+    }
     if (filters.name) {
       filtered = filtered.filter(
-        (counterparty) => counterparty.name.toLowerCase().includes(filters.name.toLowerCase())
+        (cp) => cp.name.toLowerCase().includes(filters.name.toLowerCase())
       );
     }
     if (filters.type) {
-      filtered = filtered.filter((counterparty) => counterparty.type === filters.type);
+      filtered = filtered.filter((cp) => cp.type === filters.type);
     }
     if (filters.status) {
-      filtered = filtered.filter((counterparty) => counterparty.status === filters.status);
+      filtered = filtered.filter((cp) => cp.status === filters.status);
     }
     if (filters.createdDateStart) {
       filtered = filtered.filter(
-        (counterparty) => new Date(counterparty.created) >= filters.createdDateStart
+        (cp) => new Date(cp.created) >= filters.createdDateStart
       );
     }
     if (filters.createdDateEnd) {
       filtered = filtered.filter(
-        (counterparty) => new Date(counterparty.created) <= filters.createdDateEnd
+        (cp) => new Date(cp.created) <= filters.createdDateEnd
       );
     }
-    setFilteredCounterparties(filtered);
-  };
-  useEffect(() => {
-    const customerId = searchParams.get("customerId");
-    let filtered = enrichedCounterparties;
-    if (customerId) {
-      filtered = filtered.filter((cp) => cp.customerId === customerId);
-    }
-    setFilteredCounterparties(filtered);
-  }, [enrichedCounterparties, searchParams]);
-  const resetFilters = () => {
+    return filtered;
+  }, [counterparties, filters, searchParams]);
+  const sortedCounterparties = useMemo(() => {
+    return [...filteredCounterparties].sort((a, b) => {
+      const aValue = a[sortBy];
+      const bValue = b[sortBy];
+      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [filteredCounterparties, sortBy, sortDirection]);
+  const handleFilterChange = useCallback((field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  }, []);
+  const handleResetFilters = useCallback(() => {
     setFilters({
       name: "",
       type: "",
@@ -10689,19 +10834,23 @@ var Counterparties = () => {
       createdDateStart: void 0,
       createdDateEnd: void 0
     });
-    setFilteredCounterparties(enrichedCounterparties);
-  };
-  const handleSort = (key) => {
+  }, []);
+  const handleApplyFilters = useCallback(() => {
+  }, []);
+  const handleSort = useCallback((key) => {
     if (sortBy === key) {
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
     } else {
       setSortBy(key);
       setSortDirection("asc");
     }
-  };
-  const handleRowClick = (counterparty) => {
+  }, [sortBy]);
+  const handleRowClick = useCallback((counterparty) => {
     navigate(`/counterparty/${counterparty.id}`);
-  };
+  }, [navigate]);
+  const handleCreateCounterparty = useCallback(() => {
+    navigate("/counterparty/create");
+  }, [navigate]);
   const columns3 = [
     {
       key: "name",
@@ -10754,112 +10903,28 @@ var Counterparties = () => {
       sortable: true
     }
   ];
-  const sortedCounterparties = [...filteredCounterparties].sort((a, b) => {
-    const aValue = a[sortBy];
-    const bValue = b[sortBy];
-    if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
-    if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
-    return 0;
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-6 max-w-none", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: "Counterparties" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Sheet, { children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-2", children: [
-            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
-            "Filters"
-          ] }) }),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
-            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Counterparty Filters" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-6 py-6", children: [
-              /* @__PURE__ */ jsx(
-                EnhancedInput,
-                {
-                  label: "Name",
-                  value: filters.name,
-                  onChange: (e) => handleFilterChange("name", e.target.value),
-                  placeholder: "Enter counterparty name"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                EnhancedSelect,
-                {
-                  label: "Type",
-                  value: filters.type,
-                  onValueChange: (value) => handleFilterChange("type", value),
-                  placeholder: "Select type",
-                  options: [
-                    { value: "BUSINESS", label: "Business" },
-                    { value: "INDIVIDUAL", label: "Individual" }
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                EnhancedSelect,
-                {
-                  label: "Status",
-                  value: filters.status,
-                  onValueChange: (value) => handleFilterChange("status", value),
-                  placeholder: "Select status",
-                  options: [
-                    { value: "ACTIVE", label: "Active" },
-                    { value: "INACTIVE", label: "Inactive" },
-                    { value: "PENDING", label: "Pending" },
-                    { value: "SUSPENDED", label: "Suspended" }
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
-                  /* @__PURE__ */ jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateStart,
-                      onDateChange: (date) => handleFilterChange("createdDateStart", date),
-                      placeholder: "MM/DD/YYYY",
-                      buttonClassName: "w-full",
-                      className: "bg-background z-50"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
-                  /* @__PURE__ */ jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateEnd,
-                      onDateChange: (date) => handleFilterChange("createdDateEnd", date),
-                      placeholder: "MM/DD/YYYY",
-                      buttonClassName: "w-full",
-                      className: "bg-background z-50"
-                    }
-                  )
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
-              /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
-              /* @__PURE__ */ jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => navigate("/counterparty/create"), children: "Create Counterparty" })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsx(
-      DataTable,
-      {
-        columns: columns3,
-        data: sortedCounterparties,
-        sortBy,
-        sortDirection,
-        onSort: handleSort,
-        onRowClick: handleRowClick
-      }
-    ) }) }) })
-  ] });
+  const table = useMemo(() => /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      columns: columns3,
+      data: sortedCounterparties,
+      sortBy,
+      sortDirection,
+      onSort: handleSort,
+      onRowClick: handleRowClick
+    }
+  ), [columns3, sortedCounterparties, sortBy, sortDirection, handleSort, handleRowClick]);
+  return /* @__PURE__ */ jsx(
+    CounterpartiesView,
+    {
+      table,
+      filters,
+      onFilterChange: handleFilterChange,
+      onResetFilters: handleResetFilters,
+      onApplyFilters: handleApplyFilters,
+      onCreateCounterparty: handleCreateCounterparty
+    }
+  );
 };
 var Counterparties_default = Counterparties;
 var mockCounterpartyTimeline = [