@wealthx/shadcn 1.4.1 → 1.5.1

package/src/components/ui/scenario-list.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { ScenarioItem } from "./scenario-item";
+import { AddScenarioButton } from "./borrowing-capacity-atoms";
+
+/**
+ * Left-sidebar organism for the Borrowing Capacity page.
+ *
+ * Renders a titled list of selectable, editable `ScenarioItem` rows followed
+ * by an `AddScenarioButton`. Drag-and-drop reordering is handled internally
+ * via the HTML5 DnD API; the consumer receives the final order via `onReorder`.
+ */
+
+export interface ScenarioListScenario {
+  /** Unique identifier */
+  id: string;
+  /** Display name (e.g. "Default Scenario") */
+  name: string;
+  /** Secondary descriptor (e.g. "Owner Occupier") */
+  description?: string;
+}
+
+export interface ScenarioListProps {
+  /** Section heading (default: "New Loans") */
+  title?: string;
+  /** Ordered list of scenarios to render */
+  scenarios: ScenarioListScenario[];
+  /** ID of the currently active scenario */
+  selectedId?: string;
+  /** Called when a scenario row is clicked */
+  onSelect?: (id: string) => void;
+  /** Called when "Update Scenario" is clicked in a kebab menu */
+  onEdit?: (id: string) => void;
+  /** Called when "Delete Scenario" is clicked in a kebab menu */
+  onDelete?: (id: string) => void;
+  /** Called when the Add button is clicked */
+  onAdd?: () => void;
+  /** Label for the add button (default: "Compare Loan Options") */
+  addLabel?: string;
+  /**
+   * Maximum number of scenarios allowed. When `scenarios.length >= maxScenarios`
+   * the add button is disabled.
+   */
+  maxScenarios?: number;
+  /** All items show a drag handle when true (default: true) */
+  isDraggable?: boolean;
+  /**
+   * Called with the new ordered ID array after a drag-and-drop reorder.
+   * The consumer is responsible for updating the `scenarios` prop accordingly.
+   */
+  onReorder?: (orderedIds: string[]) => void;
+  className?: string;
+}
+
+export function ScenarioList({
+  title = "New Loans",
+  scenarios,
+  selectedId,
+  onSelect,
+  onEdit,
+  onDelete,
+  onAdd,
+  addLabel = "Compare Loan Options",
+  maxScenarios,
+  isDraggable = true,
+  onReorder,
+  className,
+}: ScenarioListProps) {
+  const isAddDisabled =
+    maxScenarios !== undefined && scenarios.length >= maxScenarios;
+
+  // ── Drag & drop state ───────────────────────────────────────────────────────
+  const draggingId = useRef<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+
+  const handleDragStart = (id: string) => (e: React.DragEvent) => {
+    draggingId.current = id;
+    e.dataTransfer.effectAllowed = "move";
+  };
+
+  const handleDragOver = (id: string) => (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (id !== draggingId.current) setDragOverId(id);
+  };
+
+  const handleDragLeave = () => setDragOverId(null);
+
+  const handleDrop = (targetId: string) => (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOverId(null);
+
+    const sourceId = draggingId.current;
+    draggingId.current = null;
+
+    if (!sourceId || sourceId === targetId || !onReorder) return;
+
+    const ids = scenarios.map((s) => s.id);
+    const fromIdx = ids.indexOf(sourceId);
+    const toIdx = ids.indexOf(targetId);
+    if (fromIdx === -1 || toIdx === -1) return;
+
+    const reordered = [...ids];
+    reordered.splice(fromIdx, 1);
+    reordered.splice(toIdx, 0, sourceId);
+    onReorder(reordered);
+  };
+
+  const handleDragEnd = () => {
+    draggingId.current = null;
+    setDragOverId(null);
+  };
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="border-b border-border px-4 py-3">
+        <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+          {title}
+        </p>
+      </div>
+
+      {scenarios.map((scenario) => (
+        <ScenarioItem
+          key={scenario.id}
+          name={scenario.name}
+          description={scenario.description}
+          isSelected={scenario.id === selectedId}
+          isDraggable={isDraggable}
+          isDragOver={scenario.id === dragOverId}
+          onSelect={() => onSelect?.(scenario.id)}
+          onEdit={onEdit ? () => onEdit(scenario.id) : undefined}
+          onDelete={onDelete ? () => onDelete(scenario.id) : undefined}
+          onDragStart={isDraggable ? handleDragStart(scenario.id) : undefined}
+          onDragOver={isDraggable ? handleDragOver(scenario.id) : undefined}
+          onDragLeave={isDraggable ? handleDragLeave : undefined}
+          onDrop={isDraggable ? handleDrop(scenario.id) : undefined}
+          onDragEnd={isDraggable ? handleDragEnd : undefined}
+        />
+      ))}
+
+      <div className="p-3">
+        <AddScenarioButton
+          title={addLabel}
+          disabled={isAddDisabled}
+          onClick={onAdd}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/share-details-dialog.tsx

@@ -0,0 +1,238 @@
+import * as React from "react";
+import { CheckIcon, CopyIcon } 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 { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
+
+// ---------------------------------------------------------------------------
+// Shared helper
+// ---------------------------------------------------------------------------
+
+function Field({
+  id,
+  label,
+  required,
+  children,
+}: {
+  id?: string;
+  label: string;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={id}>
+        {label}
+        {required && <span className="ml-0.5 text-destructive">*</span>}
+      </Label>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ShareDetailsDialog
+// ---------------------------------------------------------------------------
+
+export interface ShareDetailsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contactName: string;
+  /** Pre-generated share link to copy. */
+  shareUrl: string;
+  /** When provided, shows an "Email link" button that calls this handler. */
+  onEmailLink?: () => void;
+  isSendingEmail?: boolean;
+  className?: string;
+}
+
+export function ShareDetailsDialog({
+  open,
+  onOpenChange,
+  contactName,
+  shareUrl,
+  onEmailLink,
+  isSendingEmail = false,
+  className,
+}: ShareDetailsDialogProps) {
+  const [copied, setCopied] = React.useState(false);
+
+  function handleCopy() {
+    navigator.clipboard.writeText(shareUrl).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="md" className={className}>
+        <DialogHeader>
+          <DialogTitle>Share Contact Details</DialogTitle>
+        </DialogHeader>
+
+        <p className="text-sm text-muted-foreground">
+          Share a secure link to{" "}
+          <span className="font-medium text-foreground">{contactName}</span>'s
+          financial summary report.
+        </p>
+
+        <Field label="Shareable link">
+          <div className="flex gap-2">
+            <Input
+              readOnly
+              value={shareUrl}
+              className="flex-1 font-mono text-xs text-muted-foreground"
+              onClick={(e) => (e.target as HTMLInputElement).select()}
+            />
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleCopy}
+              aria-label={copied ? "Copied" : "Copy link"}
+              className="shrink-0"
+            >
+              {copied ? (
+                <CheckIcon className="size-4 text-success" />
+              ) : (
+                <CopyIcon className="size-4" />
+              )}
+            </Button>
+          </div>
+          {copied && (
+            <p className="text-xs text-success">Link copied to clipboard!</p>
+          )}
+        </Field>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+          {onEmailLink && (
+            <Button onClick={onEmailLink} disabled={isSendingEmail}>
+              {isSendingEmail ? (
+                <>
+                  <Spinner className="size-3.5" />
+                  Sending…
+                </>
+              ) : (
+                "Email link"
+              )}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EmailTemplateDialog
+// ---------------------------------------------------------------------------
+
+export interface EmailTemplateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contactName: string;
+  contactEmail: string;
+  defaultSubject?: string;
+  defaultBody?: string;
+  onSend: (payload: { subject: string; body: string }) => void;
+  isSending?: boolean;
+  className?: string;
+}
+
+export function EmailTemplateDialog({
+  open,
+  onOpenChange,
+  contactName,
+  contactEmail,
+  defaultSubject = "",
+  defaultBody = "",
+  onSend,
+  isSending = false,
+  className,
+}: EmailTemplateDialogProps) {
+  const [subject, setSubject] = React.useState(defaultSubject);
+  const [body, setBody] = React.useState(defaultBody);
+
+  React.useEffect(() => {
+    if (open) {
+      setSubject(defaultSubject);
+      setBody(defaultBody);
+    }
+  }, [open, defaultSubject, defaultBody]);
+
+  const canSend = subject.trim() !== "" && body.trim() !== "" && !isSending;
+
+  return (
+    <Dialog open={open} onOpenChange={isSending ? undefined : onOpenChange}>
+      <DialogContent size="lg" className={className}>
+        <DialogHeader>
+          <DialogTitle>Send Email</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          {/* To — read-only recipient display */}
+          <Field label="To">
+            <div className="flex items-center gap-2 border border-border bg-muted/40 px-3 py-2 text-sm">
+              <span className="font-medium text-foreground">{contactName}</span>
+              <span className="text-muted-foreground">
+                &lt;{contactEmail}&gt;
+              </span>
+            </div>
+          </Field>
+
+          <Field id="etd-subject" label="Subject" required>
+            <Input
+              id="etd-subject"
+              placeholder="Email subject"
+              value={subject}
+              onChange={(e) => setSubject(e.target.value)}
+              disabled={isSending}
+            />
+          </Field>
+
+          <Field id="etd-body" label="Message" required>
+            <Textarea
+              id="etd-body"
+              rows={8}
+              placeholder="Write your message here…"
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              disabled={isSending}
+            />
+          </Field>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSending}
+          >
+            Cancel
+          </Button>
+          <Button onClick={() => onSend({ subject, body })} disabled={!canSend}>
+            {isSending ? (
+              <>
+                <Spinner className="size-3.5" />
+                Sending…
+              </>
+            ) : (
+              "Send Email"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/signup-form-primitives.tsx

@@ -0,0 +1,212 @@
+import React, { useState } from "react";
+import { EyeIcon, EyeOffIcon, Trash2Icon } from "lucide-react";
+import { Button } from "./button";
+import { Field, FieldError, FieldLabel } from "./field";
+import { Input } from "./input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { PasswordStrengthTooltip } from "./password-strength-tooltip";
+
+// ---------------------------------------------------------------------------
+// SectionHeading
+// ---------------------------------------------------------------------------
+
+export interface SectionHeadingProps {
+  children: React.ReactNode;
+}
+
+export function SectionHeading({ children }: SectionHeadingProps) {
+  return (
+    <div className="font-semibold text-lg text-foreground">{children}</div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FormField — label + required marker wrapper
+// ---------------------------------------------------------------------------
+
+export interface FormFieldProps {
+  label: string;
+  required?: boolean;
+  children: React.ReactNode;
+}
+
+export function FormField({ label, required, children }: FormFieldProps) {
+  return (
+    <Field>
+      <FieldLabel>
+        {label}
+        {required && <span className="text-destructive ml-0.5">*</span>}
+      </FieldLabel>
+      {children}
+    </Field>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PasswordField — input with show/hide toggle + optional strength popover
+// ---------------------------------------------------------------------------
+
+const STRENGTH_RULES = [
+  { test: (p: string) => p.length >= 8 },
+  { test: (p: string) => /[A-Z]/.test(p) },
+  { test: (p: string) => /[a-z]/.test(p) },
+  { test: (p: string) => /\d/.test(p) },
+  { test: (p: string) => /[^A-Za-z0-9]/.test(p) },
+];
+
+export interface PasswordFieldProps {
+  label: string;
+  placeholder: string;
+  required?: boolean;
+  showStrengthPopover?: boolean;
+  onValueChange?: (v: string) => void;
+}
+
+export function PasswordField({
+  label,
+  placeholder,
+  required,
+  showStrengthPopover,
+  onValueChange,
+}: PasswordFieldProps) {
+  const [show, setShow] = useState(false);
+  const [error, setError] = useState("");
+  const [touched, setTouched] = useState(false);
+  const [value, setValue] = useState("");
+  const [typingStarted, setTypingStarted] = useState(false);
+
+  const allRulesPass = STRENGTH_RULES.every((r) => r.test(value));
+  const isPopoverOpen = !!showStrengthPopover && typingStarted && !allRulesPass;
+
+  const validate = (v: string) => {
+    if (v.length > 0 && v.length < 8) return "Min. 8 characters required";
+    return "";
+  };
+
+  const inputEl = (
+    <div className="relative">
+      <Input
+        type={show ? "text" : "password"}
+        placeholder={placeholder}
+        className="pr-10"
+        value={value}
+        onChange={(e) => {
+          const v = e.target.value;
+          setValue(v);
+          onValueChange?.(v);
+          if (!typingStarted && v.length > 0) setTypingStarted(true);
+          if (touched) setError(validate(v));
+        }}
+        onBlur={() => {
+          setTouched(true);
+          setError(validate(value));
+        }}
+      />
+      <button
+        type="button"
+        aria-label={show ? "Hide password" : "Show password"}
+        className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
+        onClick={() => setShow((s) => !s)}
+      >
+        {show ? (
+          <EyeOffIcon className="size-4" />
+        ) : (
+          <EyeIcon className="size-4" />
+        )}
+      </button>
+    </div>
+  );
+
+  return (
+    <Field>
+      <FieldLabel>
+        {label}
+        {required && <span className="text-destructive ml-0.5">*</span>}
+      </FieldLabel>
+      {showStrengthPopover ? (
+        <PasswordStrengthTooltip
+          open={isPopoverOpen}
+          password={value}
+          side="right"
+        >
+          {inputEl}
+        </PasswordStrengthTooltip>
+      ) : (
+        inputEl
+      )}
+      <div className="min-h-5">
+        {touched && error && <FieldError>{error}</FieldError>}
+      </div>
+    </Field>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StaffRowItem — email + role select row inside InviteStaffView
+// ---------------------------------------------------------------------------
+
+export interface StaffMember {
+  id: string;
+  email: string;
+  role: string;
+}
+
+export interface StaffRowItemProps {
+  member: StaffMember;
+  onRemove: (id: string) => void;
+  onChange: (id: string, field: "email" | "role", value: string) => void;
+  showRemove: boolean;
+  roleOptions?: string[];
+}
+
+const DEFAULT_ROLE_OPTIONS = ["Admin", "Broker", "Support"];
+
+export function StaffRowItem({
+  member,
+  onRemove,
+  onChange,
+  showRemove,
+  roleOptions = DEFAULT_ROLE_OPTIONS,
+}: StaffRowItemProps) {
+  return (
+    <div className="flex items-center gap-3 w-full">
+      <Input
+        className="flex-1"
+        placeholder="staff@company.com"
+        value={member.email}
+        onChange={(e) => onChange(member.id, "email", e.target.value)}
+      />
+      <Select
+        value={member.role}
+        onValueChange={(v) => onChange(member.id, "role", v as string)}
+      >
+        <SelectTrigger className="w-[140px] shrink-0">
+          <SelectValue placeholder="Select Role" />
+        </SelectTrigger>
+        <SelectContent>
+          {roleOptions.map((r) => (
+            <SelectItem key={r} value={r}>
+              {r}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {showRemove && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => onRemove(member.id)}
+          aria-label="Remove staff member"
+        >
+          <Trash2Icon className="size-4" />
+        </Button>
+      )}
+    </div>
+  );
+}