@wealthx/shadcn 1.4.1 → 1.5.0

package/dist/chunk-E3PQDBYI.mjs

@@ -0,0 +1,288 @@
+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-contact-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 TOTAL_COLOR = "#162029";
+var ACTIVE_COLOR = "#166d42";
+var PENDING_COLOR = "#EF6C00";
+var INACTIVE_COLOR = "#F44336";
+function ContactMatchingLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1.5 pb-2", children: [
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "All", color: TOTAL_COLOR, lineStyle: "solid" }),
+    /* @__PURE__ */ jsx(ChartLegendItem, { label: "Active", color: ACTIVE_COLOR, lineStyle: "solid" }),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Pending",
+        color: PENDING_COLOR,
+        lineStyle: "solid"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChartLegendItem,
+      {
+        label: "Inactive",
+        color: INACTIVE_COLOR,
+        lineStyle: "solid"
+      }
+    )
+  ] });
+}
+function BackofficeContactMatchingChart({
+  chartData,
+  title = "Contact 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: "All",
+        data: sliced.map((p) => p.total),
+        borderColor: TOTAL_COLOR,
+        backgroundColor: isBar ? TOTAL_COLOR : hexToRgba(TOTAL_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Active",
+        data: sliced.map((p) => p.active),
+        borderColor: ACTIVE_COLOR,
+        backgroundColor: isBar ? ACTIVE_COLOR : hexToRgba(ACTIVE_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Pending",
+        data: sliced.map((p) => p.pending),
+        borderColor: PENDING_COLOR,
+        backgroundColor: isBar ? PENDING_COLOR : hexToRgba(PENDING_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2
+      },
+      {
+        type: chartType,
+        label: "Inactive",
+        data: sliced.map((p) => p.inactive),
+        borderColor: INACTIVE_COLOR,
+        backgroundColor: isBar ? INACTIVE_COLOR : hexToRgba(INACTIVE_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(ContactMatchingLegend, {}),
+          /* @__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(ContactMatchingLegend, {})
+        ] }) })
+      ]
+    }
+  );
+}
+
+export {
+  BackofficeContactMatchingChart
+};

package/dist/chunk-EMYBNPIA.mjs

@@ -0,0 +1,83 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from "./chunk-7YI3HEBH.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+
+// src/components/ui/currency-input.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatDisplay(n) {
+  return n.toLocaleString("en-AU", { maximumFractionDigits: 0 });
+}
+function parseRaw(raw) {
+  const digits = raw.replace(/[^0-9.]/g, "");
+  const n = parseFloat(digits);
+  return isNaN(n) ? 0 : Math.round(n);
+}
+function CurrencyInput({
+  value,
+  onChange,
+  id,
+  disabled = false,
+  placeholder = "0",
+  min = 0,
+  error = false,
+  className
+}) {
+  const [displayValue, setDisplayValue] = useState(
+    () => value > 0 ? formatDisplay(value) : ""
+  );
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!focused) {
+      setDisplayValue(value > 0 ? formatDisplay(value) : "");
+    }
+  }, [value, focused]);
+  function handleChange(e) {
+    const cleaned = e.target.value.replace(/[^0-9,.]/g, "");
+    setDisplayValue(cleaned);
+  }
+  function handleFocus() {
+    setFocused(true);
+    setDisplayValue(value > 0 ? String(value) : "");
+  }
+  function handleBlur() {
+    setFocused(false);
+    const parsed = Math.max(min, parseRaw(displayValue));
+    onChange(parsed);
+    setDisplayValue(parsed > 0 ? formatDisplay(parsed) : "");
+  }
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      className: cn(className),
+      "data-disabled": disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: "$" }),
+        /* @__PURE__ */ jsx(
+          InputGroupInput,
+          {
+            id,
+            type: "text",
+            inputMode: "numeric",
+            value: displayValue,
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            placeholder,
+            disabled,
+            "aria-invalid": error ? "true" : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  CurrencyInput
+};