@wealthx/shadcn 1.1.0 → 1.2.0

package/dist/chunk-4MN6UQHG.mjs

@@ -0,0 +1,443 @@
+import {
+  TaskCheckItem
+} from "./chunk-FMAXJ2SI.mjs";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-EFRENWEJ.mjs";
+import {
+  Badge
+} from "./chunk-WAZD7NFU.mjs";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "./chunk-MARPPFOJ.mjs";
+import {
+  Separator
+} from "./chunk-FH6QVUVZ.mjs";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-2I5S2AMY.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/opportunity-card.tsx
+import {
+  Phone,
+  Mail,
+  User,
+  Users,
+  Calendar,
+  MoreVertical,
+  Clock,
+  ArrowRight,
+  Bot
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PRIORITY_COLORS = {
+  HIGH: "var(--color-destructive)",
+  MEDIUM: "var(--color-warning)",
+  LOW: "var(--color-success)",
+  NONE: "var(--color-muted-foreground)"
+};
+var PRIORITY_TEXT_COLORS = {
+  HIGH: "var(--color-destructive-text)",
+  MEDIUM: "var(--color-warning-text)",
+  LOW: "var(--color-success-text)",
+  NONE: "var(--color-muted-foreground)"
+};
+function resolvePriority(days, warningDays, priorityDays, priority) {
+  if (days === void 0) return priority;
+  if (priorityDays !== void 0 && days >= priorityDays) return "HIGH";
+  if (warningDays !== void 0 && days >= warningDays) return "MEDIUM";
+  if (warningDays !== void 0 || priorityDays !== void 0) return "LOW";
+  return priority;
+}
+function formatAmount(amount) {
+  return new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    maximumFractionDigits: 0
+  }).format(amount);
+}
+function formatDate(iso) {
+  try {
+    return new Date(iso).toLocaleDateString("en-AU", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric"
+    });
+  } catch (e) {
+    return iso;
+  }
+}
+function formatHoldDate(iso) {
+  try {
+    return new Date(iso).toLocaleDateString("en-AU", {
+      day: "2-digit",
+      month: "short"
+    });
+  } catch (e) {
+    return iso;
+  }
+}
+function formatLoanType(type) {
+  return type.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function OpportunityCard({
+  customerName,
+  customerPhone,
+  customerEmail,
+  additionalContacts,
+  loanType,
+  loanPurposeLabel,
+  amount,
+  date,
+  priority,
+  daysSinceColumnChanged,
+  warningDays,
+  priorityDays,
+  onHoldTo,
+  isModifyCompletedLoan,
+  tasks = [],
+  nextTask,
+  onViewDetails,
+  onTaskToggle,
+  onMarkAsDone,
+  onMoveToNextStage,
+  onLaunchAssistant,
+  onChangePriority,
+  onDelete,
+  onPutOnHold,
+  isSubmitting = false,
+  className
+}) {
+  const resolvedPriority = resolvePriority(
+    daysSinceColumnChanged,
+    warningDays,
+    priorityDays,
+    priority
+  );
+  const priorityColor = PRIORITY_COLORS[resolvedPriority];
+  const priorityTextColor = PRIORITY_TEXT_COLORS[resolvedPriority];
+  const completedCount = tasks.filter((t) => t.completed).length;
+  const hasTasks = tasks.length > 0;
+  const hasActions = onMarkAsDone || onMoveToNextStage;
+  const hasMenu = onViewDetails || onChangePriority || onPutOnHold || onDelete;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-2 border border-border bg-background p-4 text-foreground shadow-sm",
+        isSubmitting && "opacity-60",
+        className
+      ),
+      "data-slot": "opportunity-card",
+      children: [
+        onHoldTo && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1.5 rounded border border-warning/30 bg-warning/10 px-2 py-1 text-xs font-medium",
+            style: { color: "var(--color-warning-text)" },
+            children: [
+              /* @__PURE__ */ jsx(Clock, { className: "size-3 shrink-0" }),
+              "On hold until ",
+              formatHoldDate(onHoldTo)
+            ]
+          }
+        ),
+        isModifyCompletedLoan && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-center gap-1.5 rounded border border-info/30 bg-info/10 px-2 py-1 text-xs font-medium",
+            style: { color: "var(--color-info-text)" },
+            children: "Modify completed loan"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            (loanPurposeLabel || loanType) && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "self-start", children: loanPurposeLabel != null ? loanPurposeLabel : formatLoanType(loanType) }),
+            /* @__PURE__ */ jsx("span", { className: "text-base font-bold tabular-nums text-foreground", children: formatAmount(amount) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 -mr-1 -mt-1", children: [
+            onLaunchAssistant && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  buttonVariants({ variant: "ghost", size: "icon" }),
+                  "size-7 shrink-0"
+                ),
+                onClick: onLaunchAssistant,
+                "aria-label": "Launch AI Assistant",
+                title: "Launch AI Assistant",
+                children: /* @__PURE__ */ jsx(Bot, { className: "size-4" })
+              }
+            ),
+            hasMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
+                {
+                  className: cn(
+                    buttonVariants({ variant: "ghost", size: "icon" }),
+                    "size-7 shrink-0"
+                  ),
+                  "aria-label": "Opportunity actions",
+                  children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                onViewDetails && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onViewDetails, children: "View details" }),
+                onChangePriority && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onChangePriority, children: "Change priority" }),
+                onPutOnHold && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onPutOnHold, children: "Put on hold" }),
+                onDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onDelete, variant: "destructive", children: "Delete" })
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: customerName }),
+            additionalContacts && additionalContacts > 0 ? /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx(Users, { className: "size-3", "aria-hidden": "true" }),
+              "Joint"
+            ] }) : /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1", children: [
+              /* @__PURE__ */ jsx(User, { className: "size-3", "aria-hidden": "true" }),
+              "Individual"
+            ] })
+          ] }),
+          customerPhone && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Phone, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+            customerPhone
+          ] }),
+          customerEmail && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Mail, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: customerEmail })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Calendar, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+            formatDate(date)
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            daysSinceColumnChanged !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Clock,
+                {
+                  className: "size-3 shrink-0",
+                  style: { color: priorityTextColor },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "text-xs font-medium tabular-nums",
+                  style: { color: priorityTextColor },
+                  children: [
+                    daysSinceColumnChanged,
+                    "d"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "img",
+                className: "inline-block size-2 shrink-0 rounded-full",
+                style: { backgroundColor: priorityColor },
+                "aria-label": `Priority: ${resolvedPriority}`
+              }
+            )
+          ] })
+        ] }),
+        hasTasks && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex gap-0.5",
+              role: "progressbar",
+              "aria-valuenow": completedCount,
+              "aria-valuemin": 0,
+              "aria-valuemax": tasks.length,
+              "aria-label": `${completedCount} of ${tasks.length} tasks complete`,
+              children: tasks.map((t, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-[7px] flex-1",
+                    i < completedCount ? "bg-primary" : "bg-muted"
+                  )
+                },
+                t.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "-mx-4", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "tasks", className: "border-0", children: [
+            /* @__PURE__ */ jsxs(AccordionTrigger, { className: "px-4 py-1.5 text-xs font-normal text-muted-foreground hover:no-underline hover:text-foreground [&>svg]:size-3.5", children: [
+              "Tasks (",
+              completedCount,
+              "/",
+              tasks.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(AccordionContent, { className: "px-4", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: tasks.map((task) => /* @__PURE__ */ jsx(
+              TaskCheckItem,
+              {
+                title: task.title,
+                completed: task.completed,
+                aiAgentName: task.aiAgentName,
+                onToggle: onTaskToggle ? () => onTaskToggle(task.id) : void 0,
+                disabled: isSubmitting
+              },
+              task.id
+            )) }) })
+          ] }) }),
+          nextTask && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 border border-primary/30 bg-primary/5 px-2 py-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(
+              ArrowRight,
+              {
+                className: "mt-0.5 size-3 shrink-0 text-primary",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Next:" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: nextTask })
+          ] })
+        ] }),
+        hasActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          (onMoveToNextStage || onMarkAsDone) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            onMoveToNextStage && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "flex-1 text-caption",
+                onClick: onMoveToNextStage,
+                disabled: isSubmitting,
+                children: "Move to next stage"
+              }
+            ),
+            onMarkAsDone && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                size: "sm",
+                className: "flex-1 text-caption",
+                onClick: onMarkAsDone,
+                disabled: isSubmitting,
+                children: "Mark as done"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function LeadCard({
+  customerName,
+  customerPhone,
+  customerEmail,
+  onSendLoanApplication,
+  loanApplicationUrl,
+  onDelete,
+  isSubmitting = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 border border-border bg-background p-4 text-foreground shadow-sm",
+        isSubmitting && "opacity-60",
+        className
+      ),
+      "data-slot": "lead-card",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: customerName }),
+            customerPhone && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Phone, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+              customerPhone
+            ] }),
+            customerEmail && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Mail, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: customerEmail })
+            ] })
+          ] }),
+          onDelete && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownMenuTrigger,
+              {
+                className: cn(
+                  buttonVariants({ variant: "ghost", size: "icon" }),
+                  "-mr-1 -mt-1 size-7 shrink-0"
+                ),
+                "aria-label": "Lead actions",
+                children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                onClick: onDelete,
+                className: "text-destructive focus:text-destructive",
+                children: "Delete"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        onSendLoanApplication && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "w-full text-caption",
+              onClick: onSendLoanApplication,
+              disabled: isSubmitting,
+              children: "Send Loan Application Request"
+            }
+          ),
+          loanApplicationUrl && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "Or the link below to fill out the loan application directly.",
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `https://${loanApplicationUrl.replace(/^https?:\/\//, "")}`,
+                target: "_blank",
+                rel: "noreferrer",
+                className: "text-primary underline-offset-2 hover:underline",
+                children: loanApplicationUrl
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  OpportunityCard,
+  LeadCard
+};

