@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/opportunity-summary-tab.tsx

@@ -1,18 +1,26 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pencil } from "lucide-react";
+import { ChevronDown, ChevronUp, Mail, Pencil, Phone } from "lucide-react";
+import { Button } from "./button";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { PROPERTY_ASSET_TYPES } from "@/lib/opportunity-constants";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
 import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "./accordion";
+  FinancialDetailField,
+  FinancialLineItem,
+  FinancialSectionLabel,
+  FinancialSubtotalFrame,
+  FinancialSubtotalBlock,
+} from "./financial-primitives";
+import type { DebtCardProps, PropertyCardProps } from "./financial-cards";
 import {
-  LoanScenarioSection,
-  FinancialBottomSummary,
-} from "./financial-sections";
-import { AboutCard, IncomeCard, ExpensesCard } from "./financial-cards";
+  AboutCard,
+  DebtCard,
+  IncomeCard,
+  ExpensesCard,
+  PropertyCard,
+} from "./financial-cards";
 import {
   EditLoanScenarioModal,
   EditAssetsModal,
@@ -35,28 +43,13 @@ import type {
  *
  * Full Summary tab for the OpportunityDetailsDrawer.
  * Renders:
- *   - Loan Application accordion (shared, above applicant sub-tabs)
- *   - Joint / Main / Co applicant sub-tabs (accordion sections per tab)
- *   - All inline edit modals (managed internally)
+ *   - Hero Band: deal-at-a-glance strip (applicant names, LVR, net surplus,
+ *     serviceability signal, contact shortcuts)
+ *   - Loan Scenario card (collapsible, always above the sub-tabs)
+ *   - Joint / Main / Co applicant sub-tabs (filled variant, full width)
+ *   - All inline edit modals (managed internally, scoped to drawer portal)
  *
  * Pass as the `summary` slot of `OpportunityDetailsDrawer`.
- *
- * ```tsx
- * <OpportunityDetailsDrawer
- *   tabs={{
- *     summary: (
- *       <OpportunitySummaryTab
- *         isJoint={true}
- *         loanScenario={loanScenario}
- *         onLoanScenarioChange={setLoanScenario}
- *         assets={assets}
- *         onAssetsChange={setAssets}
- *         // … other data + callbacks
- *       />
- *     ),
- *   }}
- * />
- * ```
  */
 
 // ---------------------------------------------------------------------------
@@ -98,20 +91,69 @@ export interface OpportunitySummaryTabProps {
 // Internal helpers
 // ---------------------------------------------------------------------------
 
-function formatCurrency(n: number) {
-  return "$" + n.toLocaleString("en-AU");
-}
-
 function toMonthly(amount: number, freq: "Monthly" | "Weekly") {
   return freq === "Monthly" ? amount : (amount * 52) / 12;
 }
 
+/** Map an AssetLineItem for a property to PropertyCardProps. */
+function assetToPropertyCard(item: AssetLineItem): PropertyCardProps {
+  return {
+    address: item.address || item.assetType,
+    type: item.usedAs,
+    estimated: formatCurrency(item.value),
+    isLinkedToBank: false,
+  };
+}
+
+/** Map a DebtLineItem to DebtCardProps. */
+function debtToCard(debt: DebtLineItem): DebtCardProps {
+  return {
+    lenderName: debt.lender || debt.debtType,
+    currentLoanAmount: formatCurrency(debt.amountOwing),
+    interestRate: debt.interestRate ? `${debt.interestRate}% p.a.` : undefined,
+    originalLoanAmount: debt.originalLoanAmount
+      ? formatCurrency(debt.originalLoanAmount)
+      : undefined,
+    monthlyRepayments: debt.repaymentAmount
+      ? `${formatCurrency(debt.repaymentAmount)} / ${debt.repaymentFrequency}`
+      : undefined,
+  };
+}
+
+/** Tailwind text-color class for the LVR metric. */
+function lvrColorClass(pct: number): string {
+  if (pct <= 0) return "text-muted-foreground";
+  if (pct < 80) return "text-emerald-600";
+  if (pct < 90) return "text-amber-600";
+  return "text-destructive";
+}
+
+/** Serviceability label + badge class based on net monthly surplus. */
+function serviceabilityInfo(surplus: number): {
+  label: string;
+  badgeClass: string;
+} {
+  if (surplus > 1500)
+    return {
+      label: "Likely Serviceable",
+      badgeClass: "bg-emerald-50 text-emerald-700 border border-emerald-200",
+    };
+  if (surplus > 0)
+    return {
+      label: "Borderline",
+      badgeClass: "bg-amber-50 text-amber-700 border border-amber-200",
+    };
+  return {
+    label: "At Risk",
+    badgeClass: "bg-red-50 text-destructive border border-red-200",
+  };
+}
+
 /**
- * Pencil icon button rendered inline inside an AccordionTrigger.
- * Uses stopPropagation so the click opens the edit modal without
- * toggling the accordion open/closed state.
+ * Pencil icon button rendered next to a section header.
+ * Uses stopPropagation so the click doesn't toggle a collapsible parent.
  */
-function TriggerEditButton({
+function SectionEditButton({
   onClick,
   title = "Edit",
 }: {
@@ -119,9 +161,11 @@ function TriggerEditButton({
   title?: string;
 }) {
   return (
-    <button
+    <Button
       type="button"
-      className="ml-auto mr-2 inline-flex size-6 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
+      variant="ghost"
+      size="icon"
+      className="size-6 shrink-0 text-muted-foreground hover:text-foreground"
       onClick={(e) => {
         e.stopPropagation();
         onClick();
@@ -130,16 +174,151 @@ function TriggerEditButton({
       title={title}
     >
       <Pencil className="size-3.5" />
-    </button>
+    </Button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// HeroBand (internal)
+// Deal-at-a-glance strip always visible at the top of the summary.
+// ---------------------------------------------------------------------------
+
+interface HeroBandProps {
+  mainAbout: AboutApplicantFormData;
+  coAbout?: AboutApplicantFormData;
+  isJoint: boolean;
+  loanAmount: number;
+  propertyEstimate: number;
+  cashEquity: number;
+  netSurplus: number;
+}
+
+function HeroBand({
+  mainAbout,
+  coAbout,
+  isJoint,
+  loanAmount,
+  propertyEstimate,
+  cashEquity,
+  netSurplus,
+}: HeroBandProps) {
+  const lvrPct =
+    propertyEstimate > 0 ? (loanAmount / propertyEstimate) * 100 : 0;
+  const svc = serviceabilityInfo(netSurplus);
+
+  const mainName =
+    [mainAbout.firstName, mainAbout.lastName].filter(Boolean).join(" ") ||
+    "Main Applicant";
+  const coName = coAbout
+    ? [coAbout.firstName, coAbout.lastName].filter(Boolean).join(" ")
+    : "";
+
+  const surplusAbs = Math.abs(Math.round(netSurplus));
+  const surplusDisplay = `${netSurplus >= 0 ? "+" : "-"}${formatCurrency(surplusAbs)}`;
+
+  return (
+    <div className="mb-4 border border-border bg-muted/40">
+      {/* ── Applicant row ── */}
+      <div className="flex items-center justify-between gap-4 px-4 py-3">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-sm font-medium text-foreground">
+            {mainName}
+          </span>
+          {isJoint && coName && (
+            <span className="text-xs text-muted-foreground">
+              + {coName} · Joint Application
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {mainAbout.phone && (
+            <a
+              href={`tel:${mainAbout.phone}`}
+              className="inline-flex size-7 items-center justify-center text-muted-foreground hover:text-foreground"
+              title={`Call: ${mainAbout.phone}`}
+            >
+              <Phone className="size-3.5" />
+            </a>
+          )}
+          {mainAbout.email && (
+            <a
+              href={`mailto:${mainAbout.email}`}
+              className="inline-flex size-7 items-center justify-center text-muted-foreground hover:text-foreground"
+              title={`Email: ${mainAbout.email}`}
+            >
+              <Mail className="size-3.5" />
+            </a>
+          )}
+        </div>
+      </div>
+
+      {/* ── Key metrics row ── */}
+      <div className="grid grid-cols-4 divide-x divide-border border-t border-border">
+        <div className="flex flex-col px-4 py-2.5">
+          <span className="text-xs uppercase tracking-wide text-muted-foreground">
+            Loan Amount
+          </span>
+          <span className="text-sm font-semibold text-foreground">
+            {formatCurrency(loanAmount)}
+          </span>
+        </div>
+        <div className="flex flex-col px-4 py-2.5">
+          <span className="text-xs uppercase tracking-wide text-muted-foreground">
+            Property
+          </span>
+          <span className="text-sm font-semibold text-foreground">
+            {propertyEstimate > 0 ? formatCurrency(propertyEstimate) : "—"}
+          </span>
+        </div>
+        <div className="flex flex-col px-4 py-2.5">
+          <span className="text-xs uppercase tracking-wide text-muted-foreground">
+            LVR
+          </span>
+          <span className={cn("text-sm font-semibold", lvrColorClass(lvrPct))}>
+            {lvrPct > 0 ? `${lvrPct.toFixed(1)}%` : "—"}
+          </span>
+        </div>
+        <div className="flex flex-col px-4 py-2.5">
+          <span className="text-xs uppercase tracking-wide text-muted-foreground">
+            Cash / Deposit
+          </span>
+          <span className="text-sm font-semibold text-foreground">
+            {formatCurrency(cashEquity)}
+          </span>
+        </div>
+      </div>
+
+      {/* ── Serviceability row ── */}
+      <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
+        <div className="flex flex-col gap-0.5">
+          <span className="text-xs uppercase tracking-wide text-muted-foreground">
+            Net Surplus / Month
+          </span>
+          <span
+            className={cn(
+              "text-sm font-semibold",
+              netSurplus >= 0 ? "text-emerald-600" : "text-destructive",
+            )}
+          >
+            {surplusDisplay}
+          </span>
+        </div>
+        <div className={cn("px-2.5 py-1 text-xs font-medium", svc.badgeClass)}>
+          {svc.label}
+        </div>
+      </div>
+    </div>
   );
 }
 
 // ---------------------------------------------------------------------------
-// ApplicantAccordionTab (internal)
+// ApplicantCardTab (internal)
+// Replaces ApplicantAccordionTab — uses bordered card pattern for consistency.
+// AboutCard / IncomeCard / ExpensesCard each carry their own border so we float
+// the section label + edit button ABOVE each card (no outer bordered wrapper).
 // ---------------------------------------------------------------------------
 
-interface ApplicantAccordionTabProps {
-  accordionPrefix: string;
+interface ApplicantCardTabProps {
   about: AboutApplicantFormData;
   income: IncomeFormData;
   expenses: ExpensesFormData;
@@ -148,15 +327,14 @@ interface ApplicantAccordionTabProps {
   onEditExpenses: () => void;
 }
 
-function ApplicantAccordionTab({
-  accordionPrefix,
+function ApplicantCardTab({
   about,
   income,
   expenses,
   onEditAbout,
   onEditIncome,
   onEditExpenses,
-}: ApplicantAccordionTabProps) {
+}: ApplicantCardTabProps) {
   const totalMonthlyIncome = formatCurrency(
     income.items.reduce(
       (sum, i) => sum + toMonthly(i.incomeAmount, i.frequency),
@@ -171,69 +349,72 @@ function ApplicantAccordionTab({
   );
 
   return (
-    <Accordion
-      openMultiple
-      defaultValue={[
-        `${accordionPrefix}-about`,
-        `${accordionPrefix}-income`,
-        `${accordionPrefix}-expenses`,
-      ]}
-    >
-      <AccordionItem value={`${accordionPrefix}-about`}>
-        <AccordionTrigger>
-          About
-          <TriggerEditButton onClick={onEditAbout} />
-        </AccordionTrigger>
-        <AccordionContent className="text-foreground">
-          <AboutCard
-            title={about.title}
-            firstName={about.firstName}
-            lastName={about.lastName}
-            phone={about.phone}
-            email={about.email}
-            gender={about.gender}
-            maritalStatus={about.maritalStatus}
-            citizenStatus={about.citizenStatus}
-            propertyInTrust={about.propertyInTrust}
-            companyOwnership={about.companyOwnership}
-          />
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value={`${accordionPrefix}-income`}>
-        <AccordionTrigger>
-          Income
-          <TriggerEditButton onClick={onEditIncome} />
-        </AccordionTrigger>
-        <AccordionContent className="text-foreground">
-          <IncomeCard
-            items={income.items.map((i) => ({
-              incomeType: i.incomeType,
-              jobTitle: i.jobTitle,
-              companyName: i.companyName,
-              amountLabel: `${formatCurrency(i.incomeAmount)} / ${i.frequency}`,
-            }))}
-            totalMonthly={totalMonthlyIncome}
-          />
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value={`${accordionPrefix}-expenses`}>
-        <AccordionTrigger>
-          Expenses
-          <TriggerEditButton onClick={onEditExpenses} />
-        </AccordionTrigger>
-        <AccordionContent className="text-foreground">
-          <ExpensesCard
-            items={expenses.items.map((e) => ({
-              expenseType: e.expenseType,
-              amountLabel: `${formatCurrency(e.amount)} / ${e.frequency}`,
-            }))}
-            totalMonthly={totalMonthlyExpenses}
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+    <div className="flex flex-col gap-4 py-4">
+      {/* ── About ── */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <FinancialSectionLabel>About</FinancialSectionLabel>
+          <SectionEditButton onClick={onEditAbout} title="Edit About" />
+        </div>
+        <AboutCard
+          title={about.title}
+          firstName={about.firstName}
+          lastName={about.lastName}
+          phone={about.phone}
+          email={about.email}
+          dob={about.dob}
+          gender={about.gender}
+          maritalStatus={about.maritalStatus}
+          numDependants={about.numDependants}
+          citizenStatus={about.citizenStatus}
+          residentialAddress={about.residentialAddress}
+          residentialStatus={about.residentialStatus}
+          timeAtAddressYears={about.timeAtAddressYears}
+          timeAtAddressMonths={about.timeAtAddressMonths}
+          driversLicence={about.driversLicence}
+          passport={about.passport}
+          propertyInTrust={about.propertyInTrust}
+          companyOwnership={about.companyOwnership}
+        />
+      </div>
+
+      {/* ── Income ── */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <FinancialSectionLabel>Income</FinancialSectionLabel>
+          <SectionEditButton onClick={onEditIncome} title="Edit Income" />
+        </div>
+        <IncomeCard
+          items={income.items.map((i) => ({
+            incomeType: i.incomeType,
+            jobTitle: i.jobTitle,
+            companyName: i.companyName,
+            companyAddress: i.companyAddress,
+            startDate: i.startDate,
+            stillInPosition: i.stillInPosition,
+            endDate: i.endDate,
+            companyType: i.companyType,
+            amountLabel: `${formatCurrency(i.incomeAmount)} / ${i.frequency}`,
+          }))}
+          totalMonthly={totalMonthlyIncome}
+        />
+      </div>
+
+      {/* ── Expenses ── */}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <FinancialSectionLabel>Expenses</FinancialSectionLabel>
+          <SectionEditButton onClick={onEditExpenses} title="Edit Expenses" />
+        </div>
+        <ExpensesCard
+          items={expenses.items.map((e) => ({
+            expenseType: e.expenseType,
+            amountLabel: `${formatCurrency(e.amount)} / ${e.frequency}`,
+          }))}
+          totalMonthly={totalMonthlyExpenses}
+        />
+      </div>
+    </div>
   );
 }
 
@@ -262,11 +443,17 @@ export function OpportunitySummaryTab({
   coExpenses,
   onCoExpensesChange,
 }: OpportunitySummaryTabProps) {
-  // ── Sub-tab state ──────────────────────────────────────────────────────────
+  // ── Portal container — scopes edit modal overlays inside the drawer ────────
+  const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
+
+  // ── Sub-tab state ─────────────────────────────────────────────────────────
   const [summarySubTab, setSummarySubTab] = useState<"joint" | "main" | "co">(
     "joint",
   );
 
+  // ── Loan Scenario collapse ─────────────────────────────────────────────────
+  const [loanScenarioExpanded, setLoanScenarioExpanded] = useState(true);
+
   // ── Modal open state (internal) ───────────────────────────────────────────
   const [editLoanOpen, setEditLoanOpen] = useState(false);
   const [editAssetsOpen, setEditAssetsOpen] = useState(false);
@@ -303,26 +490,88 @@ export function OpportunitySummaryTab({
     ? [coAbout.firstName, coAbout.lastName].filter(Boolean).join(" ")
     : "Co-Applicant";
 
+  // ── Property cards derived from asset list ────────────────────────────────
+  const propertyCards: PropertyCardProps[] = assets
+    .filter((a) => PROPERTY_ASSET_TYPES.has(a.assetType))
+    .map(assetToPropertyCard);
+
+  // ── Scrim: true when any edit modal is open ────────────────────────────────
+  const anyModalOpen =
+    editLoanOpen ||
+    editAssetsOpen ||
+    editDebtsOpen ||
+    editMainAboutOpen ||
+    editCoAboutOpen ||
+    editMainIncomeOpen ||
+    editCoIncomeOpen ||
+    editMainExpensesOpen ||
+    editCoExpensesOpen;
+
   return (
     <>
-      {/* ── Loan Application — shared section, sits above applicant sub-tabs ── */}
-      <Accordion openMultiple defaultValue={["loan-app"]}>
-        <AccordionItem value="loan-app">
-          <AccordionTrigger>
-            Loan Application
-            <TriggerEditButton onClick={() => setEditLoanOpen(true)} />
-          </AccordionTrigger>
-          <AccordionContent className="text-foreground">
-            <LoanScenarioSection
-              lendingType="Home Loan"
-              purposeOfLoan={loanScenario.loanPurpose}
-              loanAmount={formatCurrency(loanScenario.loanAmount)}
-              propertyEstimate={formatCurrency(loanScenario.propertyEstimate)}
-              estLvr="—"
-              cashDeposit={formatCurrency(loanScenario.cashEquity)}
-              propertyAddress="—"
-              duration={`${loanScenario.loanDuration} years`}
-              importantFeatures={
+      {/* ── Hero Band — always visible, deal at a glance ── */}
+      <HeroBand
+        mainAbout={mainAbout}
+        coAbout={coAbout}
+        isJoint={isJoint}
+        loanAmount={loanScenario.loanAmount}
+        propertyEstimate={loanScenario.propertyEstimate}
+        cashEquity={loanScenario.cashEquity}
+        netSurplus={netSurplus}
+      />
+
+      {/* ── Loan Scenario — collapsible bordered card ── */}
+      <div className="mb-4 border border-border">
+        <div className="flex items-center justify-between px-4 py-2.5">
+          {/* Left: toggle area (label + chevron) */}
+          <Button
+            type="button"
+            variant="ghost"
+            className="h-auto flex-1 justify-start gap-2 px-0 text-left"
+            onClick={() => setLoanScenarioExpanded((v) => !v)}
+            aria-expanded={loanScenarioExpanded}
+          >
+            <FinancialSectionLabel>Loan Scenario</FinancialSectionLabel>
+            {loanScenarioExpanded ? (
+              <ChevronUp className="size-3.5 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="size-3.5 text-muted-foreground" />
+            )}
+          </Button>
+          {/* Right: edit button */}
+          <SectionEditButton
+            onClick={() => setEditLoanOpen(true)}
+            title="Edit Loan Scenario"
+          />
+        </div>
+
+        {loanScenarioExpanded && (
+          <div className="grid grid-cols-4 gap-x-6 gap-y-4 border-t border-border p-4">
+            <FinancialDetailField label="Lending Type" value="Home Loan" />
+            <FinancialDetailField
+              label="Purpose of Loan"
+              value={loanScenario.loanPurpose}
+            />
+            <FinancialDetailField
+              label="Loan Amount"
+              value={formatCurrency(loanScenario.loanAmount)}
+            />
+            <FinancialDetailField
+              label="Property Estimate"
+              value={formatCurrency(loanScenario.propertyEstimate)}
+            />
+            <FinancialDetailField
+              label="Cash / Deposit"
+              value={formatCurrency(loanScenario.cashEquity)}
+            />
+            <FinancialDetailField label="Property Address" value="—" />
+            <FinancialDetailField
+              label="Duration"
+              value={`${loanScenario.loanDuration} years`}
+            />
+            <FinancialDetailField
+              label="Important Features"
+              value={
                 [
                   loanScenario.featureVariableRate && "Variable Rate",
                   loanScenario.featureFixedRate && "Fixed Rate",
@@ -334,127 +583,160 @@ export function OpportunitySummaryTab({
                   .filter(Boolean)
                   .join(", ") || "—"
               }
-              topThreePriorities={loanScenario.priorities.join(", ") || "—"}
             />
-            <div className="mt-4 flex gap-4">
-              {[
-                { label: "Number of Applicants", value: isJoint ? "2" : "1" },
-                { label: "Dependants", value: "1" },
-              ].map(({ label, value }) => (
-                <div key={label} className="flex flex-col gap-1">
-                  <span className="text-label-small uppercase text-muted-foreground">
-                    {label}
-                  </span>
-                  <div className="border border-border px-4 py-2">
-                    <span className="text-label-medium text-foreground">
-                      {value}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+            <FinancialDetailField
+              label="Top Priorities"
+              value={loanScenario.priorities.join(", ") || "—"}
+            />
+          </div>
+        )}
+      </div>
 
-      {/* ── Applicant sub-tabs ── */}
+      {/* ── Applicant sub-tabs — filled variant, full width ── */}
       <Tabs
         value={summarySubTab}
         onValueChange={(v) => setSummarySubTab(v as "joint" | "main" | "co")}
         className="pb-6"
       >
         <div className="sticky top-0 z-10 bg-background pb-1 pt-2">
-          <TabsList variant="line">
+          <TabsList className="w-full">
             <TabsTrigger value="joint">Joint</TabsTrigger>
             <TabsTrigger value="main">{mainName}</TabsTrigger>
             {isJoint && <TabsTrigger value="co">{coName}</TabsTrigger>}
           </TabsList>
         </div>
 
-        {/* ── Joint tab: combined data from Main + Co ── */}
-        <TabsContent value="joint">
-          <Accordion
-            openMultiple
-            defaultValue={["joint-overview", "joint-documents"]}
-          >
-            {/* Financial Overview — cashflow + assets + net position */}
-            <AccordionItem value="joint-overview">
-              <AccordionTrigger>
-                Financial Overview
-                <div className="ml-auto mr-2 flex items-center gap-0.5">
-                  <button
-                    type="button"
-                    className="inline-flex size-6 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setEditAssetsOpen(true);
-                    }}
-                    aria-label="Edit Assets"
-                    title="Edit Assets"
-                  >
-                    <Pencil className="size-3.5" />
-                  </button>
-                  <button
-                    type="button"
-                    className="inline-flex size-6 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setEditDebtsOpen(true);
-                    }}
-                    aria-label="Edit Debts"
-                    title="Edit Debts"
-                  >
-                    <Pencil className="size-3.5" />
-                  </button>
+        {/* ── Joint tab — combined overview ── */}
+        <TabsContent value="joint" className="flex flex-col gap-4 pb-6 pt-4">
+          {/* Financial Overview — 2-col: Cashflow | Balance Sheet */}
+          <div className="border border-border">
+            <div className="px-4 py-2.5">
+              <FinancialSectionLabel>Financial Overview</FinancialSectionLabel>
+            </div>
+            <div className="grid grid-cols-2 divide-x divide-border border-t border-border">
+              {/* Col 1: Cashflow */}
+              <div className="flex flex-col">
+                <div className="px-4 pb-2 pt-3">
+                  <FinancialSectionLabel>Cashflow</FinancialSectionLabel>
+                </div>
+                <div className="flex flex-1 flex-col px-4 pb-4">
+                  <FinancialLineItem
+                    label="Monthly Income"
+                    value={formatCurrency(Math.round(combinedMonthlyIncome))}
+                  />
+                  <FinancialLineItem
+                    label="Monthly Expenses"
+                    value={formatCurrency(Math.round(combinedMonthlyExpenses))}
+                    destructive
+                  />
                 </div>
-              </AccordionTrigger>
-              <AccordionContent className="text-foreground">
-                <FinancialBottomSummary
-                  cashflowItems={[
-                    {
-                      label: "Monthly Combined Income",
-                      value: formatCurrency(Math.round(combinedMonthlyIncome)),
-                    },
-                    {
-                      label: "Monthly Combined Expenses",
-                      value: formatCurrency(
-                        Math.round(combinedMonthlyExpenses),
+                <FinancialSubtotalFrame>
+                  <FinancialSubtotalBlock
+                    monthlyAverage={formatCurrency(
+                      Math.abs(Math.round(netSurplus)),
+                    )}
+                    label={netSurplus < 0 ? "Net Deficit" : "Net Surplus"}
+                  />
+                </FinancialSubtotalFrame>
+              </div>
+
+              {/* Col 2: Balance Sheet */}
+              <div className="flex flex-col">
+                <div className="px-4 pb-2 pt-3">
+                  <FinancialSectionLabel>Balance Sheet</FinancialSectionLabel>
+                </div>
+                <div className="flex flex-1 flex-col px-4 pb-4">
+                  <FinancialLineItem label="Total Assets" value={totalAssets} />
+                  <FinancialLineItem
+                    label="Total Liabilities"
+                    value={totalDebts}
+                    destructive
+                  />
+                </div>
+                <FinancialSubtotalFrame>
+                  <FinancialSubtotalBlock
+                    monthlyAverage={formatCurrency(
+                      Math.abs(
+                        Math.round(totalAssetsAmount - totalDebtsAmount),
                       ),
-                      destructive: true,
-                    },
-                  ]}
-                  netSurplus={formatCurrency(Math.abs(Math.round(netSurplus)))}
-                  netSurplusDestructive={netSurplus < 0}
-                  assetItems={assets.map((a) => ({
-                    label: a.assetType,
-                    value: formatCurrency(a.value),
-                  }))}
-                  totalAssets={totalAssets}
-                  totalLiabilities={totalDebts}
-                  netPosition={formatCurrency(
-                    Math.abs(Math.round(totalAssetsAmount - totalDebtsAmount)),
-                  )}
-                  netPositionDestructive={totalAssetsAmount < totalDebtsAmount}
+                    )}
+                    label={
+                      totalAssetsAmount < totalDebtsAmount
+                        ? "Net Deficit"
+                        : "Net Position"
+                    }
+                  />
+                </FinancialSubtotalFrame>
+              </div>
+            </div>
+          </div>
+
+          {/* Documents — placed early so brokers can immediately check
+              what's been uploaded vs what's still missing */}
+          <div className="border border-border">
+            <div className="px-4 py-2.5">
+              <FinancialSectionLabel>Documents</FinancialSectionLabel>
+            </div>
+            <div className="p-4">
+              <p className="text-body-small text-muted-foreground">
+                No documents uploaded yet.
+              </p>
+            </div>
+          </div>
+
+          {/* Property Holdings — bordered card, divide-x columns, max 3 per row */}
+          {propertyCards.length > 0 && (
+            <div className="border border-border">
+              <div className="flex items-center justify-between px-4 py-2.5">
+                <FinancialSectionLabel>Property Holdings</FinancialSectionLabel>
+                <SectionEditButton
+                  onClick={() => setEditAssetsOpen(true)}
+                  title="Edit Assets"
+                />
+              </div>
+              <div
+                className={cn(
+                  "grid divide-x divide-border border-t border-border",
+                  propertyCards.length === 1
+                    ? "grid-cols-1"
+                    : propertyCards.length === 2
+                      ? "grid-cols-2"
+                      : "grid-cols-3",
+                )}
+              >
+                {propertyCards.map((card, i) => (
+                  <div key={card.address + i} className="p-4">
+                    <PropertyCard {...card} borderless />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Mortgages & Loans — bordered card, grid of DebtCards */}
+          {debts.length > 0 && (
+            <div className="border border-border">
+              <div className="flex items-center justify-between px-4 py-2.5">
+                <FinancialSectionLabel>
+                  Mortgages &amp; Loans
+                </FinancialSectionLabel>
+                <SectionEditButton
+                  onClick={() => setEditDebtsOpen(true)}
+                  title="Edit Debts"
                 />
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* Documents */}
-            <AccordionItem value="joint-documents">
-              <AccordionTrigger>Documents</AccordionTrigger>
-              <AccordionContent>
-                <p className="text-sm text-muted-foreground">
-                  No documents uploaded yet.
-                </p>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
+              </div>
+              <div className="grid grid-cols-2 gap-3 p-4">
+                {debts.map((debt) => (
+                  <DebtCard key={debt.id} {...debtToCard(debt)} />
+                ))}
+              </div>
+            </div>
+          )}
         </TabsContent>
 
         {/* ── Main Applicant tab ── */}
         <TabsContent value="main">
-          <ApplicantAccordionTab
-            accordionPrefix="main"
+          <ApplicantCardTab
             about={mainAbout}
             income={mainIncome}
             expenses={mainExpenses}
@@ -467,8 +749,7 @@ export function OpportunitySummaryTab({
         {/* ── Co-Applicant tab (joint applications only) ── */}
         {isJoint && coAbout && coIncome && coExpenses && (
           <TabsContent value="co">
-            <ApplicantAccordionTab
-              accordionPrefix="co"
+            <ApplicantCardTab
               about={coAbout}
               income={coIncome}
               expenses={coExpenses}
@@ -480,11 +761,12 @@ export function OpportunitySummaryTab({
         )}
       </Tabs>
 
-      {/* ── Edit modals (internal state) ── */}
+      {/* ── Edit modals — portal scoped inside the drawer ── */}
       <EditLoanScenarioModal
         open={editLoanOpen}
         onOpenChange={setEditLoanOpen}
         initialData={loanScenario}
+        container={portalEl}
         onSave={(data) => {
           onLoanScenarioChange?.(data);
           setEditLoanOpen(false);
@@ -494,6 +776,7 @@ export function OpportunitySummaryTab({
         open={editAssetsOpen}
         onOpenChange={setEditAssetsOpen}
         initialItems={assets}
+        container={portalEl}
         onSave={(items) => {
           onAssetsChange?.(items);
           setEditAssetsOpen(false);
@@ -503,6 +786,7 @@ export function OpportunitySummaryTab({
         open={editDebtsOpen}
         onOpenChange={setEditDebtsOpen}
         initialItems={debts}
+        container={portalEl}
         onSave={(items) => {
           onDebtsChange?.(items);
           setEditDebtsOpen(false);
@@ -513,6 +797,7 @@ export function OpportunitySummaryTab({
         onOpenChange={setEditMainAboutOpen}
         applicantLabel="Main Applicant"
         initialData={mainAbout}
+        container={portalEl}
         onSave={(data) => {
           onMainAboutChange?.(data);
           setEditMainAboutOpen(false);
@@ -524,6 +809,7 @@ export function OpportunitySummaryTab({
           onOpenChange={setEditCoAboutOpen}
           applicantLabel="Co-Applicant"
           initialData={coAbout}
+          container={portalEl}
           onSave={(data) => {
             onCoAboutChange?.(data);
             setEditCoAboutOpen(false);
@@ -535,6 +821,7 @@ export function OpportunitySummaryTab({
         onOpenChange={setEditMainIncomeOpen}
         applicantLabel="Main Applicant"
         initialData={mainIncome}
+        container={portalEl}
         onSave={(data) => {
           onMainIncomeChange?.(data);
           setEditMainIncomeOpen(false);
@@ -546,6 +833,7 @@ export function OpportunitySummaryTab({
           onOpenChange={setEditCoIncomeOpen}
           applicantLabel="Co-Applicant"
           initialData={coIncome}
+          container={portalEl}
           onSave={(data) => {
             onCoIncomeChange?.(data);
             setEditCoIncomeOpen(false);
@@ -557,6 +845,7 @@ export function OpportunitySummaryTab({
         onOpenChange={setEditMainExpensesOpen}
         applicantLabel="Main Applicant"
         initialData={mainExpenses}
+        container={portalEl}
         onSave={(data) => {
           onMainExpensesChange?.(data);
           setEditMainExpensesOpen(false);
@@ -568,12 +857,39 @@ export function OpportunitySummaryTab({
           onOpenChange={setEditCoExpensesOpen}
           applicantLabel="Co-Applicant"
           initialData={coExpenses}
+          container={portalEl}
           onSave={(data) => {
             onCoExpensesChange?.(data);
             setEditCoExpensesOpen(false);
           }}
         />
       )}
+
+      {/*
+       * Drawer scrim — dims the drawer content when any edit modal is open.
+       *
+       * Why this lives here (not inside the Dialog itself):
+       *   The portalEl container div below is positioned LAST in the DOM so
+       *   the Dialog overlay + popup paint on top of all drawer content.
+       *   This scrim is rendered BEFORE portalEl so it is covered by the
+       *   Dialog overlay (z-50) while itself sitting above drawer content
+       *   (z-auto). Using `fixed inset-0` ensures it covers the full drawer
+       *   viewport regardless of how far the user has scrolled.
+       */}
+      {anyModalOpen && (
+        <div
+          className="fixed inset-0 z-[49] bg-foreground/50"
+          aria-hidden="true"
+        />
+      )}
+
+      {/*
+       * Portal container — MUST be the last DOM element in this component.
+       * React portals render their output INTO this node, so placing it last
+       * ensures the Dialog overlay + popup paint on top of all drawer content
+       * and on top of the scrim above.
+       */}
+      <div ref={setPortalEl} data-shadcn-scope="" />
     </>
   );
 }