@wealthx/shadcn 1.4.1 → 1.5.0

package/dist/{chunk-S2FKV4M5.mjs → chunk-BDESHD25.mjs}

@@ -6,9 +6,6 @@ import {
   FALLBACK_PRIMARY,
   FALLBACK_SECONDARY
 } from "./chunk-YEWNFK5S.mjs";
-import {
-  formatCurrencyAbbrev
-} from "./chunk-MN5NYQCL.mjs";
 import {
   Empty,
   EmptyDescription
@@ -21,7 +18,10 @@ import {
 } from "./chunk-3VDET466.mjs";
 import {
   useThemeVars
-} from "./chunk-FEZKMUCF.mjs";
+} from "./chunk-WDTXHLYM.mjs";
+import {
+  formatCurrencyAbbrev
+} from "./chunk-MN5NYQCL.mjs";
 import {
   cn
 } from "./chunk-AFML43VJ.mjs";

package/dist/{chunk-OKTJFDPN.mjs → chunk-BFB3UH7V.mjs}

@@ -2,10 +2,10 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-DGNHGNYH.mjs";
+} from "./chunk-C6SWS7OW.mjs";
 import {
   Calendar
-} from "./chunk-6HIOM2HL.mjs";
+} from "./chunk-Q35PNFJ7.mjs";
 import {
   Input
 } from "./chunk-LBTHZSBT.mjs";

package/dist/{chunk-DGNHGNYH.mjs → chunk-C6SWS7OW.mjs}

@@ -1,6 +1,6 @@
 import {
   useThemeVars
-} from "./chunk-FEZKMUCF.mjs";
+} from "./chunk-WDTXHLYM.mjs";
 import {
   cn
 } from "./chunk-AFML43VJ.mjs";

package/dist/chunk-CDVG7SFT.mjs

