@wealthx/shadcn 1.2.2 → 1.3.0

package/dist/components/ui/financial-cards.js

@@ -69,7 +69,7 @@ __export(financial_cards_exports, {
 });
 module.exports = __toCommonJS(financial_cards_exports);
 var React2 = __toESM(require("react"));
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -110,6 +110,20 @@ function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
 
+// src/lib/format-date.ts
+var import_date_fns = require("date-fns");
+function safeParse(iso) {
+  return (0, import_date_fns.parseISO)(iso);
+}
+function formatDateShort(iso) {
+  if (!iso) return "\u2014";
+  try {
+    return (0, import_date_fns.format)(safeParse(iso), "dd MMM yyyy");
+  } catch (e) {
+    return iso;
+  }
+}
+
 // src/components/ui/badge.tsx
 var import_class_variance_authority = require("class-variance-authority");
 
@@ -167,12 +181,12 @@ var badgeVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
-        destructive: "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        success: "bg-success text-success-foreground [a&]:hover:bg-success/90",
-        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
-        info: "bg-info text-info-foreground [a&]:hover:bg-info/90",
+        default: "border-primary/40 bg-primary/10 text-foreground [a&]:hover:bg-primary/15",
+        secondary: "border-border bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
+        destructive: "border-destructive/40 bg-destructive/10 text-destructive-text focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/15",
+        success: "border-success/40 bg-success/10 text-success-text [a&]:hover:bg-success/15",
+        warning: "border-warning/40 bg-warning/10 text-warning-text [a&]:hover:bg-warning/15",
+        info: "border-info/40 bg-info/10 text-info-text [a&]:hover:bg-info/15",
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 [a&]:hover:underline"
@@ -367,8 +381,85 @@ function FinancialSubtotalBlock({
   );
 }
 
-// src/components/ui/financial-cards.tsx
+// src/components/ui/button.tsx
+var import_react = require("react");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-button whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        secondary: "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
+        destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        "outline-primary": "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
+        "outline-secondary": "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
+        ghost: "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 px-2 text-button-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = (0, import_react.forwardRef)(function Button2(_a, ref) {
+  var _b = _a, {
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    disabled,
+    type = "button",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "asChild",
+    "loading",
+    "disabled",
+    "type",
+    "children"
+  ]);
+  const Comp = asChild ? Slot : "button";
+  const isIconOnly = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Comp,
+    __spreadProps(__spreadValues({
+      className: cn(buttonVariants({ variant, size, className })),
+      "data-size": size,
+      "data-slot": "button",
+      "data-variant": variant,
+      disabled: loading || disabled,
+      ref,
+      type
+    }, props), {
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Loader2, { "aria-hidden": "true", className: "animate-spin" }),
+        !isIconOnly && children
+      ] }) : children
+    })
+  );
+});
+
+// src/components/ui/financial-cards.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function PropertyCard({
   address,
   type,
@@ -392,7 +483,7 @@ function PropertyCard({
   principlePaidOff
 }) {
   const [expanded, setExpanded] = React2.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: cn(
@@ -400,19 +491,20 @@ function PropertyCard({
         !borderless && "border border-border"
       ),
       children: [
-        isLinkedToBank ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "button",
+        isLinkedToBank ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          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",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
-              type && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge, { variant: "outline", children: type }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_lucide_react2.ChevronDown,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
+              type && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: "outline", children: type }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_lucide_react3.ChevronDown,
                 {
                   className: cn(
                     "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
@@ -422,12 +514,12 @@ function PropertyCard({
               )
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5 px-5 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
-          type && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge, { variant: "outline", children: type })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5 px-5 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-label-medium text-foreground", children: address }),
+          type && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Badge, { variant: "outline", children: type })
         ] }),
-        !isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "px-5 pb-2 text-xs italic text-muted-foreground", children: "No mortgage account linked to this property" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        !isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "px-5 pb-2 text-xs italic text-muted-foreground", children: "No mortgage account linked to this property" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "div",
           {
             className: cn(
@@ -435,54 +527,54 @@ function PropertyCard({
               isLinkedToBank ? "grid-cols-3" : "grid-cols-1"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Estimated Value", value: estimated }),
-              isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Loan Amount", value: loanAmount }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Equity", value: equity })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Estimated Value", value: estimated }),
+              isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Loan Amount", value: loanAmount }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Equity", value: equity })
               ] })
             ]
           }
         ),
-        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-5 pb-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-5 pb-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialLvrBar,
           {
             percent: lvrPercent,
             label: lvr != null ? lvr : `${lvrPercent}%`
           }
         ) }),
