@wealthx/shadcn 1.5.0 → 1.5.2

package/src/components/ui/contact-alert-dialog/config.ts

@@ -0,0 +1,262 @@
+import {
+  BasicConfig,
+  Utils as QbUtils,
+  type Config,
+  type ImmutableTree,
+  type JsonGroup,
+  type JsonItem,
+} from "@react-awesome-query-builder/ui";
+import type { AlertQueryField, AlertQueryOperator } from "./types";
+
+export const ALERT_QUERY_FIELDS: AlertQueryField[] = [
+  {
+    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",
+    ],
+  },
+];
+
+export const ALL_NUMERIC_OPERATORS: AlertQueryOperator[] = [
+  "equal",
+  "not_equal",
+  "less",
+  "less_or_equal",
+  "greater",
+  "greater_or_equal",
+  "between",
+];
+
+export const BOOLEAN_OPERATORS: AlertQueryOperator[] = ["equal"];
+
+export const OPERATOR_LABELS: Record<AlertQueryOperator, string> = {
+  equal: "=",
+  not_equal: "≠",
+  less: "<",
+  less_or_equal: "≤",
+  greater: ">",
+  greater_or_equal: "≥",
+  between: "between",
+};
+
+export const SEVERITY_LABELS = {
+  INSIGHT: "Insight",
+  WATCH: "Watch",
+  NEED_ACTION: "Need Action",
+} as const;
+
+// react-awesome-query-builder config — drives ImmutableTree state.
+export const QB_CONFIG: Config = {
+  ...BasicConfig,
+  fields: {
+    "userMetric.max_loan_amount": {
+      label: "Borrowing Capacity",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+        "between",
+      ],
+      valueSources: ["value"],
+    },
+    "userMetric.debt_outstanding": {
+      label: "Outstanding Debt",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+      ],
+      valueSources: ["value"],
+    },
+    "userMetric.lvr": {
+      label: "Current LVR",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+      ],
+      valueSources: ["value"],
+    },
+    "userMetric.has_met_buying_goal": {
+      label: "Has Met Buying Goal",
+      type: "boolean",
+      operators: ["equal"],
+      valueSources: ["value"],
+    },
+    "userMetric.excess_monthly_surplus": {
+      label: "Excess Monthly Surplus",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+      ],
+      valueSources: ["value"],
+    },
+    "userMetric.equity": {
+      label: "Equity Amount",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+      ],
+      valueSources: ["value"],
+    },
+    "userMetric.max_debt_interest_rate": {
+      label: "Max Debt Interest Rate",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+      ],
+      valueSources: ["value"],
+    },
+    "userMetric.min_debt_interest_rate": {
+      label: "Min Debt Interest Rate",
+      type: "number",
+      operators: [
+        "equal",
+        "less",
+        "less_or_equal",
+        "greater",
+        "greater_or_equal",
+      ],
+      valueSources: ["value"],
+    },
+  },
+};
+
+// Default query — children1 in array form (matches JsonGroup type).
+export const EMPTY_QUERY_VALUE: JsonGroup = {
+  id: "root",
+  type: "group",
+  properties: { conjunction: "AND", not: false },
+  children1: [
+    {
+      id: "rule-init",
+      type: "rule",
+      properties: {
+        field: "userMetric.max_loan_amount",
+        operator: "greater_or_equal",
+        value: [null],
+        valueSrc: ["value"],
+      },
+    } as JsonItem,
+  ],
+};
+
+/** Convert a JsonGroup to an ImmutableTree usable by the query builder. */
+export function createAlertTree(query?: JsonGroup | null): ImmutableTree {
+  const q = query ?? EMPTY_QUERY_VALUE;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const loaded = QbUtils.loadTree(q as any);
+  return QbUtils.sanitizeTree(loaded, QB_CONFIG).fixedTree;
+}

