@wealthx/shadcn 1.4.1 → 1.5.0

package/dist/chunk-Y24TXIFJ.mjs

@@ -0,0 +1,518 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText
+} from "./chunk-7YI3HEBH.mjs";
+import {
+  Field,
+  FieldLabel
+} from "./chunk-MUV4EGDW.mjs";
+import {
+  Checkbox
+} from "./chunk-IKXYTCSB.mjs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-TAX3KL66.mjs";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-NCUH54IZ.mjs";
+import {
+  Label
+} from "./chunk-P7CEBZM6.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-OWFQSXVD.mjs";
+import {
+  Input
+} from "./chunk-LBTHZSBT.mjs";
+import {
+  Button
+} from "./chunk-NOOEKOWY.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-WNQUEZJF.mjs";
+
+// src/components/ui/contact-alert-dialog.tsx
+import * as React from "react";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var ALERT_QUERY_FIELDS = [
+  {
+    key: "userMetric.max_loan_amount",
+    label: "Borrowing Capacity",
+    type: "number",
+    unit: "dollar",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal",
+      "between"
+    ]
+  },
+  {
+    key: "userMetric.debt_outstanding",
+    label: "Outstanding Debt",
+    type: "number",
+    unit: "dollar",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal"
+    ]
+  },
+  {
+    key: "userMetric.lvr",
+    label: "Current LVR",
+    type: "number",
+    unit: "percent",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal"
+    ]
+  },
+  {
+    key: "userMetric.has_met_buying_goal",
+    label: "Has Met Buying Goal",
+    type: "boolean"
+  },
+  {
+    key: "userMetric.excess_monthly_surplus",
+    label: "Excess Monthly Surplus",
+    type: "number",
+    unit: "dollar",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal"
+    ]
+  },
+  {
+    key: "userMetric.equity",
+    label: "Equity Amount",
+    type: "number",
+    unit: "dollar",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal"
+    ]
+  },
+  {
+    key: "userMetric.max_debt_interest_rate",
+    label: "Max Debt Interest Rate",
+    type: "number",
+    unit: "percent",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal"
+    ]
+  },
+  {
+    key: "userMetric.min_debt_interest_rate",
+    label: "Min Debt Interest Rate",
+    type: "number",
+    unit: "percent",
+    operators: [
+      "equal",
+      "less",
+      "less_or_equal",
+      "greater",
+      "greater_or_equal"
+    ]
+  }
+];
+var ALL_NUMERIC_OPERATORS = [
+  "equal",
+  "not_equal",
+  "less",
+  "less_or_equal",
+  "greater",
+  "greater_or_equal",
+  "between"
+];
+var BOOLEAN_OPERATORS = ["equal"];
+var OPERATOR_LABELS = {
+  equal: "=",
+  not_equal: "\u2260",
+  less: "<",
+  less_or_equal: "\u2264",
+  greater: ">",
+  greater_or_equal: "\u2265",
+  between: "between"
+};
+var SEVERITY_LABELS = {
+  INSIGHT: "Insight",
+  WATCH: "Watch",
+  NEED_ACTION: "Need Action"
+};
+var EMPTY_RULE = () => ({
+  id: Math.random().toString(36).slice(2),
+  field: ALERT_QUERY_FIELDS[0].key,
+  operator: "greater_or_equal",
+  value: "",
+  value2: ""
+});
+function longestOf(labels) {
+  return labels.reduce((a, b) => a.length >= b.length ? a : b, "");
+}
+function allOperatorLabels(fields) {
+  var _a;
+  const ops = /* @__PURE__ */ new Set();
+  for (const f of fields) {
+    const fieldOps = f.type === "boolean" ? BOOLEAN_OPERATORS : (_a = f.operators) != null ? _a : ALL_NUMERIC_OPERATORS;
+    fieldOps.forEach((op) => ops.add(op));
+  }
+  return [...ops].map((op) => OPERATOR_LABELS[op]);
+}
+function formatWithCommas(raw) {
+  if (!raw) return "";
+  const [int, dec] = raw.split(".");
+  const formatted = int.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return dec !== void 0 ? `${formatted}.${dec}` : formatted;
+}
+function parseCommas(display) {
+  return display.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1");
+}
+function SelectAutoWidth({
+  longestLabel,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "invisible block h-8 whitespace-nowrap pl-3 pr-10 text-body-medium",
+        children: longestLabel
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children })
+  ] });
+}
+function ValueInput({
+  value,
+  onChange,
+  unit,
+  placeholder = "0"
+}) {
+  return /* @__PURE__ */ jsxs(InputGroup, { className: "w-36", children: [
+    unit === "dollar" && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(InputGroupText, { children: "$" }) }),
+    /* @__PURE__ */ jsx(
+      InputGroupInput,
+      {
+        type: "text",
+        inputMode: "numeric",
+        value: formatWithCommas(value),
+        onChange: (e) => onChange(parseCommas(e.target.value)),
+        placeholder
+      }
+    ),
+    unit === "percent" && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(InputGroupText, { children: "%" }) })
+  ] });
+}
+function QueryRuleRow({
+  rule,
+  fields,
+  longestFieldLabel,
+  longestOperatorLabel,
+  onUpdate,
+  onRemove,
+  removable
+}) {
+  var _a, _b, _c, _d, _e;
+  const fieldDef = (_a = fields.find((f) => f.key === rule.field)) != null ? _a : fields[0];
+  const isBooleanField = fieldDef.type === "boolean";
+  const availableOperators = isBooleanField ? BOOLEAN_OPERATORS : (_b = fieldDef.operators) != null ? _b : ALL_NUMERIC_OPERATORS;
+  const update = (patch) => onUpdate(__spreadValues(__spreadValues({}, rule), patch));
+  function handleFieldChange(key) {
+    var _a2;
+    const newField = fields.find((f) => f.key === key);
+    const newOps = (newField == null ? void 0 : newField.type) === "boolean" ? BOOLEAN_OPERATORS : (_a2 = newField == null ? void 0 : newField.operators) != null ? _a2 : ALL_NUMERIC_OPERATORS;
+    const validOp = newOps.includes(rule.operator) ? rule.operator : newOps[0];
+    update({ field: key, operator: validOp, value: "", value2: "" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 border border-border bg-muted/20 p-2", children: [
+    /* @__PURE__ */ jsx(SelectAutoWidth, { longestLabel: longestFieldLabel, children: /* @__PURE__ */ jsxs(Select, { value: rule.field, onValueChange: handleFieldChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { children: (_d = (_c = fields.find((f) => f.key === rule.field)) == null ? void 0 : _c.label) != null ? _d : rule.field }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: fields.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f.key, children: f.label }, f.key)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(SelectAutoWidth, { longestLabel: longestOperatorLabel, children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: rule.operator,
+        onValueChange: (v) => update({ operator: v }),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { children: OPERATOR_LABELS[rule.operator] }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: availableOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op, children: OPERATOR_LABELS[op] }, op)) })
+        ]
+      }
+    ) }),
+    isBooleanField ? /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: rule.value || "true",
+        onValueChange: (v) => update({ value: v }),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ jsx(SelectValue, { children: (rule.value || "true") === "false" ? "No" : "Yes" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Yes" }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "No" })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx(
+        ValueInput,
+        {
+          value: rule.value,
+          onChange: (v) => update({ value: v }),
+          unit: fieldDef.unit
+        }
+      ),
+      rule.operator === "between" && /* @__PURE__ */ jsxs(Fragment2, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "and" }),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: (_e = rule.value2) != null ? _e : "",
+            onChange: (v) => update({ value2: v }),
+            unit: fieldDef.unit
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        onClick: onRemove,
+        disabled: !removable,
+        "aria-label": "Remove rule",
+        className: "ml-auto",
+        children: /* @__PURE__ */ jsx(Trash2Icon, {})
+      }
+    )
+  ] });
+}
+function ContactAlertQueryBuilder({
+  value,
+  onChange,
+  fields,
+  className
+}) {
+  const longestFieldLabel = React.useMemo(
+    () => longestOf(fields.map((f) => f.label)),
+    [fields]
+  );
+  const longestOperatorLabel = React.useMemo(
+    () => longestOf(allOperatorLabels(fields)),
+    [fields]
+  );
+  function updateRule(index, updated) {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      rules: value.rules.map((r, i) => i === index ? updated : r)
+    }));
+  }
+  function removeRule(index) {
+    if (value.rules.length <= 1) return;
+    const rules = value.rules.filter((_, i) => i !== index);
+    const opIdx = Math.min(index, value.logicalOps.length - 1);
+    const logicalOps = value.logicalOps.filter((_, i) => i !== opIdx);
+    onChange({ rules, logicalOps });
+  }
+  function addRule() {
+    onChange({
+      rules: [...value.rules, EMPTY_RULE()],
+      logicalOps: [...value.logicalOps, "AND"]
+    });
+  }
+  function setLogicalOp(index, op) {
+    onChange(__spreadProps(__spreadValues({}, value), {
+      logicalOps: value.logicalOps.map((o, i) => i === index ? op : o)
+    }));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    value.rules.map((rule, idx) => {
+      var _a;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          QueryRuleRow,
+          {
+            rule,
+            fields,
+            longestFieldLabel,
+            longestOperatorLabel,
+            onUpdate: (updated) => updateRule(idx, updated),
+            onRemove: () => removeRule(idx),
+            removable: value.rules.length > 1
+          }
+        ),
+        idx < value.rules.length - 1 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pl-1", children: /* @__PURE__ */ jsxs(
+          ToggleGroup,
+          {
+            type: "single",
+            variant: "outline",
+            size: "sm",
+            value: (_a = value.logicalOps[idx]) != null ? _a : "AND",
+            onValueChange: (v) => v && setLogicalOp(idx, v),
+            children: [
+              /* @__PURE__ */ jsx(ToggleGroupItem, { value: "AND", children: "AND" }),
+              /* @__PURE__ */ jsx(ToggleGroupItem, { value: "OR", children: "OR" })
+            ]
+          }
+        ) })
+      ] }, rule.id);
+    }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        onClick: addRule,
+        className: "w-fit",
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, {}),
+          "Add rule"
+        ]
+      }
+    )
+  ] });
+}
+function ContactAlertDialog({
+  open,
+  onOpenChange,
+  mode = "create",
+  initialName = "",
+  initialSeverity = "NEED_ACTION",
+  initialQuery,
+  isCompanyAdmin = false,
+  initialShareAcrossCompany = false,
+  onSave,
+  isLoading = false,
+  className
+}) {
+  const [name, setName] = React.useState(initialName);
+  const [severity, setSeverity] = React.useState(initialSeverity);
+  const [query, setQuery] = React.useState(
+    initialQuery != null ? initialQuery : { rules: [EMPTY_RULE()], logicalOps: [] }
+  );
+  const [shareAcrossCompany, setShareAcrossCompany] = React.useState(
+    initialShareAcrossCompany
+  );
+  React.useEffect(() => {
+    if (open) {
+      setName(initialName);
+      setSeverity(initialSeverity);
+      setQuery(initialQuery != null ? initialQuery : { rules: [EMPTY_RULE()], logicalOps: [] });
+      setShareAcrossCompany(initialShareAcrossCompany);
+    }
+  }, [open]);
+  const hasValidRule = query.rules.some((r) => {
+    const fieldDef = ALERT_QUERY_FIELDS.find((f) => f.key === r.field);
+    return (fieldDef == null ? void 0 : fieldDef.type) === "boolean" || r.value !== "";
+  });
+  const canSave = name.trim().length > 0 && hasValidRule && !isLoading;
+  function handleSave() {
+    if (!canSave) return;
+    onSave({ name: name.trim(), severity, query, shareAcrossCompany });
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: isLoading ? void 0 : onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "lg", className, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: mode === "edit" ? "Update Alert" : "Create Alert" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Alert trigger severity" }),
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          variant: "outline",
+          size: "sm",
+          value: severity,
+          onValueChange: (v) => v && setSeverity(v),
+          children: ["NEED_ACTION", "WATCH", "INSIGHT"].map((s) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: s, children: SEVERITY_LABELS[s] }, s))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(FieldLabel, { children: "Alert name" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: "e.g. High equity opportunity"
+        }
+      )
+    ] }),
+    isCompanyAdmin && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: "alert-share",
+          checked: shareAcrossCompany,
+          onCheckedChange: (v) => setShareAcrossCompany(!!v)
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "alert-share", className: "cursor-pointer font-normal", children: "Share across company" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Filter conditions" }),
+      /* @__PURE__ */ jsx(
+        ContactAlertQueryBuilder,
+        {
+          value: query,
+          onChange: setQuery,
+          fields: ALERT_QUERY_FIELDS
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          disabled: isLoading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { disabled: !canSave, onClick: handleSave, children: mode === "edit" ? "Update Alert" : "Create Alert" })
+    ] })
+  ] }) });
+}
+
+export {
+  ALERT_QUERY_FIELDS,
+  ContactAlertQueryBuilder,
+  ContactAlertDialog
+};

package/dist/{chunk-DMXYRCHM.mjs → chunk-Y6UM3VTN.mjs}

@@ -11,9 +11,6 @@ import {
   formatMonthLabel,
   formatTooltipDate
 } from "./chunk-YEWNFK5S.mjs";
-import {
-  formatCurrencyAbbrev
-} from "./chunk-MN5NYQCL.mjs";
 import {
   Empty,
   EmptyDescription
@@ -27,7 +24,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";