@wealthx/shadcn 1.1.0 → 1.2.0

package/dist/chunk-PCPLO5HT.mjs

@@ -0,0 +1,671 @@
+import {
+  RadioGroup,
+  RadioGroupItem
+} from "./chunk-7XJHLGUV.mjs";
+import {
+  FinancialDetailField,
+  FinancialLvrBar,
+  FinancialSubsectionTitle,
+  FinancialSubtotalBlock,
+  FinancialSubtotalFrame
+} from "./chunk-OGOYQ7BG.mjs";
+import {
+  Badge
+} from "./chunk-WAZD7NFU.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/financial-cards.tsx
+import * as React from "react";
+import {
+  Baby,
+  Building2,
+  Car,
+  ChevronDown,
+  CreditCard,
+  Dumbbell,
+  GraduationCap,
+  HeartPulse,
+  Landmark,
+  Receipt,
+  RefreshCw,
+  Shield,
+  ShoppingCart,
+  Shirt,
+  Tv,
+  UtensilsCrossed,
+  Zap
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PropertyCard({
+  address,
+  type,
+  estimated,
+  isLinkedToBank = false,
+  borderless = false,
+  loanAmount,
+  equity,
+  lvr,
+  lvrPercent = 0,
+  lenderName,
+  interestRate,
+  yearsRemaining,
+  minRepayments,
+  averageRepayments,
+  redrawAmount,
+  offsetAccount,
+  totalMinRepayments,
+  totalExtraRepayments,
+  interestCharged,
+  principlePaidOff
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden flex flex-col",
+        !borderless && "border border-border"
+      ),
+      children: [
+        isLinkedToBank ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "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",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-label-medium text-foreground", children: address }),
+              type && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: type }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn(
+                    "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
+                    expanded && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-5 py-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-label-medium text-foreground", children: address }),
+          type && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: type })
+        ] }),
+        !isLinkedToBank && /* @__PURE__ */ jsx("p", { className: "px-5 pb-2 text-xs italic text-muted-foreground", children: "No mortgage account linked to this property" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-5 px-5 py-[15px]",
+              isLinkedToBank ? "grid-cols-3" : "grid-cols-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(FinancialDetailField, { label: "Estimated Value", value: estimated }),
+              isLinkedToBank && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(FinancialDetailField, { label: "Loan Amount", value: loanAmount }),
+                /* @__PURE__ */ jsx(FinancialDetailField, { label: "Equity", value: equity })
+              ] })
+            ]
+          }
+        ),
+        isLinkedToBank && /* @__PURE__ */ jsx("div", { className: "px-5 pb-[15px]", children: /* @__PURE__ */ jsx(
+          FinancialLvrBar,
+          {
+            percent: lvrPercent,
+            label: lvr != null ? lvr : `${lvrPercent}%`
+          }
+        ) }),
+        isLinkedToBank && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid transition-[grid-template-rows] duration-200 ease-in-out",
+              expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 border-t border-border px-5 py-[15px]", children: [
+                /* @__PURE__ */ jsx(FinancialSubsectionTitle, { children: "Loan" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Name of Lender",
+                      value: lenderName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Current Loan Amount",
+                      value: loanAmount
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Interest Rate",
+                      value: interestRate
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Years Remaining",
+                      value: yearsRemaining
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-x-4 gap-y-4", children: [
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Min Repayments",
+                      value: minRepayments
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Average Repayments",
+                      value: averageRepayments
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Redraw Amount",
+                      value: redrawAmount
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FinancialDetailField,
+                    {
+                      label: "Offset Account",
+                      value: offsetAccount
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(FinancialSubtotalFrame, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-x-4 gap-y-1", children: [
+                /* @__PURE__ */ jsx(
+                  FinancialDetailField,
+                  {
+                    variant: "footer",
+                    label: "Total Min Repayments",
+                    value: totalMinRepayments
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FinancialDetailField,
+                  {
+                    variant: "footer",
+                    label: "Total Extra Repayments",
+                    value: totalExtraRepayments
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FinancialDetailField,
+                  {
+                    variant: "footer",
+                    label: "Interest Charge",
+                    value: interestCharged
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FinancialDetailField,
+                  {
+                    variant: "footer",
+                    label: "Principle Paid Off",
+                    value: principlePaidOff
+                  }
+                )
+              ] }) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function DebtCard({
+  lenderName,
+  currentLoanAmount,
+  interestRate,
+  originalLoanAmount,
+  originalLoanTerm,
+  monthlyRepayments,
+  redrawAmount,
+  offsetAmount,
+  extraLoanRepayments,
+  totalRepaymentsMade,
+  totalInterestPaid,
+  yearsRemaining
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-5 px-5 py-[15px] border-b border-border min-h-[7rem] items-start", children: [
+      /* @__PURE__ */ jsx(FinancialDetailField, { label: "Name of Lender", value: lenderName }),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          label: "Current Loan Amount",
+          value: currentLoanAmount
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          label: "Current Interest Rate",
+          value: interestRate
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-5 py-[15px] flex flex-col gap-5 flex-1", children: [
+      /* @__PURE__ */ jsx(FinancialSubsectionTitle, { children: "Loan Stats" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Original Loan Amount",
+            value: originalLoanAmount
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Original Loan Term",
+            value: originalLoanTerm
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Monthly Repayments",
+            value: monthlyRepayments
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ jsx(FinancialDetailField, { label: "Redraw Amount", value: redrawAmount }),
+        /* @__PURE__ */ jsx(FinancialDetailField, { label: "Offset Account", value: offsetAmount }),
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Extra Loan Repayments",
+            value: extraLoanRepayments
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FinancialSubtotalFrame, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Total Repayments Made",
+          value: totalRepaymentsMade
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Total Interest Paid",
+          value: totalInterestPaid
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Years Remaining",
+          value: yearsRemaining
+        }
+      )
+    ] }) })
+  ] });
+}
+function OtherLiabilityCard({
+  type,
+  lenderName,
+  interestRate,
+  currentBalance,
+  creditLimit,
+  minMonthlyPayment,
+  annualFee,
+  availableCredit,
+  currentLoanAmount,
+  originalLoanAmount,
+  originalLoanTerm,
+  monthlyRepayments,
+  currentLoanTermLeft,
+  totalRepaymentsMade,
+  totalInterestPaid
+}) {
+  const isCreditCard = type === "credit_card";
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border overflow-hidden flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-5 px-4 pt-5 pb-4 min-h-[7rem] items-start", children: [
+      /* @__PURE__ */ jsx(FinancialDetailField, { label: "Lender", value: lenderName }),
+      isCreditCard ? /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          label: "Current Balance",
+          value: currentBalance
+        }
+      ) : /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          label: "Current Loan Amount",
+          value: currentLoanAmount
+        }
+      ),
+      /* @__PURE__ */ jsx(FinancialDetailField, { label: "Interest Rate", value: interestRate })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-5 flex flex-col gap-5 border-t border-border flex-1", children: [
+      /* @__PURE__ */ jsx(FinancialSubsectionTitle, { children: isCreditCard ? "Card Stats" : "Loan Stats" }),
+      isCreditCard ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ jsx(FinancialDetailField, { label: "Credit Limit", value: creditLimit }),
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Min Monthly Payment",
+            value: minMonthlyPayment
+          }
+        ),
+        /* @__PURE__ */ jsx(FinancialDetailField, { label: "Annual Fee", value: annualFee })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-5", children: [
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Original Loan Amount",
+            value: originalLoanAmount
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Original Loan Term",
+            value: originalLoanTerm
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FinancialDetailField,
+          {
+            label: "Monthly Repayments",
+            value: monthlyRepayments
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FinancialSubtotalFrame, { children: isCreditCard ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Total Interest Paid",
+          value: totalInterestPaid
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Available Credit",
+          value: availableCredit
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-x-4 gap-y-1", children: [
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Total Repayments Made",
+          value: totalRepaymentsMade
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Total Interest Paid",
+          value: totalInterestPaid
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FinancialDetailField,
+        {
+          variant: "footer",
+          label: "Years Remaining",
+          value: currentLoanTermLeft
+        }
+      )
+    ] }) })
+  ] });
+}
+var SEVERITY_CLASSES = {
+  NEED_ACTION: { dot: "bg-destructive", border: "border-destructive" },
+  WATCH: { dot: "bg-warning", border: "border-warning" },
+  INSIGHT: { dot: "bg-success", border: "border-success" }
+};
+function AlertCard({
+  id,
+  name,
+  severityCode,
+  ignored = false,
+  ignoredUntil,
+  selectedAction = null,
+  onActionChange
+}) {
+  const { dot, border } = SEVERITY_CLASSES[severityCode];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5 border p-2.5 px-3", border), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("h-[9px] w-[9px] shrink-0 rounded-full", dot) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-sm font-medium leading-tight",
+            ignored ? "text-muted-foreground line-through" : "text-foreground"
+          ),
+          children: name
+        }
+      )
+    ] }),
+    ignored ? /* @__PURE__ */ jsxs("span", { className: "ml-[15px] text-xs italic text-muted-foreground/60", children: [
+      "Ignored until ",
+      ignoredUntil
+    ] }) : /* @__PURE__ */ jsxs(
+      RadioGroup,
+      {
+        value: selectedAction != null ? selectedAction : "",
+        onValueChange: (val) => onActionChange == null ? void 0 : onActionChange(val),
+        className: "ml-[15px] flex flex-col gap-1",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "DISMISS", id: `dismiss-${id}` }),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: `dismiss-${id}`,
+                className: "cursor-pointer select-none text-sm leading-none text-muted-foreground",
+                children: "Mark as done (will reset in 6 months)"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(RadioGroupItem, { value: "SNOOZE", id: `snooze-${id}` }),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: `snooze-${id}`,
+                className: "cursor-pointer select-none text-sm leading-none text-muted-foreground",
+                children: "Snooze for 30 days"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function AboutCard({
+  title,
+  firstName,
+  lastName,
+  phone,
+  email,
+  gender,
+  maritalStatus,
+  citizenStatus,
+  propertyInTrust,
+  companyOwnership
+}) {
+  const fullName = [title, firstName, lastName].filter(Boolean).join(" ") || "\u2014";
+  return /* @__PURE__ */ jsx("div", { className: "border border-border overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-8 gap-y-4 px-5 py-4", children: [
+    /* @__PURE__ */ jsx(FinancialDetailField, { label: "Full Name", value: fullName }),
+    /* @__PURE__ */ jsx(FinancialDetailField, { label: "Gender", value: gender || "\u2014" }),
+    /* @__PURE__ */ jsx(FinancialDetailField, { label: "Phone", value: phone || "\u2014" }),
+    /* @__PURE__ */ jsx(FinancialDetailField, { label: "Email", value: email || "\u2014" }),
+    /* @__PURE__ */ jsx(
+      FinancialDetailField,
+      {
+        label: "Marital Status",
+        value: maritalStatus || "\u2014"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FinancialDetailField,
+      {
+        label: "Citizenship",
+        value: citizenStatus || "\u2014"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FinancialDetailField,
+      {
+        label: "Property in Trust",
+        value: propertyInTrust || "\u2014"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FinancialDetailField,
+      {
+        label: "Company Ownership",
+        value: companyOwnership || "\u2014"
+      }
+    )
+  ] }) });
+}
+function IncomeCard({ items, totalMonthly }) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No income recorded." }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border overflow-hidden flex flex-col", children: [
+    items.map((item, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-3 gap-x-6 px-5 py-[15px]",
+          i < items.length - 1 && "border-b border-border"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(FinancialDetailField, { label: "Type", value: item.incomeType || "\u2014" }),
+          /* @__PURE__ */ jsx(
+            FinancialDetailField,
+            {
+              label: "Employer",
+              value: item.companyName || item.jobTitle || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx(FinancialDetailField, { label: "Amount", value: item.amountLabel })
+        ]
+      },
+      i
+    )),
+    totalMonthly && /* @__PURE__ */ jsx(FinancialSubtotalFrame, { children: /* @__PURE__ */ jsx(
+      FinancialSubtotalBlock,
+      {
+        monthlyAverage: totalMonthly,
+        label: "Total Monthly Income"
+      }
+    ) })
+  ] });
+}
+var EXPENSE_ICON_MAP = {
+  groceries: ShoppingCart,
+  "dining out": UtensilsCrossed,
+  dining: UtensilsCrossed,
+  restaurants: UtensilsCrossed,
+  transport: Car,
+  transportation: Car,
+  vehicle: Car,
+  utilities: Zap,
+  electricity: Zap,
+  insurance: Shield,
+  "council rates": Landmark,
+  council: Landmark,
+  rates: Landmark,
+  medical: HeartPulse,
+  health: HeartPulse,
+  subscriptions: RefreshCw,
+  subscription: RefreshCw,
+  "credit card": CreditCard,
+  education: GraduationCap,
+  childcare: Baby,
+  entertainment: Tv,
+  gym: Dumbbell,
+  fitness: Dumbbell,
+  clothing: Shirt,
+  rent: Building2
+};
+function getExpenseIcon(expenseType) {
+  var _a;
+  return (_a = EXPENSE_ICON_MAP[expenseType.toLowerCase()]) != null ? _a : Receipt;
+}
+function ExpensesCard({ items, totalMonthly }) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "border border-border px-5 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No expenses recorded." }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item, i) => {
+      const Icon = getExpenseIcon(item.expenseType);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-between gap-4 px-5 py-2.5",
+            i < items.length - 1 && "border-b border-border"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "text-body-small text-foreground", children: item.expenseType })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-label-medium whitespace-nowrap text-destructive", children: item.amountLabel })
+          ]
+        },
+        item.expenseType
+      );
+    }) }),
+    totalMonthly && /* @__PURE__ */ jsx(FinancialSubtotalFrame, { children: /* @__PURE__ */ jsx(
+      FinancialSubtotalBlock,
+      {
+        monthlyAverage: totalMonthly,
+        label: "Total Monthly Expenses"
+      }
+    ) })
+  ] });
+}
+
+export {
+  PropertyCard,
+  DebtCard,
+  OtherLiabilityCard,
+  AlertCard,
+  AboutCard,
+  IncomeCard,
+  ExpensesCard
+};