@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/financial-drawers.tsx

@@ -0,0 +1,339 @@
+import * as React from "react";
+import { X } from "lucide-react";
+import { Sheet, SheetContent } from "./sheet";
+import { Button } from "./button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+import { Spinner } from "./spinner";
+
+/**
+ * Financial drawer shells — WealthX DS (Level 5)
+ *
+ * These are the outermost drawer containers. They compose the Level 4 sections
+ * into full-screen right-side panels used across backoffice.
+ *
+ * ```
+ * Level 2  →  FinancialDetailField, FinancialLvrBar …         (financial-primitives)
+ * Level 3  →  PropertyCard, DebtCard, AlertCard …             (financial-cards)
+ * Level 4  →  PropertyHoldingsSection, DebtSection …          (financial-sections)
+ * Level 5  →  SummaryReportDrawer, OpportunityDetailsDrawer … ← here
+ * ```
+ *
+ * Both components are **visual shells** — they own the chrome (header, tabs,
+ * scrollable viewport) but delegate all data and content to the consuming app
+ * via slot props.
+ */
+
+// ---------------------------------------------------------------------------
+// SummaryReportDrawer
+// ---------------------------------------------------------------------------
+
+export type SummaryViewMode = "individual" | "joint";
+export type SummaryJointSubTab = "joint" | "userA" | "userB";
+
+export interface SummaryReportDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Primary contact name shown in the header. */
+  contactName?: string;
+  /** Whether a secondary contact has been added for joint view. */
+  hasJointView?: boolean;
+  /** Active view mode — individual or joint. */
+  viewMode?: SummaryViewMode;
+  onViewModeChange?: (mode: SummaryViewMode) => void;
+  /** Active sub-tab when in joint + joint mode. */
+  jointSubTab?: SummaryJointSubTab;
+  onJointSubTabChange?: (tab: SummaryJointSubTab) => void;
+  /** Display name for the primary applicant in joint view. */
+  jointMainUserName?: string;
+  /** Display name for the secondary applicant in joint view. */
+  jointCoApplicantName?: string;
+  /** Called when "Create Joint View" is clicked (no joint view yet). */
+  onCreateJointView?: () => void;
+  /** Called when "Remove Joint View" is clicked. */
+  onRemoveJointView?: () => void;
+  /**
+   * Row of action buttons rendered below the header chrome.
+   * Typically: Export button, Send Report button, etc.
+   */
+  actionButtons?: React.ReactNode;
+  /**
+   * Alert accordion shown below the action buttons row.
+   * Pass an `<AlertAccordion>` from financial-sections when alerts exist.
+   */
+  alerts?: React.ReactNode;
+  /**
+   * When true, hides `children` and `actionButtons`/`alerts` and shows a
+   * centered `<Spinner>` instead.
+   */
+  isLoading?: boolean;
+  /**
+   * The scrollable financial content — stack Level 4 sections and charts here.
+   * Recommended order (mirrors backoffice): charts → PropertyHoldings → Debt →
+   * OtherLiabilities → IncomeExpense → AlertAccordion.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Right-side sheet shell for the Summary Report Drawer.
+ *
+ * Handles the header chrome (contact name, Individual/Joint view toggle,
+ * joint sub-tabs, close button) and a scrollable content viewport.
+ * All financial content is passed as `children`.
+ */
+export function SummaryReportDrawer({
+  open,
+  onOpenChange,
+  contactName = "Contact",
+  hasJointView = false,
+  viewMode = "individual",
+  onViewModeChange,
+  jointSubTab = "joint",
+  onJointSubTabChange,
+  jointMainUserName = "User A",
+  jointCoApplicantName = "User B",
+  onCreateJointView,
+  onRemoveJointView,
+  actionButtons,
+  alerts,
+  isLoading = false,
+  children,
+}: SummaryReportDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className="w-[min(1080px,90vw)] max-w-none p-0"
+      >
+        <div className="flex max-h-[100dvh] min-h-0 flex-1 flex-col overflow-hidden px-8 py-6">
+          {/* ── Header chrome ── */}
+          <div className="shrink-0 space-y-4">
+            <div className="flex flex-col gap-3">
+              {/* Top row: view mode toggle + close */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  {hasJointView ? (
+                    <>
+                      <div className="flex gap-1">
+                        <Button
+                          variant={
+                            viewMode === "individual" ? "default" : "outline"
+                          }
+                          size="sm"
+                          onClick={() => onViewModeChange?.("individual")}
+                        >
+                          Individual View
+                        </Button>
+                        <Button
+                          variant={viewMode === "joint" ? "default" : "outline"}
+                          size="sm"
+                          onClick={() => onViewModeChange?.("joint")}
+                        >
+                          Joint View
+                        </Button>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={onRemoveJointView}
+                      >
+                        Remove Joint View
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <span className="text-label-medium text-foreground">
+                        {contactName} View
+                      </span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={onCreateJointView}
+                      >
+                        Create Joint View
+                      </Button>
+                    </>
+                  )}
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => onOpenChange(false)}
+                  aria-label="Close drawer"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Joint sub-tabs — default (pill) variant, only in joint+joint mode */}
+              {hasJointView && viewMode === "joint" && (
+                <Tabs
+                  value={jointSubTab}
+                  onValueChange={(v) =>
+                    onJointSubTabChange?.(v as SummaryJointSubTab)
+                  }
+                >
+                  <TabsList>
+                    <TabsTrigger value="joint">Joint View</TabsTrigger>
+                    <TabsTrigger value="userA">
+                      {jointMainUserName} View
+                    </TabsTrigger>
+                    <TabsTrigger value="userB">
+                      {jointCoApplicantName} View
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
+              )}
+            </div>
+
+            {/* Action buttons + alerts — hidden while loading */}
+            {!isLoading && actionButtons && <div>{actionButtons}</div>}
+            {!isLoading && alerts && <div>{alerts}</div>}
+          </div>
+
+          {/* ── Scrollable content viewport ── */}
+          <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            {isLoading ? (
+              <div className="flex h-full min-h-[200px] items-center justify-center py-12">
+                <Spinner size="xl" className="text-primary" />
+              </div>
+            ) : (
+              children
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// OpportunityDetailsDrawer
+// ---------------------------------------------------------------------------
+
+export type OpportunityTab =
+  | "summary"
+  | "tasks"
+  | "bankStatement"
+  | "policyAI"
+  | "runServicing"
+  | "emailAndNotes"
+  | "syncLoanApp";
+
+const OPPORTUNITY_TABS: { value: OpportunityTab; label: string }[] = [
+  { value: "summary", label: "Summary" },
+  { value: "tasks", label: "Tasks" },
+  { value: "bankStatement", label: "Reports & Statements" },
+  { value: "policyAI", label: "Policy AI" },
+  { value: "runServicing", label: "Run Servicing" },
+  { value: "emailAndNotes", label: "Email & Notes" },
+  { value: "syncLoanApp", label: "Sync Loan App" },
+];
+
+export interface OpportunityDetailsDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Default active tab on open. Defaults to "summary". */
+  defaultTab?: OpportunityTab;
+  /**
+   * Content slots keyed by tab value.
+   * Pass only the tabs you want to render content for — unset tabs show nothing.
+   *
+   * ```tsx
+   * <OpportunityDetailsDrawer
+   *   tabs={{
+   *     summary: <SummaryTabContent />,
+   *     tasks: <TasksTabContent />,
+   *   }}
+   * />
+   * ```
+   */
+  tabs?: Partial<Record<OpportunityTab, React.ReactNode>>;
+}
+
+/**
+ * Right-side sheet shell for the Opportunity Details Drawer.
+ *
+ * Renders a line-variant tab bar (Summary · Tasks · Reports & Statements ·
+ * Policy AI · Run Servicing · Email & Notes · Sync Loan App) with a close
+ * button, and a scrollable `TabsContent` panel for each active tab.
+ *
+ * Uses the shadcn `Tabs` component internally so each tab's content panel
+ * is properly connected to its trigger via Base UI's Tabs.Root context.
+ */
+export function OpportunityDetailsDrawer({
+  open,
+  onOpenChange,
+  defaultTab = "summary",
+  tabs,
+}: OpportunityDetailsDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className="w-[min(1048px,100vw)] max-w-none p-0"
+      >
+        {/*
+         * Tabs.Root wraps both the header and content so that TabsContent panels
+         * are in scope and automatically shown/hidden by Base UI's tab context.
+         * gap-0 overrides the default gap-2 on Tabs.
+         */}
+        <Tabs defaultValue={defaultTab} className="h-full gap-0">
+          {/*
+           * Tab header: no pt-3 so the header height hugs the tab section.
+           * TabsList gets group-data-[orientation=horizontal]/tabs:h-12 to
+           * override the built-in conditional h-9 at equal specificity via
+           * cascade order. Triggers use flex-none to hug their label width
+           * (overrides the built-in flex-1 that was stretching them equally).
+           * No overflow-x-auto wrapper — that forces overflow-y:auto (CSS spec)
+           * and clips the line-variant after:bottom-[-5px] indicator.
+           */}
+          <div className="flex shrink-0 items-end border-b border-border">
+            <TabsList
+              variant="line"
+              className="flex-1 group-data-[orientation=horizontal]/tabs:h-auto justify-start rounded-none bg-transparent p-0"
+            >
+              {OPPORTUNITY_TABS.map((tab) => (
+                <TabsTrigger
+                  key={tab.value}
+                  value={tab.value}
+                  className="flex-none h-auto py-3 px-4 text-sm"
+                >
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+
+            {/* Close button */}
+            <div className="flex shrink-0 self-center items-center pr-3">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => onOpenChange(false)}
+                aria-label="Close drawer"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* ── Tab content panels ── */}
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            {OPPORTUNITY_TABS.map((tab) => (
+              <TabsContent
+                key={tab.value}
+                value={tab.value}
+                className="mt-0 flex-none p-5 outline-none"
+              >
+                {tabs?.[tab.value]}
+              </TabsContent>
+            ))}
+          </div>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/ui/financial-primitives.tsx

@@ -0,0 +1,331 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Financial display primitives — WealthX DS
+ *
+ * Atomic building blocks for financial data display.
+ * Used inside summary report drawers, opportunity detail panels,
+ * and any financial data card in the backoffice and frontend.
+ *
+ * Compose these upward:
+ *   Atom  → FinancialDetailField, FinancialLineItem, FinancialLvrBar …
+ *   Card  → PropertyCard, DebtCard, ApplicantInfoCard …
+ *   Section → PropertyHoldingsGrid, IncomeExpensesGrid …
+ *   Drawer → SummaryReportDrawer, OpportunityDetailsDrawer …
+ */
+
+const NO_DATA = "—";
+
+// ---------------------------------------------------------------------------
+// FinancialSectionLabel
+// ---------------------------------------------------------------------------
+
+export interface FinancialSectionLabelProps {
+  children: React.ReactNode;
+}
+
+/** All-caps muted section heading. Used above major sections inside a financial drawer. */
+export function FinancialSectionLabel({
+  children,
+}: FinancialSectionLabelProps) {
+  return (
+    <span className="text-label-small uppercase text-muted-foreground">
+      {children}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialCardHeader
+// ---------------------------------------------------------------------------
+
+export interface FinancialCardHeaderProps {
+  children: React.ReactNode;
+}
+
+/** All-caps muted label at the top of a card — lighter than SectionLabel. */
+export function FinancialCardHeader({ children }: FinancialCardHeaderProps) {
+  return (
+    <div className="py-2.5">
+      <span className="text-label-small uppercase text-muted-foreground">
+        {children}
+      </span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialSubsectionTitle
+// ---------------------------------------------------------------------------
+
+export interface FinancialSubsectionTitleProps {
+  children: React.ReactNode;
+}
+
+/** Uppercase bold title inside a card section (e.g. "Card Stats", "Loan Stats"). */
+export function FinancialSubsectionTitle({
+  children,
+}: FinancialSubsectionTitleProps) {
+  return (
+    <span className="text-label-medium uppercase text-foreground">
+      {children}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialDetailField
+// ---------------------------------------------------------------------------
+
+export type FinancialDetailFieldVariant = "caption" | "overline" | "footer";
+
+export interface FinancialDetailFieldProps {
+  label: string;
+  /**
+   * The value to display. Accepts any renderable node — formatted strings,
+   * badges, or `null`/`undefined` (renders `—`).
+   */
+  value?: React.ReactNode;
+  /**
+   * Controls label typography and layout density:
+   * - `caption`  (default) — small 2-line min-height label; use in dense grids
+   * - `overline` — tighter gap; use in mid-density sections
+   * - `footer`   — flex-col layout; use inside `FinancialSubtotalFrame`
+   */
+  variant?: FinancialDetailFieldVariant;
+}
+
+/**
+ * Label + value vertical stack — the core data-display cell.
+ *
+ * | Variant   | Label style            | Use when                          |
+ * |-----------|------------------------|-----------------------------------|
+ * | caption   | small, 2-line min-h    | Dense grids (default)             |
+ * | overline  | overline, tighter gap  | Mid-density sections              |
+ * | footer    | overline + flex-col    | SubtotalFrame cells               |
+ */
+export function FinancialDetailField({
+  label,
+  value,
+  variant = "caption",
+}: FinancialDetailFieldProps) {
+  if (variant === "footer") {
+    return (
+      <div className="flex flex-col justify-between min-w-0">
+        <span className="text-overline text-muted-foreground">{label}</span>
+        <span className="text-label-medium text-foreground mt-1 break-words">
+          {value ?? NO_DATA}
+        </span>
+      </div>
+    );
+  }
+
+  const labelClass =
+    variant === "caption"
+      ? "block min-h-[2rem] text-caption text-muted-foreground"
+      : "min-h-[1.75rem] text-overline text-muted-foreground";
+
+  return (
+    <div
+      className={cn(
+        "min-w-0",
+        variant === "overline" && "flex flex-col gap-0.5",
+      )}
+    >
+      <span className={labelClass}>{label}</span>
+      <span className="text-label-medium text-foreground break-words">
+        {value ?? NO_DATA}
+      </span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialLineItem
+// ---------------------------------------------------------------------------
+
+export interface FinancialLineItemProps {
+  label: string;
+  /** Formatted value string e.g. "$9,500". Renders `—` when falsy. */
+  value?: string | null;
+  /**
+   * When `true`, renders the value in `text-destructive` (red).
+   * Use for expenses, liabilities, or negative cashflow values.
+   */
+  destructive?: boolean;
+}
+
+/**
+ * Horizontal row: label on left, value on right.
+ * Use `destructive` for expenses, liabilities, or negative cashflow values.
+ */
+export function FinancialLineItem({
+  label,
+  value,
+  destructive,
+}: FinancialLineItemProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-0.5">
+      <span className="text-body-small text-foreground">{label}</span>
+      <span
+        className={cn(
+          "text-label-medium whitespace-nowrap text-right",
+          destructive ? "text-destructive" : "text-foreground",
+        )}
+      >
+        {value || NO_DATA}
+      </span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialLvrBar
+// ---------------------------------------------------------------------------
+
+export interface FinancialLvrBarProps {
+  /**
+   * LVR percentage (0–100). Drives colour threshold:
+   * - `< 70`  → success (low risk)
+   * - `70–79` → warning (borderline)
+   * - `≥ 80`  → destructive (high risk)
+   */
+  percent?: number;
+  /** Human-readable label rendered on the right e.g. `"56% — Good"`. */
+  label?: string;
+}
+
+/**
+ * LVR progress bar with label.
+ *
+ * Colour thresholds map to semantic tokens:
+ * - < 70%   → success  (low risk)
+ * - 70–79%  → warning  (borderline)
+ * - ≥ 80%   → destructive (high risk)
+ */
+export function FinancialLvrBar({
+  percent = 56,
+  label = "56% — Good",
+}: FinancialLvrBarProps) {
+  const color =
+    percent >= 80 ? "destructive" : percent >= 70 ? "warning" : "success";
+
+  const textClass = {
+    success: "text-success",
+    warning: "text-warning",
+    destructive: "text-destructive",
+  }[color];
+
+  const trackClass = {
+    success: "bg-success/15",
+    warning: "bg-warning/15",
+    destructive: "bg-destructive/15",
+  }[color];
+
+  const fillClass = {
+    success: "bg-success",
+    warning: "bg-warning",
+    destructive: "bg-destructive",
+  }[color];
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <span className="text-body-small text-muted-foreground">LVR</span>
+        <span className={cn("text-label-medium", textClass)}>{label}</span>
+      </div>
+      <div className={cn("h-2.5 w-full overflow-hidden", trackClass)}>
+        <div
+          className={cn("h-full", fillClass)}
+          style={{ width: `${Math.min(percent, 100)}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialSubtotalFrame
+// ---------------------------------------------------------------------------
+
+export interface FinancialSubtotalFrameProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Brand-tinted footer container — sits at the bottom of a property or debt card.
+ * Background uses the tenant primary color at 10 % opacity.
+ */
+export function FinancialSubtotalFrame({
+  children,
+}: FinancialSubtotalFrameProps) {
+  return (
+    <div className="mt-auto border-t border-primary/20 bg-primary/10 px-4 py-3">
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FinancialSubtotalBlock
+// ---------------------------------------------------------------------------
+
+export interface FinancialSubtotalBlockProps {
+  /**
+   * Monthly average value e.g. `"$2,840"`.
+   * When provided without `totalLast12Months`, renders right-aligned as a single figure.
+   */
+  monthlyAverage?: string;
+  /** Total for the last 12 months e.g. `"$34,080"`. Only shown when provided alongside `monthlyAverage`. */
+  totalLast12Months?: string;
+  /** Override the "Monthly Average" label (e.g. `"Net Surplus"`). */
+  label?: string;
+}
+
+/**
+ * One or two summary values inside a SubtotalFrame.
+ *
+ * - Two values  → Monthly Average (left) + Total Last 12 Months (right)
+ * - One value   → right-aligned single figure (pass only `monthlyAverage`)
+ * - Custom label → override "Monthly Average" via `label` prop
+ */
+export function FinancialSubtotalBlock({
+  monthlyAverage,
+  totalLast12Months,
+  label,
+}: FinancialSubtotalBlockProps) {
+  const isSingle = monthlyAverage && !totalLast12Months;
+  return (
+    <div
+      className={cn(
+        "flex flex-row items-center",
+        isSingle ? "justify-end" : "justify-between",
+      )}
+    >
+      <div
+        className={cn(
+          "flex flex-col gap-0.5",
+          isSingle ? "text-right" : "text-left",
+        )}
+      >
+        <span className="min-h-[1.75rem] text-overline text-muted-foreground">
+          {label ?? "Monthly Average"}
+        </span>
+        <span className="text-label-medium text-foreground">
+          {monthlyAverage ?? NO_DATA}
+        </span>
+      </div>
+      {!isSingle && (
+        <div className="flex flex-col gap-0.5 text-right">
+          <span className="min-h-[1.75rem] text-overline text-muted-foreground">
+            Total Last 12 Months
+          </span>
+          <span className="text-label-medium text-foreground">
+            {totalLast12Months ?? NO_DATA}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}