@handled-ai/design-system 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1481,6 +1481,7 @@ interface InboxViewConfig {
     quickFilterTabs?: Array<{
         id: string;
         label: string;
+        matchValue?: string;
         count?: number;
     }>;
     hideAccountsButton?: boolean;
@@ -1703,7 +1704,7 @@ declare function PrototypeInsightsView({ tabs, coaching, metrics, expandedMetric
 
 interface PrototypeAccountsViewProps extends AccountsViewConfig {
     headerActions?: React.ReactNode;
-    onRowClick?: () => void;
+    onRowClick?: (row: DataRow) => void;
 }
 declare function PrototypeAccountsView({ filterTabs, headerActions, onRowClick, rows, filterCategories, quickViews, moreQuickViews, quickViewFilters, iconMap, entityUrlBuilder, onScoreFactorFeedback, onScoreApproveFeedback, onScoreDismissFeedback, }: PrototypeAccountsViewProps): React.JSX.Element;
 

package/dist/index.js

@@ -9286,6 +9286,8 @@ function PrototypeInboxView({
   const [selectedTask, setSelectedTask] = React58.useState(items[0]);
   const [inboxAssignee, setInboxAssignee] = React58.useState("me");
   const [inboxFilters, setInboxFilters] = React58.useState({});
+  const [activeQuickFilter, setActiveQuickFilter] = React58.useState("all");
+  const [splitViewSearch, setSplitViewSearch] = React58.useState("");
   const sections = React58.useMemo(
     () => __spreadValues(__spreadValues({}, DEFAULT_DETAIL_SECTIONS), detailSections),
     [detailSections]
@@ -9319,14 +9321,83 @@ function PrototypeInboxView({
     () => getSignalScoreProp != null ? getSignalScoreProp : (() => DEFAULT_SIGNAL_SCORE),
     [getSignalScoreProp]
   );
+  const filterFieldMap = React58.useMemo(() => {
+    const map = {};
+    for (const cat of resolvedFilterCategories) {
+      switch (cat.id) {
+        case "category":
+        case "signalType":
+          map[cat.id] = (item, v) => item.tag1.toLowerCase() === v.toLowerCase();
+          break;
+        case "account":
+          map[cat.id] = (item, v) => item.company.toLowerCase() === v.toLowerCase();
+          break;
+        default:
+          map[cat.id] = (item, v) => {
+            const lv = v.toLowerCase();
+            return item.tag1.toLowerCase() === lv || item.company.toLowerCase() === lv || item.title.toLowerCase().includes(lv) || item.details.toLowerCase().includes(lv);
+          };
+      }
+    }
+    return map;
+  }, [resolvedFilterCategories]);
+  const filteredItems = React58.useMemo(() => {
+    const activeFilters = Object.entries(inboxFilters).filter(
+      ([, value]) => value && value !== "all"
+    );
+    if (activeFilters.length === 0) return items;
+    return items.filter(
+      (item) => activeFilters.every(([key, value]) => {
+        const matcher = filterFieldMap[key];
+        return matcher ? matcher(item, value) : true;
+      })
+    );
+  }, [items, inboxFilters, filterFieldMap]);
+  const resolvedQuickFilterTabs = React58.useMemo(() => {
+    if (quickFilterTabs) return quickFilterTabs;
+    const uniqueTags = [...new Set(items.map((i) => i.tag1))];
+    return uniqueTags.map((tag) => ({
+      id: tag.toLowerCase().replace(/\s+/g, "-"),
+      label: tag
+    }));
+  }, [quickFilterTabs, items]);
+  const quickFilterTabCounts = React58.useMemo(() => {
+    var _a2;
+    const counts = {};
+    for (const tab of resolvedQuickFilterTabs) {
+      const match = ((_a2 = tab.matchValue) != null ? _a2 : tab.label).toLowerCase();
+      counts[tab.id] = items.filter((i) => i.tag1.toLowerCase() === match).length;
+    }
+    return counts;
+  }, [resolvedQuickFilterTabs, items]);
+  const splitViewItems = React58.useMemo(() => {
+    var _a2;
+    let filtered = items;
+    if (activeQuickFilter !== "all") {
+      const activeTab = resolvedQuickFilterTabs.find((t) => t.id === activeQuickFilter);
+      if (activeTab) {
+        const match = ((_a2 = activeTab.matchValue) != null ? _a2 : activeTab.label).toLowerCase();
+        filtered = filtered.filter(
+          (item) => item.tag1.toLowerCase() === match
+        );
+      }
+    }
+    if (splitViewSearch.trim()) {
+      const q = splitViewSearch.trim().toLowerCase();
+      filtered = filtered.filter(
+        (item) => item.tag1.toLowerCase().includes(q) || item.company.toLowerCase().includes(q) || item.title.toLowerCase().includes(q)
+      );
+    }
+    return filtered;
+  }, [items, activeQuickFilter, resolvedQuickFilterTabs, splitViewSearch]);
   const inboxGroups = React58.useMemo(() => {
-    const urgent = items.filter((i) => i.statusColor === "red");
-    const active = items.filter((i) => i.statusColor !== "red");
+    const urgent = filteredItems.filter((i) => i.statusColor === "red");
+    const active = filteredItems.filter((i) => i.statusColor !== "red");
     return [
       { key: "urgent", label: "Urgent", items: urgent },
       { key: "active", label: "Active", items: active }
     ].filter((g) => g.items.length > 0);
-  }, [items]);
+  }, [filteredItems]);
   const renderInboxRow = React58.useCallback(
     (item) => /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement("span", { className: `h-2 w-2 shrink-0 rounded-full ${item.statusColor === "red" ? "bg-[#f43f5e]" : "bg-[#3b82f6]"}` }), /* @__PURE__ */ React58.createElement("span", { className: "w-[80px] shrink-0 font-mono text-xs text-muted-foreground/80" }, item.id), /* @__PURE__ */ React58.createElement("span", { className: "shrink-0 rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap" }, item.tag1), /* @__PURE__ */ React58.createElement("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground" }, item.title), /* @__PURE__ */ React58.createElement("span", { className: "w-[120px] shrink-0 truncate text-xs font-medium text-foreground" }, item.company), /* @__PURE__ */ React58.createElement("span", { className: "w-[80px] shrink-0 text-right text-xs text-muted-foreground" }, item.time)),
     []
@@ -9422,7 +9493,39 @@ function PrototypeInboxView({
     }
   )) : (
     /* Split view */
-    /* @__PURE__ */ React58.createElement("div", { className: "flex h-full min-h-0 w-full flex-1" }, /* @__PURE__ */ React58.createElement("div", { className: "flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10" }, /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col gap-4 border-b border-border p-4 shrink-0" }, !hideToolbarActions && /* @__PURE__ */ React58.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(Eye, { className: "w-4 h-4" })), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(FileText, { className: "w-4 h-4" })), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(Clock, { className: "w-4 h-4" })), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(CheckSquare, { className: "w-4 h-4" }))), /* @__PURE__ */ React58.createElement(Button, { size: "sm", className: "h-8 px-4 bg-foreground text-background hover:bg-foreground/90 text-xs font-semibold gap-1.5 rounded-md" }, /* @__PURE__ */ React58.createElement(Plus, { className: "w-4 h-4" }), " Add Task")), /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React58.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React58.createElement(Filter, { className: "absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React58.createElement(Input, { className: "h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none", placeholder: "Categories" })), !hideAccountsButton && /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-medium rounded-md shadow-none" }, /* @__PURE__ */ React58.createElement(Building, { className: "w-3.5 h-3.5 mr-1.5" }), " ", accountDetailsLabel != null ? accountDetailsLabel : "Accounts")), /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide" }, quickFilterTabs ? /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Button, { size: "sm", className: "h-7 rounded-full px-3.5 text-[11px] font-semibold bg-foreground text-background hover:bg-foreground/90 shadow-none" }, "All"), quickFilterTabs.map((tab) => /* @__PURE__ */ React58.createElement(Button, { key: tab.id, variant: "outline", size: "sm", className: "h-7 rounded-full px-3.5 text-[11px] font-medium bg-transparent border-border text-muted-foreground hover:text-foreground shadow-none" }, tab.label, tab.count != null ? ` (${tab.count})` : ""))) : /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement(Button, { size: "sm", className: "h-7 rounded-full px-3.5 text-[11px] font-semibold bg-foreground text-background hover:bg-foreground/90 shadow-none" }, "All"), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "sm", className: "h-7 rounded-full px-3.5 text-[11px] font-medium bg-transparent border-border text-muted-foreground hover:text-foreground shadow-none" }, "Outbound (10)"), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "sm", className: "h-7 rounded-full px-3.5 text-[11px] font-medium bg-transparent border-border text-muted-foreground hover:text-foreground shadow-none" }, "Retention (12)"), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "sm", className: "h-7 rounded-full px-3.5 text-[11px] font-medium bg-transparent border-border text-muted-foreground hover:text-foreground shadow-none" }, "Relationship (9)")))), /* @__PURE__ */ React58.createElement("div", { className: "flex-1 overflow-y-auto" }, items.map((item) => /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React58.createElement("div", { className: "flex h-full min-h-0 w-full flex-1" }, /* @__PURE__ */ React58.createElement("div", { className: "flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10" }, /* @__PURE__ */ React58.createElement("div", { className: "flex flex-col gap-4 border-b border-border p-4 shrink-0" }, !hideToolbarActions && /* @__PURE__ */ React58.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(Eye, { className: "w-4 h-4" })), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(FileText, { className: "w-4 h-4" })), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(Clock, { className: "w-4 h-4" })), /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React58.createElement(CheckSquare, { className: "w-4 h-4" }))), /* @__PURE__ */ React58.createElement(Button, { size: "sm", className: "h-8 px-4 bg-foreground text-background hover:bg-foreground/90 text-xs font-semibold gap-1.5 rounded-md" }, /* @__PURE__ */ React58.createElement(Plus, { className: "w-4 h-4" }), " Add Task")), /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React58.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React58.createElement(Filter, { className: "absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React58.createElement(
+      Input,
+      {
+        className: "h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none",
+        placeholder: "Filter by category...",
+        value: splitViewSearch,
+        onChange: (e) => setSplitViewSearch(e.target.value)
+      }
+    )), !hideAccountsButton && /* @__PURE__ */ React58.createElement(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-medium rounded-md shadow-none" }, /* @__PURE__ */ React58.createElement(Building, { className: "w-3.5 h-3.5 mr-1.5" }), " ", accountDetailsLabel != null ? accountDetailsLabel : "Accounts")), /* @__PURE__ */ React58.createElement("div", { className: "flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide" }, /* @__PURE__ */ React58.createElement(
+      Button,
+      {
+        size: "sm",
+        variant: activeQuickFilter === "all" ? "default" : "outline",
+        className: `h-7 rounded-full px-3.5 text-[11px] font-semibold shadow-none ${activeQuickFilter === "all" ? "bg-foreground text-background hover:bg-foreground/90" : "bg-transparent border-border text-muted-foreground hover:text-foreground"}`,
+        onClick: () => setActiveQuickFilter("all")
+      },
+      "All"
+    ), resolvedQuickFilterTabs.map((tab) => {
+      var _a2;
+      const count = (_a2 = tab.count) != null ? _a2 : quickFilterTabCounts[tab.id];
+      return /* @__PURE__ */ React58.createElement(
+        Button,
+        {
+          key: tab.id,
+          size: "sm",
+          variant: activeQuickFilter === tab.id ? "default" : "outline",
+          className: `h-7 rounded-full px-3.5 text-[11px] font-medium shadow-none ${activeQuickFilter === tab.id ? "bg-foreground text-background hover:bg-foreground/90" : "bg-transparent border-border text-muted-foreground hover:text-foreground"}`,
+          onClick: () => setActiveQuickFilter(tab.id)
+        },
+        tab.label,
+        count != null && count > 0 ? ` (${count})` : ""
+      );
+    }))), /* @__PURE__ */ React58.createElement("div", { className: "flex-1 overflow-y-auto" }, splitViewItems.map((item) => /* @__PURE__ */ React58.createElement(
       "div",
       {
         key: item.id,
@@ -9795,7 +9898,7 @@ function PrototypeShell({
     },
     [navigableViews, onNavigate]
   );
-  const handleOpenEntityPanel = React58.useCallback(() => setIsEntityPanelOpen(true), []);
+  const handleOpenEntityPanel = React58.useCallback((_entity) => setIsEntityPanelOpen(true), []);
   const handleOpenRecentActivity = React58.useCallback(() => {
     setIsEntityPanelOpen(true);
     setTimeout(() => {