@wealthx/shadcn 1.5.1 → 1.5.3

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

@@ -1,710 +0,0 @@
-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>
-  );
-}