@wealthx/shadcn 1.0.2 → 1.2.0

package/src/components/ui/opportunity-edit-modals.tsx

@@ -0,0 +1,2528 @@
+import * as React from "react";
+import { ChevronDownIcon, Plus, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DatePicker } from "@/components/ui/date-picker";
+import { Slider } from "@/components/ui/slider";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  AddressAutocomplete,
+  CurrencyInputWithSlider,
+  OwnershipSplit,
+} from "@/components/ui/form-primitives";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+/**
+ * Opportunity Edit Modals — WealthX DS (L4)
+ *
+ * Six focused edit dialogs for the Opportunity Details Drawer Summary tab:
+ * - EditLoanScenarioModal   — edit loan quiz fields
+ * - EditAssetsModal         — add/edit/remove asset line items
+ * - EditDebtsModal          — add/edit/remove debt line items
+ * - EditAboutApplicantModal — personal details (name, gender, phone, email…)
+ * - EditIncomeModal         — income fields per applicant
+ * - EditExpensesModal       — expense breakdown per applicant
+ *
+ * All modals are fully controlled. Each accepts initial data and fires
+ * `onSave` with the updated payload when confirmed.
+ */
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const LOAN_PURPOSES = [
+  "Purchase a home",
+  "Refinance my home loan",
+  "Buy an investment property",
+  "Refinance investment loan",
+  "Renovate/build",
+  "Equity release",
+];
+
+const ASSET_TYPES = [
+  "Primary Residence",
+  "Investment Property",
+  "Holiday Home",
+  "Commercial Property",
+  "Rural Property",
+  "Cash & Savings",
+  "Term Deposit",
+  "Shares / ETFs",
+  "Managed Funds",
+  "Superannuation",
+  "Motor Vehicle",
+  "Business Equity",
+  "Cryptocurrency",
+  "Personal Belongings",
+  "Life Insurance",
+  "Trust Assets",
+  "SMSF",
+  "Bonds / Fixed Income",
+  "Other",
+];
+
+const PROPERTY_ASSET_TYPES = new Set([
+  "Primary Residence",
+  "Investment Property",
+  "Holiday Home",
+  "Commercial Property",
+  "Rural Property",
+]);
+
+const PROPERTY_SUBTYPES = [
+  "House",
+  "Unit / Apartment",
+  "Townhouse",
+  "Land",
+  "Rural / Farm",
+  "Commercial",
+];
+
+const PROPERTY_USED_AS = ["Owner Occupied", "Investment", "Vacant Land"];
+
+const FINANCIAL_ACCOUNT_ASSET_TYPES = new Set([
+  "Cash & Savings",
+  "Term Deposit",
+]);
+
+const INVESTMENT_ASSET_TYPES = new Set([
+  "Shares / ETFs",
+  "Managed Funds",
+  "Bonds / Fixed Income",
+  "Cryptocurrency",
+]);
+
+const SUPER_ASSET_TYPES = new Set(["Superannuation", "SMSF"]);
+
+// Fields shown per asset type category
+function assetFields(type: string) {
+  return {
+    isProperty: PROPERTY_ASSET_TYPES.has(type),
+    isVehicle: type === "Motor Vehicle",
+    isFinancialAccount: FINANCIAL_ACCOUNT_ASSET_TYPES.has(type),
+    isInvestment: INVESTMENT_ASSET_TYPES.has(type),
+    isSuper: SUPER_ASSET_TYPES.has(type),
+    isBusiness: type === "Business Equity",
+    isInsurance: type === "Life Insurance",
+  };
+}
+
+const PROPERTY_LOAN_DEBT_TYPES = new Set([
+  "Home Loan (Owner Occupied)",
+  "Home Loan (Investment)",
+  "Construction Loan",
+]);
+
+const GENERAL_LOAN_DEBT_TYPES = new Set([
+  "Personal Loan",
+  "Business Loan",
+  "Overdraft",
+  "Line of Credit",
+  "Guarantor Liability",
+]);
+
+const CARD_DEBT_TYPES = new Set([
+  "Credit Card",
+  "Store Card",
+  "Buy Now Pay Later",
+]);
+
+const VEHICLE_DEBT_TYPES = new Set(["Car Loan", "Vehicle Lease"]);
+
+function debtFields(type: string) {
+  return {
+    isPropertyLoan: PROPERTY_LOAN_DEBT_TYPES.has(type),
+    isGeneralLoan: GENERAL_LOAN_DEBT_TYPES.has(type),
+    isCard: CARD_DEBT_TYPES.has(type),
+    isVehicle: VEHICLE_DEBT_TYPES.has(type),
+    isHecs: type === "HECS / Student Debt",
+    isTax: type === "Tax Debt",
+    isGuarantor: type === "Guarantor Liability",
+  };
+}
+
+const DEBT_TYPES = [
+  "Home Loan (Owner Occupied)",
+  "Home Loan (Investment)",
+  "Construction Loan",
+  "Personal Loan",
+  "Car Loan",
+  "Credit Card",
+  "Store Card",
+  "HECS / Student Debt",
+  "Business Loan",
+  "Overdraft",
+  "Tax Debt",
+  "Buy Now Pay Later",
+  "Vehicle Lease",
+  "Guarantor Liability",
+  "Line of Credit",
+  "Other",
+];
+
+const TITLE_OPTIONS = ["Mr", "Mrs", "Ms", "Dr", "Prof"];
+
+const GENDER_OPTIONS = ["Male", "Female", "Non-binary", "Prefer not to say"];
+
+const MARITAL_OPTIONS = [
+  "Single",
+  "Married",
+  "De facto",
+  "Divorced",
+  "Widowed",
+];
+
+const CITIZEN_OPTIONS = [
+  "Australian Citizen",
+  "Permanent Resident",
+  "Temporary Resident",
+  "Foreign National",
+];
+
+const RESIDENTIAL_STATUS_OPTIONS = [
+  "Own",
+  "Renting",
+  "Boarding",
+  "With Parents",
+  "Other",
+];
+
+const PROPERTY_IN_TRUST_OPTIONS = ["None", "Yes - Discretionary", "Yes - Unit"];
+
+const COMPANY_OWNERSHIP_OPTIONS = [
+  "None",
+  "Yes - Director",
+  "Yes - Shareholder",
+];
+
+const INCOME_TYPES = [
+  "PAYG",
+  "Self-employed",
+  "Contractor",
+  "Casual",
+  "Commission",
+  "Government Benefits",
+  "Rental",
+  "Other",
+];
+
+const EXPENSE_TYPES = [
+  "Groceries",
+  "Dining Out",
+  "Transport",
+  "Fuel",
+  "Utilities",
+  "Phone Plan",
+  "Internet",
+  "Medical",
+  "Entertainment",
+  "Clothing",
+  "Gym & Fitness",
+  "Subscriptions",
+  "Childcare",
+  "Education",
+  "Pet Care",
+  "Insurance",
+  "Council Rates",
+  "Body Corp / Strata",
+  "Home Maintenance",
+  "Travel & Holidays",
+  "Donations",
+  "Other",
+];
+
+const PRIORITIES = [
+  "Maximize Borrow Amount",
+  "Cheapest Interest Rate",
+  "The Best Features",
+  "Major Lender",
+  "Small Lender",
+  "Regional Lender",
+  "Non-Bank Lender",
+  "Branch Network",
+  "Good Customer Service",
+  "Environmentally Friendly Lender",
+];
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+// --- Loan Scenario ---
+export interface LoanScenarioFormData {
+  loanPurpose: string;
+  propertyEstimate: number;
+  cashEquity: number;
+  loanAmount: number;
+  loanDuration: number;
+  knowsFeatures: string;
+  featureFixedRate: boolean;
+  featureVariableRate: boolean;
+  featureSplitLoan: boolean;
+  featureInterestOnly: boolean;
+  featureRedrawFacility: boolean;
+  feature100Offset: boolean;
+  priorities: string[];
+  borrowOtherThanProperty: string;
+  concernedAboutRates: string;
+  considerFixedRate: string;
+  retirementAge: string;
+  anticipatedChanges: string;
+}
+
+// --- Assets ---
+export interface AssetLineItem {
+  id: string;
+  assetType: string;
+  value: number;
+  mainShare: number;
+  coShare: number;
+
+  // Property
+  address?: string;
+  propertySubtype?: string;
+  usedAs?: string;
+
+  // Vehicle
+  make?: string;
+  model?: string;
+  year?: string;
+
+  // Financial accounts (Cash, Term Deposit) + Investments + Crypto
+  institution?: string;
+
+  // Superannuation / SMSF
+  fundName?: string;
+  memberNumber?: string;
+
+  // Business Equity
+  businessName?: string;
+  abn?: string;
+
+  // Life Insurance
+  insurer?: string;
+  policyNumber?: string;
+}
+
+// --- Debts ---
+export interface DebtLineItem {
+  id: string;
+  debtType: string;
+  amountOwing: number;
+  originalLoanAmount: number;
+  repaymentAmount: number;
+  repaymentFrequency: "Monthly" | "Weekly";
+  interestRate: string;
+  details: string;
+  mainShare: number;
+  coShare: number;
+
+  // Property loans
+  lender?: string;
+  accountNumber?: string;
+  propertyAddress?: string;
+
+  // Vehicle loans/leases
+  vehicleMake?: string;
+  vehicleModel?: string;
+  vehicleYear?: string;
+
+  // Cards / BNPL
+  creditLimit?: number;
+
+  // HECS
+  institution?: string;
+
+  // Tax debt
+  taxYear?: string;
+  referenceNumber?: string;
+
+  // Guarantor liability
+  beneficiary?: string;
+}
+
+// --- About ---
+export interface DependantInfo {
+  dob: string;
+}
+
+export interface AboutApplicantFormData {
+  // Name
+  title: string;
+  firstName: string;
+  lastName: string;
+
+  // Contact
+  phone: string;
+  email: string;
+
+  // Personal
+  dob: string;
+  gender: string;
+  maritalStatus: string;
+  numDependants: string;
+  dependants: DependantInfo[];
+
+  // Residency & ID
+  citizenStatus: string;
+  residentialAddress: string;
+  residentialStatus: string;
+  timeAtAddressYears: string;
+  timeAtAddressMonths: string;
+  previousAddress: string;
+  driversLicence: string;
+  passport: string;
+
+  // Financial structure
+  propertyInTrust: string;
+  companyOwnership: string;
+}
+
+// --- Income (array-based) ---
+export interface IncomeItem {
+  id: string;
+  incomeType: string;
+  jobTitle: string;
+  startDate: string;
+  stillInPosition: boolean;
+  endDate: string;
+  companyName: string;
+  companyAddress: string;
+  incomeAmount: number;
+  frequency: "Monthly" | "Weekly";
+  companyType: "Public" | "Private" | "";
+}
+
+export interface IncomeFormData {
+  items: IncomeItem[];
+}
+
+// --- Expenses (array-based) ---
+export interface ExpenseItem {
+  id: string;
+  expenseType: string;
+  amount: number;
+  frequency: "Monthly" | "Weekly";
+  mainShare: number;
+  coShare: number;
+}
+
+export interface ExpensesFormData {
+  items: ExpenseItem[];
+}
+
+// ---------------------------------------------------------------------------
+// Prop interfaces
+// ---------------------------------------------------------------------------
+
+export interface EditLoanScenarioModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialData?: Partial<LoanScenarioFormData>;
+  onSave: (data: LoanScenarioFormData) => void;
+  mainApplicantName?: string;
+  coApplicantName?: string;
+  className?: string;
+}
+
+export interface EditAssetsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialItems?: AssetLineItem[];
+  onSave: (items: AssetLineItem[]) => void;
+  mainApplicantName?: string;
+  coApplicantName?: string;
+  className?: string;
+}
+
+export interface EditDebtsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialItems?: DebtLineItem[];
+  onSave: (items: DebtLineItem[]) => void;
+  mainApplicantName?: string;
+  coApplicantName?: string;
+  className?: string;
+}
+
+export interface EditAboutApplicantModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  applicantLabel?: string;
+  initialData?: Partial<AboutApplicantFormData>;
+  onSave: (data: AboutApplicantFormData) => void;
+  className?: string;
+}
+
+export interface EditIncomeModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  applicantLabel?: string;
+  initialData?: IncomeFormData;
+  onSave: (data: IncomeFormData) => void;
+  className?: string;
+}
+
+export interface EditExpensesModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  applicantLabel?: string;
+  initialData?: ExpensesFormData;
+  onSave: (data: ExpensesFormData) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Shared internal helpers
+// ---------------------------------------------------------------------------
+
+function FormField({
+  label,
+  children,
+  className,
+}: {
+  label: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <Label className="text-sm font-medium text-muted-foreground">
+        {label}
+      </Label>
+      {children}
+    </div>
+  );
+}
+
+function ModalScroll({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-h-[65vh] overflow-y-auto flex flex-col gap-4 py-1 pr-1">
+      {children}
+    </div>
+  );
+}
+
+function FrequencyToggle({
+  value,
+  onValueChange,
+}: {
+  value: "Monthly" | "Weekly";
+  onValueChange: (val: "Monthly" | "Weekly") => void;
+}) {
+  return (
+    <ToggleGroup
+      variant="outline"
+      value={value}
+      onValueChange={(val) => {
+        if (val === "Monthly" || val === "Weekly") {
+          onValueChange(val);
+        }
+      }}
+    >
+      <ToggleGroupItem value="Monthly" size="sm">
+        Monthly
+      </ToggleGroupItem>
+      <ToggleGroupItem value="Weekly" size="sm">
+        Weekly
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
+
+function AccordionItemHeader({
+  label,
+  onRemove,
+  removeLabel = "Remove item",
+}: {
+  label: string;
+  onRemove: () => void;
+  removeLabel?: string;
+}) {
+  return (
+    <AccordionPrimitive.Header className="flex items-center">
+      <AccordionPrimitive.Trigger
+        className={cn(
+          "flex flex-1 items-center justify-between gap-4 py-4 text-left",
+          "text-label-medium rounded-none outline-none transition-[color,opacity]",
+          "hover:underline focus-visible:ring-2 focus-visible:ring-foreground/30",
+          "[&[data-panel-open]>svg]:rotate-180",
+        )}
+      >
+        {label}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="p-2 hover:bg-foreground/5 transition-colors"
+        aria-label={removeLabel}
+      >
+        <Trash2 className="h-3.5 w-3.5 text-destructive" />
+      </button>
+    </AccordionPrimitive.Header>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const LOAN_SCENARIO_DEFAULTS: LoanScenarioFormData = {
+  loanPurpose: "",
+  propertyEstimate: 0,
+  cashEquity: 0,
+  loanAmount: 0,
+  loanDuration: 30,
+  knowsFeatures: "",
+  featureFixedRate: false,
+  featureVariableRate: false,
+  featureSplitLoan: false,
+  featureInterestOnly: false,
+  featureRedrawFacility: false,
+  feature100Offset: false,
+  priorities: [],
+  borrowOtherThanProperty: "",
+  concernedAboutRates: "",
+  considerFixedRate: "",
+  retirementAge: "",
+  anticipatedChanges: "",
+};
+
+const ABOUT_APPLICANT_DEFAULTS: AboutApplicantFormData = {
+  title: "",
+  firstName: "",
+  lastName: "",
+  phone: "",
+  email: "",
+  dob: "",
+  gender: "",
+  maritalStatus: "",
+  numDependants: "",
+  dependants: [],
+  citizenStatus: "",
+  residentialAddress: "",
+  residentialStatus: "",
+  timeAtAddressYears: "",
+  timeAtAddressMonths: "",
+  previousAddress: "",
+  driversLicence: "",
+  passport: "",
+  propertyInTrust: "",
+  companyOwnership: "",
+};
+
+function makeDefaultIncomeItem(): IncomeItem {
+  return {
+    id: `income-${Date.now()}-${Math.random()}`,
+    incomeType: "",
+    jobTitle: "",
+    startDate: "",
+    stillInPosition: true,
+    endDate: "",
+    companyName: "",
+    companyAddress: "",
+    incomeAmount: 0,
+    frequency: "Monthly",
+    companyType: "",
+  };
+}
+
+function makeDefaultAssetItem(): AssetLineItem {
+  return {
+    id: `asset-${Date.now()}-${Math.random()}`,
+    assetType: "",
+    value: 0,
+    mainShare: 100,
+    coShare: 0,
+  };
+}
+
+function makeDefaultDebtItem(): DebtLineItem {
+  return {
+    id: `debt-${Date.now()}-${Math.random()}`,
+    debtType: "",
+    amountOwing: 0,
+    originalLoanAmount: 0,
+    repaymentAmount: 0,
+    repaymentFrequency: "Monthly",
+    interestRate: "",
+    details: "",
+    mainShare: 100,
+    coShare: 0,
+  };
+}
+
+function makeDefaultExpenseItem(): ExpenseItem {
+  return {
+    id: `expense-${Date.now()}-${Math.random()}`,
+    expenseType: "",
+    amount: 0,
+    frequency: "Monthly",
+    mainShare: 100,
+    coShare: 0,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// EditLoanScenarioModal
+// ---------------------------------------------------------------------------
+
+export function EditLoanScenarioModal({
+  open,
+  onOpenChange,
+  initialData,
+  onSave,
+  className,
+}: EditLoanScenarioModalProps) {
+  const [form, setForm] = React.useState<LoanScenarioFormData>({
+    ...LOAN_SCENARIO_DEFAULTS,
+    ...initialData,
+  });
+
+  React.useEffect(() => {
+    if (open) {
+      setForm({ ...LOAN_SCENARIO_DEFAULTS, ...initialData });
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const set = <K extends keyof LoanScenarioFormData>(
+    key: K,
+    val: LoanScenarioFormData[K],
+  ) => setForm((prev) => ({ ...prev, [key]: val }));
+
+  const togglePriority = (priority: string) => {
+    setForm((prev) => {
+      const exists = prev.priorities.includes(priority);
+      if (exists) {
+        return {
+          ...prev,
+          priorities: prev.priorities.filter((p) => p !== priority),
+        };
+      }
+      if (prev.priorities.length >= 3) return prev;
+      return { ...prev, priorities: [...prev.priorities, priority] };
+    });
+  };
+
+  const prioritiesAtMax = form.priorities.length >= 3;
+
+  const LOAN_FEATURES: { key: keyof LoanScenarioFormData; label: string }[] = [
+    { key: "featureFixedRate", label: "Fixed Rate" },
+    { key: "featureVariableRate", label: "Variable Rate" },
+    { key: "featureSplitLoan", label: "Split Loan" },
+    { key: "featureInterestOnly", label: "Interest Only" },
+    { key: "featureRedrawFacility", label: "Redraw Facility" },
+    { key: "feature100Offset", label: "100% Offset" },
+  ];
+
+  const YES_NO_FIELDS: { key: keyof LoanScenarioFormData; label: string }[] = [
+    {
+      key: "borrowOtherThanProperty",
+      label: "Do you intend to borrow money other than your property?",
+    },
+    {
+      key: "concernedAboutRates",
+      label: "Are you concerned about rising interest rates?",
+    },
+    {
+      key: "considerFixedRate",
+      label: "Would you consider taking a fixed rate?",
+    },
+    {
+      key: "anticipatedChanges",
+      label: "Anticipated changes impacting repayment?",
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-lg", className)}>
+        <DialogHeader>
+          <DialogTitle>Edit Loan Scenario</DialogTitle>
+        </DialogHeader>
+        <ModalScroll>
+          {/* 1. Loan purpose */}
+          <FormField label="What would you like to do?">
+            <Select
+              value={form.loanPurpose}
+              onValueChange={(val) => set("loanPurpose", val)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select purpose" />
+              </SelectTrigger>
+              <SelectContent>
+                {LOAN_PURPOSES.map((p) => (
+                  <SelectItem key={p} value={p}>
+                    {p}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormField>
+
+          {/* 2. Two-column: property estimate | cash equity */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Property Estimate">
+              <CurrencyInputWithSlider
+                value={form.propertyEstimate}
+                min={0}
+                max={10_000_000}
+                step={50_000}
+                onValueChange={(val) => set("propertyEstimate", val)}
+              />
+            </FormField>
+            <FormField label="Cash/equity towards property">
+              <CurrencyInputWithSlider
+                value={form.cashEquity}
+                min={0}
+                max={2_000_000}
+                step={5_000}
+                onValueChange={(val) => set("cashEquity", val)}
+              />
+            </FormField>
+          </div>
+
+          {/* 3. Two-column: loan amount | loan duration */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Loan Amount">
+              <CurrencyInputWithSlider
+                value={form.loanAmount}
+                min={0}
+                max={5_000_000}
+                step={10_000}
+                onValueChange={(val) => set("loanAmount", val)}
+              />
+            </FormField>
+            <FormField label="Loan Duration">
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <Input
+                    type="number"
+                    min={1}
+                    max={40}
+                    value={form.loanDuration}
+                    onChange={(e) => {
+                      const parsed = parseInt(e.target.value, 10);
+                      if (!isNaN(parsed)) {
+                        set("loanDuration", Math.min(40, Math.max(1, parsed)));
+                      }
+                    }}
+                    className="flex-1"
+                  />
+                  <span className="text-sm text-muted-foreground">years</span>
+                </div>
+                <Slider
+                  min={1}
+                  max={40}
+                  step={1}
+                  value={form.loanDuration}
+                  onValueChange={(val) => set("loanDuration", val)}
+                />
+              </div>
+            </FormField>
+          </div>
+
+          {/* 4. Do you know what loan features you want? */}
+          <FormField label="Do you know what loan features you want?">
+            <Select
+              value={form.knowsFeatures}
+              onValueChange={(val) => set("knowsFeatures", val)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="Yes">Yes</SelectItem>
+                <SelectItem value="No">No</SelectItem>
+              </SelectContent>
+            </Select>
+          </FormField>
+
+          {/* 5. Features grid — only when knowsFeatures == "Yes" */}
+          {form.knowsFeatures === "Yes" && (
+            <div className="flex flex-col gap-2">
+              <Label className="text-sm font-medium text-muted-foreground">
+                What features are important to you?
+              </Label>
+              <div className="grid grid-cols-2 gap-2">
+                {LOAN_FEATURES.map(({ key, label }) => (
+                  <div key={key} className="flex items-center gap-2">
+                    <Checkbox
+                      id={`feature-${key}`}
+                      checked={form[key] as boolean}
+                      onCheckedChange={(checked) => set(key, checked === true)}
+                    />
+                    <label
+                      htmlFor={`feature-${key}`}
+                      className="text-sm cursor-pointer select-none"
+                    >
+                      {label}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 6. Top 3 priorities */}
+          <div className="flex flex-col gap-2">
+            <Label className="text-sm font-medium text-muted-foreground">
+              Top 3 Priorities (Select up to 3)
+            </Label>
+            <div className="grid grid-cols-2 gap-2">
+              {PRIORITIES.map((priority) => {
+                const checked = form.priorities.includes(priority);
+                const disabled = prioritiesAtMax && !checked;
+                return (
+                  <div key={priority} className="flex items-center gap-2">
+                    <Checkbox
+                      id={`priority-${priority}`}
+                      checked={checked}
+                      disabled={disabled}
+                      onCheckedChange={() => togglePriority(priority)}
+                    />
+                    <label
+                      htmlFor={`priority-${priority}`}
+                      className={cn(
+                        "text-sm cursor-pointer select-none",
+                        disabled && "opacity-40 cursor-not-allowed",
+                      )}
+                    >
+                      {priority}
+                    </label>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 7. Yes/No radio sections */}
+          {YES_NO_FIELDS.map(({ key, label }) => (
+            <div key={key} className="flex flex-col gap-2">
+              <Label className="text-sm font-medium text-muted-foreground">
+                {label}
+              </Label>
+              <RadioGroup
+                value={form[key] as string}
+                onValueChange={(val) => {
+                  if (val === "Yes" || val === "No") set(key, val);
+                }}
+                className="flex gap-4"
+              >
+                {(["Yes", "No"] as const).map((opt) => (
+                  <label
+                    key={opt}
+                    className="flex items-center gap-2 cursor-pointer select-none"
+                  >
+                    <RadioGroupItem value={opt} />
+                    <span className="text-sm">{opt}</span>
+                  </label>
+                ))}
+              </RadioGroup>
+            </div>
+          ))}
+
+          {/* 8. Retirement age */}
+          <FormField label="What age are you planning to retire?">
+            <Input
+              type="number"
+              min={0}
+              max={100}
+              value={form.retirementAge}
+              onChange={(e) => set("retirementAge", e.target.value)}
+              placeholder="e.g. 65"
+            />
+          </FormField>
+        </ModalScroll>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave(form);
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditAssetsModal
+// ---------------------------------------------------------------------------
+
+export function EditAssetsModal({
+  open,
+  onOpenChange,
+  initialItems = [],
+  onSave,
+  mainApplicantName = "Main Applicant",
+  coApplicantName = "Co-Applicant",
+  className,
+}: EditAssetsModalProps) {
+  const [items, setItems] = React.useState<AssetLineItem[]>(
+    initialItems.length > 0 ? initialItems : [makeDefaultAssetItem()],
+  );
+
+  React.useEffect(() => {
+    if (open) {
+      setItems(
+        initialItems.length > 0 ? initialItems : [makeDefaultAssetItem()],
+      );
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const updateItem = <K extends keyof AssetLineItem>(
+    id: string,
+    key: K,
+    val: AssetLineItem[K],
+  ) =>
+    setItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, [key]: val } : item)),
+    );
+
+  const removeItem = (id: string) =>
+    setItems((prev) => prev.filter((item) => item.id !== id));
+
+  const addItem = () => setItems((prev) => [...prev, makeDefaultAssetItem()]);
+
+  const defaultOpenItems = items.length > 0 ? [items[0].id] : [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-lg", className)}>
+        <DialogHeader>
+          <DialogTitle>Edit Assets</DialogTitle>
+        </DialogHeader>
+        <ModalScroll>
+          <Accordion
+            multiple
+            defaultValue={defaultOpenItems}
+            className="w-full"
+          >
+            {items.map((item, index) => (
+              <AccordionItem key={item.id} value={item.id}>
+                {/* Custom header: trigger + delete button as siblings */}
+                <AccordionItemHeader
+                  label={`Asset ${index + 1} — ${item.assetType || "New Asset"}`}
+                  onRemove={() => removeItem(item.id)}
+                  removeLabel="Remove asset"
+                />
+                <AccordionContent>
+                  <div className="flex flex-col gap-4 pt-1">
+                    <FormField label="Asset Type">
+                      <Select
+                        value={item.assetType}
+                        onValueChange={(val) =>
+                          updateItem(item.id, "assetType", val)
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {ASSET_TYPES.map((t) => (
+                            <SelectItem key={t} value={t}>
+                              {t}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormField>
+
+                    <FormField label="Value">
+                      <CurrencyInputWithSlider
+                        value={item.value}
+                        min={0}
+                        max={10_000_000}
+                        step={10_000}
+                        onValueChange={(val) =>
+                          updateItem(item.id, "value", val)
+                        }
+                      />
+                    </FormField>
+
+                    {/* Conditional fields based on asset type */}
+                    {(() => {
+                      const f = assetFields(item.assetType);
+                      return (
+                        <>
+                          {f.isProperty && (
+                            <>
+                              <FormField label="Property Address">
+                                <AddressAutocomplete
+                                  value={item.address ?? ""}
+                                  onValueChange={(val) =>
+                                    updateItem(item.id, "address", val)
+                                  }
+                                  onSelect={(opt) =>
+                                    updateItem(item.id, "address", opt.label)
+                                  }
+                                />
+                              </FormField>
+                              <div className="grid grid-cols-2 gap-4">
+                                <FormField label="Property Type">
+                                  <Select
+                                    value={item.propertySubtype ?? ""}
+                                    onValueChange={(val) =>
+                                      updateItem(
+                                        item.id,
+                                        "propertySubtype",
+                                        val,
+                                      )
+                                    }
+                                  >
+                                    <SelectTrigger className="w-full">
+                                      <SelectValue placeholder="Select" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {PROPERTY_SUBTYPES.map((t) => (
+                                        <SelectItem key={t} value={t}>
+                                          {t}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </FormField>
+                                <FormField label="Used As">
+                                  <Select
+                                    value={item.usedAs ?? ""}
+                                    onValueChange={(val) =>
+                                      updateItem(item.id, "usedAs", val)
+                                    }
+                                  >
+                                    <SelectTrigger className="w-full">
+                                      <SelectValue placeholder="Select" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {PROPERTY_USED_AS.map((t) => (
+                                        <SelectItem key={t} value={t}>
+                                          {t}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </FormField>
+                              </div>
+                            </>
+                          )}
+
+                          {f.isVehicle && (
+                            <div className="grid grid-cols-3 gap-4">
+                              <FormField label="Make">
+                                <Input
+                                  value={item.make ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(item.id, "make", e.target.value)
+                                  }
+                                  placeholder="e.g. Toyota"
+                                />
+                              </FormField>
+                              <FormField label="Model">
+                                <Input
+                                  value={item.model ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(item.id, "model", e.target.value)
+                                  }
+                                  placeholder="e.g. Camry"
+                                />
+                              </FormField>
+                              <FormField label="Year">
+                                <Input
+                                  type="number"
+                                  min={1900}
+                                  max={new Date().getFullYear() + 1}
+                                  value={item.year ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(item.id, "year", e.target.value)
+                                  }
+                                  placeholder="e.g. 2022"
+                                />
+                              </FormField>
+                            </div>
+                          )}
+
+                          {(f.isFinancialAccount || f.isInvestment) && (
+                            <FormField label="Institution / Platform">
+                              <Input
+                                value={item.institution ?? ""}
+                                onChange={(e) =>
+                                  updateItem(
+                                    item.id,
+                                    "institution",
+                                    e.target.value,
+                                  )
+                                }
+                                placeholder="e.g. CommBank, Vanguard"
+                              />
+                            </FormField>
+                          )}
+
+                          {f.isSuper && (
+                            <div className="grid grid-cols-2 gap-4">
+                              <FormField label="Fund Name">
+                                <Input
+                                  value={item.fundName ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(
+                                      item.id,
+                                      "fundName",
+                                      e.target.value,
+                                    )
+                                  }
+                                  placeholder="e.g. Australian Super"
+                                />
+                              </FormField>
+                              <FormField label="Member Number">
+                                <Input
+                                  value={item.memberNumber ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(
+                                      item.id,
+                                      "memberNumber",
+                                      e.target.value,
+                                    )
+                                  }
+                                  placeholder="e.g. 1234567"
+                                />
+                              </FormField>
+                            </div>
+                          )}
+
+                          {f.isBusiness && (
+                            <div className="grid grid-cols-2 gap-4">
+                              <FormField label="Business Name">
+                                <Input
+                                  value={item.businessName ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(
+                                      item.id,
+                                      "businessName",
+                                      e.target.value,
+                                    )
+                                  }
+                                  placeholder="e.g. Acme Pty Ltd"
+                                />
+                              </FormField>
+                              <FormField label="ABN">
+                                <Input
+                                  value={item.abn ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(item.id, "abn", e.target.value)
+                                  }
+                                  placeholder="e.g. 12 345 678 901"
+                                />
+                              </FormField>
+                            </div>
+                          )}
+
+                          {f.isInsurance && (
+                            <div className="grid grid-cols-2 gap-4">
+                              <FormField label="Insurer">
+                                <Input
+                                  value={item.insurer ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(
+                                      item.id,
+                                      "insurer",
+                                      e.target.value,
+                                    )
+                                  }
+                                  placeholder="e.g. TAL, AIA"
+                                />
+                              </FormField>
+                              <FormField label="Policy Number">
+                                <Input
+                                  value={item.policyNumber ?? ""}
+                                  onChange={(e) =>
+                                    updateItem(
+                                      item.id,
+                                      "policyNumber",
+                                      e.target.value,
+                                    )
+                                  }
+                                  placeholder="e.g. POL-123456"
+                                />
+                              </FormField>
+                            </div>
+                          )}
+                        </>
+                      );
+                    })()}
+
+                    <FormField label="Ownership (%)">
+                      <OwnershipSplit
+                        owners={[
+                          {
+                            id: "main",
+                            name: mainApplicantName ?? "Main Applicant",
+                            share: item.mainShare,
+                          },
+                          {
+                            id: "co",
+                            name: coApplicantName ?? "Co-Applicant",
+                            share: item.coShare,
+                          },
+                        ]}
+                        onOwnersChange={(owners) => {
+                          updateItem(
+                            item.id,
+                            "mainShare",
+                            owners.find((o) => o.id === "main")?.share ?? 50,
+                          );
+                          updateItem(
+                            item.id,
+                            "coShare",
+                            owners.find((o) => o.id === "co")?.share ?? 50,
+                          );
+                        }}
+                      />
+                    </FormField>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+
+          <Button
+            variant="outline"
+            onClick={addItem}
+            className="w-full gap-1.5"
+          >
+            <Plus className="h-4 w-4" />
+            Add More
+          </Button>
+        </ModalScroll>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave(items);
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditDebtsModal
+// ---------------------------------------------------------------------------
+
+export function EditDebtsModal({
+  open,
+  onOpenChange,
+  initialItems = [],
+  onSave,
+  mainApplicantName = "Main Applicant",
+  coApplicantName = "Co-Applicant",
+  className,
+}: EditDebtsModalProps) {
+  const [items, setItems] = React.useState<DebtLineItem[]>(
+    initialItems.length > 0 ? initialItems : [makeDefaultDebtItem()],
+  );
+
+  React.useEffect(() => {
+    if (open) {
+      setItems(
+        initialItems.length > 0 ? initialItems : [makeDefaultDebtItem()],
+      );
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const updateItem = <K extends keyof DebtLineItem>(
+    id: string,
+    key: K,
+    val: DebtLineItem[K],
+  ) =>
+    setItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, [key]: val } : item)),
+    );
+
+  const removeItem = (id: string) =>
+    setItems((prev) => prev.filter((item) => item.id !== id));
+
+  const addItem = () => setItems((prev) => [...prev, makeDefaultDebtItem()]);
+
+  const defaultOpenItems = items.length > 0 ? [items[0].id] : [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-xl", className)}>
+        <DialogHeader>
+          <DialogTitle>Edit Debts</DialogTitle>
+        </DialogHeader>
+        <ModalScroll>
+          <Accordion
+            multiple
+            defaultValue={defaultOpenItems}
+            className="w-full"
+          >
+            {items.map((item) => {
+              const df = debtFields(item.debtType);
+              return (
+                <AccordionItem key={item.id} value={item.id}>
+                  <AccordionItemHeader
+                    label={item.debtType || "New Debt"}
+                    onRemove={() => removeItem(item.id)}
+                    removeLabel="Remove debt"
+                  />
+                  <AccordionContent>
+                    <div className="flex flex-col gap-4 pt-1">
+                      <FormField label="Debt Type">
+                        <Select
+                          value={item.debtType}
+                          onValueChange={(val) =>
+                            updateItem(item.id, "debtType", val)
+                          }
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select type" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {DEBT_TYPES.map((t) => (
+                              <SelectItem key={t} value={t}>
+                                {t}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormField>
+
+                      {/* Conditional fields by debt type */}
+                      {(df.isPropertyLoan ||
+                        df.isGeneralLoan ||
+                        df.isVehicle) && (
+                        <div className="grid grid-cols-2 gap-4">
+                          <FormField label="Lender">
+                            <Input
+                              value={item.lender ?? ""}
+                              onChange={(e) =>
+                                updateItem(item.id, "lender", e.target.value)
+                              }
+                              placeholder="e.g. CommBank"
+                            />
+                          </FormField>
+                          <FormField label="Account Number">
+                            <Input
+                              value={item.accountNumber ?? ""}
+                              onChange={(e) =>
+                                updateItem(
+                                  item.id,
+                                  "accountNumber",
+                                  e.target.value,
+                                )
+                              }
+                              placeholder="e.g. 123-456"
+                            />
+                          </FormField>
+                        </div>
+                      )}
+
+                      {df.isPropertyLoan && (
+                        <FormField label="Property Address">
+                          <AddressAutocomplete
+                            value={item.propertyAddress ?? ""}
+                            onValueChange={(val) =>
+                              updateItem(item.id, "propertyAddress", val)
+                            }
+                            onSelect={(opt) =>
+                              updateItem(item.id, "propertyAddress", opt.label)
+                            }
+                          />
+                        </FormField>
+                      )}
+
+                      {df.isVehicle && (
+                        <div className="grid grid-cols-3 gap-4">
+                          <FormField label="Make">
+                            <Input
+                              value={item.vehicleMake ?? ""}
+                              onChange={(e) =>
+                                updateItem(
+                                  item.id,
+                                  "vehicleMake",
+                                  e.target.value,
+                                )
+                              }
+                              placeholder="e.g. Toyota"
+                            />
+                          </FormField>
+                          <FormField label="Model">
+                            <Input
+                              value={item.vehicleModel ?? ""}
+                              onChange={(e) =>
+                                updateItem(
+                                  item.id,
+                                  "vehicleModel",
+                                  e.target.value,
+                                )
+                              }
+                              placeholder="e.g. Camry"
+                            />
+                          </FormField>
+                          <FormField label="Year">
+                            <Input
+                              type="number"
+                              min={1900}
+                              max={new Date().getFullYear() + 1}
+                              value={item.vehicleYear ?? ""}
+                              onChange={(e) =>
+                                updateItem(
+                                  item.id,
+                                  "vehicleYear",
+                                  e.target.value,
+                                )
+                              }
+                              placeholder="e.g. 2022"
+                            />
+                          </FormField>
+                        </div>
+                      )}
+
+                      {df.isCard && (
+                        <div className="grid grid-cols-2 gap-4">
+                          <FormField label="Provider">
+                            <Input
+                              value={item.lender ?? ""}
+                              onChange={(e) =>
+                                updateItem(item.id, "lender", e.target.value)
+                              }
+                              placeholder="e.g. ANZ, Afterpay"
+                            />
+                          </FormField>
+                          <FormField label="Credit Limit">
+                            <CurrencyInputWithSlider
+                              value={item.creditLimit ?? 0}
+                              min={0}
+                              max={100_000}
+                              step={500}
+                              onValueChange={(val) =>
+                                updateItem(item.id, "creditLimit", val)
+                              }
+                            />
+                          </FormField>
+                        </div>
+                      )}
+
+                      {df.isHecs && (
+                        <FormField label="Institution">
+                          <Input
+                            value={item.institution ?? ""}
+                            onChange={(e) =>
+                              updateItem(item.id, "institution", e.target.value)
+                            }
+                            placeholder="e.g. University of Sydney"
+                          />
+                        </FormField>
+                      )}
+
+                      {df.isTax && (
+                        <div className="grid grid-cols-2 gap-4">
+                          <FormField label="Tax Year">
+                            <Input
+                              value={item.taxYear ?? ""}
+                              onChange={(e) =>
+                                updateItem(item.id, "taxYear", e.target.value)
+                              }
+                              placeholder="e.g. 2023–24"
+                            />
+                          </FormField>
+                          <FormField label="ATO Reference">
+                            <Input
+                              value={item.referenceNumber ?? ""}
+                              onChange={(e) =>
+                                updateItem(
+                                  item.id,
+                                  "referenceNumber",
+                                  e.target.value,
+                                )
+                              }
+                              placeholder="e.g. 1234567890"
+                            />
+                          </FormField>
+                        </div>
+                      )}
+
+                      {df.isGuarantor && (
+                        <FormField label="Beneficiary (borrower's name)">
+                          <Input
+                            value={item.beneficiary ?? ""}
+                            onChange={(e) =>
+                              updateItem(item.id, "beneficiary", e.target.value)
+                            }
+                            placeholder="e.g. Jane Smith"
+                          />
+                        </FormField>
+                      )}
+
+                      <div className="grid grid-cols-2 gap-4">
+                        <FormField label="Amount Owing">
+                          <CurrencyInputWithSlider
+                            value={item.amountOwing}
+                            min={0}
+                            max={1_000_000}
+                            step={1_000}
+                            onValueChange={(val) =>
+                              updateItem(item.id, "amountOwing", val)
+                            }
+                          />
+                        </FormField>
+                        <FormField label="Original Loan Amount">
+                          <CurrencyInputWithSlider
+                            value={item.originalLoanAmount}
+                            min={0}
+                            max={1_000_000}
+                            step={1_000}
+                            onValueChange={(val) =>
+                              updateItem(item.id, "originalLoanAmount", val)
+                            }
+                          />
+                        </FormField>
+                      </div>
+
+                      <div className="flex items-start gap-3">
+                        <div className="flex-1">
+                          <FormField label="Repayments">
+                            <CurrencyInputWithSlider
+                              value={item.repaymentAmount}
+                              min={0}
+                              max={1_000_000}
+                              step={100}
+                              onValueChange={(val) =>
+                                updateItem(item.id, "repaymentAmount", val)
+                              }
+                            />
+                          </FormField>
+                        </div>
+                        <div className="shrink-0 mt-[1.625rem]">
+                          <FrequencyToggle
+                            value={item.repaymentFrequency}
+                            onValueChange={(val) =>
+                              updateItem(item.id, "repaymentFrequency", val)
+                            }
+                          />
+                        </div>
+                      </div>
+
+                      <FormField label="Interest Rate">
+                        <div className="flex items-center gap-2">
+                          <Input
+                            value={item.interestRate}
+                            onChange={(e) =>
+                              updateItem(
+                                item.id,
+                                "interestRate",
+                                e.target.value,
+                              )
+                            }
+                            placeholder="e.g. 6.5"
+                            className="flex-1"
+                          />
+                          <span className="text-sm text-muted-foreground shrink-0">
+                            %
+                          </span>
+                        </div>
+                      </FormField>
+
+                      <FormField label="Notes">
+                        <Textarea
+                          value={item.details}
+                          onChange={(e) =>
+                            updateItem(item.id, "details", e.target.value)
+                          }
+                          placeholder="Short comment"
+                          rows={2}
+                        />
+                      </FormField>
+
+                      <FormField label="Ownership (%)">
+                        <OwnershipSplit
+                          owners={[
+                            {
+                              id: "main",
+                              name: mainApplicantName ?? "Main Applicant",
+                              share: item.mainShare,
+                            },
+                            {
+                              id: "co",
+                              name: coApplicantName ?? "Co-Applicant",
+                              share: item.coShare,
+                            },
+                          ]}
+                          onOwnersChange={(owners) => {
+                            updateItem(
+                              item.id,
+                              "mainShare",
+                              owners.find((o) => o.id === "main")?.share ?? 50,
+                            );
+                            updateItem(
+                              item.id,
+                              "coShare",
+                              owners.find((o) => o.id === "co")?.share ?? 50,
+                            );
+                          }}
+                        />
+                      </FormField>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
+
+          <Button
+            variant="outline"
+            onClick={addItem}
+            className="w-full gap-1.5"
+          >
+            <Plus className="h-4 w-4" />
+            Add More
+          </Button>
+        </ModalScroll>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave(items);
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditAboutApplicantModal
+// ---------------------------------------------------------------------------
+
+export function EditAboutApplicantModal({
+  open,
+  onOpenChange,
+  applicantLabel = "Applicant",
+  initialData,
+  onSave,
+  className,
+}: EditAboutApplicantModalProps) {
+  const [form, setForm] = React.useState<AboutApplicantFormData>({
+    ...ABOUT_APPLICANT_DEFAULTS,
+    ...initialData,
+  });
+
+  React.useEffect(() => {
+    if (open) {
+      setForm({ ...ABOUT_APPLICANT_DEFAULTS, ...initialData });
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const setStr = (key: keyof AboutApplicantFormData) => (val: string) =>
+    setForm((prev) => ({ ...prev, [key]: val }));
+
+  const handleNumDependantsChange = (val: string) => {
+    const n = Math.max(0, Math.min(20, parseInt(val, 10) || 0));
+    setForm((prev) => {
+      const current = prev.dependants ?? [];
+      const next: DependantInfo[] =
+        n > current.length
+          ? [...current, ...Array(n - current.length).fill({ dob: "" })]
+          : current.slice(0, n);
+      return { ...prev, numDependants: val, dependants: next };
+    });
+  };
+
+  const setDependantDob = (index: number, dob: string) =>
+    setForm((prev) => {
+      const next = prev.dependants.map((d, i) => (i === index ? { dob } : d));
+      return { ...prev, dependants: next };
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-md", className)}>
+        <DialogHeader>
+          <DialogTitle>Edit About {applicantLabel}</DialogTitle>
+        </DialogHeader>
+        <ModalScroll>
+          {/* Name */}
+          <div className="flex gap-3 items-start">
+            <div className="w-24 shrink-0">
+              <FormField label="Title">
+                <Select value={form.title} onValueChange={setStr("title")}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Title" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {TITLE_OPTIONS.map((t) => (
+                      <SelectItem key={t} value={t}>
+                        {t}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormField>
+            </div>
+            <FormField label="First Name" className="flex-1">
+              <Input
+                value={form.firstName}
+                onChange={(e) => setStr("firstName")(e.target.value)}
+                placeholder="First name"
+              />
+            </FormField>
+            <FormField label="Last Name" className="flex-1">
+              <Input
+                value={form.lastName}
+                onChange={(e) => setStr("lastName")(e.target.value)}
+                placeholder="Last name"
+              />
+            </FormField>
+          </div>
+
+          {/* Contact */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Phone Number">
+              <Input
+                value={form.phone}
+                onChange={(e) => setStr("phone")(e.target.value)}
+                placeholder="+61 4xx xxx xxx"
+                type="tel"
+              />
+            </FormField>
+            <FormField label="Email">
+              <Input
+                value={form.email}
+                onChange={(e) => setStr("email")(e.target.value)}
+                placeholder="email@example.com"
+                type="email"
+              />
+            </FormField>
+          </div>
+
+          {/* Personal details */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Date of Birth">
+              <DatePicker
+                value={form.dob ? new Date(form.dob) : undefined}
+                onChange={(d) =>
+                  setStr("dob")(d ? d.toISOString().slice(0, 10) : "")
+                }
+                calendarProps={{
+                  fromYear: 1900,
+                  toYear: new Date().getFullYear() - 16,
+                }}
+              />
+            </FormField>
+            <FormField label="Gender">
+              <Select value={form.gender} onValueChange={setStr("gender")}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {GENDER_OPTIONS.map((g) => (
+                    <SelectItem key={g} value={g}>
+                      {g}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Marital Status">
+              <Select
+                value={form.maritalStatus}
+                onValueChange={setStr("maritalStatus")}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {MARITAL_OPTIONS.map((m) => (
+                    <SelectItem key={m} value={m}>
+                      {m}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField label="No. of Dependants">
+              <Input
+                type="number"
+                min={0}
+                max={20}
+                value={form.numDependants}
+                onChange={(e) => handleNumDependantsChange(e.target.value)}
+                placeholder="0"
+              />
+            </FormField>
+          </div>
+
+          {/* Dependant DOBs */}
+          {form.dependants.length > 0 && (
+            <div className="flex flex-col gap-3">
+              <Label className="text-sm font-medium">
+                Dependant Date of Birth
+              </Label>
+              <div className="grid grid-cols-2 gap-3">
+                {form.dependants.map((dep, i) => (
+                  <FormField key={i} label={`Dependant ${i + 1}`}>
+                    <DatePicker
+                      value={dep.dob ? new Date(dep.dob) : undefined}
+                      onChange={(d) =>
+                        setDependantDob(
+                          i,
+                          d ? d.toISOString().slice(0, 10) : "",
+                        )
+                      }
+                      calendarProps={{
+                        fromYear: 1900,
+                        toYear: new Date().getFullYear(),
+                      }}
+                    />
+                  </FormField>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Residency */}
+          <FormField label="Citizen Status">
+            <Select
+              value={form.citizenStatus}
+              onValueChange={setStr("citizenStatus")}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                {CITIZEN_OPTIONS.map((c) => (
+                  <SelectItem key={c} value={c}>
+                    {c}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </FormField>
+
+          <FormField label="Current Residential Address">
+            <AddressAutocomplete
+              value={form.residentialAddress}
+              onValueChange={setStr("residentialAddress")}
+              onSelect={(opt) => setStr("residentialAddress")(opt.label)}
+            />
+          </FormField>
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Residential Status">
+              <Select
+                value={form.residentialStatus}
+                onValueChange={setStr("residentialStatus")}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {RESIDENTIAL_STATUS_OPTIONS.map((o) => (
+                    <SelectItem key={o} value={o}>
+                      {o}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField label="Time at Address">
+              <div className="flex gap-2">
+                <div className="flex items-center gap-1 flex-1">
+                  <Input
+                    type="number"
+                    min={0}
+                    value={form.timeAtAddressYears}
+                    onChange={(e) =>
+                      setStr("timeAtAddressYears")(e.target.value)
+                    }
+                    placeholder="0"
+                  />
+                  <span className="text-sm text-muted-foreground shrink-0">
+                    yr
+                  </span>
+                </div>
+                <div className="flex items-center gap-1 flex-1">
+                  <Input
+                    type="number"
+                    min={0}
+                    max={11}
+                    value={form.timeAtAddressMonths}
+                    onChange={(e) =>
+                      setStr("timeAtAddressMonths")(e.target.value)
+                    }
+                    placeholder="0"
+                  />
+                  <span className="text-sm text-muted-foreground shrink-0">
+                    mo
+                  </span>
+                </div>
+              </div>
+            </FormField>
+          </div>
+
+          {/* Previous address if < 2 years at current */}
+          {parseInt(form.timeAtAddressYears || "99") < 2 && (
+            <FormField label="Previous Address">
+              <AddressAutocomplete
+                value={form.previousAddress}
+                onValueChange={setStr("previousAddress")}
+                onSelect={(opt) => setStr("previousAddress")(opt.label)}
+              />
+            </FormField>
+          )}
+
+          {/* ID */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Driver's Licence">
+              <Input
+                value={form.driversLicence}
+                onChange={(e) => setStr("driversLicence")(e.target.value)}
+                placeholder="e.g. 12345678"
+              />
+            </FormField>
+            <FormField label="Passport Number">
+              <Input
+                value={form.passport}
+                onChange={(e) => setStr("passport")(e.target.value)}
+                placeholder="e.g. PA1234567"
+              />
+            </FormField>
+          </div>
+
+          {/* Financial structure */}
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Property in Trust">
+              <Select
+                value={form.propertyInTrust}
+                onValueChange={setStr("propertyInTrust")}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {PROPERTY_IN_TRUST_OPTIONS.map((o) => (
+                    <SelectItem key={o} value={o}>
+                      {o}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+            <FormField label="Company Ownership">
+              <Select
+                value={form.companyOwnership}
+                onValueChange={setStr("companyOwnership")}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  {COMPANY_OWNERSHIP_OPTIONS.map((o) => (
+                    <SelectItem key={o} value={o}>
+                      {o}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormField>
+          </div>
+        </ModalScroll>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave(form);
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditIncomeModal
+// ---------------------------------------------------------------------------
+
+export function EditIncomeModal({
+  open,
+  onOpenChange,
+  applicantLabel = "Applicant",
+  initialData,
+  onSave,
+  className,
+}: EditIncomeModalProps) {
+  const defaultItems = React.useMemo(
+    () =>
+      initialData?.items?.length
+        ? initialData.items
+        : [makeDefaultIncomeItem()],
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const [items, setItems] = React.useState<IncomeItem[]>(defaultItems);
+
+  React.useEffect(() => {
+    if (open) {
+      setItems(
+        initialData?.items?.length
+          ? initialData.items
+          : [makeDefaultIncomeItem()],
+      );
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const updateItem = <K extends keyof IncomeItem>(
+    id: string,
+    key: K,
+    val: IncomeItem[K],
+  ) =>
+    setItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, [key]: val } : item)),
+    );
+
+  const removeItem = (id: string) =>
+    setItems((prev) => prev.filter((item) => item.id !== id));
+
+  const addItem = () => setItems((prev) => [...prev, makeDefaultIncomeItem()]);
+
+  const defaultOpenItems = items.length > 0 ? [items[0].id] : [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-lg", className)}>
+        <DialogHeader>
+          <DialogTitle>Edit Income {applicantLabel}</DialogTitle>
+        </DialogHeader>
+        <ModalScroll>
+          <Accordion
+            multiple
+            defaultValue={defaultOpenItems}
+            className="w-full"
+          >
+            {items.map((item, index) => (
+              <AccordionItem key={item.id} value={item.id}>
+                <AccordionItemHeader
+                  label={`Income ${index + 1} — ${item.incomeType || "New Income"}`}
+                  onRemove={() => removeItem(item.id)}
+                  removeLabel="Remove income item"
+                />
+                <AccordionContent>
+                  <div className="flex flex-col gap-4 pt-1">
+                    <FormField label="Income Type">
+                      <Select
+                        value={item.incomeType}
+                        onValueChange={(val) =>
+                          updateItem(item.id, "incomeType", val)
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {INCOME_TYPES.map((t) => (
+                            <SelectItem key={t} value={t}>
+                              {t}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormField>
+
+                    <FormField label="Job Title">
+                      <Input
+                        value={item.jobTitle}
+                        onChange={(e) =>
+                          updateItem(item.id, "jobTitle", e.target.value)
+                        }
+                        placeholder="Job title"
+                      />
+                    </FormField>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <FormField label="Start Date">
+                        <DatePicker
+                          value={
+                            item.startDate
+                              ? new Date(item.startDate)
+                              : undefined
+                          }
+                          onChange={(d) =>
+                            updateItem(
+                              item.id,
+                              "startDate",
+                              d ? d.toISOString().slice(0, 10) : "",
+                            )
+                          }
+                          calendarProps={{
+                            fromYear: 1950,
+                            toYear: new Date().getFullYear(),
+                          }}
+                        />
+                      </FormField>
+                      {!item.stillInPosition && (
+                        <FormField label="End Date">
+                          <DatePicker
+                            value={
+                              item.endDate ? new Date(item.endDate) : undefined
+                            }
+                            onChange={(d) =>
+                              updateItem(
+                                item.id,
+                                "endDate",
+                                d ? d.toISOString().slice(0, 10) : "",
+                              )
+                            }
+                            calendarProps={{
+                              fromYear: 1950,
+                              toYear: new Date().getFullYear(),
+                            }}
+                          />
+                        </FormField>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id={`still-in-position-${item.id}`}
+                        checked={item.stillInPosition}
+                        onCheckedChange={(checked) =>
+                          updateItem(
+                            item.id,
+                            "stillInPosition",
+                            checked === true,
+                          )
+                        }
+                      />
+                      <label
+                        htmlFor={`still-in-position-${item.id}`}
+                        className="text-sm cursor-pointer select-none"
+                      >
+                        Still in position
+                      </label>
+                    </div>
+
+                    <FormField label="Company Name">
+                      <Input
+                        value={item.companyName}
+                        onChange={(e) =>
+                          updateItem(item.id, "companyName", e.target.value)
+                        }
+                        placeholder="Company name"
+                      />
+                    </FormField>
+
+                    <FormField label="Company Address">
+                      <AddressAutocomplete
+                        value={item.companyAddress}
+                        onValueChange={(val) =>
+                          updateItem(item.id, "companyAddress", val)
+                        }
+                        placeholder="Search company address"
+                      />
+                    </FormField>
+
+                    <div className="flex items-start gap-3">
+                      <div className="flex-1">
+                        <FormField label="Income Amount">
+                          <CurrencyInputWithSlider
+                            value={item.incomeAmount}
+                            min={0}
+                            max={1_000_000}
+                            step={1_000}
+                            onValueChange={(val) =>
+                              updateItem(item.id, "incomeAmount", val)
+                            }
+                          />
+                        </FormField>
+                      </div>
+                      <div className="shrink-0 mt-[1.625rem]">
+                        <FrequencyToggle
+                          value={item.frequency}
+                          onValueChange={(val) =>
+                            updateItem(item.id, "frequency", val)
+                          }
+                        />
+                      </div>
+                    </div>
+
+                    <FormField label="Type of Company">
+                      <RadioGroup
+                        value={item.companyType}
+                        onValueChange={(val) =>
+                          updateItem(
+                            item.id,
+                            "companyType",
+                            val as IncomeItem["companyType"],
+                          )
+                        }
+                        className="flex gap-4"
+                      >
+                        {(["Public", "Private"] as const).map((opt) => (
+                          <label
+                            key={opt}
+                            className="flex items-center gap-2 cursor-pointer text-sm"
+                          >
+                            <RadioGroupItem value={opt} />
+                            {opt}
+                          </label>
+                        ))}
+                      </RadioGroup>
+                    </FormField>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+
+          <Button
+            variant="outline"
+            onClick={addItem}
+            className="w-full gap-1.5"
+          >
+            <Plus className="h-4 w-4" />
+            Add More
+          </Button>
+        </ModalScroll>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave({ items });
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditExpensesModal
+// ---------------------------------------------------------------------------
+
+export function EditExpensesModal({
+  open,
+  onOpenChange,
+  applicantLabel = "Applicant",
+  initialData,
+  onSave,
+  className,
+}: EditExpensesModalProps) {
+  const defaultItems = React.useMemo(
+    () =>
+      initialData?.items?.length
+        ? initialData.items
+        : [makeDefaultExpenseItem()],
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const [items, setItems] = React.useState<ExpenseItem[]>(defaultItems);
+
+  React.useEffect(() => {
+    if (open) {
+      setItems(
+        initialData?.items?.length
+          ? initialData.items
+          : [makeDefaultExpenseItem()],
+      );
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const updateItem = <K extends keyof ExpenseItem>(
+    id: string,
+    key: K,
+    val: ExpenseItem[K],
+  ) =>
+    setItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, [key]: val } : item)),
+    );
+
+  const removeItem = (id: string) =>
+    setItems((prev) => prev.filter((item) => item.id !== id));
+
+  const addItem = () => setItems((prev) => [...prev, makeDefaultExpenseItem()]);
+
+  const defaultOpenItems = items.length > 0 ? [items[0].id] : [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-lg", className)}>
+        <DialogHeader>
+          <DialogTitle>Edit Expenses {applicantLabel}</DialogTitle>
+        </DialogHeader>
+        <ModalScroll>
+          <Accordion
+            multiple
+            defaultValue={defaultOpenItems}
+            className="w-full"
+          >
+            {items.map((item, index) => (
+              <AccordionItem key={item.id} value={item.id}>
+                <AccordionItemHeader
+                  label={`Expense ${index + 1} — ${item.expenseType || "New Expense"}`}
+                  onRemove={() => removeItem(item.id)}
+                  removeLabel="Remove expense item"
+                />
+                <AccordionContent>
+                  <div className="flex flex-col gap-4 pt-1">
+                    <FormField label="Expense Type">
+                      <Select
+                        value={item.expenseType}
+                        onValueChange={(val) =>
+                          updateItem(item.id, "expenseType", val)
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {EXPENSE_TYPES.map((t) => (
+                            <SelectItem key={t} value={t}>
+                              {t}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormField>
+
+                    <div className="flex items-start gap-3">
+                      <div className="flex-1">
+                        <FormField label="Amount">
+                          <CurrencyInputWithSlider
+                            value={item.amount}
+                            min={0}
+                            max={100_000}
+                            step={100}
+                            onValueChange={(val) =>
+                              updateItem(item.id, "amount", val)
+                            }
+                          />
+                        </FormField>
+                      </div>
+                      <div className="shrink-0 mt-[1.625rem]">
+                        <FrequencyToggle
+                          value={item.frequency}
+                          onValueChange={(val) =>
+                            updateItem(item.id, "frequency", val)
+                          }
+                        />
+                      </div>
+                    </div>
+
+                    <FormField label="Ownership (%)">
+                      <OwnershipSplit
+                        owners={[
+                          {
+                            id: "main",
+                            name: "Main Applicant",
+                            share: item.mainShare,
+                          },
+                          {
+                            id: "co",
+                            name: "Co-Applicant",
+                            share: item.coShare,
+                          },
+                        ]}
+                        onOwnersChange={(owners) => {
+                          const main =
+                            owners.find((o) => o.id === "main")?.share ??
+                            item.mainShare;
+                          const co =
+                            owners.find((o) => o.id === "co")?.share ??
+                            item.coShare;
+                          updateItem(item.id, "mainShare", main);
+                          updateItem(item.id, "coShare", co);
+                        }}
+                      />
+                    </FormField>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+
+          <Button
+            variant="outline"
+            onClick={addItem}
+            className="w-full gap-1.5"
+          >
+            <Plus className="h-4 w-4" />
+            Add More
+          </Button>
+        </ModalScroll>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave({ items });
+              onOpenChange(false);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}