@wealthx/shadcn 1.2.1 → 1.3.0

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

@@ -20,6 +20,7 @@ import {
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { formatDateShort } from "@/lib/format-date";
 import { Badge } from "./badge";
 import { RadioGroup, RadioGroupItem } from "./radio-group";
 import {
@@ -30,6 +31,7 @@ import {
   FinancialSubtotalBlock,
   FinancialSubtotalFrame,
 } from "./financial-primitives";
+import { Button } from "./button";
 
 /**
  * Financial card molecules — WealthX DS  (Level 3)
@@ -122,11 +124,12 @@ export function PropertyCard({
     >
       {/* Header row */}
       {isLinkedToBank ? (
-        <button
+        <Button
           type="button"
+          variant="ghost"
           aria-expanded={expanded}
           onClick={() => setExpanded((prev) => !prev)}
-          className="flex items-center gap-1.5 px-5 py-3 text-left cursor-pointer hover:opacity-85"
+          className="h-auto w-full justify-start gap-1.5 px-5 py-3 text-left"
         >
           <span className="text-label-medium text-foreground">{address}</span>
           {type && <Badge variant="outline">{type}</Badge>}
@@ -137,7 +140,7 @@ export function PropertyCard({
               expanded && "rotate-180",
             )}
           />
-        </button>
+        </Button>
       ) : (
         <div className="flex items-center gap-1.5 px-5 py-3">
           <span className="text-label-medium text-foreground">{address}</span>
@@ -615,9 +618,17 @@ export interface AboutCardProps {
   lastName?: string;
   phone?: string;
   email?: string;
+  dob?: string;
   gender?: string;
   maritalStatus?: string;
+  numDependants?: string;
   citizenStatus?: string;
+  residentialAddress?: string;
+  residentialStatus?: string;
+  timeAtAddressYears?: string;
+  timeAtAddressMonths?: string;
+  driversLicence?: string;
+  passport?: string;
   propertyInTrust?: string;
   companyOwnership?: string;
 }
@@ -632,19 +643,38 @@ export function AboutCard({
   lastName,
   phone,
   email,
+  dob,
   gender,
   maritalStatus,
+  numDependants,
   citizenStatus,
+  residentialAddress,
+  residentialStatus,
+  timeAtAddressYears,
+  timeAtAddressMonths,
+  driversLicence,
+  passport,
   propertyInTrust,
   companyOwnership,
 }: AboutCardProps) {
   const fullName =
     [title, firstName, lastName].filter(Boolean).join(" ") || "—";
 
+  const timeAtAddress =
+    timeAtAddressYears || timeAtAddressMonths
+      ? [
+          timeAtAddressYears && `${timeAtAddressYears}yr`,
+          timeAtAddressMonths && `${timeAtAddressMonths}mo`,
+        ]
+          .filter(Boolean)
+          .join(" ")
+      : 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">
         <FinancialDetailField label="Full Name" value={fullName} />
+        <FinancialDetailField label="Date of Birth" value={dob || "—"} />
         <FinancialDetailField label="Gender" value={gender || "—"} />
         <FinancialDetailField label="Phone" value={phone || "—"} />
         <FinancialDetailField label="Email" value={email || "—"} />
@@ -652,10 +682,30 @@ export function AboutCard({
           label="Marital Status"
           value={maritalStatus || "—"}
         />
+        <FinancialDetailField
+          label="No. of Dependants"
+          value={numDependants ?? "—"}
+        />
         <FinancialDetailField
           label="Citizenship"
           value={citizenStatus || "—"}
         />
+        <FinancialDetailField
+          label="Residential Address"
+          value={residentialAddress || "—"}
+        />
+        <FinancialDetailField
+          label="Residential Status"
+          value={residentialStatus || "—"}
+        />
+        {timeAtAddress && (
+          <FinancialDetailField label="Time at Address" value={timeAtAddress} />
+        )}
+        <FinancialDetailField
+          label="Driver's Licence"
+          value={driversLicence || "—"}
+        />
+        <FinancialDetailField label="Passport" value={passport || "—"} />
         <FinancialDetailField
           label="Property in Trust"
           value={propertyInTrust || "—"}
@@ -677,6 +727,11 @@ export interface IncomeCardItem {
   incomeType: string;
   jobTitle?: string;
   companyName?: string;
+  companyAddress?: string;
+  startDate?: string;
+  stillInPosition?: boolean;
+  endDate?: string;
+  companyType?: string;
   /** Pre-formatted amount + frequency e.g. "$9,500 / Monthly" */
   amountLabel: string;
 }
@@ -687,6 +742,7 @@ export interface IncomeCardProps {
   totalMonthly?: string;
 }
 
+
 /**
  * Display card for applicant income items.
  * Each income source renders as a bordered row with type, company, and amount.
@@ -706,16 +762,49 @@ export function IncomeCard({ items, totalMonthly }: IncomeCardProps) {
         <div
           key={i}
           className={cn(
-            "grid grid-cols-3 gap-x-6 px-5 py-[15px]",
+            "flex flex-col gap-3 px-5 py-[15px]",
             i < items.length - 1 && "border-b border-border",
           )}
         >
-          <FinancialDetailField label="Type" value={item.incomeType || "—"} />
-          <FinancialDetailField
-            label="Employer"
-            value={item.companyName || item.jobTitle || "—"}
-          />
-          <FinancialDetailField label="Amount" value={item.amountLabel} />
+          {/* 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>
       ))}
       {totalMonthly && (

package/src/components/ui/income-bar-chart.tsx

@@ -30,7 +30,14 @@ import {
   type ChartGranularity,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip,
+  Legend,
+);
 
 // ---------------------------------------------------------------------------
 // Types
@@ -235,7 +242,9 @@ export function IncomeBarChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
         <CardAction>
           <div className="flex gap-0.5 sm:gap-1">
             {periods.map((p) => (

package/src/components/ui/opportunity-card.tsx

@@ -10,6 +10,8 @@ import {
   Bot,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { formatDateShort, formatDateDayMonth } from "@/lib/format-date";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -149,36 +151,6 @@ function resolvePriority(
   return priority;
 }
 
-function formatAmount(amount: number): string {
-  return new Intl.NumberFormat("en-AU", {
-    style: "currency",
-    currency: "AUD",
-    maximumFractionDigits: 0,
-  }).format(amount);
-}
-
-function formatDate(iso: string): string {
-  try {
-    return new Date(iso).toLocaleDateString("en-AU", {
-      day: "2-digit",
-      month: "short",
-      year: "numeric",
-    });
-  } catch {
-    return iso;
-  }
-}
-
-function formatHoldDate(iso: string): string {
-  try {
-    return new Date(iso).toLocaleDateString("en-AU", {
-      day: "2-digit",
-      month: "short",
-    });
-  } catch {
-    return iso;
-  }
-}
 
 function formatLoanType(type: string): string {
   return type
@@ -249,7 +221,7 @@ export function OpportunityCard({
           style={{ color: "var(--color-warning-text)" }}
         >
           <Clock className="size-3 shrink-0" />
-          On hold until {formatHoldDate(onHoldTo)}
+          On hold until {formatDateDayMonth(onHoldTo)}
         </div>
       )}
 
@@ -272,24 +244,23 @@ export function OpportunityCard({
             </Badge>
           )}
           <span className="text-base font-bold tabular-nums text-foreground">
-            {formatAmount(amount)}
+            {formatCurrency(amount)}
           </span>
         </div>
 
         <div className="flex items-center gap-1 -mr-1 -mt-1">
           {onLaunchAssistant && (
-            <button
+            <Button
               type="button"
-              className={cn(
-                buttonVariants({ variant: "ghost", size: "icon" }),
-                "size-7 shrink-0",
-              )}
+              variant="ghost"
+              size="icon"
+              className="size-7 shrink-0"
               onClick={onLaunchAssistant}
               aria-label="Launch AI Assistant"
               title="Launch AI Assistant"
             >
               <Bot className="size-4" />
-            </button>
+            </Button>
           )}
           {hasMenu && (
             <DropdownMenu>
@@ -372,7 +343,7 @@ export function OpportunityCard({
       <div className="flex items-center justify-between">
         <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
           <Calendar className="size-3 shrink-0" aria-hidden="true" />
-          {formatDate(date)}
+          {formatDateShort(date)}
         </span>
 
         <span className="flex items-center gap-1.5">