@wealthx/shadcn 1.1.0 → 1.2.0

package/src/components/ui/add-column-modal.tsx

@@ -0,0 +1,339 @@
+import * as React from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+/**
+ * AddColumnModal — WealthX DS (L4 Dialog)
+ *
+ * Create or edit a Pipeline stage (column). Supports:
+ * - Column title (optionally locked for system stages)
+ * - Time-based alert thresholds (warning days, priority days)
+ * - Task template list (up to 20 tasks with optional AI agent assignment)
+ *
+ * Data source: `listColumns()` → `Stage` in `loan-crm.ts`
+ */
+
+const MAX_TASKS = 20;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AiAgent {
+  id: string;
+  name: string;
+}
+
+export interface ColumnTask {
+  /** Temp numeric ID for new tasks; persisted string ID for existing ones. */
+  id: string | number;
+  name: string;
+  aiAgentId?: string | null;
+}
+
+export interface AddColumnEditData {
+  id?: string;
+  name: string;
+  orderIndex?: number;
+  warningDays?: number | null;
+  priorityDays?: number | null;
+  tasks?: ColumnTask[];
+  /** When true the title field is read-only (system/fixed stages). */
+  isTitleLocked?: boolean;
+}
+
+export interface AddColumnModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (data: AddColumnEditData) => void;
+  /** Pre-populate for edit mode. Omit (or pass null) for create mode. */
+  editData?: AddColumnEditData | null;
+  /** Available AI agents for task assignment. Pass [] to hide agent selects. */
+  aiAgents?: AiAgent[];
+  loading?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AddColumnModal({
+  open,
+  onOpenChange,
+  onSave,
+  editData,
+  aiAgents = [],
+  loading = false,
+  className,
+}: AddColumnModalProps) {
+  const isEdit = !!editData?.id;
+  const nextId = React.useRef(0);
+
+  const [name, setName] = React.useState(editData?.name ?? "");
+  const [warningDays, setWarningDays] = React.useState(
+    editData?.warningDays != null ? String(editData.warningDays) : "",
+  );
+  const [priorityDays, setPriorityDays] = React.useState(
+    editData?.priorityDays != null ? String(editData.priorityDays) : "",
+  );
+  const [tasks, setTasks] = React.useState<ColumnTask[]>(editData?.tasks ?? []);
+
+  // Sync state when dialog opens or editData changes
+  React.useEffect(() => {
+    if (open) {
+      setName(editData?.name ?? "");
+      setWarningDays(
+        editData?.warningDays != null ? String(editData.warningDays) : "",
+      );
+      setPriorityDays(
+        editData?.priorityDays != null ? String(editData.priorityDays) : "",
+      );
+      setTasks(editData?.tasks ?? []);
+    }
+  }, [open, editData]);
+
+  // Validation
+  const wDays = warningDays !== "" ? parseInt(warningDays, 10) : null;
+  const pDays = priorityDays !== "" ? parseInt(priorityDays, 10) : null;
+  const daysError =
+    wDays !== null && pDays !== null && wDays >= pDays
+      ? "Warning days must be less than priority days."
+      : null;
+
+  const taskNames = tasks.map((t) => t.name.trim().toLowerCase());
+  const hasDuplicateTasks =
+    new Set(taskNames).size !== taskNames.filter(Boolean).length;
+
+  const isValid =
+    name.trim().length > 0 &&
+    !daysError &&
+    !hasDuplicateTasks &&
+    tasks.every((t) => t.name.trim().length > 0);
+
+  function addTask() {
+    if (tasks.length >= MAX_TASKS) return;
+    setTasks((prev) => [
+      ...prev,
+      { id: nextId.current++, name: "", aiAgentId: null },
+    ]);
+  }
+
+  function removeTask(id: string | number) {
+    setTasks((prev) => prev.filter((t) => t.id !== id));
+  }
+
+  function updateTask(
+    id: string | number,
+    patch: Partial<Pick<ColumnTask, "name" | "aiAgentId">>,
+  ) {
+    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, ...patch } : t)));
+  }
+
+  function handleSave() {
+    onSave({
+      id: editData?.id,
+      name: name.trim(),
+      orderIndex: editData?.orderIndex,
+      warningDays: wDays,
+      priorityDays: pDays,
+      tasks,
+      isTitleLocked: editData?.isTitleLocked,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={loading ? undefined : onOpenChange}>
+      <DialogContent className={cn("max-w-md", className)}>
+        <DialogHeader>
+          <DialogTitle>{isEdit ? "Edit Column" : "Add New Column"}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          {/* Column title */}
+          <div className="flex flex-col gap-1.5">
+            <Label>Column title</Label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Pre-approval"
+              disabled={editData?.isTitleLocked || loading}
+            />
+            {editData?.isTitleLocked && (
+              <p className="text-xs text-muted-foreground">
+                This column title is locked and cannot be changed.
+              </p>
+            )}
+          </div>
+
+          {/* Time-based alerts */}
+          <div className="flex flex-col gap-2">
+            <span className="text-sm font-medium text-foreground">
+              Time-based alerts
+            </span>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="flex flex-col gap-1.5">
+                <Label className="font-normal text-muted-foreground">
+                  Warning after (days)
+                </Label>
+                <Input
+                  type="number"
+                  min={1}
+                  value={warningDays}
+                  onChange={(e) => setWarningDays(e.target.value)}
+                  placeholder="e.g. 7"
+                  disabled={loading}
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label className="font-normal text-muted-foreground">
+                  Priority after (days)
+                </Label>
+                <Input
+                  type="number"
+                  min={1}
+                  value={priorityDays}
+                  onChange={(e) => setPriorityDays(e.target.value)}
+                  placeholder="e.g. 14"
+                  disabled={loading}
+                />
+              </div>
+            </div>
+            {daysError && (
+              <p className="text-xs text-destructive">{daysError}</p>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* Task templates */}
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-foreground">
+                Task templates
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 gap-1 text-xs"
+                onClick={addTask}
+                disabled={tasks.length >= MAX_TASKS || loading}
+              >
+                <Plus className="size-3" />
+                Add ({tasks.length}/{MAX_TASKS})
+              </Button>
+            </div>
+
+            {tasks.length === 0 && (
+              <p className="text-xs text-muted-foreground">
+                No tasks yet. Tasks will be created for each new opportunity
+                added to this column.
+              </p>
+            )}
+
+            <div className="flex flex-col gap-2">
+              {tasks.map((task) => (
+                <div key={task.id} className="flex flex-col gap-1.5">
+                  <div className="flex items-center gap-2">
+                    <Input
+                      value={task.name}
+                      onChange={(e) =>
+                        updateTask(task.id, { name: e.target.value })
+                      }
+                      placeholder="Task name"
+                      className="flex-1"
+                      disabled={loading}
+                    />
+                    <button
+                      onClick={() => removeTask(task.id)}
+                      disabled={loading}
+                      className={cn(
+                        buttonVariants({ variant: "ghost", size: "icon" }),
+                        "size-9 shrink-0 text-muted-foreground hover:text-destructive",
+                      )}
+                      aria-label="Remove task"
+                    >
+                      <Trash2 className="size-4" />
+                    </button>
+                  </div>
+
+                  {aiAgents.length > 0 && (
+                    <Select
+                      value={task.aiAgentId ?? undefined}
+                      onValueChange={(v) =>
+                        updateTask(task.id, { aiAgentId: v || null })
+                      }
+                    >
+                      <SelectTrigger size="sm" className="w-full">
+                        <span
+                          className={cn(
+                            !task.aiAgentId && "text-muted-foreground",
+                          )}
+                        >
+                          {task.aiAgentId
+                            ? (aiAgents.find((a) => a.id === task.aiAgentId)
+                                ?.name ?? task.aiAgentId)
+                            : "Select agent"}
+                        </span>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {aiAgents.map((agent) => (
+                          <SelectItem key={agent.id} value={agent.id}>
+                            {agent.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {hasDuplicateTasks && (
+              <p className="text-xs text-destructive">
+                Task names must be unique.
+              </p>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={loading || !isValid}>
+            {loading
+              ? isEdit
+                ? "Saving…"
+                : "Adding…"
+              : isEdit
+                ? "Save changes"
+                : "Add column"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/add-lead-modal.tsx

@@ -0,0 +1,290 @@
+import * as React from "react";
+import { Search, X } 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 { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";
+
+/**
+ * AddLeadModal — WealthX DS (L4 Dialog)
+ *
+ * Search and select contacts to add as pipeline leads.
+ * Pagination and search are server-side — the parent controls them.
+ *
+ * Data source: `getLeadContactList()` in `loan-crm.ts`
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface LeadContact {
+  id: string;
+  name: string;
+  email?: string;
+  phone?: string;
+}
+
+export interface AddLeadModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Contacts for the current page — supplied and paginated by the parent. */
+  contacts: LeadContact[];
+  /** Total contacts matching the current search (drives pagination). */
+  total: number;
+  isLoading?: boolean;
+  isSubmitting?: boolean;
+  /** Controlled search query. */
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  /** 0-indexed current page. */
+  page?: number;
+  pageSize?: number;
+  onPageChange?: (page: number) => void;
+  /** Called with the selected contact IDs when the user clicks Add. */
+  onAdd?: (selectedIds: string[]) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AddLeadModal({
+  open,
+  onOpenChange,
+  contacts,
+  total,
+  isLoading = false,
+  isSubmitting = false,
+  searchValue = "",
+  onSearchChange,
+  page = 0,
+  pageSize = 10,
+  onPageChange,
+  onAdd,
+  className,
+}: AddLeadModalProps) {
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set());
+
+  // Reset selection when dialog opens
+  React.useEffect(() => {
+    if (open) setSelectedIds(new Set());
+  }, [open]);
+
+  const allPageSelected =
+    contacts.length > 0 && contacts.every((c) => selectedIds.has(c.id));
+  const somePageSelected = contacts.some((c) => selectedIds.has(c.id));
+
+  function toggleAll() {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (allPageSelected) {
+        contacts.forEach((c) => next.delete(c.id));
+      } else {
+        contacts.forEach((c) => next.add(c.id));
+      }
+      return next;
+    });
+  }
+
+  function toggleOne(id: string) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const canPrev = page > 0;
+  const canNext = page < totalPages - 1;
+
+  return (
+    <Dialog open={open} onOpenChange={isSubmitting ? undefined : onOpenChange}>
+      <DialogContent className={cn("sm:max-w-2xl", className)}>
+        <DialogHeader>
+          <DialogTitle>Add Lead</DialogTitle>
+        </DialogHeader>
+
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search contacts…"
+            value={searchValue}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            className="pl-8 pr-8"
+            disabled={isSubmitting}
+          />
+          {searchValue && (
+            <button
+              onClick={() => onSearchChange?.("")}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label="Clear search"
+            >
+              <X className="size-3.5" />
+            </button>
+          )}
+        </div>
+
+        {/* Contact table
+            border-separate + border-spacing-0 + inner <div h-12>: row height is
+            anchored to the fixed-height div, not td padding+content+border arithmetic,
+            so selected and unselected rows are always pixel-identical. */}
+        <div className="relative min-h-[200px] overflow-auto border border-border">
+          {isLoading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/60">
+              <Spinner />
+            </div>
+          )}
+          <table className="w-full border-separate border-spacing-0 text-sm">
+            <thead className="sticky top-0 bg-muted/50">
+              <tr>
+                <th className="w-10 border-b border-border">
+                  <div className="flex h-10 w-full items-center justify-center">
+                    <span onClick={(e) => e.stopPropagation()}>
+                      <Checkbox
+                        checked={
+                          somePageSelected && !allPageSelected
+                            ? "indeterminate"
+                            : allPageSelected
+                        }
+                        onCheckedChange={toggleAll}
+                        aria-label="Select all on page"
+                        disabled={contacts.length === 0 || isSubmitting}
+                      />
+                    </span>
+                  </div>
+                </th>
+                {(["Name", "Email", "Phone"] as const).map((col) => (
+                  <th key={col} className="border-b border-border">
+                    <div className="flex h-10 items-center px-3 text-xs font-semibold text-foreground">
+                      {col}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {contacts.length === 0 && !isLoading ? (
+                <tr>
+                  <td
+                    colSpan={4}
+                    className="py-10 text-center text-xs text-muted-foreground"
+                  >
+                    No contacts found.
+                  </td>
+                </tr>
+              ) : (
+                contacts.map((contact, idx) => {
+                  const isSelected = selectedIds.has(contact.id);
+                  const tdCls = cn(
+                    idx < contacts.length - 1 && "border-b border-border",
+                  );
+                  return (
+                    <tr
+                      key={contact.id}
+                      className={cn(
+                        "cursor-pointer",
+                        isSelected
+                          ? "bg-primary/5 hover:bg-primary/10"
+                          : "hover:bg-muted/30",
+                      )}
+                      onClick={() => !isSubmitting && toggleOne(contact.id)}
+                    >
+                      <td className={tdCls}>
+                        <div className="flex h-12 w-full items-center justify-center">
+                          <span onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                              checked={isSelected}
+                              onCheckedChange={() => toggleOne(contact.id)}
+                              disabled={isSubmitting}
+                            />
+                          </span>
+                        </div>
+                      </td>
+                      <td className={tdCls}>
+                        <div className="flex h-12 items-center px-3 font-medium text-foreground">
+                          {contact.name}
+                        </div>
+                      </td>
+                      <td className={tdCls}>
+                        <div className="flex h-12 items-center px-3 text-muted-foreground">
+                          {contact.email ?? "—"}
+                        </div>
+                      </td>
+                      <td className={tdCls}>
+                        <div className="flex h-12 items-center px-3 text-muted-foreground">
+                          {contact.phone ?? "—"}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>
+              {total} contact{total !== 1 ? "s" : ""}
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs"
+                onClick={() => onPageChange?.(page - 1)}
+                disabled={!canPrev || isLoading || isSubmitting}
+              >
+                Prev
+              </Button>
+              <span>
+                {page + 1} / {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs"
+                onClick={() => onPageChange?.(page + 1)}
+                disabled={!canNext || isLoading || isSubmitting}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => onAdd?.([...selectedIds])}
+            disabled={selectedIds.size === 0 || isSubmitting}
+          >
+            {isSubmitting
+              ? "Adding…"
+              : `Add${selectedIds.size > 0 ? ` (${selectedIds.size})` : ""}`}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}