@wealthx/shadcn 1.1.0 → 1.2.1

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

@@ -0,0 +1,579 @@
+import * as React from "react";
+import { useState } from "react";
+import { Pencil } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./accordion";
+import {
+  LoanScenarioSection,
+  FinancialBottomSummary,
+} from "./financial-sections";
+import { AboutCard, IncomeCard, ExpensesCard } from "./financial-cards";
+import {
+  EditLoanScenarioModal,
+  EditAssetsModal,
+  EditDebtsModal,
+  EditAboutApplicantModal,
+  EditIncomeModal,
+  EditExpensesModal,
+} from "./opportunity-edit-modals";
+import type {
+  LoanScenarioFormData,
+  AssetLineItem,
+  DebtLineItem,
+  AboutApplicantFormData,
+  IncomeFormData,
+  ExpensesFormData,
+} from "./opportunity-edit-modals";
+
+/**
+ * OpportunitySummaryTab — WealthX DS (Level 5)
+ *
+ * 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)
+ *
+ * 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
+ *       />
+ *     ),
+ *   }}
+ * />
+ * ```
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface OpportunitySummaryTabProps {
+  /** Whether this is a joint application (shows Co-Applicant tab). */
+  isJoint?: boolean;
+
+  // ── Loan scenario ──────────────────────────────────────────────────────────
+  loanScenario: LoanScenarioFormData;
+  onLoanScenarioChange?: (data: LoanScenarioFormData) => void;
+
+  // ── Joint assets & debts ──────────────────────────────────────────────────
+  assets: AssetLineItem[];
+  onAssetsChange?: (items: AssetLineItem[]) => void;
+  debts: DebtLineItem[];
+  onDebtsChange?: (items: DebtLineItem[]) => void;
+
+  // ── Main applicant ────────────────────────────────────────────────────────
+  mainAbout: AboutApplicantFormData;
+  onMainAboutChange?: (data: AboutApplicantFormData) => void;
+  mainIncome: IncomeFormData;
+  onMainIncomeChange?: (data: IncomeFormData) => void;
+  mainExpenses: ExpensesFormData;
+  onMainExpensesChange?: (data: ExpensesFormData) => void;
+
+  // ── Co-applicant (only relevant when isJoint) ─────────────────────────────
+  coAbout?: AboutApplicantFormData;
+  onCoAboutChange?: (data: AboutApplicantFormData) => void;
+  coIncome?: IncomeFormData;
+  onCoIncomeChange?: (data: IncomeFormData) => void;
+  coExpenses?: ExpensesFormData;
+  onCoExpensesChange?: (data: ExpensesFormData) => void;
+}
+
+// ---------------------------------------------------------------------------
+// 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;
+}
+
+/**
+ * Pencil icon button rendered inline inside an AccordionTrigger.
+ * Uses stopPropagation so the click opens the edit modal without
+ * toggling the accordion open/closed state.
+ */
+function TriggerEditButton({
+  onClick,
+  title = "Edit",
+}: {
+  onClick: () => void;
+  title?: string;
+}) {
+  return (
+    <button
+      type="button"
+      className="ml-auto mr-2 inline-flex size-6 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      aria-label={title}
+      title={title}
+    >
+      <Pencil className="size-3.5" />
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ApplicantAccordionTab (internal)
+// ---------------------------------------------------------------------------
+
+interface ApplicantAccordionTabProps {
+  accordionPrefix: string;
+  about: AboutApplicantFormData;
+  income: IncomeFormData;
+  expenses: ExpensesFormData;
+  onEditAbout: () => void;
+  onEditIncome: () => void;
+  onEditExpenses: () => void;
+}
+
+function ApplicantAccordionTab({
+  accordionPrefix,
+  about,
+  income,
+  expenses,
+  onEditAbout,
+  onEditIncome,
+  onEditExpenses,
+}: ApplicantAccordionTabProps) {
+  const totalMonthlyIncome = formatCurrency(
+    income.items.reduce(
+      (sum, i) => sum + toMonthly(i.incomeAmount, i.frequency),
+      0,
+    ),
+  );
+  const totalMonthlyExpenses = formatCurrency(
+    expenses.items.reduce(
+      (sum, e) => sum + toMonthly(e.amount, e.frequency),
+      0,
+    ),
+  );
+
+  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>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// OpportunitySummaryTab (exported)
+// ---------------------------------------------------------------------------
+
+export function OpportunitySummaryTab({
+  isJoint = false,
+  loanScenario,
+  onLoanScenarioChange,
+  assets,
+  onAssetsChange,
+  debts,
+  onDebtsChange,
+  mainAbout,
+  onMainAboutChange,
+  mainIncome,
+  onMainIncomeChange,
+  mainExpenses,
+  onMainExpensesChange,
+  coAbout,
+  onCoAboutChange,
+  coIncome,
+  onCoIncomeChange,
+  coExpenses,
+  onCoExpensesChange,
+}: OpportunitySummaryTabProps) {
+  // ── Sub-tab state ──────────────────────────────────────────────────────────
+  const [summarySubTab, setSummarySubTab] = useState<"joint" | "main" | "co">(
+    "joint",
+  );
+
+  // ── Modal open state (internal) ───────────────────────────────────────────
+  const [editLoanOpen, setEditLoanOpen] = useState(false);
+  const [editAssetsOpen, setEditAssetsOpen] = useState(false);
+  const [editDebtsOpen, setEditDebtsOpen] = useState(false);
+  const [editMainAboutOpen, setEditMainAboutOpen] = useState(false);
+  const [editCoAboutOpen, setEditCoAboutOpen] = useState(false);
+  const [editMainIncomeOpen, setEditMainIncomeOpen] = useState(false);
+  const [editCoIncomeOpen, setEditCoIncomeOpen] = useState(false);
+  const [editMainExpensesOpen, setEditMainExpensesOpen] = useState(false);
+  const [editCoExpensesOpen, setEditCoExpensesOpen] = useState(false);
+
+  // ── Derived totals ─────────────────────────────────────────────────────────
+  const totalAssetsAmount = assets.reduce((sum, a) => sum + a.value, 0);
+  const totalDebtsAmount = debts.reduce((sum, d) => sum + d.amountOwing, 0);
+  const totalAssets = formatCurrency(totalAssetsAmount);
+  const totalDebts = formatCurrency(totalDebtsAmount);
+
+  const allIncomeItems = [...mainIncome.items, ...(coIncome?.items ?? [])];
+  const allExpenseItems = [...mainExpenses.items, ...(coExpenses?.items ?? [])];
+  const combinedMonthlyIncome = allIncomeItems.reduce(
+    (sum, i) => sum + toMonthly(i.incomeAmount, i.frequency),
+    0,
+  );
+  const combinedMonthlyExpenses = allExpenseItems.reduce(
+    (sum, e) => sum + toMonthly(e.amount, e.frequency),
+    0,
+  );
+  const netSurplus = combinedMonthlyIncome - combinedMonthlyExpenses;
+
+  const mainName = [mainAbout.firstName, mainAbout.lastName]
+    .filter(Boolean)
+    .join(" ");
+  const coName = coAbout
+    ? [coAbout.firstName, coAbout.lastName].filter(Boolean).join(" ")
+    : "Co-Applicant";
+
+  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={
+                [
+                  loanScenario.featureVariableRate && "Variable Rate",
+                  loanScenario.featureFixedRate && "Fixed Rate",
+                  loanScenario.featureRedrawFacility && "Redraw Facility",
+                  loanScenario.feature100Offset && "100% Offset",
+                  loanScenario.featureSplitLoan && "Split Loan",
+                  loanScenario.featureInterestOnly && "Interest Only",
+                ]
+                  .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>
+
+      {/* ── Applicant sub-tabs ── */}
+      <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">
+            <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>
+                </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),
+                      ),
+                      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}
+                />
+              </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>
+        </TabsContent>
+
+        {/* ── Main Applicant tab ── */}
+        <TabsContent value="main">
+          <ApplicantAccordionTab
+            accordionPrefix="main"
+            about={mainAbout}
+            income={mainIncome}
+            expenses={mainExpenses}
+            onEditAbout={() => setEditMainAboutOpen(true)}
+            onEditIncome={() => setEditMainIncomeOpen(true)}
+            onEditExpenses={() => setEditMainExpensesOpen(true)}
+          />
+        </TabsContent>
+
+        {/* ── Co-Applicant tab (joint applications only) ── */}
+        {isJoint && coAbout && coIncome && coExpenses && (
+          <TabsContent value="co">
+            <ApplicantAccordionTab
+              accordionPrefix="co"
+              about={coAbout}
+              income={coIncome}
+              expenses={coExpenses}
+              onEditAbout={() => setEditCoAboutOpen(true)}
+              onEditIncome={() => setEditCoIncomeOpen(true)}
+              onEditExpenses={() => setEditCoExpensesOpen(true)}
+            />
+          </TabsContent>
+        )}
+      </Tabs>
+
+      {/* ── Edit modals (internal state) ── */}
+      <EditLoanScenarioModal
+        open={editLoanOpen}
+        onOpenChange={setEditLoanOpen}
+        initialData={loanScenario}
+        onSave={(data) => {
+          onLoanScenarioChange?.(data);
+          setEditLoanOpen(false);
+        }}
+      />
+      <EditAssetsModal
+        open={editAssetsOpen}
+        onOpenChange={setEditAssetsOpen}
+        initialItems={assets}
+        onSave={(items) => {
+          onAssetsChange?.(items);
+          setEditAssetsOpen(false);
+        }}
+      />
+      <EditDebtsModal
+        open={editDebtsOpen}
+        onOpenChange={setEditDebtsOpen}
+        initialItems={debts}
+        onSave={(items) => {
+          onDebtsChange?.(items);
+          setEditDebtsOpen(false);
+        }}
+      />
+      <EditAboutApplicantModal
+        open={editMainAboutOpen}
+        onOpenChange={setEditMainAboutOpen}
+        applicantLabel="Main Applicant"
+        initialData={mainAbout}
+        onSave={(data) => {
+          onMainAboutChange?.(data);
+          setEditMainAboutOpen(false);
+        }}
+      />
+      {coAbout && (
+        <EditAboutApplicantModal
+          open={editCoAboutOpen}
+          onOpenChange={setEditCoAboutOpen}
+          applicantLabel="Co-Applicant"
+          initialData={coAbout}
+          onSave={(data) => {
+            onCoAboutChange?.(data);
+            setEditCoAboutOpen(false);
+          }}
+        />
+      )}
+      <EditIncomeModal
+        open={editMainIncomeOpen}
+        onOpenChange={setEditMainIncomeOpen}
+        applicantLabel="Main Applicant"
+        initialData={mainIncome}
+        onSave={(data) => {
+          onMainIncomeChange?.(data);
+          setEditMainIncomeOpen(false);
+        }}
+      />
+      {coIncome && (
+        <EditIncomeModal
+          open={editCoIncomeOpen}
+          onOpenChange={setEditCoIncomeOpen}
+          applicantLabel="Co-Applicant"
+          initialData={coIncome}
+          onSave={(data) => {
+            onCoIncomeChange?.(data);
+            setEditCoIncomeOpen(false);
+          }}
+        />
+      )}
+      <EditExpensesModal
+        open={editMainExpensesOpen}
+        onOpenChange={setEditMainExpensesOpen}
+        applicantLabel="Main Applicant"
+        initialData={mainExpenses}
+        onSave={(data) => {
+          onMainExpensesChange?.(data);
+          setEditMainExpensesOpen(false);
+        }}
+      />
+      {coExpenses && (
+        <EditExpensesModal
+          open={editCoExpensesOpen}
+          onOpenChange={setEditCoExpensesOpen}
+          applicantLabel="Co-Applicant"
+          initialData={coExpenses}
+          onSave={(data) => {
+            onCoExpensesChange?.(data);
+            setEditCoExpensesOpen(false);
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/components/ui/pipeline-alerts.tsx

@@ -0,0 +1,74 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * PipelineAlerts — WealthX DS
+ *
+ * Compact card showing opportunity counts broken down by priority level
+ * (High / Medium / Low). Displayed alongside the PipelineChart in the
+ * Loan CRM page header section.
+ *
+ * Data source: derived from pipeline board columns by counting opportunity
+ * priorities across all stages.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PipelineAlertCounts {
+  high: number;
+  medium: number;
+  low: number;
+}
+
+export interface PipelineAlertsProps {
+  counts: PipelineAlertCounts;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PipelineAlerts
+// ---------------------------------------------------------------------------
+
+const PRIORITY_ROWS: Array<{
+  key: keyof PipelineAlertCounts;
+  label: string;
+  dotColor: string;
+}> = [
+  { key: "high", label: "High", dotColor: "var(--color-destructive)" },
+  { key: "medium", label: "Medium", dotColor: "var(--color-warning)" },
+  { key: "low", label: "Low", dotColor: "var(--color-primary)" },
+];
+
+export function PipelineAlerts({ counts, className }: PipelineAlertsProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 border border-border bg-background px-4 py-3",
+        className,
+      )}
+      data-slot="pipeline-alerts"
+    >
+      <span className="text-sm font-semibold text-foreground">
+        Pipeline Alerts
+      </span>
+      <div className="flex flex-col gap-1.5">
+        {PRIORITY_ROWS.map(({ key, label, dotColor }) => (
+          <div key={key} className="flex items-center gap-2">
+            <span
+              className="size-2 shrink-0 rounded-full"
+              style={{ backgroundColor: dotColor }}
+              aria-hidden="true"
+            />
+            <span className="flex-1 text-xs text-muted-foreground">
+              {label}
+            </span>
+            <span className="min-w-[1.5rem] text-right text-xs font-medium tabular-nums text-foreground">
+              {counts[key]}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}