junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made protfolio page a bit nicer

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-06-02 14:26:00 +01:00
parent 443a12f7ea
commit 74f11f13f7
2 changed files with 39 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/portfolio/AddNew.tsx
View file

@ -6,8 +6,8 @@ import { PlusIcon, TableCellsIcon } from "@heroicons/react/24/outline";
export default function AddNew({ portfolioId }: { portfolioId: string }) {
return (
<Menu as="div" className="relative">
<Menu.Button className="rounded-md bg-brandtan text-white hover:bg-hovertan">
<Menu as="div" className="relative w-full">
<Menu.Button className="rounded-md bg-brandtan text-white hover:bg-hovertan w-full">
<div className="mx-8">Add New</div>
</Menu.Button>
<Menu.Items className="hover:bg-brandtan absolute right-0 mt-2 w-48 origin-top-right overflow-hidden rounded-md border bg-white shadow-lg focus:outline-none">

65
src/app/portfolio/[slug]/page.tsx
View file

@ -252,34 +252,46 @@ export default async function Page({
return (
<>
<div className="flex justify-center">
<h1 className="text-3xl font-bold mt-3 mb-4">Portfolio: {pageName}</h1>
<h1 className="text-3xl text-brandblue font-bold mt-3 mb-4">
Portfolio: {pageName}
</h1>
</div>
<div className="flex justify-center">
<div className="grid grid-cols-5 gap-4 w-full max-w-7xl h-screen">
<div className="max-h-96 bg-white p-4 rounded-lg shadow-lg text-black h-1/2">
<h2 className="text-lg font-bold mb-4">Portfolio Summary</h2>
<ul>
<li className="px-2 mb-2 flex items-center cursor-pointer hover:text-white hover:bg-brandblue hover:rounded-md transition-colors duration-200">
Budget: {budget || "Not Set"}
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
<li className="px-2 mb-2">Total Cost: £{totalCost}</li>
<li className="px-2 mb-2">
Number of properties: {properties.length}
</li>
<li className="px-2 mb-2">
Annual Co2 Savings: {co2Reduction} tonnes
</li>
<li className="px-2 mb-2">
Total Works Time: {totalWorksHours} hours
</li>
<li className="px-2 mb-2">
Total Value Increase: £{totalValueIncrease}
</li>
<li className="px-2 mb-2">
Annual rental yield Increase: £{rentalYieldIncrease}
</li>
</ul>
<div className="flex-col">
<div
className="mb-4 max-h-96 bg-white p-4 rounded-lg border shadow-sm
text-black h-1/2"
>
<h2 className="text-center text-xl font-bold mb-4 text-brandblue">
Portfolio Summary
</h2>
<ul>
<li className="text-gray-700 px-2 mb-2 flex items-center cursor-pointer hover:text-gray-200 hover:bg-brandblue hover:rounded-md transition-colors duration-200">
Budget: {budget || "Not Set"}
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
<li className="text-gray-700 px-2 mb-2">
Total Cost: £{totalCost}
</li>
<li className="text-gray-700 px-2 mb-2">
Number of properties: {properties.length}
</li>
<li className="text-gray-700 px-2 mb-2">
Annual Co2 Savings: {co2Reduction} tonnes
</li>
<li className="text-gray-700 px-2 mb-2">
Total Works Time: {totalWorksHours} hours
</li>
<li className="text-gray-700 px-2 mb-2">
Total Value Increase: £{totalValueIncrease}
</li>
<li className="text-gray-700 px-2 mb-2">
Annual rental yield Increase: £{rentalYieldIncrease}
</li>
</ul>
</div>
<AddNew portfolioId={demo_id} />
</div>
<div className="col-span-3 bg-white">
{properties.length === 0 ? (
@ -291,9 +303,6 @@ export default async function Page({
/>
)}
</div>
<div className="col-span-1 flex justify-center">
<AddNew portfolioId={demo_id} />
</div>
</div>
</div>
</>