package/dist/{chunk-GLW2UO6O.mjs → chunk-5QQVZTVZ.mjs}

@@ -1,33 +1,34 @@
+import {
+  Skeleton
+} from "./chunk-D6ID6M4V.mjs";
 import {
   CHART_PERIODS,
   CHART_SLICE_COUNT,
   ChartLegendItem,
   ChartPeriodButton,
   DATASET_ALPHAS,
+  FALLBACK_PRIMARY,
   FALLBACK_TICK,
   formatTooltipDate,
   hexToRgba
-} from "./chunk-3EQP72AW.mjs";
-import {
-  Skeleton
-} from "./chunk-HS7TFG7V.mjs";
+} from "./chunk-FZIXGLMV.mjs";
 import {
   Empty,
   EmptyDescription
-} from "./chunk-YN5SYTOO.mjs";
+} from "./chunk-NQPOYKAQ.mjs";
 import {
   Card,
   CardAction,
   CardContent,
   CardHeader,
   CardTitle
-} from "./chunk-SLWCCURD.mjs";
+} from "./chunk-CLIN5525.mjs";
 import {
   useThemeVars
-} from "./chunk-OXQQNQZI.mjs";
+} from "./chunk-FEZKMUCF.mjs";
 import {
   cn
-} from "./chunk-V7CNWJT3.mjs";
+} from "./chunk-VLQZANBF.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -46,7 +47,6 @@ import {
 import { Chart } from "react-chartjs-2";
 import { jsx, jsxs } from "react/jsx-runtime";
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
-var FALLBACK_PRIMARY = "#33FF99";
 function IncomeBarChart({
   incomeData,
   title = "Income",
@@ -73,10 +73,14 @@ function IncomeBarChart({
   }, [granularity]);
   const themeVars = useThemeVars();
   const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
   const sliced = useMemo(() => {
     var _a, _b;
     if (!((_a = incomeData == null ? void 0 : incomeData.months) == null ? void 0 : _a.length) || !incomeData.datasets.length) return null;
-    const count = Math.min(CHART_SLICE_COUNT[granularity][period], incomeData.months.length);
+    const count = Math.min(
+      CHART_SLICE_COUNT[granularity][period],
+      incomeData.months.length
+    );
     const start = incomeData.months.length - count;
     return {
       months: incomeData.months.slice(start),
@@ -116,65 +120,68 @@ function IncomeBarChart({
       }))
     };
   }, [sliced, datasetColors, brandPrimary]);
-  const options = useMemo(() => ({
-    responsive: true,
-    maintainAspectRatio: false,
-    animation: { duration: 800, easing: "easeOutQuart" },
-    layout: { padding: 0 },
-    plugins: {
-      legend: { display: false },
-      tooltip: {
-        mode: "index",
-        intersect: false,
-        padding: 12,
-        cornerRadius: 0,
-        titleFont: { size: 11, weight: "600" },
-        bodyFont: { size: 12, weight: "500" },
-        callbacks: {
-          title: (tooltipItems) => {
-            var _a, _b, _c, _d;
-            const idx = (_a = tooltipItems[0]) == null ? void 0 : _a.dataIndex;
-            if (idx != null && ((_b = sliced == null ? void 0 : sliced.dates) == null ? void 0 : _b[idx])) {
-              return formatTooltipDate(sliced.dates[idx], granularity);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              var _a, _b, _c, _d;
+              const idx = (_a = tooltipItems[0]) == null ? void 0 : _a.dataIndex;
+              if (idx != null && ((_b = sliced == null ? void 0 : sliced.dates) == null ? void 0 : _b[idx])) {
+                return formatTooltipDate(sliced.dates[idx], granularity);
+              }
+              return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
             }
-            return (_d = (_c = tooltipItems[0]) == null ? void 0 : _c.label) != null ? _d : "";
-          },
-          label: (ctx) => {
-            const val = ctx.raw;
-            if (val === 0) return null;
-            return ` ${ctx.dataset.label}: $${val.toLocaleString()}`;
           }
         }
-      }
-    },
-    scales: {
-      x: {
-        display: showXAxis,
-        stacked: true,
-        grid: { display: false },
-        border: { display: false },
-        ticks: { font: { size: 10 }, color: FALLBACK_TICK }
       },
-      y: {
-        display: showYAxis,
-        stacked: true,
-        grid: { display: false },
-        border: { display: false },
-        ticks: {
-          font: { size: 10 },
-          color: FALLBACK_TICK,
-          maxTicksLimit: 5,
-          padding: 8,
-          callback: (v) => `$${Number(v).toLocaleString()}`
+      scales: {
+        x: {
+          display: showXAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+        },
+        y: {
+          display: showYAxis,
+          stacked: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            font: { size: 10 },
+            color: FALLBACK_TICK,
+            maxTicksLimit: 5,
+            padding: 8,
+            callback: (v) => `$${Number(v).toLocaleString()}`
+          }
         }
       }
-    }
-  }), [showXAxis, showYAxis, sliced, granularity]);
+    }),
+    [showXAxis, showYAxis, sliced, granularity]
+  );
   return /* @__PURE__ */ jsxs(
     Card,
     {
       className: cn("w-full py-4 sm:py-6 gap-2", className),
-      style: { maxWidth: width },
+      style: { maxWidth: width, fontFamily },
       children: [
         /* @__PURE__ */ jsxs(CardHeader, { className: "px-3 sm:px-6", children: [
           /* @__PURE__ */ jsx(CardTitle, { className: "text-sm sm:text-base", children: title }),
@@ -189,7 +196,14 @@ function IncomeBarChart({
           )) }) })
         ] }),
         /* @__PURE__ */ jsx(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { style: { height, width: "100%" } }) : !sliced ? /* @__PURE__ */ jsx(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ jsx(EmptyDescription, { children: "No data available" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          showLegend && legendPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ jsx(ChartLegendItem, { label: ds.label, color: datasetColors[i] }, ds.label)) }),
+          showLegend && legendPosition === "top" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ jsx(
+            ChartLegendItem,
+            {
+              label: ds.label,
+              color: datasetColors[i]
+            },
+            ds.label
+          )) }),
           /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
             Chart,
             {
@@ -200,7 +214,14 @@ function IncomeBarChart({
             },
             brandPrimary
           ) }),
-          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pt-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ jsx(ChartLegendItem, { label: ds.label, color: datasetColors[i] }, ds.label)) })
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pt-2", children: sliced.datasets.map((ds, i) => /* @__PURE__ */ jsx(
+            ChartLegendItem,
+            {
+              label: ds.label,
+              color: datasetColors[i]
+            },
+            ds.label
+          )) })
         ] }) })
       ]
     }