added state for modal and modal input, added modal html and tested functionality, just need to add api calls to functions and the page should be functional and ready for a design update

src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx

@@ -15,9 +15,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/app/shadcn_components/ui/select";
+import {
+  Dialog, 
+  DialogContent, 
+  DialogTitle, 
+  DialogFooter,
+} from "@/app/shadcn_components/ui/dialog";
 import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio";
 import { PortfolioGoal as PortfolioGoalOptions } from "@/app/db/schema/portfolio";
 
+// dropdown selection component for both goal and status
+
 export function SettingsDropdown({
   startingValue,
   options,
@@ -59,7 +67,8 @@ export default function PortfolioSettings({
   // Running in the client
   const router = useRouter();
 
-  // Set up state
+  // Set up state for portfolioName, portfolioBudget, portfolioGoal and portfolioStatus
+
   // Syntax const [variable, function whos only job is to update the value of variable] = useState(initial value)
   const [portfolioName, setPortfolioName] = useState(
     portfolioSettingsData.name
@@ -77,32 +86,73 @@ export default function PortfolioSettings({
     portfolioSettingsData.status
   );
 
-  // Renaming functionality
+  // Set up state for deleteModal and deleteConfirmation
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+
+  const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("")
+
+  function handleDeleteConfirmation() {
+    // if (deleteConfirmationByName === portfolioName)
+    console.log("we be deletin stuff")
+  }
+
+  // RENAMING FUNCTIONS 
+
+  // Change NAME functionality - changing state
 
   function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
     setPortfolioName(e.target.value);
   }
 
-  function handleRename() {
+  // The onClick function called to update the NAME in the DB
+
+  function handleRenameDb() {
     // API call to rename the portfolio
-    // apiFunction(portfolioName)
+    // apiFunction(portfolioSettingsData.name)
     // Update portfolioName 
     router.refresh();
   }
 
-  //Change budget functionality
+  // BUDGET CHANGING FUNCTIONS
+
+  // Change BUDGET functionality - changing state
 
   function handlePortfolioBudgetUpdate(e: React.ChangeEvent<HTMLInputElement>) {
     setPortfolioBudget(Number(e.target.value));
   }
 
-  function handleBudgetUpdate() {
+  // The onClick function called to update the BUDGET in the DB
+
+  function handleBudgetUpdateDb() {
     // API call to change the budget
-    // apiFunction(portfolioBudget)
+    // apiFunction(portfolioSettingsData.budget)
     // Update portfolioBudget
     router.refresh();
   }
 
+  // CHANGING GOAL AND STATUS FUNCTIONALITY
+
+  // The onClick function called to update the GOAL in the DB
+
+  function handleGoalUpdateDb() {
+    // API call to change the goal
+    // apiFunction(portfolioSettingsData.goal)
+    // Update portfolioGoal
+    router.refresh();
+  }
+
+  // The onClick function called to update the BUDGET in the DB
+  
+  function handleStatusUpdateDb() {
+    // API call to change the status
+    // apiFunction(portfolioSettingsData.status)
+    // Update portfolioStatus
+    router.refresh();
+  }
+
+  // HTML to render the page
+
   return (
     <>
       <div className="p-4 mt-5 flex justify-center max-w-8xl w-8xl pt-5 bg-gray-50 rounded-lg text-brandblue">
@@ -115,7 +165,7 @@ export default function PortfolioSettings({
             <Input value={portfolioName} onChange={handlePortfolioNameChange} />
           </div>
           <div className="flex items-center">
-            <Button className="w-full" onClick={handleRename}>
+            <Button className="w-full" onClick={handleRenameDb}>
               Rename
             </Button>
           </div>
@@ -133,7 +183,7 @@ export default function PortfolioSettings({
             />
           </div>
           <div className="flex items-center">
-            <Button className="w-full" onClick={handleBudgetUpdate}>
+            <Button className="w-full" onClick={handleBudgetUpdateDb}>
               Update
             </Button>
           </div>
@@ -150,7 +200,7 @@ export default function PortfolioSettings({
               setOption={setPortfolioGoal}
             />
           </div>
-          <Button className="w-full">Update</Button>
+          <Button className="w-full" onClick={handleGoalUpdateDb}>Update</Button>
 
           {/* Row 4: Status */}
           <div className="flex items-center">
@@ -163,7 +213,7 @@ export default function PortfolioSettings({
               setOption={setPortfolioStatus}
             />
           </div>
-          <Button className="w-full">Update</Button>
+          <Button className="w-full" onClick={handleStatusUpdateDb}>Update</Button>
 
           <div className="col-span-3"> Portfolio Name: {portfolioName}</div>
           <div className="col-span-3"> Portfolio Budget: {portfolioBudget}</div>
@@ -173,10 +223,29 @@ export default function PortfolioSettings({
           {/* Row 5: Delete */}
           <div className="col-span-2"></div>
           <div className="flex items-center">
-            {/* <Button className="max-width: 100% bg-red-700" onClick={DeletePortfolio}>Delete Portfolio</Button> */}
+            <Button className="max-width: 100% bg-red-700" onClick={() => setIsDeleteModalOpen(true)}>Delete Portfolio</Button>
           </div>
+          {/* Delete portfolio modal */}
+          <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
+            <DialogContent>
+              <DialogTitle>Are you sure?</DialogTitle>
+              <p>
+                To confirm, please type the name of the portfolio (<strong>{portfolioName}</strong>)
+              </p>
+              <input 
+                type="text"
+                value={deleteConfirmationByName}
+                onChange={(e) => setDeleteConfirmationByName(e.target.value)}
+                placeholder="Type portfolio name" />
+              <DialogFooter>
+                <Button className="bg-green-600" onClick={() => setIsDeleteModalOpen(false)}>Cancel</Button>
+                <Button className="bg-red-700" onClick={handleDeleteConfirmation}>Delete</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </div>
       </div>
     </>
   );
 }
+