From cdbb2bbfa0f38c0f9aef97012c57f248aa6147bc Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Fri, 15 Nov 2024 17:31:55 +0000
Subject: [PATCH] changed the settings page into a table to maintain visual
 consistency

---
 .../settings/PortfolioSettings.tsx            | 282 ++++++++++++------
 1 file changed, 197 insertions(+), 85 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
index 28a6f2d..5a1cee5 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
@@ -22,6 +22,14 @@ import {
   DialogTitle,
   DialogFooter,
 } from "@/app/shadcn_components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/app/shadcn_components/ui/table";
 import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio";
 import { PortfolioGoal as PortfolioGoalOptions } from "@/app/db/schema/portfolio";
 import { useSession } from "next-auth/react";
@@ -362,95 +370,192 @@ export default function PortfolioSettings({
   // 4) Create the API
 
   return (
-    <div className="w-4/5 p-4 mt-5 pt-5 bg-gray-50 rounded-lg text-brandblue">
-      <div className="grid grid-cols-[auto_auto_min-content] gap-5">
-        {/* Row 1: Name */}
-        <div className="flex pl-1 col-span-3 ">
-          <span>Change the Portfolio Name:</span>
-        </div>
-        <div className="flex-grow col-span-2">
-          <Input value={portfolioName} onChange={handlePortfolioNameChange} />
-        </div>
-        <div className="flex justify-end col-start-3 col-end-3">
-          <Button className="w-min" onClick={handleRename}>
-            Rename
-          </Button>
-        </div>
-        <div className="border-b-4 col-span-3 rounded-full"></div>
+    // <div className="w-4/5 p-4 mt-5 pt-5 bg-gray-50 rounded-lg text-brandblue">
+    //   <div className="grid grid-cols-[auto_auto_min-content] gap-5">
+    //     {/* Row 1: Name */}
+    //     <div className="flex pl-1 col-span-3 ">
+    //       <span>Change the Portfolio Name:</span>
+    //     </div>
+    //     <div className="flex-grow col-span-2">
+    //       <Input value={portfolioName} onChange={handlePortfolioNameChange} />
+    //     </div>
+    //     <div className="flex justify-end col-start-3 col-end-3">
+    //       <Button className="w-min" onClick={handleRename}>
+    //         Rename
+    //       </Button>
+    //     </div>
+    //     <div className="border-b-4 col-span-3 rounded-full"></div>
         
-        {/* Row 2: Budget */}
-        <div className="w-full flex-col items-center pl-1 col-span-2">
-          <span>Portfolio Budget:<br /></span>
-          <span className="text-xs pt-1 text-gray-500">Total Budget across ALL Properties. We aim to make sure works stay within this budget.</span>
-        </div>
-        <div className="flex-grow col-span-2">
-          <Input
-            type="number"
-            value={portfolioBudget ?? undefined}
-            onChange={handlePortfolioBudgetUpdate}
-            onKeyDown={(e) => handleNumericKeyDown(e)}
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button className="w-min" onClick={handleBudgetUpdate}>
-            Update
-          </Button>
-        </div>
-        <div className="border-b-4 col-span-3 rounded-full"></div>
+    //     {/* Row 2: Budget */}
+    //     <div className="w-full flex-col items-center pl-1 col-span-2">
+    //       <span>Portfolio Budget:<br /></span>
+    //       <span className="text-xs pt-1 text-gray-500">Total Budget across ALL Properties. We aim to make sure works stay within this budget.</span>
+    //     </div>
+    //     <div className="flex-grow col-span-2">
+    //       <Input
+    //         type="number"
+    //         value={portfolioBudget ?? undefined}
+    //         onChange={handlePortfolioBudgetUpdate}
+    //         onKeyDown={(e) => handleNumericKeyDown(e)}
+    //       />
+    //     </div>
+    //     <div className="flex justify-end">
+    //       <Button className="w-min" onClick={handleBudgetUpdate}>
+    //         Update
+    //       </Button>
+    //     </div>
+    //     <div className="border-b-4 col-span-3 rounded-full"></div>
   
-        {/* Row 3: Goal */}
-        <div className="w-full flex-col items-center pl-1 col-span-2">
-          <span>Goal:<br /></span>
-          <span className="text-xs pt-1 text-gray-500">Adjust the overall aim of the works conducted on this portfolio.</span>
-        </div>
-        <div className="w-full flex-grow col-span-2">
-          <SettingsDropdown
-            className="w-full"
-            startingValue={portfolioGoal}
-            options={PortfolioGoalOptions}
-            setOption={setPortfolioGoal}
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button className="w-min" onClick={handleGoalUpdate}>
-            Update
-          </Button>
-        </div>
-        <div className="border-b-4 col-span-3 rounded-full"></div>
+    //     {/* Row 3: Goal */}
+    //     <div className="w-full flex-col items-center pl-1 col-span-2">
+    //       <span>Goal:<br /></span>
+    //       <span className="text-xs pt-1 text-gray-500">Adjust the overall aim of the works conducted on this portfolio.</span>
+    //     </div>
+    //     <div className="w-full flex-grow col-span-2">
+    //       <SettingsDropdown
+    //         className="w-full"
+    //         startingValue={portfolioGoal}
+    //         options={PortfolioGoalOptions}
+    //         setOption={setPortfolioGoal}
+    //       />
+    //     </div>
+    //     <div className="flex justify-end">
+    //       <Button className="w-min" onClick={handleGoalUpdate}>
+    //         Update
+    //       </Button>
+    //     </div>
+    //     <div className="border-b-4 col-span-3 rounded-full"></div>
   
-        {/* Row 4: Status */}
+    //     {/* Row 4: Status */}
         
-        <div className="w-full flex-col items-center pl-1 col-span-2">
-          <span>Status:<br /></span>
-          <span className="text-xs pt-1 text-gray-500">Adjust where the portfolio stands in the works pipeline.</span>
-        </div>
-        <div className="col-span-2">
-          <SettingsDropdown
-            className="w-full"
-            startingValue={portfolioStatus}
-            options={PortfolioStatusOptions}
-            setOption={setPortfolioStatus}
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button className="w-min" onClick={handleStatusUpdate}>
-            Update
-          </Button>
-        </div>
-        <div className="border-b-4 col-span-3 rounded-full"></div> 
+    //     <div className="w-full flex-col items-center pl-1 col-span-2">
+    //       <span>Status:<br /></span>
+    //       <span className="text-xs pt-1 text-gray-500">Adjust where the portfolio stands in the works pipeline.</span>
+    //     </div>
+    //     <div className="col-span-2">
+    //       <SettingsDropdown
+    //         className="w-full"
+    //         startingValue={portfolioStatus}
+    //         options={PortfolioStatusOptions}
+    //         setOption={setPortfolioStatus}
+    //       />
+    //     </div>
+    //     <div className="flex justify-end">
+    //       <Button className="w-min" onClick={handleStatusUpdate}>
+    //         Update
+    //       </Button>
+    //     </div>
+    //     <div className="border-b-4 col-span-3 rounded-full"></div> 
         
-        {/* Row 5: Delete */}
-        <div className="mx-auto text-center p-4 col-span-3 border-solid border-2 rounded-md border-red-700">
-          <div className="flex items-center justify-center col-span-3 pb-3">DANGER ZONE - Permanently Delete the Entire Portfolio</div>
-            <div className="flex items-center justify-center col-span-3">
-              <Button className="bg-red-700" onClick={handleOpenDeleteModal}>
-              Delete Portfolio
-              </Button>
-            </div>
-        </div>
-      </div>
+    //     {/* Row 5: Delete */}
+    //     <div className="mx-auto text-center p-4 col-span-3 border-solid border-2 rounded-md border-red-700">
+    //       <div className="flex items-center justify-center col-span-3 pb-3">DANGER ZONE - Permanently Delete the Entire Portfolio</div>
+    //         <div className="flex items-center justify-center col-span-3">
+    //           <Button className="bg-red-700" onClick={handleOpenDeleteModal}>
+    //           Delete Portfolio
+    //           </Button>
+    //         </div>
+    //     </div>
+    //   </div>
   
-      {/* Delete portfolio modal */}
+      // {/* 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>{portfolioSettingsData.name}</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}
+      //         disabled={deleteConfirmationByName !== portfolioSettingsData.name}
+      //       >
+      //         Delete
+      //       </Button>
+      //     </DialogFooter>
+      //   </DialogContent>
+      // </Dialog>
+    // </div>
+  
+  <div className="w-auto mt-4 p-4 bg-gray-50 rounded-lg text-brandblue">
+    <div className="rounded-md border border-gray-700">
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHead className="text-brandblue">
+              Rename the Portfolio:<p className="text-xs text-gray-500">Permanently change the name of your portfolio</p>
+            </TableHead>
+            <TableCell>
+              <Input value={portfolioName} onChange={handlePortfolioNameChange} />
+            </TableCell>
+            <TableCell>
+              <Button className="w-28" onClick={handleRename}>Rename</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead className="text-brandblue">
+              Change the Portfolio Budget:<p className="text-xs text-gray-500">The total budget across ALL properties. Works aim to stay within this budget</p>
+            </TableHead>
+            <TableCell>
+              <Input type="number" value={portfolioBudget ?? undefined} onChange={handlePortfolioBudgetUpdate} onKeyDown={(e) => handleNumericKeyDown(e)}/>
+            </TableCell>
+            <TableCell>
+              <Button className="w-28" onClick={handleBudgetUpdate}>Update</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead className="text-brandblue">
+              Change the Portfolio Goal:<p className="text-xs text-gray-500">Adjust the overall aim of the works conducted on this portfolio</p>
+            </TableHead>
+            <TableCell>
+            <SettingsDropdown className="w-full" startingValue={portfolioGoal} options={PortfolioGoalOptions} setOption={setPortfolioGoal}/>
+            </TableCell>
+            <TableCell>
+            <Button className="w-28" onClick={handleGoalUpdate}>Update</Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableHead className="text-brandblue">
+              Change the Status of the Portfolio:<p className="text-xs text-gray-500">Adjust where the portfolio stands in the works pipeline</p>
+            </TableHead>
+            <TableCell>
+            <SettingsDropdown className="w-full" startingValue={portfolioStatus} options={PortfolioStatusOptions} setOption={setPortfolioStatus}/>
+            </TableCell>
+            <TableCell>
+            <Button className="w-28" onClick={handleStatusUpdate}>Update</Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+    <div className="rounded-md border border-red-500 mt-2"> 
+      <Table>
+      <TableHead className="text-lg text-brandblue">Danger Zone:</TableHead>
+        <TableBody>
+          <TableRow>
+            <TableHead className="text-brandblue">
+              Delete the Portfolio:<p className="text-xs text-gray-500">Permanently delete the portfolio and all property data assigned to this portfolio</p>
+            </TableHead>
+            <TableCell className="flex justify-end">
+            <Button className="bg-red-700 w-42" onClick={handleOpenDeleteModal}>Delete Portfolio</Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
       <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
         <DialogContent>
           <DialogTitle>Are you sure?</DialogTitle>
@@ -480,7 +585,14 @@ export default function PortfolioSettings({
             </Button>
           </DialogFooter>
         </DialogContent>
-      </Dialog>
-    </div>
+      </Dialog>  
+    </div>    
+  </div>  
+  
   );
+
+  
 }
+
+
+  
\ No newline at end of file