@wealthx/shadcn 1.4.1 → 1.5.1

package/src/components/ui/account-list-carousel.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "./button";
+import { Plus } from "lucide-react";
+
+export type AccountCarouselType = "bankAccount" | "credit" | "propertyLoan";
+
+export interface AccountCarouselItem {
+  id: string;
+  name: string;
+  /** Institution name (e.g. "Commonwealth Bank") */
+  institution: string;
+  balance: number;
+}
+
+export interface AccountListCarouselProps {
+  accounts: AccountCarouselItem[];
+  type: AccountCarouselType;
+  /** When provided, shows an "Add Account" button at the end (hidden for propertyLoan) */
+  onAddAccount?: () => void;
+  className?: string;
+}
+
+function AccountCard({
+  item,
+  isCombined,
+}: {
+  item: { name: string; institution?: string; balance: number };
+  isCombined?: boolean;
+}) {
+  return (
+    <div className="flex shrink-0 flex-col gap-1.5 border border-border p-3 w-36">
+      <p className="text-xs text-muted-foreground truncate">
+        {isCombined ? "All accounts" : item.institution}
+      </p>
+      <p className="text-sm font-medium text-foreground truncate">
+        {item.name}
+      </p>
+      <p className="text-sm font-semibold tabular-nums text-foreground">
+        {formatCurrency(item.balance)}
+      </p>
+    </div>
+  );
+}
+
+export function AccountListCarousel({
+  accounts,
+  type,
+  onAddAccount,
+  className,
+}: AccountListCarouselProps) {
+  const combinedBalance = accounts.reduce((sum, a) => sum + a.balance, 0);
+  const showCombined = type === "bankAccount" && accounts.length > 0;
+  const showAddButton = type !== "propertyLoan" && onAddAccount;
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 overflow-x-auto pb-1 scrollbar-none",
+        className,
+      )}
+    >
+      {showCombined && (
+        <AccountCard
+          item={{ name: "Combined", balance: combinedBalance }}
+          isCombined
+        />
+      )}
+
+      {accounts.map((account) => (
+        <AccountCard key={account.id} item={account} />
+      ))}
+
+      {showAddButton && (
+        <Button
+          variant="outline"
+          onClick={onAddAccount}
+          className="shrink-0 h-auto w-36 flex-col gap-1.5 border-dashed p-3 text-muted-foreground"
+        >
+          <Plus className="h-4 w-4" />
+          <span className="text-xs">Add Account</span>
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -99,7 +99,7 @@ export function AddLeadModal({
 
   return (
     <Dialog open={open} onOpenChange={isSubmitting ? undefined : onOpenChange}>
-      <DialogContent size="2xl" align="top" className={className}>
+      <DialogContent size="2xl" className={className}>
         <DialogHeader>
           <DialogTitle>Add Lead</DialogTitle>
         </DialogHeader>

package/src/components/ui/agent-evaluation-toast.tsx

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { Bot, CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+/**
+ * AgentEvaluationToast — WealthX DS (L3 Molecule)
+ *
+ * Displays an agent's self-evaluation result after a task is assigned in the
+ * AI pipeline stage flow. The agent reasons against the task description +
+ * expectation and returns a confidence percentage plus a result:
+ * - **Accepted** (≥70%) — agent has all inputs and will proceed autonomously
+ * - **Partial** (40–69%) — agent will attempt but flagged uncertainty; may need
+ *   broker review when done
+ * - **Declined** (<40%) — agent lacks required context; task stays with broker
+ *
+ * ### Usage — as a Sonner toast
+ * ```tsx
+ * import { showAgentEvaluationToast } from "@wealthx/shadcn/agent-evaluation-toast";
+ *
+ * showAgentEvaluationToast({
+ *   agentName: "Ledger Agent",
+ *   taskName: "Run serviceability check",
+ *   confidence: 84,
+ *   result: "accepted",
+ *   reasoning: "I have all required inputs to complete this task.",
+ * });
+ * ```
+ *
+ * ### Usage — as a standalone card (stories / inline display)
+ * ```tsx
+ * import { AgentEvaluationCard } from "@wealthx/shadcn/agent-evaluation-toast";
+ *
+ * <AgentEvaluationCard
+ *   agentName="Ledger Agent"
+ *   taskName="Run serviceability check"
+ *   confidence={84}
+ *   result="accepted"
+ *   reasoning="I have all required inputs to complete this task."
+ * />
+ * ```
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type AgentEvaluationResult = "accepted" | "partial" | "declined";
+
+export interface AgentEvaluationData {
+  agentName: string;
+  taskName: string;
+  /** Agent confidence — 0 to 100. */
+  confidence: number;
+  result: AgentEvaluationResult;
+  /** Brief agent reasoning shown below the headline. */
+  reasoning: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const RESULT_CONFIG: Record<
+  AgentEvaluationResult,
+  {
+    label: string;
+    icon: React.ElementType;
+    badgeClass: string;
+    borderClass: string;
+  }
+> = {
+  accepted: {
+    label: "Accepted",
+    icon: CheckCircle2,
+    badgeClass: "border-success/40 bg-success/10 text-success-text gap-1",
+    borderClass: "border-success/30",
+  },
+  partial: {
+    label: "Partial match",
+    icon: AlertTriangle,
+    badgeClass: "border-warning/40 bg-warning/10 text-warning-text gap-1",
+    borderClass: "border-warning/30",
+  },
+  declined: {
+    label: "Declined",
+    icon: XCircle,
+    badgeClass:
+      "border-destructive/40 bg-destructive/10 text-destructive-text gap-1",
+    borderClass: "border-destructive/30",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// AgentEvaluationCard (standalone / inline)
+// ---------------------------------------------------------------------------
+
+export interface AgentEvaluationCardProps extends AgentEvaluationData {
+  className?: string;
+}
+
+export function AgentEvaluationCard({
+  agentName,
+  taskName,
+  confidence,
+  result,
+  reasoning,
+  className,
+}: AgentEvaluationCardProps) {
+  const cfg = RESULT_CONFIG[result];
+  const Icon = cfg.icon;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 rounded border bg-card p-3 text-sm shadow-sm",
+        cfg.borderClass,
+        className,
+      )}
+    >
+      {/* Header row */}
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded border bg-muted">
+            <Bot className="size-3.5 text-muted-foreground" />
+          </span>
+          <div className="min-w-0">
+            <p className="truncate font-medium text-foreground leading-tight">
+              {agentName}
+            </p>
+            <p className="truncate text-xs text-muted-foreground">
+              evaluated &ldquo;{taskName}&rdquo;
+            </p>
+          </div>
+        </div>
+        <Badge
+          variant="outline"
+          className={cn("shrink-0 text-[11px]", cfg.badgeClass)}
+        >
+          <Icon className="size-3" />
+          {cfg.label}
+        </Badge>
+      </div>
+
+      {/* Confidence bar */}
+      <div className="flex items-center gap-2">
+        <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+          <div
+            className={cn(
+              "h-full rounded-full transition-all",
+              result === "accepted"
+                ? "bg-success"
+                : result === "partial"
+                  ? "bg-warning"
+                  : "bg-destructive",
+            )}
+            style={{ width: `${confidence}%` }}
+          />
+        </div>
+        <span className="shrink-0 text-xs font-medium text-foreground tabular-nums">
+          {confidence}%
+        </span>
+      </div>
+
+      {/* Reasoning */}
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        &ldquo;{reasoning}&rdquo;
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// showAgentEvaluationToast (Sonner integration)
+// ---------------------------------------------------------------------------
+
+/**
+ * Fire a Sonner toast showing the agent's evaluation result.
+ * Requires `<Toaster />` to be mounted in the app.
+ */
+export function showAgentEvaluationToast(data: AgentEvaluationData): void {
+  toast.custom(
+    () => (
+      <div className="w-[360px]">
+        <AgentEvaluationCard {...data} />
+      </div>
+    ),
+    { duration: 6000 },
+  );
+}

package/src/components/ui/ai-builder.tsx

@@ -150,9 +150,7 @@ export function AgentCard({
 
       <div className="flex flex-col gap-2">
         {infoBadge && (
-          <p className="bg-info/10 text-info px-2 py-1 text-xs">
-            {infoBadge}
-          </p>
+          <p className="bg-info/10 text-info px-2 py-1 text-xs">{infoBadge}</p>
         )}
         {tags.length > 0 && (
           <div className="flex flex-wrap gap-1">
@@ -187,7 +185,7 @@ export function AgentMenuModal({
 }: AgentMenuModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg" align="top">
+      <DialogContent className="max-w-lg">
         <DialogHeader>
           <DialogTitle>{agentTitle}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
@@ -383,7 +381,7 @@ export function ServiceConfigurationModal({
 }: ServiceConfigurationModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md" align="top">
+      <DialogContent className="max-w-md">
         {isConnected ? (
           <>
             <DialogHeader>

package/src/components/ui/ai-conversations.tsx

@@ -1601,7 +1601,7 @@ export function AiConvAssignAdvisorDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent align="top">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Assign to advisor</DialogTitle>
           <DialogDescription>

package/src/components/ui/applicant-document-checklist.tsx

@@ -0,0 +1,175 @@
+import * as React from "react";
+import { CheckCircle2, Circle, Upload } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type DocumentChecklistItemStatus =
+  | "pending"
+  | "uploaded"
+  | "not-required";
+
+export type DocumentChecklistItem = {
+  id: string;
+  /** Document category label — e.g. "Bank Statements", "Income Verification" */
+  category: string;
+  /** Filename of the uploaded file, if any */
+  fileName?: string;
+  /** Upload status */
+  status: DocumentChecklistItemStatus;
+};
+
+export type ApplicantDocumentChecklistProps = {
+  /** Applicant label shown above the list */
+  applicantName?: string;
+  /** List of document requirements */
+  items: DocumentChecklistItem[];
+  /** Called when the applicant selects a file for an item */
+  onUpload?: (itemId: string, file: File) => void;
+  /** Called when the applicant removes an uploaded file */
+  onRemove?: (itemId: string) => void;
+  className?: string;
+};
+
+// ─── Internal helpers ─────────────────────────────────────────────────────────
+
+type StatusIconProps = { status: DocumentChecklistItemStatus };
+
+function StatusIcon({ status }: StatusIconProps) {
+  if (status === "uploaded") {
+    return <CheckCircle2 className="size-5 shrink-0 text-primary" />;
+  }
+  return <Circle className="size-5 shrink-0 text-muted-foreground" />;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * ApplicantDocumentChecklist — applicant-facing document upload list.
+ *
+ * Shows a checklist of required document categories. Each row has a status
+ * icon, category label, and an upload button. Once a file is uploaded the row
+ * shows the filename and a Remove action.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App (loan wizard — Supporting Documents tab)
+ */
+export function ApplicantDocumentChecklist({
+  applicantName,
+  items,
+  onUpload,
+  onRemove,
+  className,
+}: ApplicantDocumentChecklistProps) {
+  const inputRefs = React.useRef<Record<string, HTMLInputElement | null>>({});
+
+  function handleFileChange(
+    itemId: string,
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) {
+    const file = e.target.files?.[0];
+    if (file) onUpload?.(itemId, file);
+    // Reset so re-selecting the same file fires onChange again
+    e.target.value = "";
+  }
+
+  const { uploadedCount, totalRequired } = React.useMemo(() => {
+    let uploaded = 0;
+    let required = 0;
+    for (const i of items) {
+      if (i.status !== "not-required") required++;
+      if (i.status === "uploaded") uploaded++;
+    }
+    return { uploadedCount: uploaded, totalRequired: required };
+  }, [items]);
+
+  return (
+    <div className={cn("flex flex-col gap-6 font-sans", className)}>
+      <div className="flex flex-col gap-1">
+        {applicantName && (
+          <p className="text-sm text-muted-foreground">{applicantName}</p>
+        )}
+        <p className="text-sm font-medium text-foreground">
+          {uploadedCount} of {totalRequired} documents uploaded
+        </p>
+        <div className="h-1.5 w-full bg-muted">
+          <div
+            className="h-full bg-primary transition-all"
+            style={{
+              width:
+                totalRequired > 0
+                  ? `${Math.round((uploadedCount / totalRequired) * 100)}%`
+                  : "0%",
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col divide-y divide-border border border-border">
+        {items.map((item) => (
+          <div key={item.id} className="flex items-center gap-3 px-4 py-3">
+            <StatusIcon status={item.status} />
+
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span
+                className={cn(
+                  "text-sm font-medium",
+                  item.status === "uploaded"
+                    ? "text-foreground"
+                    : "text-muted-foreground",
+                )}
+              >
+                {item.category}
+              </span>
+              {item.fileName && (
+                <span className="truncate text-xs text-muted-foreground">
+                  {item.fileName}
+                </span>
+              )}
+            </div>
+
+            <div className="flex shrink-0 items-center gap-2">
+              {item.status === "uploaded" ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs text-destructive hover:text-destructive"
+                  onClick={() => onRemove?.(item.id)}
+                >
+                  Remove
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5 text-xs"
+                    onClick={() => inputRefs.current[item.id]?.click()}
+                  >
+                    <Upload className="size-3.5" />
+                    Upload
+                  </Button>
+                  <input
+                    ref={(el) => {
+                      inputRefs.current[item.id] = el;
+                    }}
+                    type="file"
+                    accept=".pdf,.jpg,.jpeg,.png"
+                    className="sr-only"
+                    onChange={(e) => handleFileChange(item.id, e)}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        Accepted formats: PDF, JPG, PNG. Max 10 MB per file.
+      </p>
+    </div>
+  );
+}