package/src/components/ui/contact-alert-dialog/contact-alert-dialog.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import {
+  Query,
+  Utils as QbUtils,
+  type ImmutableTree,
+} from "@react-awesome-query-builder/ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import type {
+  ContactAlertDialogProps,
+  ContactAlertQueryBuilderProps,
+  ContactAlertSeverity,
+} from "./types";
+import { AlertSharingType } from "./types";
+import {
+  ALERT_QUERY_FIELDS,
+  QB_CONFIG,
+  SEVERITY_LABELS,
+  createAlertTree,
+} from "./config";
+import { isTreeValid } from "./utils";
+import { CustomBuilderUI } from "./builder-ui";
+
+// ---------------------------------------------------------------------------
+// ContactAlertQueryBuilder
+// ---------------------------------------------------------------------------
+
+export function ContactAlertQueryBuilder({
+  value,
+  onChange,
+  fields = ALERT_QUERY_FIELDS,
+  className,
+}: ContactAlertQueryBuilderProps) {
+  const defaultOpenItems = React.useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const json = QbUtils.getTree(value) as any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (json?.children1 ?? []).map((c: any) => c.id ?? "").filter(Boolean);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderBuilder = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props: any) => (
+      <CustomBuilderUI
+        tree={props.tree}
+        actions={props.actions}
+        fields={fields}
+        defaultOpenItems={defaultOpenItems}
+        className={className}
+      />
+    ),
+    [fields, defaultOpenItems, className],
+  );
+
+  return (
+    <Query
+      {...QB_CONFIG}
+      value={value}
+      onChange={(newTree) => onChange(newTree)}
+      renderBuilder={renderBuilder}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ContactAlertDialog
+// ---------------------------------------------------------------------------
+
+export function ContactAlertDialog({
+  open,
+  onOpenChange,
+  mode = "create",
+  initialName = "",
+  initialSeverity = "NEED_ACTION",
+  initialQuery,
+  isCompanyAdmin = false,
+  initialShareAcrossCompany = false,
+  onSave,
+  isLoading = false,
+  className,
+}: ContactAlertDialogProps) {
+  const [name, setName] = React.useState(initialName);
+  const [severity, setSeverity] =
+    React.useState<ContactAlertSeverity>(initialSeverity);
+  const [tree, setTree] = React.useState<ImmutableTree>(() =>
+    createAlertTree(initialQuery),
+  );
+  const [shareAcrossCompany, setShareAcrossCompany] = React.useState(
+    initialShareAcrossCompany,
+  );
+
+  React.useEffect(() => {
+    if (open) {
+      setName(initialName);
+      setSeverity(initialSeverity);
+      setTree(createAlertTree(initialQuery));
+      setShareAcrossCompany(initialShareAcrossCompany);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const hasValidRule = React.useMemo(() => isTreeValid(tree), [tree]);
+  const canSave = name.trim().length > 0 && hasValidRule && !isLoading;
+
+  function handleSave() {
+    if (!canSave) return;
+    onSave({
+      name: name.trim(),
+      severity,
+      filterSegment: QbUtils.sanitizeTree(tree, QB_CONFIG).fixedTree,
+      sharingType: shareAcrossCompany
+        ? AlertSharingType.COMPANY
+        : AlertSharingType.PRIVATE,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={isLoading ? undefined : onOpenChange}>
+      <DialogContent size="2xl" className={className}>
+        <DialogHeader>
+          <DialogTitle>
+            {mode === "edit" ? "Update Alert" : "Create Alert"}
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Severity */}
+        <div className="flex flex-col gap-1.5">
+          <p className="text-sm font-medium text-foreground">
+            Alert trigger severity
+          </p>
+          <ToggleGroup
+            type="single"
+            variant="outline"
+            size="sm"
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            value={severity as any}
+            onValueChange={(v) =>
+              v && setSeverity(v as unknown as ContactAlertSeverity)
+            }
+          >
+            {(
+              ["NEED_ACTION", "WATCH", "INSIGHT"] as ContactAlertSeverity[]
+            ).map((s) => (
+              <ToggleGroupItem key={s} value={s}>
+                {SEVERITY_LABELS[s]}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+
+        {/* Name */}
+        <Field>
+          <FieldLabel>Alert name</FieldLabel>
+          <Input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. High equity opportunity"
+          />
+        </Field>
+
+        {/* Share across company */}
+        {isCompanyAdmin && (
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="alert-share"
+              checked={shareAcrossCompany}
+              onCheckedChange={(v) => setShareAcrossCompany(!!v)}
+            />
+            <Label htmlFor="alert-share" className="cursor-pointer font-normal">
+              Share across company
+            </Label>
+          </div>
+        )}
+
+        {/* Query builder */}
+        <div className="flex flex-col gap-1.5">
+          <p className="text-sm font-medium text-foreground">
+            Filter conditions
+          </p>
+          <ContactAlertQueryBuilder
+            value={tree}
+            onChange={setTree}
+            fields={ALERT_QUERY_FIELDS}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button disabled={!canSave} onClick={handleSave}>
+            {mode === "edit" ? "Update Alert" : "Create Alert"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/contact-alert-dialog/index.tsx

@@ -0,0 +1,15 @@
+export {
+  ContactAlertQueryBuilder,
+  ContactAlertDialog,
+} from "./contact-alert-dialog";
+export { ALERT_QUERY_FIELDS, createAlertTree } from "./config";
+export { AlertSharingType } from "./types";
+export type {
+  AlertQueryCombinator,
+  AlertQueryField,
+  AlertQueryFieldType,
+  AlertQueryOperator,
+  ContactAlertDialogProps,
+  ContactAlertQueryBuilderProps,
+  ContactAlertSeverity,
+} from "./types";

package/src/components/ui/contact-alert-dialog/types.ts

@@ -0,0 +1,61 @@
+import type { ImmutableTree, JsonGroup } from "@react-awesome-query-builder/ui";
+
+export type AlertQueryCombinator = "AND" | "OR";
+
+export type AlertQueryOperator =
+  | "equal"
+  | "not_equal"
+  | "less"
+  | "less_or_equal"
+  | "greater"
+  | "greater_or_equal"
+  | "between";
+
+export type AlertQueryFieldType = "number" | "boolean";
+
+export type ContactAlertSeverity = "INSIGHT" | "WATCH" | "NEED_ACTION";
+
+export enum AlertSharingType {
+  PRIVATE = "PRIVATE",
+  COMPANY = "COMPANY",
+}
+
+export interface AlertQueryField {
+  key: string;
+  label: string;
+  type: AlertQueryFieldType;
+  /** "dollar" = prefix "$", "percent" = suffix "%" */
+  unit?: "dollar" | "percent";
+  /** Allowed operators (defaults to all numeric operators). */
+  operators?: AlertQueryOperator[];
+}
+
+export interface ContactAlertQueryBuilderProps {
+  /** Current ImmutableTree state — fully controlled. */
+  value: ImmutableTree;
+  onChange: (newTree: ImmutableTree) => void;
+  fields?: AlertQueryField[];
+  className?: string;
+}
+
+export interface ContactAlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode?: "create" | "edit";
+  initialName?: string;
+  initialSeverity?: ContactAlertSeverity;
+  /** Initial query in JsonGroup format (array children1). Converted to ImmutableTree on open. */
+  initialQuery?: JsonGroup;
+  /** Show "Share across company" checkbox for company admins. */
+  isCompanyAdmin?: boolean;
+  initialShareAcrossCompany?: boolean;
+  onSave: (data: {
+    name: string;
+    severity: ContactAlertSeverity;
+    /** Backend-compatible ImmutableTree (filterSegment format). */
+    filterSegment: ImmutableTree;
+    sharingType: AlertSharingType;
+  }) => void;
+  isLoading?: boolean;
+  className?: string;
+}

package/src/components/ui/contact-alert-dialog/utils.ts

@@ -0,0 +1,93 @@
+import {
+  Utils as QbUtils,
+  type ImmutableTree,
+} from "@react-awesome-query-builder/ui";
+import type { AlertQueryField, AlertQueryOperator } from "./types";
+import {
+  ALERT_QUERY_FIELDS,
+  ALL_NUMERIC_OPERATORS,
+  BOOLEAN_OPERATORS,
+  OPERATOR_LABELS,
+} from "./config";
+
+export function longestOf(labels: string[]): string {
+  return labels.reduce((a, b) => (a.length >= b.length ? a : b), "");
+}
+
+export function allOperatorLabels(fields: AlertQueryField[]): string[] {
+  const ops = new Set<AlertQueryOperator>();
+  for (const f of fields) {
+    const fieldOps =
+      f.type === "boolean"
+        ? BOOLEAN_OPERATORS
+        : (f.operators ?? ALL_NUMERIC_OPERATORS);
+    fieldOps.forEach((op) => ops.add(op));
+  }
+  return Array.from(ops).map((op) => OPERATOR_LABELS[op]);
+}
+
+export function formatWithCommas(raw: string): string {
+  if (!raw) return "";
+  const [int, dec] = raw.split(".");
+  const formatted = int.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return dec !== undefined ? `${formatted}.${dec}` : formatted;
+}
+
+export function parseCommas(display: string): string {
+  return display.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1");
+}
+
+export function ruleSummary(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ruleProps: any,
+  fields: AlertQueryField[],
+): string {
+  const field: string = ruleProps?.field ?? "";
+  const operator: string = ruleProps?.operator ?? "equal";
+  const value0 = ruleProps?.value?.[0];
+  const value1 = ruleProps?.value?.[1];
+
+  const fieldDef = fields.find((f) => f.key === field);
+  const fieldLabel = fieldDef?.label ?? field;
+  const opLabel = OPERATOR_LABELS[operator as AlertQueryOperator] ?? operator;
+
+  const formatVal = (v: unknown): string => {
+    if (v === null || v === undefined) return "…";
+    if (fieldDef?.type === "boolean") return v ? "Yes" : "No";
+    const n = typeof v === "number" ? v : parseFloat(String(v));
+    if (!isFinite(n)) return "…";
+    if (fieldDef?.unit === "dollar")
+      return `$${formatWithCommas(n.toString())}`;
+    if (fieldDef?.unit === "percent") return `${n}%`;
+    return String(v);
+  };
+
+  if (operator === "between") {
+    return `${fieldLabel} between ${formatVal(value0)} and ${formatVal(value1)}`;
+  }
+  return `${fieldLabel} ${opLabel} ${formatVal(value0)}`;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function checkGroupValid(children: any[]): boolean {
+  return children.some((child) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const c = child as any;
+    if (c.type === "rule") {
+      const field: string | undefined = c.properties?.field;
+      if (!field) return false;
+      const fieldDef = ALERT_QUERY_FIELDS.find((f) => f.key === field);
+      if (fieldDef?.type === "boolean") return true;
+      const v = c.properties?.value?.[0];
+      return v !== null && v !== undefined;
+    }
+    if (c.type === "group") return checkGroupValid(c.children1 ?? []);
+    return false;
+  });
+}
+
+export function isTreeValid(tree: ImmutableTree): boolean {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const json = QbUtils.getTree(tree) as any;
+  return checkGroupValid(json?.children1 ?? []);
+}