@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/borrowing-capacity-card.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import {
+  BorrowCapacityItem,
+  StatisticItem,
+  LoanToValueRatio,
+} from "./borrowing-capacity-atoms";
+import { BorrowingCapacityLineChart } from "./borrowing-capacity-line-chart";
+import type { BorrowingCapacitySeries } from "./borrowing-capacity-line-chart";
+import { Skeleton } from "./skeleton";
+
+/**
+ * Main content organism for the Borrowing Capacity page.
+ *
+ * Composes (top-to-bottom):
+ * - `BorrowingCapacityLineChart` — full-width chart with KPI header
+ * - Key metrics grid — flexible list of `BorrowCapacityItem` fields
+ * - LVR panel (optional) — `LoanToValueRatio` pinned to the right of metrics
+ * - Statistics row — up to 3 `StatisticItem` trend blocks
+ *
+ * All values are pre-formatted strings / cents — business logic stays in the
+ * app layer. Pass `isLoading` to switch every section into skeleton state.
+ */
+
+export interface BorrowingCapacityCardField {
+  /** e.g. "Purchase Price" */
+  label: string;
+  /** Optional secondary descriptor, e.g. "80% LVR" */
+  subLabel?: string;
+  /** Pre-formatted value, e.g. "$750,000" */
+  value: string;
+}
+
+export interface BorrowingCapacityCardStatistic {
+  /** Number of months to look back (e.g. 3, 6, 12) */
+  loopBackMonths: number;
+  /** Absolute dollar change over the period */
+  amountChange: number;
+  /** Percentage change — positive = up, negative = down, 0 = flat */
+  amountChangePercentage: number;
+}
+
+export interface BorrowingCapacityCardProps {
+  // ── Chart ─────────────────────────────────────────────────────────────────
+  /** Data series to render in the line chart */
+  chartSeries?: BorrowingCapacitySeries[] | null;
+  /** Current borrowing capacity in AUD cents — shown as KPI in the chart header */
+  kpiValueCents?: number;
+
+  // ── Key metrics ───────────────────────────────────────────────────────────
+  /** Ordered result fields rendered in a responsive grid (max 4 per row) */
+  fields?: BorrowingCapacityCardField[];
+
+  // ── LVR ───────────────────────────────────────────────────────────────────
+  /** LVR as a whole number percentage (0–100). Omit to hide the LVR panel. */
+  lvr?: number;
+  debtAmount?: number;
+  equityAmount?: number;
+
+  // ── Statistics ────────────────────────────────────────────────────────────
+  /** Trend blocks shown below the metrics (typically 3 periods: 3, 6, 12 mo) */
+  statistics?: BorrowingCapacityCardStatistic[];
+
+  // ── State ─────────────────────────────────────────────────────────────────
+  /** Show skeleton loading state across every section */
+  isLoading?: boolean;
+
+  className?: string;
+}
+
+export function BorrowingCapacityCard({
+  chartSeries,
+  kpiValueCents,
+  fields,
+  lvr,
+  debtAmount,
+  equityAmount,
+  statistics,
+  isLoading = false,
+  className,
+}: BorrowingCapacityCardProps) {
+  const hasFields = (fields?.length ?? 0) > 0;
+  const hasLvr = lvr !== undefined;
+  const hasStats = (statistics?.length ?? 0) > 0;
+  const showMetricsRow = isLoading || hasFields || hasLvr;
+  const showStatsRow = isLoading || hasStats;
+
+  return (
+    <div className={cn("flex flex-col border border-border", className)}>
+      {/* Chart — border stripped so the organism border acts as the card edge */}
+      <BorrowingCapacityLineChart
+        series={chartSeries}
+        kpiValue={kpiValueCents}
+        isLoading={isLoading}
+        className="border-0 shadow-none"
+      />
+
+      {/* Key metrics + optional LVR panel */}
+      {showMetricsRow && (
+        <div className="flex items-stretch border-t border-border">
+          <div className="grid flex-1 grid-cols-4 gap-x-6 gap-y-4 p-4">
+            {isLoading
+              ? Array.from({ length: fields?.length ?? 4 }).map((_, i) => (
+                  <div key={i} className="flex flex-col gap-1.5">
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-6 w-28" />
+                  </div>
+                ))
+              : fields?.map((field, i) => (
+                  <BorrowCapacityItem
+                    key={i}
+                    title={field.label}
+                    subTitle={field.subLabel}
+                    value={field.value}
+                  />
+                ))}
+          </div>
+
+          {/* LVR — right-pinned column, w-48 keeps Debt/Equity on one line */}
+          {(isLoading || hasLvr) && (
+            <div className="flex w-48 shrink-0 items-center border-l border-border p-4">
+              {isLoading ? (
+                <div className="flex w-full flex-col items-center gap-2">
+                  <Skeleton className="h-10 w-14" />
+                  <Skeleton className="h-2 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                </div>
+              ) : (
+                <LoanToValueRatio
+                  lvr={lvr!}
+                  debtAmount={debtAmount}
+                  equityAmount={equityAmount}
+                  className="w-full"
+                />
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Statistics row */}
+      {showStatsRow && (
+        <div className="flex gap-3 border-t border-border p-4">
+          {isLoading
+            ? Array.from({ length: statistics?.length ?? 3 }).map((_, i) => (
+                <Skeleton key={i} className="h-16 flex-1" />
+              ))
+            : statistics?.map((stat, i) => (
+                <StatisticItem key={i} {...stat} className="flex-1" />
+              ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/broker-info-panel.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+
+/**
+ * Sidebar panel showing the assigned advisor's name and a chat CTA.
+ *
+ * Two states:
+ *  - **Assigned** (`brokerName` provided): displays name, role, and a
+ *    "Chat with your advisor" button.
+ *  - **Unassigned** (no `brokerName`): displays a CTA to send a broker request.
+ *
+ * In both states the heading "Contact your advisor for a clear picture" is shown.
+ */
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type BrokerRole = "mortgage-broker" | "financial-planner";
+
+export interface BrokerInfoPanelProps {
+  /** Assigned broker's full name. Omit to show the unassigned state. */
+  brokerName?: string;
+  /** Role label shown next to the name. Defaults to "mortgage-broker". */
+  brokerRole?: BrokerRole;
+  /**
+   * Broker's contact phone number.
+   * @deprecated Kept for API compatibility; no longer displayed.
+   */
+  brokerPhone?: string;
+  /**
+   * Broker's contact email address.
+   * @deprecated Kept for API compatibility; no longer displayed.
+   */
+  brokerEmail?: string;
+  /** Called when the user clicks "Chat with your advisor" (assigned state) */
+  onChat?: () => void;
+  /** Called when the user clicks "Send Broker Request" (unassigned state only) */
+  onRequestBroker?: () => void;
+  className?: string;
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const ROLE_LABELS: Record<BrokerRole, string> = {
+  "mortgage-broker": "Mortgage Broker",
+  "financial-planner": "Financial Planner",
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function BrokerInfoPanel({
+  brokerName,
+  brokerRole = "mortgage-broker",
+  onChat,
+  onRequestBroker,
+  className,
+}: BrokerInfoPanelProps) {
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col items-end gap-2 border-b border-border px-6 py-4",
+        className,
+      )}
+    >
+      <p className="text-sm font-semibold text-foreground">
+        Contact your advisor for a{" "}
+        <span className="text-primary">clear picture</span>
+      </p>
+
+      {brokerName ? (
+        <>
+          <div className="flex flex-wrap items-center gap-2 text-sm font-bold leading-tight text-foreground">
+            <span>{brokerName}</span>
+            <span className="text-muted-foreground">|</span>
+            <span className="font-normal">{ROLE_LABELS[brokerRole]}</span>
+          </div>
+
+          <Button variant="outline" size="sm" className="mt-1" onClick={onChat}>
+            Chat with your advisor
+          </Button>
+        </>
+      ) : (
+        <Button
+          variant="outline"
+          size="sm"
+          className="mt-2"
+          onClick={onRequestBroker}
+        >
+          Send Broker Request
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/calculator-input-item.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Pencil } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * A compact row showing a label and pre-formatted value with an optional
+ * pencil edit trigger. Used inside accordion income/expense groups in the
+ * Borrowing Capacity Calculator panel (e.g. "Avg Income Per Month").
+ */
+
+export interface CalculatorInputItemProps {
+  /** Row label (e.g. "Avg Income Per Month") */
+  label: string;
+  /** Pre-formatted value string (e.g. "$8,500") */
+  value: string;
+  /** Called when the pencil button is clicked */
+  onEdit?: () => void;
+  className?: string;
+}
+
+export function CalculatorInputItem({
+  label,
+  value,
+  onEdit,
+  className,
+}: CalculatorInputItemProps) {
+  return (
+    <div
+      className={cn("flex items-center justify-between gap-3 py-2", className)}
+    >
+      <span className="truncate text-sm text-muted-foreground">{label}</span>
+      <div className="flex shrink-0 items-center gap-1">
+        <span className="text-base font-semibold tabular-nums text-foreground">
+          {value}
+        </span>
+        {onEdit && (
+          <button
+            type="button"
+            aria-label="Edit value"
+            onClick={onEdit}
+            className="p-1 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <Pencil size={14} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/calculator-section.tsx

@@ -0,0 +1,275 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { colorMixSwatch } from "@/lib/colors";
+import { Button } from "./button";
+import { EditableMoneyItem } from "./editable-money-item";
+import { CalculatorInputItem } from "./calculator-input-item";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+
+/**
+ * Right-panel organism for the Borrowing Capacity page.
+ *
+ * Composes:
+ * - Collapsible income accordion with editable sub-items
+ * - Expense rows (editable + read-only) separated by dividers
+ * - Stacked proportional bar visualising income vs expenses
+ * - Apply footer button
+ *
+ * All values are pre-formatted strings — business logic stays in the app layer.
+ */
+
+const INCOME_COLOR = "#39FD99";
+const SURPLUS_COLOR = "#C65AFF";
+const EXPENSES_COLOR = "#9B9EA1";
+const DEBT_COLOR = "#162029";
+// Distinct opacities let viewers distinguish HEM row from debt row sharing the same hue
+const HEM_FILL_OPACITY = 0.7;
+const DEBT_FILL_OPACITY = 0.8;
+
+export interface CalculatorIncomeItem {
+  key: string;
+  /** e.g. "Avg Income Per Month" */
+  label: string;
+  /** Pre-formatted e.g. "$8,500" */
+  value: string;
+}
+
+export interface CalculatorSectionProps {
+  // ── Income accordion ─────────────────────────────────
+  /** Formatted total of all income sources, e.g. "$12,500" */
+  incomeTotalFormatted: string;
+  /** Individual income line items shown when accordion is open */
+  incomeItems: CalculatorIncomeItem[];
+  /** Initial open/closed state of the accordion (uncontrolled after mount) */
+  defaultIncomeExpanded?: boolean;
+  onIncomeExpandChange?: (open: boolean) => void;
+  /** Called with the item key when a pencil button is clicked */
+  onIncomeItemEdit?: (key: string) => void;
+
+  // ── Expense rows ──────────────────────────────────────
+  currentExpensesValue: string;
+  currentExpensesTooltip?: string;
+  /**
+   * Raw number — enables inline editing directly in the row.
+   * Must be paired with `onCurrentExpensesChange`.
+   */
+  currentExpenses?: number;
+  onCurrentExpensesChange?: (value: number) => void;
+  /** Fallback: called when pencil is clicked (no inline edit) */
+  onCurrentExpensesEdit?: () => void;
+
+  optimisedEstimateValue: string;
+  optimisedEstimateTooltip?: string;
+
+  debtRepaymentsValue: string;
+  /**
+   * Raw number — enables inline editing directly in the row.
+   * Must be paired with `onDebtRepaymentsChange`.
+   */
+  debtRepayments?: number;
+  onDebtRepaymentsChange?: (value: number) => void;
+  /** Fallback: called when pencil is clicked (no inline edit) */
+  onDebtRepaymentsEdit?: () => void;
+
+  surplusIncomeValue: string;
+
+  // ── Bar proportions (0–100) ───────────────────────────
+  surplusPercent: number;
+  currentExpensesPercent: number;
+  debtRepaymentsPercent: number;
+
+  // ── Footer ────────────────────────────────────────────
+  /** Enables the Save button */
+  hasChanges?: boolean;
+  /** Shows loading state on the Save button */
+  isSaving?: boolean;
+  onSave?: () => void;
+
+  className?: string;
+}
+
+function RowDivider() {
+  return <div className="border-t border-border" />;
+}
+
+export function CalculatorSection({
+  incomeTotalFormatted,
+  incomeItems,
+  defaultIncomeExpanded = false,
+  onIncomeExpandChange,
+  onIncomeItemEdit,
+  currentExpensesValue,
+  currentExpensesTooltip,
+  currentExpenses,
+  onCurrentExpensesChange,
+  onCurrentExpensesEdit,
+  optimisedEstimateValue,
+  optimisedEstimateTooltip,
+  debtRepaymentsValue,
+  debtRepayments,
+  onDebtRepaymentsChange,
+  onDebtRepaymentsEdit,
+  surplusIncomeValue,
+  surplusPercent,
+  currentExpensesPercent,
+  debtRepaymentsPercent,
+  hasChanges = false,
+  isSaving = false,
+  onSave,
+  className,
+}: CalculatorSectionProps) {
+  const [accordionValue, setAccordionValue] = React.useState<string[]>(
+    defaultIncomeExpanded ? ["income"] : [],
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-4 p-4", className)}>
+      <p className="text-center text-base font-bold text-foreground">
+        Calculator Used
+      </p>
+
+      <div className="flex flex-col">
+        <Accordion
+          value={accordionValue}
+          onValueChange={(vals: string[]) => {
+            setAccordionValue(vals);
+            onIncomeExpandChange?.(vals.includes("income"));
+          }}
+        >
+          <AccordionItem value="income" className="border-b-0">
+            <AccordionTrigger className="px-0 py-0 hover:no-underline hover:bg-transparent">
+              <div className="flex min-w-0 flex-1 items-center gap-2 py-2">
+                <span
+                  aria-hidden
+                  className="h-5 w-5 shrink-0 border"
+                  style={{
+                    borderColor: INCOME_COLOR,
+                    backgroundColor: colorMixSwatch(INCOME_COLOR),
+                  }}
+                />
+                <span className="truncate text-sm text-foreground">
+                  After tax income
+                </span>
+              </div>
+              <span className="mr-2 text-base font-semibold tabular-nums text-foreground">
+                {incomeTotalFormatted}
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-0">
+              <div className="flex flex-col pl-7">
+                {incomeItems.map((item, idx) => (
+                  <React.Fragment key={item.key}>
+                    {idx > 0 && <RowDivider />}
+                    <CalculatorInputItem
+                      label={item.label}
+                      value={item.value}
+                      onEdit={
+                        onIncomeItemEdit
+                          ? () => onIncomeItemEdit(item.key)
+                          : undefined
+                      }
+                    />
+                  </React.Fragment>
+                ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        <RowDivider />
+
+        <EditableMoneyItem
+          label="Current Expenses"
+          value={currentExpensesValue}
+          color={EXPENSES_COLOR}
+          tooltip={currentExpensesTooltip}
+          numericValue={currentExpenses}
+          onValueChange={onCurrentExpensesChange}
+          onEdit={onCurrentExpensesChange ? undefined : onCurrentExpensesEdit}
+        />
+
+        <RowDivider />
+
+        <EditableMoneyItem
+          label="Optimised Estimate (HEM)"
+          value={optimisedEstimateValue}
+          color={DEBT_COLOR}
+          fillOpacity={HEM_FILL_OPACITY}
+          tooltip={optimisedEstimateTooltip}
+        />
+
+        <RowDivider />
+
+        <EditableMoneyItem
+          label="Debt Repayments"
+          value={debtRepaymentsValue}
+          color={DEBT_COLOR}
+          fillOpacity={DEBT_FILL_OPACITY}
+          numericValue={debtRepayments}
+          onValueChange={onDebtRepaymentsChange}
+          onEdit={onDebtRepaymentsChange ? undefined : onDebtRepaymentsEdit}
+        />
+
+        <RowDivider />
+
+        <EditableMoneyItem
+          label="Surplus Income"
+          value={surplusIncomeValue}
+          color={SURPLUS_COLOR}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <div
+          className="h-5 w-full border"
+          style={{
+            borderColor: INCOME_COLOR,
+            backgroundColor: colorMixSwatch(INCOME_COLOR),
+          }}
+          aria-hidden
+        />
+        <div className="flex h-5 gap-0.5" aria-hidden>
+          <div
+            className="shrink-0 border"
+            style={{
+              width: `${surplusPercent}%`,
+              borderColor: SURPLUS_COLOR,
+              backgroundColor: colorMixSwatch(SURPLUS_COLOR),
+            }}
+          />
+          <div
+            className="shrink-0 border"
+            style={{
+              width: `${currentExpensesPercent}%`,
+              borderColor: EXPENSES_COLOR,
+              backgroundColor: colorMixSwatch(EXPENSES_COLOR),
+            }}
+          />
+          <div
+            className="shrink-0 border"
+            style={{
+              width: `${debtRepaymentsPercent}%`,
+              borderColor: DEBT_COLOR,
+              backgroundColor: colorMixSwatch(DEBT_COLOR, DEBT_FILL_OPACITY),
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button
+          variant="outline-secondary"
+          disabled={!hasChanges || isSaving}
+          onClick={onSave}
+        >
+          {isSaving ? "Saving…" : "Apply"}
+        </Button>
+      </div>
+    </div>
+  );
+}