@wealthx/shadcn 1.2.2 → 1.3.0

package/src/components/ui/dialog.tsx

@@ -68,10 +68,55 @@ function DialogOverlay({
   );
 }
 
+/**
+ * Maps the `size` prop to an exact CSS max-width value.
+ * Applied via inline style — bypasses Tailwind v4 class scanning entirely.
+ */
+const DIALOG_MAX_WIDTHS: Record<string, string> = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  full: "100%",
+};
+
+/**
+ * Default minimum width for size="auto" dialogs.
+ * Prevents the dialog from collapsing too narrow when hugging content.
+ * Override per-instance via the `minWidth` prop.
+ */
+const DIALOG_AUTO_MIN_WIDTH = "20rem"; // 320px
+
 export type DialogContentProps = React.ComponentProps<
   typeof DialogPrimitive.Popup
 > & {
   showCloseButton?: boolean;
+  /**
+   * Optional container element to render the Dialog portal into.
+   * Pass a ref'd element to scope the overlay inside a parent (e.g. a Sheet drawer)
+   * instead of appending to document.body.
+   */
+  container?: HTMLElement | null;
+  /** Vertical alignment of the dialog. "top" anchors to top-4; "center" (default) vertically centers. */
+  align?: "center" | "top";
+  /**
+   * Width behaviour of the dialog panel.
+   * - Fixed sizes ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full"):
+   *   dialog fills width up to that maximum (applied via inline style — reliable in Tailwind v4).
+   * - "auto": dialog shrinks to fit its content (hug-content). Has a built-in minimum
+   *   width of `DIALOG_AUTO_MIN_WIDTH` (20rem / 320px) to avoid collapsing too narrow.
+   * Defaults to "lg".
+   */
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "auto";
+  /**
+   * Override the minimum width for `size="auto"` dialogs.
+   * Accepts any valid CSS length value (e.g. "24rem", "400px").
+   * Ignored when using a fixed size.
+   */
+  minWidth?: string;
 };
 
 function DialogContent({
@@ -79,28 +124,47 @@ function DialogContent({
   children,
   showCloseButton = true,
   style,
+  container,
+  align = "center",
+  size = "lg",
+  minWidth,
   ...props
 }: DialogContentProps): ReactElement {
   const themeVars = useThemeVars();
+  const isAuto = size === "auto";
+
+  const sizeStyle = isAuto
+    ? { minWidth: minWidth ?? DIALOG_AUTO_MIN_WIDTH }
+    : { maxWidth: DIALOG_MAX_WIDTHS[size] };
+
   return (
-    <DialogPortal>
+    <DialogPortal container={container ?? undefined}>
       <DialogOverlay style={themeVars as React.CSSProperties} />
       <DialogPrimitive.Popup
         className={cn(
-          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 sm:max-w-lg",
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
+          // max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
+          // Fixed max-width is applied via inline style (sizeStyle) to avoid
+          // Tailwind v4 class-scanning gaps with dynamic class lookups.
+          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          // "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
+          isAuto ? "w-auto" : "w-full",
+          align === "center"
+            ? "top-[50%] translate-y-[-50%]"
+            : "top-4 translate-y-0",
           className,
         )}
         data-slot="dialog-content"
-        style={{ ...themeVars, ...style } as React.CSSProperties}
+        style={{ ...themeVars, ...sizeStyle, ...style } as React.CSSProperties}
         {...props}
       >
         {children}
         {showCloseButton ? (
           <DialogPrimitive.Close
-            className="absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-4 right-4 inline-flex size-7 items-center justify-center transition-colors hover:bg-foreground/5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
             // WealthX: removed rounded-xs (sharp), replaced opacity fade with hover:bg-foreground/5,
-            // focus ring uses border color (subtle, matches Figma DialogClose focus state)
+            // focus ring uses border color (subtle, matches Figma DialogClose focus state).
+            // size-7 = 28px hit area (icon is size-4=16px, centered via inline-flex).
             data-slot="dialog-close"
           >
             <XIcon />
@@ -152,6 +216,8 @@ function DialogFooter({
       {showCloseButton ? (
         <DialogPrimitive.Close
           className={cn(buttonVariants({ variant: "outline" }))}
+          // type="button" prevents accidental form submission inside Dialog forms
+          type="button"
         >
           Close
         </DialogPrimitive.Close>

package/src/components/ui/expense-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
@@ -234,7 +241,9 @@ export function ExpenseBarChart({
       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/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">