@handled-ai/design-system 0.5.1 → 0.6.0

package/dist/index.js

@@ -2809,7 +2809,24 @@ function isRowMatchingCategoryFilter(row, categoryId, options) {
       return true;
   }
 }
-function DataTable({ onRowClick } = {}) {
+function DataTable({
+  onRowClick,
+  rows: rowsProp,
+  filterCategories: filterCategoriesProp,
+  quickViews: quickViewsProp,
+  moreQuickViews: moreQuickViewsProp,
+  quickViewFilters: quickViewFiltersProp,
+  iconMap,
+  entityUrlBuilder,
+  onScoreFactorFeedback,
+  onScoreApproveFeedback,
+  onScoreDismissFeedback
+} = {}) {
+  const resolvedRows = rowsProp != null ? rowsProp : ROWS;
+  const resolvedFilterCategories = filterCategoriesProp != null ? filterCategoriesProp : FILTER_CATEGORIES;
+  const resolvedQuickViews = quickViewsProp != null ? quickViewsProp : QUICK_VIEWS;
+  const resolvedMoreQuickViews = moreQuickViewsProp != null ? moreQuickViewsProp : MORE_QUICK_VIEWS;
+  const resolvedQuickViewFilters = quickViewFiltersProp != null ? quickViewFiltersProp : QUICK_VIEW_FILTERS;
   const [sorting, setSorting] = React56.useState([]);
   const [columnVisibility, setColumnVisibility] = React56.useState(
     DEFAULT_COLUMN_VISIBILITY
@@ -2838,9 +2855,9 @@ function DataTable({ onRowClick } = {}) {
     });
   }, [activeQuickView]);
   const filteredRows = React56.useMemo(() => {
-    return ROWS.filter((row) => {
+    return resolvedRows.filter((row) => {
       var _a, _b;
-      const quickViewMatches = activeQuickView ? (_b = (_a = QUICK_VIEW_FILTERS[activeQuickView]) == null ? void 0 : _a.call(QUICK_VIEW_FILTERS, row)) != null ? _b : true : true;
+      const quickViewMatches = activeQuickView ? (_b = (_a = resolvedQuickViewFilters[activeQuickView]) == null ? void 0 : _a.call(resolvedQuickViewFilters, row)) != null ? _b : true : true;
       if (!quickViewMatches) {
         return false;
       }
@@ -2848,13 +2865,14 @@ function DataTable({ onRowClick } = {}) {
         ([categoryId, options]) => isRowMatchingCategoryFilter(row, categoryId, options)
       );
     });
-  }, [activeQuickView, selectedFilters]);
+  }, [activeQuickView, selectedFilters, resolvedRows, resolvedQuickViewFilters]);
   const columns = React56.useMemo(
     () => [
       columnHelper.accessor("name", {
         header: "Entity",
         cell: (info) => {
           const row = info.row.original;
+          const sfUrl = entityUrlBuilder == null ? void 0 : entityUrlBuilder(row);
           return /* @__PURE__ */ React56.createElement("div", { className: "flex min-w-max items-center gap-3" }, /* @__PURE__ */ React56.createElement(
             "div",
             {
@@ -2864,7 +2882,17 @@ function DataTable({ onRowClick } = {}) {
               )
             },
             row.name.slice(0, 1)
-          ), /* @__PURE__ */ React56.createElement("span", { className: "text-sm font-medium text-foreground" }, row.name));
+          ), /* @__PURE__ */ React56.createElement("span", { className: "text-sm font-medium text-foreground" }, row.name), (iconMap == null ? void 0 : iconMap.salesforce) && /* @__PURE__ */ React56.createElement(
+            "a",
+            {
+              href: sfUrl != null ? sfUrl : "#",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: (e) => e.stopPropagation(),
+              className: "shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+            },
+            /* @__PURE__ */ React56.createElement("img", { src: iconMap.salesforce, alt: "Salesforce", className: "w-4 h-4 object-contain" })
+          ));
         }
       }),
       columnHelper.accessor("accountRisks", {
@@ -2995,7 +3023,7 @@ function DataTable({ onRowClick } = {}) {
         cell: (info) => /* @__PURE__ */ React56.createElement("span", { className: "rounded-md bg-muted/50 px-2 py-0.5 text-xs font-medium" }, info.getValue())
       })
     ],
-    []
+    [iconMap, entityUrlBuilder]
   );
   const table = useReactTable({
     data: filteredRows,
@@ -3025,7 +3053,7 @@ function DataTable({ onRowClick } = {}) {
   return /* @__PURE__ */ React56.createElement("div", { className: "flex h-full min-h-[560px] flex-col bg-background" }, /* @__PURE__ */ React56.createElement(
     DataTableToolbar,
     {
-      categories: FILTER_CATEGORIES,
+      categories: resolvedFilterCategories,
       selectedFilters,
       onToggleFilter: toggleCategoryFilter,
       sorting,
@@ -3040,8 +3068,8 @@ function DataTable({ onRowClick } = {}) {
   ), /* @__PURE__ */ React56.createElement(
     DataTableQuickViews,
     {
-      quickViews: QUICK_VIEWS,
-      moreViews: MORE_QUICK_VIEWS,
+      quickViews: resolvedQuickViews,
+      moreViews: resolvedMoreQuickViews,
       activeView: activeQuickView,
       onViewChange: setActiveQuickView
     }
@@ -3096,12 +3124,12 @@ function DataTable({ onRowClick } = {}) {
         whyNow: data.whyNow,
         evidence: data.evidence,
         factors: data.factors,
-        onFactorFeedback: (key, type, detail) => console.log("Factor feedback:", { account: scoreModal.row.name, factor: key, type, detail }),
+        onFactorFeedback: onScoreFactorFeedback ? (key, type, detail) => onScoreFactorFeedback(scoreModal.row.name, scoreModal.type, key, type, detail) : (key, type, detail) => console.log("Factor feedback:", { account: scoreModal.row.name, factor: key, type, detail }),
         companyName: scoreModal.row.name,
         opportunityUrl: `https://acme.lightning.force.com/lightning/r/Opportunity/006${scoreModal.row.id}/view`,
         onApprove: () => console.log("Approved signal \u2014 creating opportunity:", { account: scoreModal.row.name, type: scoreModal.type }),
-        onApproveFeedback: (reasons, detail) => console.log("Approval feedback:", { account: scoreModal.row.name, reasons, detail }),
-        onDismiss: (reasons, detail) => console.log("Dismissed signal:", { account: scoreModal.row.name, reasons, detail })
+        onApproveFeedback: onScoreApproveFeedback ? (reasons, detail) => onScoreApproveFeedback(scoreModal.row.name, scoreModal.type, reasons, detail) : (reasons, detail) => console.log("Approval feedback:", { account: scoreModal.row.name, reasons, detail }),
+        onDismiss: onScoreDismissFeedback ? (reasons, detail) => onScoreDismissFeedback(scoreModal.row.name, scoreModal.type, reasons, detail) : (reasons, detail) => console.log("Dismissed signal:", { account: scoreModal.row.name, reasons, detail })
       }
     );
   })());
@@ -3288,7 +3316,7 @@ function DonutChart({
     ), /* @__PURE__ */ React56.createElement(
       "span",
       {
-        className: "truncate font-medium text-slate-600",
+        className: "whitespace-nowrap font-medium text-slate-600",
         title: d.name
       },
       d.name
@@ -3438,7 +3466,8 @@ function EntityPanelHeader({
   icon,
   title,
   badgeLabel,
-  subtitle
+  subtitle,
+  headerAction
 }) {
   const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel();
   return /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2 min-w-0" }, icon != null ? icon : /* @__PURE__ */ React56.createElement(CalendarDays, { className: "w-5 h-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ React56.createElement("h2", { className: "text-lg font-semibold text-foreground truncate" }, title), badgeLabel && /* @__PURE__ */ React56.createElement(
@@ -3448,7 +3477,7 @@ function EntityPanelHeader({
       className: "text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0"
     },
     badgeLabel
-  )), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1 shrink-0 ml-4 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(
+  )), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1 shrink-0 ml-4 text-muted-foreground" }, headerAction, /* @__PURE__ */ React56.createElement(
     "button",
     {
       type: "button",
@@ -4882,7 +4911,7 @@ function MetricCard({
     // Donut Chart Variant
     /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-4 mt-2 mb-6" }, /* @__PURE__ */ React56.createElement("div", { className: "shrink-0" }, renderDonut()), /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col gap-2 flex-1 min-w-0" }, dataPoints.slice(0, 5).map((dp, i) => {
       const colors = ["bg-[#166534]", "bg-[#22c55e]", "bg-[#6ee7b7]", "bg-[#ccfbf1]", "bg-[#f1f5f9]"];
-      return /* @__PURE__ */ React56.createElement("div", { key: dp.label, className: "flex items-center justify-between gap-2 text-[11px] font-medium min-w-0" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1.5 text-muted-foreground min-w-0" }, /* @__PURE__ */ React56.createElement("div", { className: cn("w-1.5 h-1.5 rounded-full shrink-0", dp.color ? "" : colors[i % colors.length]), style: dp.color ? { backgroundColor: dp.color } : {} }), /* @__PURE__ */ React56.createElement("span", { className: "truncate" }, dp.label)), /* @__PURE__ */ React56.createElement("span", { className: "text-foreground font-semibold shrink-0" }, dp.value));
+      return /* @__PURE__ */ React56.createElement("div", { key: dp.label, className: "flex items-center justify-between gap-2 text-[11px] font-medium min-w-0" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1.5 text-muted-foreground min-w-0" }, /* @__PURE__ */ React56.createElement("div", { className: cn("w-1.5 h-1.5 rounded-full shrink-0", dp.color ? "" : colors[i % colors.length]), style: dp.color ? { backgroundColor: dp.color } : {} }), /* @__PURE__ */ React56.createElement("span", { className: "whitespace-nowrap" }, dp.label)), /* @__PURE__ */ React56.createElement("span", { className: "text-foreground font-semibold shrink-0" }, dp.value));
     })))
   ) : title && // Standard Big Number Variant (only if title exists)
   /* @__PURE__ */ React56.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ React56.createElement("span", { className: "text-4xl font-bold tracking-tight text-foreground" }, value), unit && /* @__PURE__ */ React56.createElement("span", { className: "text-2xl font-bold tracking-tight text-foreground" }, unit)), subtitle && /* @__PURE__ */ React56.createElement("p", { className: "text-sm font-medium text-muted-foreground mt-1" }, subtitle)), /* @__PURE__ */ React56.createElement("div", { className: "mt-auto flex flex-col gap-1.5" }, change && /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1" }, (() => {
@@ -6072,6 +6101,8 @@ function QuickActionSidebarNav(_a) {
     className,
     brandLabel = "ACME CO",
     brandSubtitle = "Placeholder",
+    brandImage,
+    hideQuickAction,
     navSections = DEFAULT_NAV_SECTIONS,
     activeItemId = "inbox",
     activeVariant = "default",
@@ -6085,6 +6116,8 @@ function QuickActionSidebarNav(_a) {
     "className",
     "brandLabel",
     "brandSubtitle",
+    "brandImage",
+    "hideQuickAction",
     "navSections",
     "activeItemId",
     "activeVariant",
@@ -6116,7 +6149,7 @@ function QuickActionSidebarNav(_a) {
           isCollapsed ? "justify-center h-16 px-2" : "h-20 px-5"
         )
       },
-      !isCollapsed && /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2.5 pr-10" }, /* @__PURE__ */ React56.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-sidebar-foreground text-sidebar" }, /* @__PURE__ */ React56.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-3.5 h-3.5" }, /* @__PURE__ */ React56.createElement("circle", { cx: "12", cy: "12", r: "10" }))), /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React56.createElement("span", { className: "text-sm font-bold tracking-tight" }, brandLabel), brandSubtitle && /* @__PURE__ */ React56.createElement("span", { className: "text-[10px] font-medium text-sidebar-foreground/50 uppercase tracking-wide" }, brandSubtitle))),
+      !isCollapsed && /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2.5 pr-10" }, brandImage ? /* @__PURE__ */ React56.createElement("img", { src: brandImage, alt: brandLabel, className: "h-10 object-contain" }) : /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-sidebar-foreground text-sidebar" }, /* @__PURE__ */ React56.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-3.5 h-3.5" }, /* @__PURE__ */ React56.createElement("circle", { cx: "12", cy: "12", r: "10" }))), /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React56.createElement("span", { className: "text-sm font-bold tracking-tight" }, brandLabel), brandSubtitle && /* @__PURE__ */ React56.createElement("span", { className: "text-[10px] font-medium text-sidebar-foreground/50 uppercase tracking-wide" }, brandSubtitle)))),
       /* @__PURE__ */ React56.createElement(
         "button",
         {
@@ -6144,7 +6177,7 @@ function QuickActionSidebarNav(_a) {
         }
       ));
     })),
-    /* @__PURE__ */ React56.createElement("div", { className: cn("px-3 pb-3", isCollapsed ? "hidden" : "block") }, /* @__PURE__ */ React56.createElement(
+    !hideQuickAction && /* @__PURE__ */ React56.createElement("div", { className: cn("px-3 pb-3", isCollapsed ? "hidden" : "block") }, /* @__PURE__ */ React56.createElement(
       "button",
       {
         type: "button",
@@ -6171,7 +6204,7 @@ function QuickActionSidebarNav(_a) {
       ), /* @__PURE__ */ React56.createElement("span", { className: "text-sm font-medium" }, "Quick Action")),
       /* @__PURE__ */ React56.createElement("kbd", { className: "hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[11px] font-mono rounded bg-sidebar-primary-foreground/20 text-sidebar-primary-foreground" }, /* @__PURE__ */ React56.createElement("span", { className: "text-xs" }, "\u2318"), "K")
     )),
-    isCollapsed && /* @__PURE__ */ React56.createElement("div", { className: "px-2 pb-3" }, /* @__PURE__ */ React56.createElement(Tooltip4, null, /* @__PURE__ */ React56.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React56.createElement(
+    isCollapsed && !hideQuickAction && /* @__PURE__ */ React56.createElement("div", { className: "px-2 pb-3" }, /* @__PURE__ */ React56.createElement(Tooltip4, null, /* @__PURE__ */ React56.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React56.createElement(
       "button",
       {
         type: "button",
@@ -6225,7 +6258,7 @@ function QuickActionSidebarNav(_a) {
         /* @__PURE__ */ React56.createElement("span", null, item.label)
       ));
     }))))
-  ), /* @__PURE__ */ React56.createElement(
+  ), !hideQuickAction && /* @__PURE__ */ React56.createElement(
     QuickActionModal,
     {
       open: isQuickActionOpen,
@@ -8911,7 +8944,8 @@ function DetailView({
   emailSignature,
   iconMap,
   onOpenEntityPanel,
-  onOpenRecentActivity
+  onOpenRecentActivity,
+  onSuggestedActionFeedback
 }) {
   const [evidenceExpanded, setEvidenceExpanded] = React56.useState(false);
   const [showTimeline, setShowTimeline] = React56.useState(false);
@@ -8921,6 +8955,10 @@ function DetailView({
     setEvidenceExpanded(false);
     setExtraActions([]);
   }, [item.id]);
+  const signalData = React56.useMemo(
+    () => getSignalScore(item.company),
+    [getSignalScore, item.company]
+  );
   const suggestedActions = React56.useMemo(
     () => [...buildSuggestedActions(item), ...extraActions],
     [buildSuggestedActions, item, extraActions]
@@ -8954,9 +8992,13 @@ function DetailView({
         console.log("Approved signal:", { taskId: item.id, company: item.company });
       },
       onApproveFeedback: (reasons, detail) => {
+        var _a;
+        (_a = signalData.onApproveFeedback) == null ? void 0 : _a.call(signalData, reasons, detail);
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail });
       },
       onDismiss: (reasons, detail) => {
+        var _a;
+        (_a = signalData.onDismissFeedback) == null ? void 0 : _a.call(signalData, reasons, detail);
         console.log("Dismissed signal:", { taskId: item.id, reasons, detail });
       }
     },
@@ -8979,7 +9021,7 @@ function DetailView({
       /* @__PURE__ */ React56.createElement("span", { className: "text-xs font-medium text-foreground" }, item.company),
       /* @__PURE__ */ React56.createElement(ChevronRight, { className: "h-3 w-3 text-muted-foreground/50" })
     )), sections.signalBrief && (() => {
-      const signalData = getSignalScore(item.company);
+      var _a;
       const pct = signalData.score;
       const scoreColor = pct >= 70 ? "text-emerald-600" : pct >= 40 ? "text-amber-600" : "text-red-600";
       const barColor = pct >= 70 ? "bg-emerald-500" : pct >= 40 ? "bg-amber-500" : "bg-red-500";
@@ -9008,7 +9050,7 @@ function DetailView({
         ScoreBreakdown,
         {
           factors: signalData.factors,
-          onFactorFeedback: (key, type, detail) => console.log("Signal factor feedback:", { company: item.company, factor: key, type, detail })
+          onFactorFeedback: (_a = signalData.onFactorFeedback) != null ? _a : ((key, type, detail) => console.log("Signal factor feedback:", { company: item.company, factor: key, type, detail }))
         }
       ), /* @__PURE__ */ React56.createElement(SignalApproval.Actions, null))), !evidenceExpanded && /* @__PURE__ */ React56.createElement(SignalApproval.Actions, null));
     })(), sections.timeline && timelineEvents.length > 0 && /* @__PURE__ */ React56.createElement("div", { className: "mb-8" }, /* @__PURE__ */ React56.createElement(
@@ -9051,6 +9093,9 @@ function PrototypeInboxView({
   getSignalScore: getSignalScoreProp,
   getTimelineEvents,
   iconMap = {},
+  hideToolbarActions,
+  hideHoverActions,
+  onSuggestedActionFeedback,
   headerActions,
   onOpenEntityPanel,
   onOpenRecentActivity
@@ -9149,7 +9194,8 @@ function PrototypeInboxView({
     emailSignature,
     iconMap,
     onOpenEntityPanel,
-    onOpenRecentActivity
+    onOpenRecentActivity,
+    onSuggestedActionFeedback
   };
   return /* @__PURE__ */ React56.createElement("div", { className: "flex h-full w-full flex-col" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between border-b border-border bg-background px-4 py-3 shrink-0" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-3" }, inboxViewMode === "detail" ? /* @__PURE__ */ React56.createElement(
     "button",
@@ -9193,7 +9239,7 @@ function PrototypeInboxView({
     }
   )) : (
     /* Split view */
-    /* @__PURE__ */ React56.createElement("div", { className: "flex h-full min-h-0 w-full flex-1" }, /* @__PURE__ */ React56.createElement("div", { className: "flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10" }, /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col gap-4 border-b border-border p-4 shrink-0" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(Eye, { className: "w-4 h-4" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(FileText, { className: "w-4 h-4" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(Clock, { className: "w-4 h-4" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(CheckSquare, { className: "w-4 h-4" }))), /* @__PURE__ */ React56.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__ */ React56.createElement(Plus, { className: "w-4 h-4" }), " Add Task")), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React56.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React56.createElement(Filter, { className: "absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React56.createElement(Input, { className: "h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none", placeholder: "Categories" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-medium rounded-md shadow-none" }, /* @__PURE__ */ React56.createElement(Building, { className: "w-3.5 h-3.5 mr-1.5" }), " Accounts")), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide" }, /* @__PURE__ */ React56.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__ */ React56.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__ */ React56.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__ */ React56.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__ */ React56.createElement("div", { className: "flex-1 overflow-y-auto" }, items.map((item) => /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React56.createElement("div", { className: "flex h-full min-h-0 w-full flex-1" }, /* @__PURE__ */ React56.createElement("div", { className: "flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10" }, /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col gap-4 border-b border-border p-4 shrink-0" }, !hideToolbarActions && /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(Eye, { className: "w-4 h-4" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(FileText, { className: "w-4 h-4" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(Clock, { className: "w-4 h-4" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "icon", className: "h-8 w-8 text-muted-foreground" }, /* @__PURE__ */ React56.createElement(CheckSquare, { className: "w-4 h-4" }))), /* @__PURE__ */ React56.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__ */ React56.createElement(Plus, { className: "w-4 h-4" }), " Add Task")), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React56.createElement("div", { className: "relative flex-1" }, /* @__PURE__ */ React56.createElement(Filter, { className: "absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React56.createElement(Input, { className: "h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none", placeholder: "Categories" })), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-medium rounded-md shadow-none" }, /* @__PURE__ */ React56.createElement(Building, { className: "w-3.5 h-3.5 mr-1.5" }), " Accounts")), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide" }, /* @__PURE__ */ React56.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__ */ React56.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__ */ React56.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__ */ React56.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__ */ React56.createElement("div", { className: "flex-1 overflow-y-auto" }, items.map((item) => /* @__PURE__ */ React56.createElement(
       "div",
       {
         key: item.id,
@@ -9202,7 +9248,7 @@ function PrototypeInboxView({
       },
       /* @__PURE__ */ React56.createElement("div", { className: "mb-1.5 flex items-center gap-2" }, /* @__PURE__ */ React56.createElement("span", { className: "min-w-0 truncate text-[13px] font-semibold text-foreground leading-tight" }, item.title), selectedTask.id !== item.id && item.tag1 && /* @__PURE__ */ React56.createElement("span", { className: "shrink-0 rounded-md border border-border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground" }, item.tag1), /* @__PURE__ */ React56.createElement("span", { className: "ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/80" }, item.time)),
       /* @__PURE__ */ React56.createElement("div", { className: "flex items-start gap-2 mt-2" }, /* @__PURE__ */ React56.createElement("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${item.statusColor === "red" ? "bg-[#f43f5e]" : "bg-[#3b82f6]"}` }), /* @__PURE__ */ React56.createElement("span", { className: "text-xs text-muted-foreground leading-tight" }, item.details)),
-      /* @__PURE__ */ React56.createElement("div", { className: `absolute right-4 bottom-4 flex items-center gap-1.5 bg-background shadow-sm rounded-md px-1 py-0.5 border border-border ${selectedTask.id === item.id ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity"}` }, /* @__PURE__ */ React56.createElement(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 rounded text-muted-foreground hover:text-foreground" }, /* @__PURE__ */ React56.createElement(CheckSquare, { className: "w-3.5 h-3.5" })), /* @__PURE__ */ React56.createElement(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 rounded text-muted-foreground hover:text-foreground" }, /* @__PURE__ */ React56.createElement(Clock, { className: "w-3.5 h-3.5" })))
+      !hideHoverActions && /* @__PURE__ */ React56.createElement("div", { className: `absolute right-4 bottom-4 flex items-center gap-1.5 bg-background shadow-sm rounded-md px-1 py-0.5 border border-border ${selectedTask.id === item.id ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity"}` }, /* @__PURE__ */ React56.createElement(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 rounded text-muted-foreground hover:text-foreground" }, /* @__PURE__ */ React56.createElement(CheckSquare, { className: "w-3.5 h-3.5" })), /* @__PURE__ */ React56.createElement(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 rounded text-muted-foreground hover:text-foreground" }, /* @__PURE__ */ React56.createElement(Clock, { className: "w-3.5 h-3.5" })))
     )), /* @__PURE__ */ React56.createElement("div", { className: "p-4" }, /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-8 text-xs font-semibold rounded-md shadow-none" }, "See more")))), /* @__PURE__ */ React56.createElement("div", { className: "flex h-full flex-1 flex-col overflow-hidden bg-background" }, /* @__PURE__ */ React56.createElement("div", { className: "flex-1 overflow-y-auto" }, /* @__PURE__ */ React56.createElement(DetailView, __spreadValues({}, detailViewProps)))))
   ));
 }
@@ -9294,14 +9340,19 @@ function PrototypeInsightsView({
   analytics,
   assistantName,
   headerActions,
-  onNavigateToInbox
+  onNavigateToInbox,
+  customTabs
 }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const showOverview = (tabs == null ? void 0 : tabs.overview) !== false;
   const showAnalytics = (tabs == null ? void 0 : tabs.analytics) !== false;
   const [insightsTab, setInsightsTab] = React56.useState(
-    showOverview ? "overview" : "analytics"
+    showOverview ? "overview" : showAnalytics ? "analytics" : (_b = (_a = customTabs == null ? void 0 : customTabs[0]) == null ? void 0 : _a.id) != null ? _b : "overview"
   );
+  const allTabs = [];
+  if (showOverview) allTabs.push({ id: "overview", label: "Overview", icon: BarChart2 });
+  if (showAnalytics) allTabs.push({ id: "analytics", label: "Analytics", icon: TrendingUp });
+  if (customTabs) allTabs.push(...customTabs);
   const [showAllMetrics, setShowAllMetrics] = React56.useState(false);
   const [showCoaching, setShowCoaching] = React56.useState((coaching == null ? void 0 : coaching.enabled) !== false);
   const resolvedMetrics = metrics != null ? metrics : DEFAULT_METRICS;
@@ -9312,25 +9363,17 @@ function PrototypeInsightsView({
     recentlyCompleted: (dashboardCards == null ? void 0 : dashboardCards.recentlyCompleted) !== false,
     checkIns: (dashboardCards == null ? void 0 : dashboardCards.checkIns) !== false
   };
-  return /* @__PURE__ */ React56.createElement("div", { className: "mx-auto max-w-7xl space-y-8 p-6 md:p-8" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React56.createElement("div", null, /* @__PURE__ */ React56.createElement("h2", { className: "mb-1 text-xl font-bold tracking-tight text-foreground" }, "Insights & Overview"), /* @__PURE__ */ React56.createElement("p", { className: "text-sm text-muted-foreground" }, "Monitor your key performance indicators and daily tasks.")), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-3" }, assistantName && /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-8 gap-2 text-xs font-semibold rounded-full px-4 border-foreground text-foreground hover:bg-muted/50" }, /* @__PURE__ */ React56.createElement(MessageCircle, { className: "w-3.5 h-3.5" }), "Talk to ", assistantName), headerActions)), showOverview && showAnalytics && /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1 border-b border-border" }, /* @__PURE__ */ React56.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => setInsightsTab("overview"),
-      className: `relative px-4 py-2 text-sm font-medium transition-colors ${insightsTab === "overview" ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`
-    },
-    /* @__PURE__ */ React56.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React56.createElement(BarChart2, { className: "h-3.5 w-3.5" }), "Overview"),
-    insightsTab === "overview" && /* @__PURE__ */ React56.createElement("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-foreground rounded-full" })
-  ), /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React56.createElement("div", { className: "mx-auto max-w-7xl space-y-8 p-6 md:p-8" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React56.createElement("div", null, /* @__PURE__ */ React56.createElement("h2", { className: "mb-1 text-xl font-bold tracking-tight text-foreground" }, "Insights & Overview"), /* @__PURE__ */ React56.createElement("p", { className: "text-sm text-muted-foreground" }, "Monitor your key performance indicators and daily tasks.")), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-3" }, assistantName && /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-8 gap-2 text-xs font-semibold rounded-full px-4 border-foreground text-foreground hover:bg-muted/50" }, /* @__PURE__ */ React56.createElement(MessageCircle, { className: "w-3.5 h-3.5" }), "Talk to ", assistantName), headerActions)), allTabs.length >= 2 && /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-1 border-b border-border" }, allTabs.map((tab) => /* @__PURE__ */ React56.createElement(
     "button",
     {
+      key: tab.id,
       type: "button",
-      onClick: () => setInsightsTab("analytics"),
-      className: `relative px-4 py-2 text-sm font-medium transition-colors ${insightsTab === "analytics" ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`
+      onClick: () => setInsightsTab(tab.id),
+      className: `relative px-4 py-2 text-sm font-medium transition-colors ${insightsTab === tab.id ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`
     },
-    /* @__PURE__ */ React56.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React56.createElement(TrendingUp, { className: "h-3.5 w-3.5" }), "Analytics"),
-    insightsTab === "analytics" && /* @__PURE__ */ React56.createElement("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-foreground rounded-full" })
-  )), insightsTab === "overview" && showOverview && /* @__PURE__ */ React56.createElement(React56.Fragment, null, showCoaching && /* @__PURE__ */ React56.createElement("div", { className: "border border-border rounded-xl p-6 relative bg-card shadow-sm" }, /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React56.createElement("span", { className: "flex items-center gap-2" }, tab.icon && /* @__PURE__ */ React56.createElement(tab.icon, { className: "h-3.5 w-3.5" }), tab.label),
+    insightsTab === tab.id && /* @__PURE__ */ React56.createElement("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-foreground rounded-full" })
+  ))), insightsTab === "overview" && showOverview && /* @__PURE__ */ React56.createElement(React56.Fragment, null, showCoaching && /* @__PURE__ */ React56.createElement("div", { className: "border border-border rounded-xl p-6 relative bg-card shadow-sm" }, /* @__PURE__ */ React56.createElement(
     Button,
     {
       variant: "ghost",
@@ -9339,7 +9382,7 @@ function PrototypeInsightsView({
       onClick: () => setShowCoaching(false)
     },
     /* @__PURE__ */ React56.createElement(X, { className: "w-4 h-4" })
-  ), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React56.createElement("h3", { className: "font-bold text-foreground text-sm" }, "Daily Coaching Insight")), /* @__PURE__ */ React56.createElement("p", { className: "text-sm text-muted-foreground leading-relaxed mb-4 max-w-4xl" }, "We analyze your pipeline activity, recent communications, and account health to provide personalized recommendations for your day."), /* @__PURE__ */ React56.createElement("div", { className: "bg-brand-purple/10 rounded-lg p-5 text-[13px] text-foreground font-medium italic border border-brand-purple/20 relative" }, /* @__PURE__ */ React56.createElement("div", { className: "absolute top-0 left-0 w-1 h-full bg-brand-purple rounded-l-lg" }), (_a = coaching == null ? void 0 : coaching.message) != null ? _a : "\u201CGreat job catching the churn risk on Lunchclub yesterday. Today, focus on pushing the stalled intake pipeline. Try making 2 more touches on accounts that have gone dark this week.\u201D"), /* @__PURE__ */ React56.createElement("div", { className: "mt-4 flex items-center gap-2" }, /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-7 text-xs text-muted-foreground hover:text-foreground shadow-none" }, /* @__PURE__ */ React56.createElement(ThumbsUp, { className: "w-3.5 h-3.5 mr-1.5" }), " Helpful"), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-7 text-xs text-muted-foreground hover:text-foreground shadow-none" }, /* @__PURE__ */ React56.createElement(ThumbsDown, { className: "w-3.5 h-3.5 mr-1.5" }), " Not Helpful"), /* @__PURE__ */ React56.createElement("div", { className: "relative max-w-sm ml-2 flex-1" }, /* @__PURE__ */ React56.createElement(Input, { placeholder: "Provide additional feedback...", className: "h-7 text-xs shadow-none border-border bg-muted/20 w-full" })))), /* @__PURE__ */ React56.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React56.createElement("h3", { className: "text-sm font-semibold text-foreground uppercase tracking-wider" }, "Key Metrics"), resolvedExpandedMetrics.length > 0 && /* @__PURE__ */ React56.createElement(
+  ), /* @__PURE__ */ React56.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React56.createElement("h3", { className: "font-bold text-foreground text-sm" }, "Daily Coaching Insight")), /* @__PURE__ */ React56.createElement("p", { className: "text-sm text-muted-foreground leading-relaxed mb-4 max-w-4xl" }, "We analyze your pipeline activity, recent communications, and account health to provide personalized recommendations for your day."), /* @__PURE__ */ React56.createElement("div", { className: "bg-brand-purple/10 rounded-lg p-5 text-[13px] text-foreground font-medium italic border border-brand-purple/20 relative" }, /* @__PURE__ */ React56.createElement("div", { className: "absolute top-0 left-0 w-1 h-full bg-brand-purple rounded-l-lg" }), (_c = coaching == null ? void 0 : coaching.message) != null ? _c : "\u201CGreat job catching the churn risk on Lunchclub yesterday. Today, focus on pushing the stalled intake pipeline. Try making 2 more touches on accounts that have gone dark this week.\u201D"), /* @__PURE__ */ React56.createElement("div", { className: "mt-4 flex items-center gap-2" }, /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-7 text-xs text-muted-foreground hover:text-foreground shadow-none" }, /* @__PURE__ */ React56.createElement(ThumbsUp, { className: "w-3.5 h-3.5 mr-1.5" }), " Helpful"), /* @__PURE__ */ React56.createElement(Button, { variant: "outline", size: "sm", className: "h-7 text-xs text-muted-foreground hover:text-foreground shadow-none" }, /* @__PURE__ */ React56.createElement(ThumbsDown, { className: "w-3.5 h-3.5 mr-1.5" }), " Not Helpful"), /* @__PURE__ */ React56.createElement("div", { className: "relative max-w-sm ml-2 flex-1" }, /* @__PURE__ */ React56.createElement(Input, { placeholder: "Provide additional feedback...", className: "h-7 text-xs shadow-none border-border bg-muted/20 w-full" })))), /* @__PURE__ */ React56.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React56.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React56.createElement("h3", { className: "text-sm font-semibold text-foreground uppercase tracking-wider" }, "Key Metrics"), resolvedExpandedMetrics.length > 0 && /* @__PURE__ */ React56.createElement(
     Button,
     {
       variant: "ghost",
@@ -9362,7 +9405,7 @@ function PrototypeInsightsView({
       title: "Volume Analysis",
       subtitle: "Referral volume broken down by facility over time",
       filterOptions: analytics.volumeChart.filterOptions,
-      selectedFilter: (_c = (_b = analytics.volumeChart.filterOptions) == null ? void 0 : _b[0]) == null ? void 0 : _c.value
+      selectedFilter: (_e = (_d = analytics.volumeChart.filterOptions) == null ? void 0 : _d[0]) == null ? void 0 : _e.value
     },
     /* @__PURE__ */ React56.createElement(
       VolumeAnalysisChart,
@@ -9384,15 +9427,15 @@ function PrototypeInsightsView({
       title: "Referrals Over Time",
       subtitle: "Weekly appointment trends",
       toggleOptions: analytics.trendChart.toggleOptions,
-      selectedToggle: (_d = analytics.trendChart.toggleOptions) == null ? void 0 : _d[0]
+      selectedToggle: (_f = analytics.trendChart.toggleOptions) == null ? void 0 : _f[0]
     },
     /* @__PURE__ */ React56.createElement(
       TrendAreaChart,
       {
         data: analytics.trendChart.data,
         series: analytics.trendChart.series,
-        xAxisKey: (_e = analytics.trendChart.xAxisKey) != null ? _e : "name",
-        height: (_f = analytics.trendChart.height) != null ? _f : 220
+        xAxisKey: (_g = analytics.trendChart.xAxisKey) != null ? _g : "name",
+        height: (_h = analytics.trendChart.height) != null ? _h : 220
       }
     )
   )), ((analytics == null ? void 0 : analytics.barChart) || (analytics == null ? void 0 : analytics.barList)) && /* @__PURE__ */ React56.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6" }, (analytics == null ? void 0 : analytics.barChart) && /* @__PURE__ */ React56.createElement(
@@ -9415,7 +9458,9 @@ function PrototypeInsightsView({
       data: analytics.barList.data,
       valueFormatter: analytics.barList.valueFormatter
     }
-  )))));
+  )))), customTabs == null ? void 0 : customTabs.map(
+    (tab) => insightsTab === tab.id ? /* @__PURE__ */ React56.createElement("div", { key: tab.id }, tab.content) : null
+  ));
 }
 var DEFAULT_FILTER_TABS = [
   { label: "All Accounts", count: 6, variant: "default" },
@@ -9425,7 +9470,17 @@ var DEFAULT_FILTER_TABS = [
 function PrototypeAccountsView({
   filterTabs,
   headerActions,
-  onRowClick
+  onRowClick,
+  rows,
+  filterCategories,
+  quickViews,
+  moreQuickViews,
+  quickViewFilters,
+  iconMap,
+  entityUrlBuilder,
+  onScoreFactorFeedback,
+  onScoreApproveFeedback,
+  onScoreDismissFeedback
 }) {
   const tabs = filterTabs != null ? filterTabs : DEFAULT_FILTER_TABS;
   return /* @__PURE__ */ React56.createElement("div", { className: "flex flex-col h-full w-full bg-background relative" }, headerActions && /* @__PURE__ */ React56.createElement("div", { className: "absolute top-4 right-4 z-10" }, headerActions), /* @__PURE__ */ React56.createElement("div", { className: "px-4 py-3 border-b border-border flex items-center gap-2 overflow-x-auto shrink-0 mt-2" }, tabs.map((tab, i) => {
@@ -9436,7 +9491,22 @@ function PrototypeAccountsView({
       return /* @__PURE__ */ React56.createElement(Button, { key: i, variant: "ghost", size: "sm", className: "h-7 text-xs rounded-md border border-border bg-transparent font-medium" }, tab.label, tab.count != null && /* @__PURE__ */ React56.createElement(Badge, { variant: "secondary", className: "ml-2 h-4 px-1.5 text-[10px]" }, tab.count));
     }
     return /* @__PURE__ */ React56.createElement(Button, { key: i, variant: "secondary", size: "sm", className: "h-7 text-xs rounded-md bg-muted font-medium" }, tab.label, tab.count != null && /* @__PURE__ */ React56.createElement(Badge, { variant: "outline", className: "ml-2 h-4 px-1.5 text-[10px]" }, tab.count));
-  })), /* @__PURE__ */ React56.createElement("div", { className: "flex-1 overflow-auto" }, /* @__PURE__ */ React56.createElement(DataTable, { onRowClick })));
+  })), /* @__PURE__ */ React56.createElement("div", { className: "flex-1 overflow-auto" }, /* @__PURE__ */ React56.createElement(
+    DataTable,
+    {
+      onRowClick,
+      rows,
+      filterCategories,
+      quickViews,
+      moreQuickViews,
+      quickViewFilters,
+      iconMap,
+      entityUrlBuilder,
+      onScoreFactorFeedback,
+      onScoreApproveFeedback,
+      onScoreDismissFeedback
+    }
+  )));
 }
 function PrototypeWorkQueueView({
   headerActions