mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
changed the settings page into a table to maintain visual consistency
This commit is contained in:
StefanWout
parent
a2b93c5c63
commit
cdbb2bbfa0
1 changed files with 197 additions and 85 deletions
|
|
@ -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>
|
||||
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Reference in a new issue