@wealthx/shadcn 1.4.0 → 1.5.0

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

@@ -0,0 +1,710 @@
+import * as React from "react";
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/components/ui/input-group";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Field, FieldLabel } from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+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 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 AlertQueryRule {
+  id: string;
+  field: string;
+  operator: AlertQueryOperator;
+  value: string;
+  /** Second value used by the "between" operator. */
+  value2?: string;
+}
+
+export interface AlertQueryGroup {
+  rules: AlertQueryRule[];
+  /**
+   * Combinator connecting rule[i] to rule[i+1].
+   * Length is always rules.length - 1.
+   */
+  logicalOps: AlertQueryCombinator[];
+}
+
+export interface ContactAlertQueryBuilderProps {
+  value: AlertQueryGroup;
+  onChange: (value: AlertQueryGroup) => void;
+  fields: AlertQueryField[];
+  className?: string;
+}
+
+export interface ContactAlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode?: "create" | "edit";
+  initialName?: string;
+  initialSeverity?: ContactAlertSeverity;
+  initialQuery?: AlertQueryGroup;
+  /** Show "Share across company" checkbox for company admins. */
+  isCompanyAdmin?: boolean;
+  initialShareAcrossCompany?: boolean;
+  onSave: (data: {
+    name: string;
+    severity: ContactAlertSeverity;
+    query: AlertQueryGroup;
+    shareAcrossCompany: boolean;
+  }) => void;
+  isLoading?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+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",
+    ],
+  },
+];
+
+const ALL_NUMERIC_OPERATORS: AlertQueryOperator[] = [
+  "equal",
+  "not_equal",
+  "less",
+  "less_or_equal",
+  "greater",
+  "greater_or_equal",
+  "between",
+];
+
+const BOOLEAN_OPERATORS: AlertQueryOperator[] = ["equal"];
+
+const OPERATOR_LABELS: Record<AlertQueryOperator, string> = {
+  equal: "=",
+  not_equal: "≠",
+  less: "<",
+  less_or_equal: "≤",
+  greater: ">",
+  greater_or_equal: "≥",
+  between: "between",
+};
+
+const SEVERITY_LABELS: Record<ContactAlertSeverity, string> = {
+  INSIGHT: "Insight",
+  WATCH: "Watch",
+  NEED_ACTION: "Need Action",
+};
+
+const EMPTY_RULE = (): AlertQueryRule => ({
+  id: Math.random().toString(36).slice(2),
+  field: ALERT_QUERY_FIELDS[0].key,
+  operator: "greater_or_equal",
+  value: "",
+  value2: "",
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Longest label in an array of strings. */
+function longestOf(labels: string[]): string {
+  return labels.reduce((a, b) => (a.length >= b.length ? a : b), "");
+}
+
+/** Operators available across all fields — used to lock the operator-select width. */
+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 [...ops].map((op) => OPERATOR_LABELS[op]);
+}
+
+/** Add thousand separators to a raw digit string. */
+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;
+}
+
+/** Strip thousand separators; keep digits and at most one decimal point. */
+function parseCommas(display: string): string {
+  return display.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1");
+}
+
+// ---------------------------------------------------------------------------
+// SelectAutoWidth
+// ---------------------------------------------------------------------------
+
+/**
+ * Locks a Select trigger to the width of its longest option.
+ *
+ * Ghost block + absolute overlay pattern:
+ * - An invisible <span> with longestLabel sizes the container (no circular CSS dependency).
+ * - The trigger sits in an absolute overlay that fills the container.
+ *
+ * Ghost padding mirrors trigger chrome:
+ *   left  = px-3 (12 px)
+ *   right = gap-2 (8 px) + chevron size-4 (16 px) + px-3 (12 px) = 36 px → pr-10 + 4 px buffer
+ * text-body-medium matches the SelectTrigger font (1 rem / 16 px).
+ * h-8 matches trigger size="sm".
+ */
+function SelectAutoWidth({
+  longestLabel,
+  children,
+}: {
+  longestLabel: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative inline-block shrink-0">
+      <span
+        aria-hidden
+        className="invisible block h-8 whitespace-nowrap pl-3 pr-10 text-body-medium"
+      >
+        {longestLabel}
+      </span>
+      <div className="absolute inset-0">{children}</div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ValueInput
+// ---------------------------------------------------------------------------
+
+function ValueInput({
+  value,
+  onChange,
+  unit,
+  placeholder = "0",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  unit?: "dollar" | "percent";
+  placeholder?: string;
+}) {
+  return (
+    <InputGroup className="w-36">
+      {unit === "dollar" && (
+        <InputGroupAddon align="inline-start">
+          <InputGroupText>$</InputGroupText>
+        </InputGroupAddon>
+      )}
+      <InputGroupInput
+        type="text"
+        inputMode="numeric"
+        value={formatWithCommas(value)}
+        onChange={(e) => onChange(parseCommas(e.target.value))}
+        placeholder={placeholder}
+      />
+      {unit === "percent" && (
+        <InputGroupAddon align="inline-end">
+          <InputGroupText>%</InputGroupText>
+        </InputGroupAddon>
+      )}
+    </InputGroup>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// QueryRuleRow
+// ---------------------------------------------------------------------------
+
+function QueryRuleRow({
+  rule,
+  fields,
+  longestFieldLabel,
+  longestOperatorLabel,
+  onUpdate,
+  onRemove,
+  removable,
+}: {
+  rule: AlertQueryRule;
+  fields: AlertQueryField[];
+  longestFieldLabel: string;
+  longestOperatorLabel: string;
+  onUpdate: (updated: AlertQueryRule) => void;
+  onRemove: () => void;
+  removable: boolean;
+}) {
+  const fieldDef = fields.find((f) => f.key === rule.field) ?? fields[0];
+  const isBooleanField = fieldDef.type === "boolean";
+  const availableOperators = isBooleanField
+    ? BOOLEAN_OPERATORS
+    : (fieldDef.operators ?? ALL_NUMERIC_OPERATORS);
+
+  const update = (patch: Partial<AlertQueryRule>) =>
+    onUpdate({ ...rule, ...patch });
+
+  function handleFieldChange(key: string) {
+    const newField = fields.find((f) => f.key === key);
+    const newOps =
+      newField?.type === "boolean"
+        ? BOOLEAN_OPERATORS
+        : (newField?.operators ?? ALL_NUMERIC_OPERATORS);
+    const validOp = newOps.includes(rule.operator) ? rule.operator : newOps[0];
+    update({ field: key, operator: validOp, value: "", value2: "" });
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 border border-border bg-muted/20 p-2">
+      {/* Field */}
+      <SelectAutoWidth longestLabel={longestFieldLabel}>
+        <Select value={rule.field} onValueChange={handleFieldChange}>
+          <SelectTrigger size="sm" className="w-full">
+            <SelectValue>
+              {fields.find((f) => f.key === rule.field)?.label ?? rule.field}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {fields.map((f) => (
+              <SelectItem key={f.key} value={f.key}>
+                {f.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectAutoWidth>
+
+      {/* Operator */}
+      <SelectAutoWidth longestLabel={longestOperatorLabel}>
+        <Select
+          value={rule.operator}
+          onValueChange={(v) => update({ operator: v as AlertQueryOperator })}
+        >
+          <SelectTrigger size="sm" className="w-full">
+            <SelectValue>{OPERATOR_LABELS[rule.operator]}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {availableOperators.map((op) => (
+              <SelectItem key={op} value={op}>
+                {OPERATOR_LABELS[op]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectAutoWidth>
+
+      {/* Value */}
+      {isBooleanField ? (
+        <Select
+          value={rule.value || "true"}
+          onValueChange={(v) => update({ value: v })}
+        >
+          <SelectTrigger size="sm" className="w-36">
+            <SelectValue>
+              {(rule.value || "true") === "false" ? "No" : "Yes"}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">Yes</SelectItem>
+            <SelectItem value="false">No</SelectItem>
+          </SelectContent>
+        </Select>
+      ) : (
+        <>
+          <ValueInput
+            value={rule.value}
+            onChange={(v) => update({ value: v })}
+            unit={fieldDef.unit}
+          />
+          {rule.operator === "between" && (
+            <>
+              <span className="text-xs text-muted-foreground">and</span>
+              <ValueInput
+                value={rule.value2 ?? ""}
+                onChange={(v) => update({ value2: v })}
+                unit={fieldDef.unit}
+              />
+            </>
+          )}
+        </>
+      )}
+
+      {/* Remove */}
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={onRemove}
+        disabled={!removable}
+        aria-label="Remove rule"
+        className="ml-auto"
+      >
+        <Trash2Icon />
+      </Button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ContactAlertQueryBuilder
+// ---------------------------------------------------------------------------
+
+export function ContactAlertQueryBuilder({
+  value,
+  onChange,
+  fields,
+  className,
+}: ContactAlertQueryBuilderProps) {
+  const longestFieldLabel = React.useMemo(
+    () => longestOf(fields.map((f) => f.label)),
+    [fields],
+  );
+
+  const longestOperatorLabel = React.useMemo(
+    () => longestOf(allOperatorLabels(fields)),
+    [fields],
+  );
+
+  function updateRule(index: number, updated: AlertQueryRule) {
+    onChange({
+      ...value,
+      rules: value.rules.map((r, i) => (i === index ? updated : r)),
+    });
+  }
+
+  function removeRule(index: number) {
+    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: number, op: AlertQueryCombinator) {
+    onChange({
+      ...value,
+      logicalOps: value.logicalOps.map((o, i) => (i === index ? op : o)),
+    });
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {value.rules.map((rule, idx) => (
+        <React.Fragment key={rule.id}>
+          <QueryRuleRow
+            rule={rule}
+            fields={fields}
+            longestFieldLabel={longestFieldLabel}
+            longestOperatorLabel={longestOperatorLabel}
+            onUpdate={(updated) => updateRule(idx, updated)}
+            onRemove={() => removeRule(idx)}
+            removable={value.rules.length > 1}
+          />
+          {idx < value.rules.length - 1 && (
+            <div className="flex items-center gap-2 pl-1">
+              <ToggleGroup
+                type="single"
+                variant="outline"
+                size="sm"
+                value={value.logicalOps[idx] ?? "AND"}
+                onValueChange={(v) =>
+                  v && setLogicalOp(idx, v as AlertQueryCombinator)
+                }
+              >
+                <ToggleGroupItem value="AND">AND</ToggleGroupItem>
+                <ToggleGroupItem value="OR">OR</ToggleGroupItem>
+              </ToggleGroup>
+            </div>
+          )}
+        </React.Fragment>
+      ))}
+
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={addRule}
+        className="w-fit"
+      >
+        <PlusIcon />
+        Add rule
+      </Button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// 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 [query, setQuery] = React.useState<AlertQueryGroup>(
+    initialQuery ?? { rules: [EMPTY_RULE()], logicalOps: [] },
+  );
+  const [shareAcrossCompany, setShareAcrossCompany] = React.useState(
+    initialShareAcrossCompany,
+  );
+
+  React.useEffect(() => {
+    if (open) {
+      setName(initialName);
+      setSeverity(initialSeverity);
+      setQuery(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?.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 (
+    <Dialog open={open} onOpenChange={isLoading ? undefined : onOpenChange}>
+      <DialogContent size="lg" 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"
+            value={severity}
+            onValueChange={(v) => v && setSeverity(v 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={query}
+            onChange={setQuery}
+            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>
+  );
+}