@wealthx/shadcn 1.3.2 → 1.3.3

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

@@ -0,0 +1,264 @@
+import { useState } from "react";
+import { GripVertical, Plus, Trash2 } from "lucide-react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Switch } from "./switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { cn } from "../../lib/utils";
+
+/** Predefined document category options advisors can pick from. */
+const DOCUMENT_TYPES = [
+  "Income Verification",
+  "Bank Statements",
+  "Rental Income",
+  "Property Evidence",
+  "Liabilities",
+  "Identity",
+  "Employment Contract",
+  "Notice of Assessment",
+  "Contract of Sale",
+  "Savings History",
+];
+
+export interface ChecklistCategory {
+  id: string;
+  name: string;
+  /** Required for the main applicant. */
+  requiredMain: boolean;
+  /** Required for the co-applicant. */
+  requiredCo: boolean;
+  /** true when the advisor typed a custom name not in the predefined list. */
+  custom?: boolean;
+}
+
+export interface DocumentChecklistTemplateProps {
+  /** Initial list of checklist categories. */
+  categories?: ChecklistCategory[];
+  /** Called on every edit (add / change / delete). */
+  onChange?: (categories: ChecklistCategory[]) => void;
+  /** Called when the advisor clicks Save. */
+  onSave?: (categories: ChecklistCategory[]) => void;
+  /** Called when the advisor clicks Cancel. */
+  onCancel?: () => void;
+  className?: string;
+}
+
+/**
+ * DocumentChecklistTemplate — organism
+ *
+ * Editable list of document categories. Each category has separate Required
+ * toggles for Main and Co applicants. Name is chosen from a predefined
+ * dropdown or typed as a custom value.
+ */
+export function DocumentChecklistTemplate({
+  categories: initial = [],
+  onChange,
+  onSave,
+  onCancel,
+  className,
+}: DocumentChecklistTemplateProps) {
+  const [categories, setCategories] = useState<ChecklistCategory[]>(() =>
+    initial.map((c) => ({
+      ...c,
+      custom: c.custom ?? !DOCUMENT_TYPES.includes(c.name),
+    })),
+  );
+  const [isDirty, setIsDirty] = useState(false);
+
+  function update(next: ChecklistCategory[]) {
+    setCategories(next);
+    setIsDirty(true);
+    onChange?.(next);
+  }
+
+  function handleSelectType(id: string, value: string) {
+    if (value === "__custom__") {
+      update(
+        categories.map((c) =>
+          c.id === id ? { ...c, name: "", custom: true } : c,
+        ),
+      );
+    } else {
+      update(
+        categories.map((c) =>
+          c.id === id ? { ...c, name: value, custom: false } : c,
+        ),
+      );
+    }
+  }
+
+  function handleCustomName(id: string, name: string) {
+    update(categories.map((c) => (c.id === id ? { ...c, name } : c)));
+  }
+
+  function handleToggle(id: string, field: "requiredMain" | "requiredCo") {
+    update(
+      categories.map((c) => (c.id === id ? { ...c, [field]: !c[field] } : c)),
+    );
+  }
+
+  function handleDelete(id: string) {
+    update(categories.filter((c) => c.id !== id));
+  }
+
+  function handleAdd() {
+    update([
+      ...categories,
+      {
+        id: `cat-${Date.now()}`,
+        name: "",
+        requiredMain: true,
+        requiredCo: false,
+        custom: false,
+      },
+    ]);
+  }
+
+  const COLS = "grid-cols-[20px_1fr_64px_64px_32px]";
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {/* ── Header — title only ── */}
+      <div className="shrink-0 border-b border-border px-6 py-4">
+        <span className="text-label-large text-foreground">
+          Document Checklist Template
+        </span>
+      </div>
+
+      {/* ── Description ── */}
+      <div className="shrink-0 border-b border-border px-6 py-3">
+        <p className="text-body-small text-muted-foreground">
+          Define the document categories required for loan applications. Set
+          required status separately for Main and Co-applicants.
+        </p>
+      </div>
+
+      {/* ── Body ── */}
+      <div className="flex flex-col overflow-y-auto">
+        {/* Column headers */}
+        {categories.length > 0 && (
+          <div
+            className={cn(
+              "grid shrink-0 items-center gap-3 border-b border-border bg-muted/30 px-6 py-2",
+              COLS,
+            )}
+          >
+            <span />
+            <span className="text-xs font-medium text-muted-foreground">
+              Category Name
+            </span>
+            <span className="text-center text-xs font-medium text-muted-foreground">
+              Main
+            </span>
+            <span className="text-center text-xs font-medium text-muted-foreground">
+              Co
+            </span>
+            <span />
+          </div>
+        )}
+
+        {/* Rows */}
+        {categories.length === 0 ? (
+          <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
+            No categories yet. Add one below.
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {categories.map((cat) => (
+              <div
+                key={cat.id}
+                className={cn("grid items-center gap-3 px-6 py-3", COLS)}
+              >
+                <GripVertical className="size-4 shrink-0 text-muted-foreground/30" />
+
+                {/* Name: Select (predefined) or Input (custom) */}
+                {cat.custom ? (
+                  <Input
+                    value={cat.name}
+                    onChange={(e) => handleCustomName(cat.id, e.target.value)}
+                    placeholder="Type category name…"
+                    className="h-8 text-sm"
+                    autoFocus
+                  />
+                ) : (
+                  <Select
+                    value={cat.name || ""}
+                    onValueChange={(v) => handleSelectType(cat.id, v)}
+                  >
+                    <SelectTrigger size="sm" className="w-full">
+                      <SelectValue placeholder="Select type…" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DOCUMENT_TYPES.map((type) => (
+                        <SelectItem key={type} value={type}>
+                          {type}
+                        </SelectItem>
+                      ))}
+                      <SelectItem value="__custom__">Custom…</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+
+                <div className="flex justify-center">
+                  <Switch
+                    checked={cat.requiredMain}
+                    onCheckedChange={() => handleToggle(cat.id, "requiredMain")}
+                    size="sm"
+                  />
+                </div>
+
+                <div className="flex justify-center">
+                  <Switch
+                    checked={cat.requiredCo}
+                    onCheckedChange={() => handleToggle(cat.id, "requiredCo")}
+                    size="sm"
+                  />
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 text-muted-foreground hover:text-destructive"
+                  onClick={() => handleDelete(cat.id)}
+                >
+                  <Trash2 className="size-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Add Category */}
+        <div className="border-t border-border px-6 py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-1.5"
+            onClick={handleAdd}
+          >
+            <Plus className="size-4" />
+            Add Category
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Footer ── */}
+      <div className="flex shrink-0 justify-end gap-2 border-t border-border px-6 py-4">
+        {onCancel && (
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+        <Button onClick={() => onSave?.(categories)} disabled={!isDirty}>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/drawer.tsx

@@ -85,8 +85,8 @@ function DrawerContent({
           // WealthX: no rounded corners (Figma: sharp edges)
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r",
           className,
         )}
         data-slot="drawer-content"

package/src/components/ui/financial-cards.tsx

@@ -22,6 +22,12 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { formatDateShort } from "@/lib/format-date";
 import { Badge } from "./badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
 import { RadioGroup, RadioGroupItem } from "./radio-group";
 import {
   FinancialDetailField,
@@ -129,11 +135,16 @@ export function PropertyCard({
           variant="ghost"
           aria-expanded={expanded}
           onClick={() => setExpanded((prev) => !prev)}
-          className="h-auto w-full justify-start gap-1.5 px-5 py-3 text-left"
+          className="h-auto w-full justify-start gap-1.5 px-5 py-3 text-left has-[>svg]:px-5"
         >
-          <span className="text-label-medium text-foreground">{address}</span>
-          {type && <Badge variant="outline">{type}</Badge>}
-          <span className="flex-1" />
+          <span className="flex-1 min-w-0 truncate text-label-medium text-foreground">
+            {address}
+          </span>
+          {type && (
+            <Badge className="shrink-0" variant="outline">
+              {type}
+            </Badge>
+          )}
           <ChevronDown
             className={cn(
               "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
@@ -158,14 +169,16 @@ export function PropertyCard({
       <div
         className={cn(
           "grid gap-5 px-5 py-[15px]",
-          isLinkedToBank ? "grid-cols-3" : "grid-cols-1",
+          isLinkedToBank ? "grid-cols-2" : "grid-cols-1",
         )}
       >
         <FinancialDetailField label="Estimated Value" value={estimated} />
         {isLinkedToBank && (
           <>
             <FinancialDetailField label="Loan Amount" value={loanAmount} />
-            <FinancialDetailField label="Equity" value={equity} />
+            <div className="col-span-2">
+              <FinancialDetailField label="Equity" value={equity} />
+            </div>
           </>
         )}
       </div>
@@ -622,6 +635,8 @@ export interface AboutCardProps {
   gender?: string;
   maritalStatus?: string;
   numDependants?: string;
+  /** Individual dependant records — shows DOB + age for each. */
+  dependants?: Array<{ dob: string }>;
   citizenStatus?: string;
   residentialAddress?: string;
   residentialStatus?: string;
@@ -631,6 +646,19 @@ export interface AboutCardProps {
   passport?: string;
   propertyInTrust?: string;
   companyOwnership?: string;
+  /** Remove the outer card border. Use when the card is already inside a bordered container. */
+  borderless?: boolean;
+}
+
+function ageFromDob(dobStr: string): number | null {
+  if (!dobStr) return null;
+  const dob = new Date(dobStr);
+  if (isNaN(dob.getTime())) return null;
+  const today = new Date();
+  let age = today.getFullYear() - dob.getFullYear();
+  const m = today.getMonth() - dob.getMonth();
+  if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
+  return age >= 0 ? age : null;
 }
 
 /**
@@ -647,6 +675,7 @@ export function AboutCard({
   gender,
   maritalStatus,
   numDependants,
+  dependants,
   citizenStatus,
   residentialAddress,
   residentialStatus,
@@ -656,6 +685,7 @@ export function AboutCard({
   passport,
   propertyInTrust,
   companyOwnership,
+  borderless = false,
 }: AboutCardProps) {
   const fullName =
     [title, firstName, lastName].filter(Boolean).join(" ") || "—";
@@ -671,13 +701,36 @@ export function AboutCard({
       : undefined;
 
   return (
-    <div className="border border-border overflow-hidden">
-      <div className="grid grid-cols-2 gap-x-8 gap-y-4 px-5 py-4">
+    <div
+      className={cn(
+        "overflow-hidden divide-y divide-border",
+        !borderless && "border border-border",
+      )}
+    >
+      {/* Identity — personal details + citizenship documents */}
+      <div className="grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4">
         <FinancialDetailField label="Full Name" value={fullName} />
         <FinancialDetailField label="Date of Birth" value={dob || "—"} />
         <FinancialDetailField label="Gender" value={gender || "—"} />
+        <FinancialDetailField
+          label="Citizenship"
+          value={citizenStatus || "—"}
+        />
+        <FinancialDetailField
+          label="Driver's Licence"
+          value={driversLicence || "—"}
+        />
+        <FinancialDetailField label="Passport" value={passport || "—"} />
+      </div>
+
+      {/* Contact */}
+      <div className="grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4">
         <FinancialDetailField label="Phone" value={phone || "—"} />
         <FinancialDetailField label="Email" value={email || "—"} />
+      </div>
+
+      {/* Family — marital status + dependants as a dedicated section */}
+      <div className="grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4">
         <FinancialDetailField
           label="Marital Status"
           value={maritalStatus || "—"}
@@ -686,14 +739,30 @@ export function AboutCard({
           label="No. of Dependants"
           value={numDependants ?? "—"}
         />
-        <FinancialDetailField
-          label="Citizenship"
-          value={citizenStatus || "—"}
-        />
-        <FinancialDetailField
-          label="Residential Address"
-          value={residentialAddress || "—"}
-        />
+        {dependants &&
+          dependants.map((dep, i) => {
+            const age = ageFromDob(dep.dob);
+            const dobFormatted = formatDateShort(dep.dob) || "—";
+            const value =
+              age !== null ? `${dobFormatted} · age ${age}` : dobFormatted;
+            return (
+              <FinancialDetailField
+                key={i}
+                label={`Dependant ${i + 1}`}
+                value={value}
+              />
+            );
+          })}
+      </div>
+
+      {/* Residence */}
+      <div className="grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4">
+        <div className="col-span-2">
+          <FinancialDetailField
+            label="Residential Address"
+            value={residentialAddress || "—"}
+          />
+        </div>
         <FinancialDetailField
           label="Residential Status"
           value={residentialStatus || "—"}
@@ -701,11 +770,10 @@ export function AboutCard({
         {timeAtAddress && (
           <FinancialDetailField label="Time at Address" value={timeAtAddress} />
         )}
-        <FinancialDetailField
-          label="Driver's Licence"
-          value={driversLicence || "—"}
-        />
-        <FinancialDetailField label="Passport" value={passport || "—"} />
+      </div>
+
+      {/* Ownership */}
+      <div className="grid grid-cols-4 gap-x-6 gap-y-4 px-5 py-4">
         <FinancialDetailField
           label="Property in Trust"
           value={propertyInTrust || "—"}
@@ -740,73 +808,92 @@ export interface IncomeCardProps {
   items: IncomeCardItem[];
   /** Pre-formatted total monthly income e.g. "$12,300" */
   totalMonthly?: string;
+  /** Remove the outer card border. Use when the card is already inside a bordered container. */
+  borderless?: boolean;
 }
 
-
 /**
  * Display card for applicant income items.
- * Each income source renders as a bordered row with type, company, and amount.
+ * Each income source is an accordion row: collapsed = type + amount,
+ * expanded = full employment details.
  */
-export function IncomeCard({ items, totalMonthly }: IncomeCardProps) {
+export function IncomeCard({
+  items,
+  totalMonthly,
+  borderless = false,
+}: IncomeCardProps) {
   if (items.length === 0) {
     return (
-      <div className="border border-border px-5 py-4">
+      <div className={cn("px-5 py-4", !borderless && "border border-border")}>
         <p className="text-sm text-muted-foreground">No income recorded.</p>
       </div>
     );
   }
 
   return (
-    <div className="border border-border overflow-hidden flex flex-col">
-      {items.map((item, i) => (
-        <div
-          key={i}
-          className={cn(
-            "flex flex-col gap-3 px-5 py-[15px]",
-            i < items.length - 1 && "border-b border-border",
-          )}
-        >
-          {/* Primary row: Type | Job Title | Amount */}
-          <div className="grid grid-cols-3 gap-x-6">
-            <FinancialDetailField label="Type" value={item.incomeType || "—"} />
-            <FinancialDetailField
-              label="Job Title"
-              value={item.jobTitle || "—"}
-            />
-            <FinancialDetailField label="Amount" value={item.amountLabel} />
-          </div>
-          {/* Secondary row: Company | Start Date | Status */}
-          <div className="grid grid-cols-3 gap-x-6">
-            <FinancialDetailField
-              label="Company"
-              value={item.companyName || "—"}
-            />
-            <FinancialDetailField
-              label="Start Date"
-              value={formatDateShort(item.startDate)}
-            />
-            <FinancialDetailField
-              label="Status"
-              value={
-                item.stillInPosition === undefined
-                  ? "—"
-                  : item.stillInPosition
-                    ? "Still in position"
-                    : item.endDate
-                      ? `Ended ${formatDateShort(item.endDate)}`
-                      : "No longer in position"
-              }
-            />
-          </div>
-          {/* Company address — full width if present */}
-          {item.companyAddress && (
-            <FinancialDetailField
-              label="Company Address"
-              value={item.companyAddress}
-            />
-          )}
-        </div>
-      ))}
+    <div
+      className={cn(
+        "overflow-hidden flex flex-col",
+        !borderless && "border border-border",
+      )}
+    >
+      <Accordion openMultiple>
+        {items.map((item, i) => (
+          <AccordionItem key={i} value={String(i)}>
+            <AccordionTrigger className="px-5">
+              <div className="flex flex-1 items-center justify-between pr-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-label-medium text-foreground">
+                    {item.incomeType}
+                  </span>
+                  {item.jobTitle && (
+                    <span className="text-body-small text-muted-foreground">
+                      · {item.jobTitle}
+                    </span>
+                  )}
+                </div>
+                <span className="text-label-medium text-foreground">
+                  {item.amountLabel}
+                </span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-5">
+              <div className="grid grid-cols-3 gap-x-6 gap-y-4 pb-2 pt-1">
+                <FinancialDetailField
+                  label="Job Title"
+                  value={item.jobTitle || "—"}
+                />
+                <FinancialDetailField
+                  label="Company"
+                  value={item.companyName || "—"}
+                />
+                <FinancialDetailField
+                  label="Start Date"
+                  value={formatDateShort(item.startDate)}
+                />
+                <FinancialDetailField
+                  label="Status"
+                  value={
+                    item.stillInPosition === undefined
+                      ? "—"
+                      : item.stillInPosition
+                        ? "Still in position"
+                        : item.endDate
+                          ? `Ended ${formatDateShort(item.endDate)}`
+                          : "No longer in position"
+                  }
+                />
+                {item.companyAddress && (
+                  <FinancialDetailField
+                    label="Company Address"
+                    value={item.companyAddress}
+                  />
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
       {totalMonthly && (
         <FinancialSubtotalFrame>
           <FinancialSubtotalBlock
@@ -865,23 +952,34 @@ export interface ExpensesCardProps {
   items: ExpensesCardItem[];
   /** Pre-formatted total monthly expenses e.g. "$2,100" */
   totalMonthly?: string;
+  /** Remove the outer card border. Use when the card is already inside a bordered container. */
+  borderless?: boolean;
 }
 
 /**
  * Display card for applicant expense items.
  * Each expense renders as an icon-labelled row with a destructive amount value.
  */
-export function ExpensesCard({ items, totalMonthly }: ExpensesCardProps) {
+export function ExpensesCard({
+  items,
+  totalMonthly,
+  borderless = false,
+}: ExpensesCardProps) {
   if (items.length === 0) {
     return (
-      <div className="border border-border px-5 py-4">
+      <div className={cn("px-5 py-4", !borderless && "border border-border")}>
         <p className="text-sm text-muted-foreground">No expenses recorded.</p>
       </div>
     );
   }
 
   return (
-    <div className="border border-border overflow-hidden flex flex-col">
+    <div
+      className={cn(
+        "overflow-hidden flex flex-col",
+        !borderless && "border border-border",
+      )}
+    >
       <div className="flex flex-col">
         {items.map((item, i) => {
           const Icon = getExpenseIcon(item.expenseType);

package/src/components/ui/financial-drawers.tsx

@@ -106,7 +106,7 @@ export function SummaryReportDrawer({
         showCloseButton={false}
         className="w-[min(1080px,90vw)] max-w-none p-0"
       >
-        <div className="flex max-h-[100dvh] min-h-0 flex-1 flex-col overflow-hidden px-8 py-6">
+        <div className="flex max-h-[100dvh] min-h-0 flex-1 flex-col gap-4 overflow-hidden px-8 py-6">
           {/* ── Header chrome ── */}
           <div className="shrink-0 space-y-4">
             <div className="flex flex-col gap-3">
@@ -147,7 +147,7 @@ export function SummaryReportDrawer({
                         {contactName} View
                       </span>
                       <Button
-                        variant="outline"
+                        variant="outline-secondary"
                         size="sm"
                         onClick={onCreateJointView}
                       >

package/src/components/ui/financial-sections.tsx

@@ -83,7 +83,7 @@ export function PropertyHoldingsSection({
           {items.map((item, i) => (
             <div
               key={`${item.address}-${i}`}
-              className={i > 0 ? "border-l border-border pl-5" : "pr-5"}
+              className={i % 2 !== 0 ? "border-l border-border pl-5" : "pr-5"}
             >
               <PropertyCard {...item} borderless />
             </div>