-        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        isLinkedToBank && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: cn(
               "grid transition-[grid-template-rows] duration-200 ease-in-out",
               expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-5 border-t border-border px-5 py-[15px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubsectionTitle, { children: "Loan" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-5 border-t border-border px-5 py-[15px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubsectionTitle, { children: "Loan" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Name of Lender",
                       value: lenderName
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Current Loan Amount",
                       value: loanAmount
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Interest Rate",
                       value: interestRate
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Years Remaining",
@@ -490,29 +582,29 @@ function PropertyCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Min Repayments",
                       value: minRepayments
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Average Repayments",
                       value: averageRepayments
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Redraw Amount",
                       value: redrawAmount
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     FinancialDetailField,
                     {
                       label: "Offset Account",
@@ -521,8 +613,8 @@ function PropertyCard({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-4 gap-x-4 gap-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -530,7 +622,7 @@ function PropertyCard({
                     value: totalMinRepayments
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -538,7 +630,7 @@ function PropertyCard({
                     value: totalExtraRepayments
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -546,7 +638,7 @@ function PropertyCard({
                     value: interestCharged
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   FinancialDetailField,
                   {
                     variant: "footer",
@@ -576,17 +668,17 @@ function DebtCard({
   totalInterestPaid,
   yearsRemaining
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-5 py-[15px] border-b border-border min-h-[7rem] items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Name of Lender", value: lenderName }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-5 py-[15px] border-b border-border min-h-[7rem] items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Name of Lender", value: lenderName }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           label: "Current Loan Amount",
           value: currentLoanAmount
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           label: "Current Interest Rate",
@@ -594,24 +686,24 @@ function DebtCard({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "px-5 py-[15px] flex flex-col gap-5 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubsectionTitle, { children: "Loan Stats" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-5 py-[15px] flex flex-col gap-5 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubsectionTitle, { children: "Loan Stats" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Amount",
             value: originalLoanAmount
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Term",
             value: originalLoanTerm
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Monthly Repayments",
@@ -619,10 +711,10 @@ function DebtCard({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Redraw Amount", value: redrawAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Offset Account", value: offsetAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Redraw Amount", value: redrawAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Offset Account", value: offsetAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Extra Loan Repayments",
@@ -631,8 +723,8 @@ function DebtCard({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -640,7 +732,7 @@ function DebtCard({
           value: totalRepaymentsMade
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -648,7 +740,7 @@ function DebtCard({
           value: totalInterestPaid
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -677,52 +769,52 @@ function OtherLiabilityCard({
   totalInterestPaid
 }) {
   const isCreditCard = type === "credit_card";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-4 pt-5 pb-4 min-h-[7rem] items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Lender", value: lenderName }),
-      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5 px-4 pt-5 pb-4 min-h-[7rem] items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Lender", value: lenderName }),
+      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           label: "Current Balance",
           value: currentBalance
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           label: "Current Loan Amount",
           value: currentLoanAmount
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Interest Rate", value: interestRate })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Interest Rate", value: interestRate })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "px-4 pt-4 pb-5 flex flex-col gap-5 border-t border-border flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubsectionTitle, { children: isCreditCard ? "Card Stats" : "Loan Stats" }),
-      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Credit Limit", value: creditLimit }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-4 pt-4 pb-5 flex flex-col gap-5 border-t border-border flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubsectionTitle, { children: isCreditCard ? "Card Stats" : "Loan Stats" }),
+      isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Credit Limit", value: creditLimit }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Min Monthly Payment",
             value: minMonthlyPayment
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Annual Fee", value: annualFee })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Annual Fee", value: annualFee })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Amount",
             value: originalLoanAmount
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Original Loan Term",
             value: originalLoanTerm
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           FinancialDetailField,
           {
             label: "Monthly Repayments",
@@ -731,8 +823,8 @@ function OtherLiabilityCard({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubtotalFrame, { children: isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: isCreditCard ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -740,7 +832,7 @@ function OtherLiabilityCard({
           value: totalInterestPaid
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -748,8 +840,8 @@ function OtherLiabilityCard({
           value: availableCredit
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -757,7 +849,7 @@ function OtherLiabilityCard({
           value: totalRepaymentsMade
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -765,7 +857,7 @@ function OtherLiabilityCard({
           value: totalInterestPaid
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         FinancialDetailField,
         {
           variant: "footer",
@@ -791,10 +883,10 @@ function AlertCard({
   onActionChange
 }) {
   const { dot, border } = SEVERITY_CLASSES[severityCode];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex flex-col gap-1.5 border p-2.5 px-3", border), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("h-[9px] w-[9px] shrink-0 rounded-full", dot) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex flex-col gap-1.5 border p-2.5 px-3", border), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("h-[9px] w-[9px] shrink-0 rounded-full", dot) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "span",
         {
           className: cn(
@@ -805,19 +897,19 @@ function AlertCard({
         }
       )
     ] }),
-    ignored ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "ml-[15px] text-xs italic text-muted-foreground/60", children: [
+    ignored ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "ml-[15px] text-xs italic text-muted-foreground/60", children: [
       "Ignored until ",
       ignoredUntil
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       RadioGroup,
       {
         value: selectedAction != null ? selectedAction : "",
         onValueChange: (val) => onActionChange == null ? void 0 : onActionChange(val),
         className: "ml-[15px] flex flex-col gap-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadioGroupItem, { value: "DISMISS", id: `dismiss-${id}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioGroupItem, { value: "DISMISS", id: `dismiss-${id}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "label",
               {
                 htmlFor: `dismiss-${id}`,
@@ -826,9 +918,9 @@ function AlertCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadioGroupItem, { value: "SNOOZE", id: `snooze-${id}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadioGroupItem, { value: "SNOOZE", id: `snooze-${id}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "label",
               {
                 htmlFor: `snooze-${id}`,
@@ -848,40 +940,83 @@ function AboutCard({
   lastName,
   phone,
   email,
+  dob,
   gender,
   maritalStatus,
+  numDependants,
   citizenStatus,
+  residentialAddress,
+  residentialStatus,
+  timeAtAddressYears,
+  timeAtAddressMonths,
+  driversLicence,
+  passport,
   propertyInTrust,
   companyOwnership
 }) {
   const fullName = [title, firstName, lastName].filter(Boolean).join(" ") || "\u2014";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border border-border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-2 gap-x-8 gap-y-4 px-5 py-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Full Name", value: fullName }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Gender", value: gender || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Phone", value: phone || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Email", value: email || "\u2014" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const timeAtAddress = timeAtAddressYears || timeAtAddressMonths ? [
+    timeAtAddressYears && `${timeAtAddressYears}yr`,
+    timeAtAddressMonths && `${timeAtAddressMonths}mo`
+  ].filter(Boolean).join(" ") : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-x-8 gap-y-4 px-5 py-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Full Name", value: fullName }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Date of Birth", value: dob || "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Gender", value: gender || "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Phone", value: phone || "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Email", value: email || "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FinancialDetailField,
       {
         label: "Marital Status",
         value: maritalStatus || "\u2014"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FinancialDetailField,
+      {
+        label: "No. of Dependants",
+        value: numDependants != null ? numDependants : "\u2014"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FinancialDetailField,
       {
         label: "Citizenship",
         value: citizenStatus || "\u2014"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FinancialDetailField,
+      {
+        label: "Residential Address",
+        value: residentialAddress || "\u2014"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FinancialDetailField,
+      {
+        label: "Residential Status",
+        value: residentialStatus || "\u2014"
+      }
+    ),
+    timeAtAddress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Time at Address", value: timeAtAddress }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      FinancialDetailField,
+      {
+        label: "Driver's Licence",
+        value: driversLicence || "\u2014"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Passport", value: passport || "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FinancialDetailField,
       {
         label: "Property in Trust",
         value: propertyInTrust || "\u2014"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FinancialDetailField,
       {
         label: "Company Ownership",
@@ -892,31 +1027,63 @@ function AboutCard({
 }
 function IncomeCard({ items, totalMonthly }) {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: "No income recorded." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-muted-foreground", children: "No income recorded." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col", children: [
-    items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col", children: [
+    items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         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"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Type", value: item.incomeType || "\u2014" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Type", value: item.incomeType || "\u2014" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              FinancialDetailField,
+              {
+                label: "Job Title",
+                value: item.jobTitle || "\u2014"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialDetailField, { label: "Amount", value: item.amountLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-x-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              FinancialDetailField,
+              {
+                label: "Company",
+                value: item.companyName || "\u2014"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              FinancialDetailField,
+              {
+                label: "Start Date",
+                value: formatDateShort(item.startDate)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              FinancialDetailField,
+              {
+                label: "Status",
+                value: item.stillInPosition === void 0 ? "\u2014" : item.stillInPosition ? "Still in position" : item.endDate ? `Ended ${formatDateShort(item.endDate)}` : "No longer in position"
+              }
+            )
+          ] }),
+          item.companyAddress && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FinancialDetailField,
             {
-              label: "Employer",
-              value: item.companyName || item.jobTitle || "\u2014"
+              label: "Company Address",
+              value: item.companyAddress
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialDetailField, { label: "Amount", value: item.amountLabel })
+          )
         ]
       },
       i
     )),
-    totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FinancialSubtotalBlock,
       {
         monthlyAverage: totalMonthly,
@@ -926,44 +1093,44 @@ function IncomeCard({ items, totalMonthly }) {
   ] });
 }
 var EXPENSE_ICON_MAP = {
-  groceries: import_lucide_react2.ShoppingCart,
-  "dining out": import_lucide_react2.UtensilsCrossed,
-  dining: import_lucide_react2.UtensilsCrossed,
-  restaurants: import_lucide_react2.UtensilsCrossed,
-  transport: import_lucide_react2.Car,
-  transportation: import_lucide_react2.Car,
-  vehicle: import_lucide_react2.Car,
-  utilities: import_lucide_react2.Zap,
-  electricity: import_lucide_react2.Zap,
-  insurance: import_lucide_react2.Shield,
-  "council rates": import_lucide_react2.Landmark,
-  council: import_lucide_react2.Landmark,
-  rates: import_lucide_react2.Landmark,
-  medical: import_lucide_react2.HeartPulse,
-  health: import_lucide_react2.HeartPulse,
-  subscriptions: import_lucide_react2.RefreshCw,
-  subscription: import_lucide_react2.RefreshCw,
-  "credit card": import_lucide_react2.CreditCard,
-  education: import_lucide_react2.GraduationCap,
-  childcare: import_lucide_react2.Baby,
-  entertainment: import_lucide_react2.Tv,
-  gym: import_lucide_react2.Dumbbell,
-  fitness: import_lucide_react2.Dumbbell,
-  clothing: import_lucide_react2.Shirt,
-  rent: import_lucide_react2.Building2
+  groceries: import_lucide_react3.ShoppingCart,
+  "dining out": import_lucide_react3.UtensilsCrossed,
+  dining: import_lucide_react3.UtensilsCrossed,
+  restaurants: import_lucide_react3.UtensilsCrossed,
+  transport: import_lucide_react3.Car,
+  transportation: import_lucide_react3.Car,
+  vehicle: import_lucide_react3.Car,
+  utilities: import_lucide_react3.Zap,
+  electricity: import_lucide_react3.Zap,
+  insurance: import_lucide_react3.Shield,
+  "council rates": import_lucide_react3.Landmark,
+  council: import_lucide_react3.Landmark,
+  rates: import_lucide_react3.Landmark,
+  medical: import_lucide_react3.HeartPulse,
+  health: import_lucide_react3.HeartPulse,
+  subscriptions: import_lucide_react3.RefreshCw,
+  subscription: import_lucide_react3.RefreshCw,
+  "credit card": import_lucide_react3.CreditCard,
+  education: import_lucide_react3.GraduationCap,
+  childcare: import_lucide_react3.Baby,
+  entertainment: import_lucide_react3.Tv,
+  gym: import_lucide_react3.Dumbbell,
+  fitness: import_lucide_react3.Dumbbell,
+  clothing: import_lucide_react3.Shirt,
+  rent: import_lucide_react3.Building2
 };
 function getExpenseIcon(expenseType) {
   var _a;
-  return (_a = EXPENSE_ICON_MAP[expenseType.toLowerCase()]) != null ? _a : import_lucide_react2.Receipt;
+  return (_a = EXPENSE_ICON_MAP[expenseType.toLowerCase()]) != null ? _a : import_lucide_react3.Receipt;
 }
 function ExpensesCard({ items, totalMonthly }) {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: "No expenses recorded." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-muted-foreground", children: "No expenses recorded." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col", children: items.map((item, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border border-border overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col", children: items.map((item, i) => {
       const Icon = getExpenseIcon(item.expenseType);
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: cn(
@@ -971,17 +1138,17 @@ function ExpensesCard({ items, totalMonthly }) {
             i < items.length - 1 && "border-b border-border"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-body-small text-foreground", children: item.expenseType })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-body-small text-foreground", children: item.expenseType })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-label-medium whitespace-nowrap text-destructive", children: item.amountLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-label-medium whitespace-nowrap text-destructive", children: item.amountLabel })
           ]
         },
         item.expenseType
       );
     }) }),
-    totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    totalMonthly && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FinancialSubtotalFrame, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       FinancialSubtotalBlock,
       {
         monthlyAverage: totalMonthly,