@@ -0,0 +1,271 @@
+import {
+  Skeleton
+} from "./chunk-GTAVSBDO.mjs";
+import {
+  ChartLegendItem,
+  ChartPeriodButton,
+  FALLBACK_TICK,
+  formatCount,
+  formatMonthLabel,
+  formatTooltipDate,
+  hexToRgba
+} from "./chunk-YEWNFK5S.mjs";
+import {
+  Empty,
+  EmptyDescription
+} from "./chunk-R2ON6CAN.mjs";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "./chunk-3VDET466.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-OWFQSXVD.mjs";
+import {
+  useThemeVars
+} from "./chunk-WDTXHLYM.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+
+// src/components/ui/backoffice-alert-matching-chart.tsx
+import { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip
+);
+var PERIODS = [3, 6, 12];
+var SLICE_COUNT = { 3: 3, 6: 6, 12: 12 };
+var HEALTHY_COLOR = "#166d42";
+var WATCH_COLOR = "#EF6C00";
+var NEED_ACTION_COLOR = "#F44336";
+function AlertMatchingLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Healthy",
+        color: HEALTHY_COLOR,
+        lineStyle: "solid"
+      }
+    ),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Watch", color: WATCH_COLOR, lineStyle: "solid" }),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Need Action",
+        color: NEED_ACTION_COLOR,
+        lineStyle: "solid"
+      }
+    )
+  ] });
+}
+function BackofficeAlertMatchingChart({
+  chartData,
+  title = "Alert Matching History",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false
+}) {
+  const [period, setPeriod] = useState(defaultPeriod);
+  const [chartType, setChartType] = useState("line");
+  const themeVars = useThemeVars();
+  const fontFamily = themeVars["--font-sans"] || "Figtree, sans-serif";
+  const sliced = useMemo(() => {
+    if (!(chartData == null ? void 0 : chartData.length)) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+  const labels = useMemo(
+    () => {
+      var _a;
+      return (_a = sliced == null ? void 0 : sliced.map((p) => formatMonthLabel(p.date))) != null ? _a : [];
+    },
+    [sliced]
+  );
+  const isBar = chartType === "bar";
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "Healthy",
+        data: sliced.map((p) => p.healthy),
+        borderColor: HEALTHY_COLOR,
+        backgroundColor: isBar ? HEALTHY_COLOR : hexToRgba(HEALTHY_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Watch",
+        data: sliced.map((p) => p.watch),
+        borderColor: WATCH_COLOR,
+        backgroundColor: isBar ? WATCH_COLOR : hexToRgba(WATCH_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Need Action",
+        data: sliced.map((p) => p.needAction),
+        borderColor: NEED_ACTION_COLOR,
+        backgroundColor: isBar ? NEED_ACTION_COLOR : hexToRgba(NEED_ACTION_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      }
+    ];
+  }, [sliced, chartType, isBar]);
+  const options = useMemo(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      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[idx]) == null ? void 0 : _b.date)) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              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}: ${formatCount(val)}`;
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 }
+          }
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v))
+          }
+        }
+      }
+    }),
+    [showXAxis, showYAxis, sliced]
+  );
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("w-full py-4 sm:py-6 gap-2", className),
+      style: { maxWidth: width, fontFamily },
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "px-3 sm:px-6", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
+          /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              ToggleGroup,
+              {
+                type: "single",
+                variant: "outline",
+                size: "sm",
+                value: chartType,
+                onValueChange: (v) => v && setChartType(v),
+                children: [
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "line", "aria-label": "Line chart", children: /* @__PURE__ */ jsx(LineChart, { className: "size-3.5" }) }),
+                  /* @__PURE__ */ jsx(ToggleGroupItem, { value: "bar", "aria-label": "Bar chart", children: /* @__PURE__ */ jsx(BarChart2, { className: "size-3.5" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 sm:gap-1", children: PERIODS.map((p) => /* @__PURE__ */ jsx(
+              ChartPeriodButton,
+              {
+                period: p,
+                active: period === p,
+                onClick: () => setPeriod(p)
+              },
+              p
+            )) })
+          ] }) })
+        ] }),
+        /* @__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(AlertMatchingLegend, {}),
+          /* @__PURE__ */ jsx("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            Chart,
+            {
+              type: chartType,
+              data: { labels, datasets },
+              options,
+              "aria-label": title
+            },
+            chartType
+          ) }),
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ jsx(AlertMatchingLegend, {})
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BackofficeAlertMatchingChart
+};

package/dist/chunk-CUSHAIUL.mjs

@@ -0,0 +1,109 @@
+import {
+  UploadCard
+} from "./chunk-I4KVSZCH.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-NCUH54IZ.mjs";
+import {
+  Button
+} from "./chunk-NOOEKOWY.mjs";
+
+// src/components/ui/csv-import-modal.tsx
+import { FileTextIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatBytes(bytes) {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function CsvImportModal({
+  open,
+  onOpenChange,
+  fileName,
+  fileSize,
+  onFileSelect,
+  onFileClear,
+  onNext,
+  onDownloadTemplate,
+  isLoading = false,
+  className
+}) {
+  const hasFile = !!fileName;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: isLoading ? void 0 : onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "md", className, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Import Contacts" }) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "Upload a CSV file to bulk-import contacts into WealthX.",
+      " ",
+      onDownloadTemplate ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDownloadTemplate,
+          className: "text-primary underline-offset-2 hover:underline",
+          children: "Download the CSV template"
+        }
+      ) : "Download the CSV template",
+      " ",
+      "to get started."
+    ] }),
+    hasFile ? /* @__PURE__ */ jsx(
+      SelectedFile,
+      {
+        name: fileName,
+        size: fileSize,
+        onClear: onFileClear
+      }
+    ) : /* @__PURE__ */ jsx(
+      UploadCard,
+      {
+        size: "lg",
+        label: "Drag & drop or click to upload",
+        description: "Supports .csv files only. Max 10 MB.",
+        accept: ".csv",
+        onFileChange: (file) => file && (onFileSelect == null ? void 0 : onFileSelect(file))
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          disabled: isLoading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { disabled: !hasFile || isLoading, onClick: onNext, children: "Next" })
+    ] })
+  ] }) });
+}
+function SelectedFile({
+  name,
+  size,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border border-border bg-muted/30 px-4 py-3", children: [
+    /* @__PURE__ */ jsx(FileTextIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: name }),
+      size !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatBytes(size) })
+    ] }),
+    onClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        "aria-label": "Remove file",
+        className: "shrink-0 text-muted-foreground hover:text-foreground",
+        children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+      }
+    )
+  ] });
+}
+
+export {
+  CsvImportModal
+};

package/dist/{chunk-QXKGOMUX.mjs → chunk-CW32WTZU.mjs}

@@ -1,16 +1,16 @@
 import {
   Sheet,
   SheetContent
-} from "./chunk-4MM7LHM5.mjs";
+} from "./chunk-J5NW5NCT.mjs";
+import {
+  Spinner
+} from "./chunk-JVMXMFBB.mjs";
 import {
   Textarea
 } from "./chunk-BS75ICOO.mjs";
 import {
   Badge
 } from "./chunk-WL6WVV47.mjs";
-import {
-  Spinner
-} from "./chunk-JVMXMFBB.mjs";
 import {
   Button
 } from "./chunk-NOOEKOWY.mjs";

package/dist/{chunk-SET2ANTY.mjs → chunk-D447W45Z.mjs}

@@ -1,9 +1,9 @@
+import {
+  useThemeVars
+} from "./chunk-WDTXHLYM.mjs";
 import {
   formatCurrencyAbbrev
 } from "./chunk-MN5NYQCL.mjs";
-import {
-  useThemeVars
-} from "./chunk-FEZKMUCF.mjs";
 import {
   cn
 } from "./chunk-AFML43VJ.mjs";

package/dist/{chunk-RCAOCHWA.mjs → chunk-DFL5CV75.mjs}

@@ -1,25 +1,12 @@
-import {
-  Avatar,
-  AvatarFallback
-} from "./chunk-H6NQTIF4.mjs";
 import {
   AppointmentSlotSection
-} from "./chunk-5VOTTIXF.mjs";
-import {
-  Textarea
-} from "./chunk-BS75ICOO.mjs";
-import {
-  Badge
-} from "./chunk-WL6WVV47.mjs";
-import {
-  Calendar
-} from "./chunk-6HIOM2HL.mjs";
-import {
-  Label
-} from "./chunk-P7CEBZM6.mjs";
+} from "./chunk-FRT3S72S.mjs";
 import {
   Separator
 } from "./chunk-2GIYVERS.mjs";
+import {
+  Textarea
+} from "./chunk-BS75ICOO.mjs";
 import {
   Dialog,
   DialogClose,
@@ -28,7 +15,20 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from "./chunk-P2N2PEFY.mjs";
+} from "./chunk-NCUH54IZ.mjs";
+import {
+  Avatar,
+  AvatarFallback
+} from "./chunk-H6NQTIF4.mjs";
+import {
+  Badge
+} from "./chunk-WL6WVV47.mjs";
+import {
+  Calendar
+} from "./chunk-Q35PNFJ7.mjs";
+import {
+  Label
+} from "./chunk-P7CEBZM6.mjs";
 import {
   Button
 } from "./chunk-NOOEKOWY.mjs";

package/dist/chunk-DYSVJ473.mjs

@@ -0,0 +1,162 @@
+import {
+  CurrencyInputWithSlider
+} from "./chunk-MXP2RX2V.mjs";
+import {
+  Switch
+} from "./chunk-PNSYFE3K.mjs";
+import {
+  Input
+} from "./chunk-LBTHZSBT.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+
+// src/components/ui/expense-detail-item.tsx
+import { useState, useCallback } from "react";
+import {
+  Baby,
+  Car,
+  DollarSign,
+  Gift,
+  Home,
+  Info,
+  ShoppingCart,
+  Shield,
+  Smartphone
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXPENSE_ICON_MAP = {
+  housing: Home,
+  transport: Car,
+  groceries: ShoppingCart,
+  childcare: Baby,
+  insurance: Shield,
+  entertainment: Gift,
+  utilities: Smartphone,
+  // phone / internet / subscriptions
+  other: DollarSign
+};
+function ExpenseDetailItem({
+  type,
+  label,
+  description,
+  amount,
+  totalExpenses,
+  hasCoApplicant = false,
+  isShared = false,
+  sharedPercent: initialPercent = 50,
+  onAmountChange,
+  onSharedChange,
+  onSharedPercentChange,
+  onDelete,
+  className
+}) {
+  var _a;
+  const Icon = (_a = EXPENSE_ICON_MAP[type]) != null ? _a : DollarSign;
+  const fillPct = totalExpenses && totalExpenses > 0 ? Math.min(100, amount / totalExpenses * 100) : 0;
+  const [percent, setPercent] = useState(String(initialPercent));
+  const handlePercentBlur = useCallback(() => {
+    const parsed = Math.max(0, Math.min(100, parseInt(percent, 10) || 0));
+    setPercent(String(parsed));
+    onSharedPercentChange == null ? void 0 : onSharedPercentChange(parsed);
+  }, [percent, onSharedPercentChange]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-6 font-sans", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-9 shrink-0 items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "size-5 text-muted-foreground", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-body-small font-medium text-foreground", children: label }),
+        description && /* @__PURE__ */ jsx(
+          "span",
+          {
+            title: description,
+            className: "cursor-help text-muted-foreground",
+            children: /* @__PURE__ */ jsx(Info, { className: "size-3.5", "aria-hidden": "true" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-2 w-full max-w-[274px] bg-muted", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full bg-foreground transition-all",
+          style: { width: `${fillPct}%` },
+          role: "progressbar",
+          "aria-label": `${label} proportion of total expenses`,
+          "aria-valuenow": fillPct,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100
+        }
+      ) }),
+      hasCoApplicant && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Expense shared equally" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "No" }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                size: "sm",
+                checked: isShared,
+                onCheckedChange: onSharedChange,
+                "aria-label": "Expense shared equally"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Yes" })
+          ] })
+        ] }),
+        isShared && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: "text-xs text-muted-foreground",
+              htmlFor: `shared-percent-${label}`,
+              children: "Shared percent"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-20", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `shared-percent-${label}`,
+                type: "number",
+                min: 0,
+                max: 100,
+                value: percent,
+                onChange: (e) => setPercent(e.target.value),
+                onBlur: handlePercentBlur,
+                className: "pr-6 text-sm",
+                "aria-label": `${label} shared percent`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground", children: "%" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-64 shrink-0 flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        CurrencyInputWithSlider,
+        {
+          value: amount,
+          min: 0,
+          max: 2e4,
+          step: 50,
+          onValueChange: onAmountChange
+        }
+      ),
+      onDelete && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDelete,
+          "aria-label": "Delete expense",
+          className: "mt-1 self-end text-xs text-muted-foreground underline underline-offset-2 transition-colors hover:text-destructive focus-visible:outline-none",
+          children: "Remove"
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  ExpenseDetailItem
+};