@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/bank-statement-pdf-viewer.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * BankStatementPDFViewer — WealthX DS (L4 Template)
+ *
+ * Full-viewport dialog for viewing a bank statement PDF.
+ * Supports paging through multiple accounts using prev / next navigation.
+ *
+ * PDF rendering:
+ *   - Embeds the blob via `URL.createObjectURL(pdfBlob) + "#toolbar=0"` in an
+ *     `<iframe>` so the browser's native PDF plugin renders it without toolbar.
+ *   - Object URL is revoked automatically when the blob changes.
+ *
+ * Typical usage in the Bank Statement tab:
+ *   1. User clicks a document name in `BankStatementDocumentTable`.
+ *   2. Consumer fetches the PDF blob for each linked account.
+ *   3. `BankStatementPDFViewer` is mounted with `open={true}`.
+ *   4. User pages through accounts with ‹ / ›; download icon triggers a direct
+ *      browser download of the current blob.
+ *
+ * Layer: L4 Template
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BankStatementViewerAccount {
+  id: string;
+  /** Account display name (e.g. "Everyday Savings"). */
+  name?: string;
+  /** Institution name fallback (e.g. "CommBank"). */
+  institutionName?: string;
+}
+
+export interface BankStatementPDFViewerProps {
+  open: boolean;
+  onClose: () => void;
+  /** Raw PDF blob for the currently viewed document. `null` shows an empty state. */
+  pdfBlob: Blob | null;
+  /** Filename used for the browser download, e.g. "CommBank_James_90days.pdf". */
+  pdfFilename?: string;
+  /** All accounts linked to this statement (for prev/next navigation). */
+  accounts: BankStatementViewerAccount[];
+  /** Zero-based index of the currently viewed account. */
+  currentAccountIndex: number;
+  /** Called when the user clicks ‹ / › to navigate between accounts. */
+  onAccountChange: (index: number) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// BankStatementPDFViewer
+// ---------------------------------------------------------------------------
+
+export function BankStatementPDFViewer({
+  open,
+  onClose,
+  pdfBlob,
+  pdfFilename,
+  accounts,
+  currentAccountIndex,
+  onAccountChange,
+  className,
+}: BankStatementPDFViewerProps) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const previousUrlRef = useRef<string | null>(null);
+
+  // Create an object URL from the blob (memoised; revoked when blob changes)
+  const pdfUrl = useMemo(() => {
+    if (!pdfBlob) return null;
+    return `${URL.createObjectURL(pdfBlob)}#toolbar=0`;
+  }, [pdfBlob]);
+
+  // Revoke the previous URL when the blob changes to avoid memory leaks
+  useEffect(() => {
+    return () => {
+      if (pdfUrl) {
+        // Strip the #toolbar=0 fragment before revoking
+        URL.revokeObjectURL(pdfUrl.split("#")[0]);
+      }
+    };
+  }, [pdfUrl]);
+
+  // Reset loading state when the URL (blob or account) changes
+  useEffect(() => {
+    if (!pdfUrl) {
+      setLoading(false);
+      return;
+    }
+
+    if (previousUrlRef.current !== pdfUrl) {
+      previousUrlRef.current = pdfUrl;
+      setLoading(true);
+      setError(null);
+    }
+
+    // Fallback: hide spinner after 2 s even if onLoad never fires (e.g. Firefox)
+    const timer = setTimeout(() => setLoading(false), 2000);
+    return () => clearTimeout(timer);
+  }, [pdfUrl, currentAccountIndex]);
+
+  // ── Navigation ────────────────────────────────────────────────────────────
+
+  const canGoPrev = currentAccountIndex > 0;
+  const canGoNext = currentAccountIndex < accounts.length - 1;
+
+  const currentAccount = accounts[currentAccountIndex];
+  const accountLabel =
+    currentAccount?.name ?? currentAccount?.institutionName ?? "Account";
+
+  // ── Download ──────────────────────────────────────────────────────────────
+
+  const handleDownload = () => {
+    if (!pdfBlob) return;
+    const filename = pdfFilename ?? "bank-statement.pdf";
+    const url = URL.createObjectURL(pdfBlob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent
+        showCloseButton={false}
+        className={cn(
+          "flex h-[95vh] max-h-[95vh] w-[95vw] max-w-[95vw] flex-col gap-0 p-0",
+          className,
+        )}
+        data-slot="bank-statement-pdf-viewer"
+      >
+        {/* Navigation bar */}
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Previous account"
+              onClick={() => onAccountChange(currentAccountIndex - 1)}
+              disabled={!canGoPrev}
+            >
+              <ChevronLeft className="size-4" />
+            </Button>
+
+            <span className="text-body-medium tabular-nums">
+              Account {currentAccountIndex + 1} of {accounts.length}
+            </span>
+
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Next account"
+              onClick={() => onAccountChange(currentAccountIndex + 1)}
+              disabled={!canGoNext}
+            >
+              <ChevronRight className="size-4" />
+            </Button>
+
+            <span className="ml-2 text-body-medium text-muted-foreground">
+              {accountLabel}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Download PDF"
+              onClick={handleDownload}
+              disabled={!pdfBlob}
+            >
+              <Download className="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close viewer"
+              onClick={onClose}
+            >
+              <X className="size-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* PDF area */}
+        <div className="relative flex flex-1 items-start justify-center overflow-auto bg-muted">
+          {!pdfBlob ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <p className="text-body-medium text-muted-foreground">
+                No PDF document available
+              </p>
+            </div>
+          ) : (
+            <>
+              {loading && (
+                <div className="absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2">
+                  <Spinner />
+                  <p className="text-body-medium text-muted-foreground">
+                    Loading PDF…
+                  </p>
+                </div>
+              )}
+
+              {error && !loading && (
+                <div className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2">
+                  <p className="text-body-medium text-destructive">{error}</p>
+                </div>
+              )}
+
+              <iframe
+                key={pdfUrl ?? "no-url"}
+                src={pdfUrl ?? undefined}
+                className="min-h-full w-full max-w-[1000px] border-none transition-opacity duration-300"
+                style={{ opacity: loading ? 0 : 1 }}
+                title="Bank Statement PDF"
+                onLoad={() => setLoading(false)}
+                onError={() => {
+                  setLoading(false);
+                  setError("Failed to load PDF");
+                }}
+              />
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/banking-accounts-connect.tsx

@@ -0,0 +1,187 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type BankAccountItem = {
+  id: string;
+  name: string;
+  balance?: string;
+  institutionName?: string;
+  institutionLogoUrl?: string;
+};
+
+export type BankAccountCategory =
+  | "banking"
+  | "home-loan"
+  | "credit-card"
+  | "personal-loan";
+
+export type BankAccountsByCategory = Partial<
+  Record<BankAccountCategory, BankAccountItem[]>
+>;
+
+export type BankingAccountsConnectApplicant = {
+  name: string;
+  email?: string;
+};
+
+export type BankingAccountsConnectProps = {
+  applicant: BankingAccountsConnectApplicant;
+  /** Connected accounts grouped by category. All accounts are flattened and shown in a single grid. */
+  accountsByCategory?: BankAccountsByCategory;
+  /** Called when the "Connect Your Bank +" tile is clicked. */
+  onConnectBank?: () => void;
+  onNext?: () => void;
+  onPrev?: () => void;
+  /** Hide the built-in Previous/Next navigation row — use when the parent wizard shell provides navigation. */
+  hideNavigation?: boolean;
+  className?: string;
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * BankingAccountsConnect — shown on the Connections tab when the applicant
+ * already has at least one bank account connected.
+ *
+ * Renders all connected accounts as horizontal card tiles plus a
+ * "Connect Your Bank +" tile to add more. Layout mirrors the bank-selection
+ * grid in ConnectBankStep.
+ *
+ * Figma: WealthX-Backoffice---Mobile-App — node 19308:53046 (Connection section)
+ */
+export function BankingAccountsConnect({
+  accountsByCategory = {},
+  onConnectBank,
+  onNext,
+  onPrev,
+  hideNavigation = false,
+  className,
+}: BankingAccountsConnectProps) {
+  // Flatten all category accounts into a single list for display
+  const allAccounts = ([] as BankAccountItem[]).concat(
+    ...Object.values(accountsByCategory),
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-6 font-sans", className)}>
+      {/* Heading with left accent bar */}
+      <div className="border-l-4 border-primary pl-3">
+        <h2 className="text-h3 text-foreground">
+          Connect Available Banking Information
+        </h2>
+        <p className="mt-1 text-body-small text-muted-foreground">
+          This will help auto populate your application form and remove the need
+          to upload bank statements.
+        </p>
+      </div>
+
+      {/* Connected accounts grid */}
+      <div className="flex flex-col gap-3">
+        <h3 className="text-label-large text-foreground">
+          Your Connected Accounts
+        </h3>
+
+        {/* 3-column tile grid — same border-collapse trick as ConnectBankStep */}
+        <div className="grid grid-cols-3 border-l border-t border-border">
+          {allAccounts.map((account: BankAccountItem) => (
+            <div
+              key={account.id}
+              className="flex h-[82px] items-center gap-3 border-b border-r border-border bg-background p-3"
+            >
+              {/* Institution logo or abbreviation */}
+              {account.institutionLogoUrl ? (
+                <img
+                  src={account.institutionLogoUrl}
+                  alt={account.institutionName ?? ""}
+                  className="size-[50px] shrink-0 object-contain"
+                />
+              ) : (
+                <div className="flex size-[50px] shrink-0 items-center justify-center bg-muted text-caption text-muted-foreground">
+                  {account.institutionName?.[0] ?? "?"}
+                </div>
+              )}
+
+              {/* Account name + balance */}
+              <div className="flex min-w-0 flex-col">
+                <span className="truncate text-body-small text-foreground">
+                  {account.name}
+                </span>
+                {account.balance && (
+                  <span className="text-label-small text-foreground">
+                    {account.balance}
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+
+          {/* "Connect Your Bank +" tile */}
+          <button
+            type="button"
+            onClick={onConnectBank}
+            className="flex h-[82px] items-center justify-center gap-1.5 border-b border-r border-border bg-background p-3 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          >
+            <span className="text-body-small font-bold text-foreground">
+              Connect Your Bank +
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* Navigation — hidden when the parent wizard shell owns navigation */}
+      {!hideNavigation && (
+        <div className="flex items-center justify-between border-t border-border pt-4">
+          <Button variant="outline" onClick={onPrev}>
+            <ChevronLeftIcon className="mr-1 size-4" />
+            Previous
+          </Button>
+          <Button onClick={onNext}>
+            Next
+            <ChevronRightIcon className="ml-1 size-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function ChevronLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,228 @@
+import React from "react";
+import { TrendingUp, TrendingDown, Minus, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatCurrencyAbbrev } from "@/lib/format-currency";
+import { Button } from "./button";
+
+// ─── BorrowCapacityItem ───────────────────────────────────────────────────────
+/**
+ * Displays a single borrowing capacity result field.
+ * Shows a muted label, optional sub-label, and the formatted value below.
+ *
+ * Used inside scenario detail cards on the Borrowing Capacity page.
+ */
+
+export interface BorrowCapacityItemProps {
+  /** Label above the value (e.g. "Purchase Price") */
+  title?: string;
+  /** Optional secondary descriptor below the title */
+  subTitle?: string;
+  /** Pre-formatted value string to display (e.g. "$500,000") */
+  value?: string;
+  className?: string;
+}
+
+export function BorrowCapacityItem({
+  title,
+  subTitle,
+  value,
+  className,
+}: BorrowCapacityItemProps) {
+  if (!title && !value) {
+    return <div className={cn("min-h-[52px]", className)} aria-hidden />;
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      {title && (
+        <span className="block min-h-[2.5rem] text-sm text-muted-foreground">
+          {title}
+        </span>
+      )}
+      {value && (
+        <span className="text-lg font-semibold text-foreground">{value}</span>
+      )}
+      {subTitle && (
+        <span className="text-sm italic text-muted-foreground/70">
+          {subTitle}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// ─── StatisticItem ────────────────────────────────────────────────────────────
+/**
+ * Shows a financial trend statistic over a lookback period.
+ * Displays a heading ("Last N months"), the absolute dollar change,
+ * and the percentage change with a direction icon.
+ *
+ * Trend colors: positive → primary, flat/negative → muted.
+ *
+ * Used in the statistics summary row of the Borrowing Capacity page.
+ */
+
+export interface StatisticItemProps {
+  /** Number of months to look back (default: 3) */
+  loopBackMonths?: number;
+  /** Absolute dollar amount of change */
+  amountChange?: number;
+  /** Percentage change — positive = up, negative = down, 0 = flat */
+  amountChangePercentage?: number;
+  className?: string;
+}
+
+export function StatisticItem({
+  loopBackMonths = 3,
+  amountChange = 0,
+  amountChangePercentage = 0,
+  className,
+}: StatisticItemProps) {
+  const isPositive = amountChangePercentage > 0;
+  const isNegative = amountChangePercentage < 0;
+  const TrendIcon = isPositive ? TrendingUp : isNegative ? TrendingDown : Minus;
+  const trendClassName = isPositive ? "text-primary" : "text-muted-foreground";
+  const amountPrefix = isPositive ? "+" : isNegative ? "−" : "";
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col justify-center gap-2 border border-border p-3",
+        className,
+      )}
+    >
+      <span className="text-sm text-muted-foreground">
+        Last {loopBackMonths} month{loopBackMonths !== 1 ? "s" : ""}
+      </span>
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xl font-semibold tabular-nums text-foreground">
+          {amountPrefix}
+          {formatCurrencyAbbrev(Math.abs(amountChange), 2)}
+        </span>
+        <span
+          className={cn(
+            "flex items-center gap-1 text-sm font-medium tabular-nums",
+            trendClassName,
+          )}
+        >
+          <TrendIcon size={14} className="shrink-0" />
+          {Math.abs(amountChangePercentage).toFixed(1)}%
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// ─── LoanToValueRatio ─────────────────────────────────────────────────────────
+/**
+ * Displays a Loan-to-Value Ratio (LVR) as a percentage with a color-coded
+ * risk indicator and an optional equity/debt breakdown bar.
+ *
+ * Risk tiers:
+ *   ≤ 60%  → green  (safe)
+ *   61–80% → warning (moderate)
+ *   > 80%  → destructive (high)
+ *
+ * Used in the LVR settings panel of the Borrowing Capacity page.
+ */
+
+export interface LoanToValueRatioProps {
+  /** LVR as a whole number percentage (0–100) */
+  lvr: number;
+  /** Optional debt amount — shown below the bar when provided */
+  debtAmount?: number;
+  /** Optional equity amount — shown below the bar when provided */
+  equityAmount?: number;
+  className?: string;
+}
+
+// Thresholds match major Australian lender risk bands
+const LVR_TIER_STYLES = {
+  safe: { text: "text-success", bar: "bg-success" },
+  moderate: { text: "text-warning", bar: "bg-warning" },
+  high: { text: "text-destructive", bar: "bg-destructive" },
+} as const;
+
+export function LoanToValueRatio({
+  lvr,
+  debtAmount,
+  equityAmount,
+  className,
+}: LoanToValueRatioProps) {
+  const clamped = Math.min(100, Math.max(0, lvr));
+  const tier = clamped <= 60 ? "safe" : clamped <= 80 ? "moderate" : "high";
+  const { text: lvrTextColor, bar: lvrBarColor } = LVR_TIER_STYLES[tier];
+
+  return (
+    <div className={cn("flex flex-col items-center gap-2", className)}>
+      <div className="flex flex-col items-center leading-none">
+        <span className={cn("text-3xl font-bold tabular-nums", lvrTextColor)}>
+          {clamped.toFixed(0)}%
+        </span>
+        <span className="mt-1 text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+          LVR
+        </span>
+      </div>
+
+      {/* Debt-vs-equity bar */}
+      <div className="h-1.5 w-full overflow-hidden bg-muted" aria-hidden>
+        <div
+          className={cn("h-full transition-all", lvrBarColor)}
+          style={{ width: `${clamped}%` }}
+        />
+      </div>
+
+      {(debtAmount !== undefined || equityAmount !== undefined) && (
+        <div className="flex w-full items-center justify-between text-sm text-muted-foreground">
+          {debtAmount !== undefined && (
+            <span>Debt {formatCurrencyAbbrev(debtAmount, 1)}</span>
+          )}
+          {equityAmount !== undefined && (
+            <span>Equity {formatCurrencyAbbrev(equityAmount, 1)}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── AddScenarioButton ────────────────────────────────────────────────────────
+/**
+ * A dashed-border CTA button for adding a new borrowing scenario.
+ * Renders as a full-width <button> with a label and Plus icon.
+ * Supports a disabled state that removes interactivity.
+ *
+ * Used on the Borrowing Capacity page to open the "add / compare scenario" flow.
+ */
+
+export interface AddScenarioButtonProps {
+  /** Button label (default: "Compare Loan Options") */
+  title?: string;
+  /** Disables the button */
+  disabled?: boolean;
+  /** Click handler */
+  onClick?: () => void;
+  className?: string;
+}
+
+export function AddScenarioButton({
+  title = "Compare Loan Options",
+  disabled = false,
+  onClick,
+  className,
+}: AddScenarioButtonProps) {
+  return (
+    <Button
+      variant="outline-secondary"
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "w-full justify-between border-dashed text-base",
+        className,
+      )}
+    >
+      <span>{title}</span>
+      <Plus size={18} className="shrink-0" />
+    </Button>
+  );
+}