@wealthx/shadcn 1.2.1 → 1.3.0

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { ChevronDownIcon, Plus, Trash2 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { PROPERTY_ASSET_TYPES } from "@/lib/opportunity-constants";
 import {
   Dialog,
   DialogContent,
@@ -86,14 +87,6 @@ const ASSET_TYPES = [
   "Other",
 ];
 
-const PROPERTY_ASSET_TYPES = new Set([
-  "Primary Residence",
-  "Investment Property",
-  "Holiday Home",
-  "Commercial Property",
-  "Rural Property",
-]);
-
 const PROPERTY_SUBTYPES = [
   "House",
   "Unit / Apartment",
@@ -447,6 +440,8 @@ export interface EditLoanScenarioModalProps {
   onSave: (data: LoanScenarioFormData) => void;
   mainApplicantName?: string;
   coApplicantName?: string;
+  /** Scope the dialog portal into this element (e.g. a Sheet drawer) instead of document.body. */
+  container?: HTMLElement | null;
   className?: string;
 }
 
@@ -457,6 +452,7 @@ export interface EditAssetsModalProps {
   onSave: (items: AssetLineItem[]) => void;
   mainApplicantName?: string;
   coApplicantName?: string;
+  container?: HTMLElement | null;
   className?: string;
 }
 
@@ -467,6 +463,7 @@ export interface EditDebtsModalProps {
   onSave: (items: DebtLineItem[]) => void;
   mainApplicantName?: string;
   coApplicantName?: string;
+  container?: HTMLElement | null;
   className?: string;
 }
 
@@ -476,6 +473,7 @@ export interface EditAboutApplicantModalProps {
   applicantLabel?: string;
   initialData?: Partial<AboutApplicantFormData>;
   onSave: (data: AboutApplicantFormData) => void;
+  container?: HTMLElement | null;
   className?: string;
 }
 
@@ -485,6 +483,7 @@ export interface EditIncomeModalProps {
   applicantLabel?: string;
   initialData?: IncomeFormData;
   onSave: (data: IncomeFormData) => void;
+  container?: HTMLElement | null;
   className?: string;
 }
 
@@ -494,6 +493,7 @@ export interface EditExpensesModalProps {
   applicantLabel?: string;
   initialData?: ExpensesFormData;
   onSave: (data: ExpensesFormData) => void;
+  container?: HTMLElement | null;
   className?: string;
 }
 
@@ -577,14 +577,16 @@ function AccordionItemHeader({
         {label}
         <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
-      <button
+      <Button
         type="button"
+        variant="ghost"
+        size="icon"
         onClick={onRemove}
-        className="p-2 hover:bg-foreground/5 transition-colors"
+        className="size-8 shrink-0"
         aria-label={removeLabel}
       >
-        <Trash2 className="h-3.5 w-3.5 text-destructive" />
-      </button>
+        <Trash2 className="size-3.5 text-destructive" />
+      </Button>
     </AccordionPrimitive.Header>
   );
 }
@@ -698,6 +700,7 @@ export function EditLoanScenarioModal({
   onOpenChange,
   initialData,
   onSave,
+  container,
   className,
 }: EditLoanScenarioModalProps) {
   const [form, setForm] = React.useState<LoanScenarioFormData>({
@@ -705,12 +708,18 @@ export function EditLoanScenarioModal({
     ...initialData,
   });
 
+  const initialSnapshot = React.useRef<string>("");
+
   React.useEffect(() => {
     if (open) {
-      setForm({ ...LOAN_SCENARIO_DEFAULTS, ...initialData });
+      const data = { ...LOAN_SCENARIO_DEFAULTS, ...initialData };
+      setForm(data);
+      initialSnapshot.current = JSON.stringify(data);
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const isDirty = JSON.stringify(form) !== initialSnapshot.current;
+
   const set = <K extends keyof LoanScenarioFormData>(
     key: K,
     val: LoanScenarioFormData[K],
@@ -762,7 +771,10 @@ export function EditLoanScenarioModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("max-w-lg", className)}>
+      <DialogContent
+        className={cn("max-w-lg", className)}
+        container={container}
+      >
         <DialogHeader>
           <DialogTitle>Edit Loan Scenario</DialogTitle>
         </DialogHeader>
@@ -965,6 +977,7 @@ export function EditLoanScenarioModal({
             Cancel
           </Button>
           <Button
+            disabled={!isDirty}
             onClick={() => {
               onSave(form);
               onOpenChange(false);
@@ -989,20 +1002,26 @@ export function EditAssetsModal({
   onSave,
   mainApplicantName = "Main Applicant",
   coApplicantName = "Co-Applicant",
+  container,
   className,
 }: EditAssetsModalProps) {
   const [items, setItems] = React.useState<AssetLineItem[]>(
     initialItems.length > 0 ? initialItems : [makeDefaultAssetItem()],
   );
 
+  const initialSnapshot = React.useRef<string>("");
+
   React.useEffect(() => {
     if (open) {
-      setItems(
-        initialItems.length > 0 ? initialItems : [makeDefaultAssetItem()],
-      );
+      const data =
+        initialItems.length > 0 ? initialItems : [makeDefaultAssetItem()];
+      setItems(data);
+      initialSnapshot.current = JSON.stringify(data);
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const isDirty = JSON.stringify(items) !== initialSnapshot.current;
+
   const updateItem = <K extends keyof AssetLineItem>(
     id: string,
     key: K,
@@ -1021,7 +1040,10 @@ export function EditAssetsModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("max-w-lg", className)}>
+      <DialogContent
+        className={cn("max-w-lg", className)}
+        container={container}
+      >
         <DialogHeader>
           <DialogTitle>Edit Assets</DialogTitle>
         </DialogHeader>
@@ -1329,6 +1351,7 @@ export function EditAssetsModal({
             Cancel
           </Button>
           <Button
+            disabled={!isDirty}
             onClick={() => {
               onSave(items);
               onOpenChange(false);
@@ -1353,20 +1376,26 @@ export function EditDebtsModal({
   onSave,
   mainApplicantName = "Main Applicant",
   coApplicantName = "Co-Applicant",
+  container,
   className,
 }: EditDebtsModalProps) {
   const [items, setItems] = React.useState<DebtLineItem[]>(
     initialItems.length > 0 ? initialItems : [makeDefaultDebtItem()],
   );
 
+  const initialSnapshot = React.useRef<string>("");
+
   React.useEffect(() => {
     if (open) {
-      setItems(
-        initialItems.length > 0 ? initialItems : [makeDefaultDebtItem()],
-      );
+      const data =
+        initialItems.length > 0 ? initialItems : [makeDefaultDebtItem()];
+      setItems(data);
+      initialSnapshot.current = JSON.stringify(data);
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const isDirty = JSON.stringify(items) !== initialSnapshot.current;
+
   const updateItem = <K extends keyof DebtLineItem>(
     id: string,
     key: K,
@@ -1385,7 +1414,10 @@ export function EditDebtsModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("max-w-xl", className)}>
+      <DialogContent
+        className={cn("max-w-xl", className)}
+        container={container}
+      >
         <DialogHeader>
           <DialogTitle>Edit Debts</DialogTitle>
         </DialogHeader>
@@ -1722,6 +1754,7 @@ export function EditDebtsModal({
             Cancel
           </Button>
           <Button
+            disabled={!isDirty}
             onClick={() => {
               onSave(items);
               onOpenChange(false);
@@ -1745,6 +1778,7 @@ export function EditAboutApplicantModal({
   applicantLabel = "Applicant",
   initialData,
   onSave,
+  container,
   className,
 }: EditAboutApplicantModalProps) {
   const [form, setForm] = React.useState<AboutApplicantFormData>({
@@ -1752,12 +1786,18 @@ export function EditAboutApplicantModal({
     ...initialData,
   });
 
+  const initialSnapshot = React.useRef<string>("");
+
   React.useEffect(() => {
     if (open) {
-      setForm({ ...ABOUT_APPLICANT_DEFAULTS, ...initialData });
+      const data = { ...ABOUT_APPLICANT_DEFAULTS, ...initialData };
+      setForm(data);
+      initialSnapshot.current = JSON.stringify(data);
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const isDirty = JSON.stringify(form) !== initialSnapshot.current;
+
   const setStr = (key: keyof AboutApplicantFormData) => (val: string) =>
     setForm((prev) => ({ ...prev, [key]: val }));
 
@@ -1781,7 +1821,10 @@ export function EditAboutApplicantModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("max-w-md", className)}>
+      <DialogContent
+        className={cn("max-w-md", className)}
+        container={container}
+      >
         <DialogHeader>
           <DialogTitle>Edit About {applicantLabel}</DialogTitle>
         </DialogHeader>
@@ -2080,6 +2123,7 @@ export function EditAboutApplicantModal({
             Cancel
           </Button>
           <Button
+            disabled={!isDirty}
             onClick={() => {
               onSave(form);
               onOpenChange(false);
@@ -2103,6 +2147,7 @@ export function EditIncomeModal({
   applicantLabel = "Applicant",
   initialData,
   onSave,
+  container,
   className,
 }: EditIncomeModalProps) {
   const defaultItems = React.useMemo(
@@ -2115,16 +2160,20 @@ export function EditIncomeModal({
 
   const [items, setItems] = React.useState<IncomeItem[]>(defaultItems);
 
+  const initialSnapshot = React.useRef<string>("");
+
   React.useEffect(() => {
     if (open) {
-      setItems(
-        initialData?.items?.length
-          ? initialData.items
-          : [makeDefaultIncomeItem()],
-      );
+      const data = initialData?.items?.length
+        ? initialData.items
+        : [makeDefaultIncomeItem()];
+      setItems(data);
+      initialSnapshot.current = JSON.stringify(data);
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const isDirty = JSON.stringify(items) !== initialSnapshot.current;
+
   const updateItem = <K extends keyof IncomeItem>(
     id: string,
     key: K,
@@ -2143,7 +2192,10 @@ export function EditIncomeModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("max-w-lg", className)}>
+      <DialogContent
+        className={cn("max-w-lg", className)}
+        container={container}
+      >
         <DialogHeader>
           <DialogTitle>Edit Income {applicantLabel}</DialogTitle>
         </DialogHeader>
@@ -2342,6 +2394,7 @@ export function EditIncomeModal({
             Cancel
           </Button>
           <Button
+            disabled={!isDirty}
             onClick={() => {
               onSave({ items });
               onOpenChange(false);
@@ -2365,6 +2418,7 @@ export function EditExpensesModal({
   applicantLabel = "Applicant",
   initialData,
   onSave,
+  container,
   className,
 }: EditExpensesModalProps) {
   const defaultItems = React.useMemo(
@@ -2377,16 +2431,20 @@ export function EditExpensesModal({
 
   const [items, setItems] = React.useState<ExpenseItem[]>(defaultItems);
 
+  const initialSnapshot = React.useRef<string>("");
+
   React.useEffect(() => {
     if (open) {
-      setItems(
-        initialData?.items?.length
-          ? initialData.items
-          : [makeDefaultExpenseItem()],
-      );
+      const data = initialData?.items?.length
+        ? initialData.items
+        : [makeDefaultExpenseItem()];
+      setItems(data);
+      initialSnapshot.current = JSON.stringify(data);
     }
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const isDirty = JSON.stringify(items) !== initialSnapshot.current;
+
   const updateItem = <K extends keyof ExpenseItem>(
     id: string,
     key: K,
@@ -2405,7 +2463,10 @@ export function EditExpensesModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("max-w-lg", className)}>
+      <DialogContent
+        className={cn("max-w-lg", className)}
+        container={container}
+      >
         <DialogHeader>
           <DialogTitle>Edit Expenses {applicantLabel}</DialogTitle>
         </DialogHeader>
@@ -2514,6 +2575,7 @@ export function EditExpensesModal({
             Cancel
           </Button>
           <Button
+            disabled={!isDirty}
             onClick={() => {
               onSave({ items });
               onOpenChange(false);