mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
Added empty state for portfolio page
This commit is contained in:
Khalim Conn-Kowlessar
parent
b233841d16
commit
ee521d17b7
2 changed files with 119 additions and 17 deletions
|
|
@ -2,27 +2,30 @@
|
|||
|
||||
import { Menu } from "@headlessui/react";
|
||||
import Link from "next/link";
|
||||
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-brandmidblue text-white hover:bg-brandblue">
|
||||
<Menu.Button className="rounded-md bg-brandtan text-white hover:bg-hovertan">
|
||||
<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">
|
||||
<Menu.Item>
|
||||
<Link
|
||||
href={`portfolio/${portfolioId}/search`}
|
||||
className="flex px-4 py-2 text-sm text-gray-700 justify-start"
|
||||
className="items-center flex px-4 py-2 text-sm text-gray-700 justify-start hover:text-white"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 mr-2" />
|
||||
Add Unit
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<button
|
||||
disabled={true}
|
||||
className="flex px-4 py-2 text-sm text-gray-500 bg-gray-100 w-full justify-start"
|
||||
className="items-center flex px-4 py-2 text-sm text-gray-500 bg-gray-100 w-full justify-start"
|
||||
>
|
||||
<TableCellsIcon className="h-4 w-4 mr-2" />
|
||||
Upload CSV
|
||||
</button>
|
||||
</Menu.Item>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,158 @@
|
|||
import { PencilSquareIcon, HomeIcon } from "@heroicons/react/24/outline";
|
||||
import AddNew from "../../components/portfolio/AddNew";
|
||||
|
||||
function EmptyPropertyState() {
|
||||
return (
|
||||
<div className="flex justify-center h-1/2">
|
||||
<div className="bg-gray-50 rounded-lg shadow w-full">
|
||||
<p className="text-center text-gray-400 pt-3">
|
||||
Click on Add new to start adding properties to your Portfolio
|
||||
<HomeIcon className="h-20 w-20 mx-auto mt-4 text-gray-200" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: { slug: string };
|
||||
searchParams: { [key: string]: string | string[] | undefined };
|
||||
searchParams: { [key: string]: string | string[] | undefined | number };
|
||||
}) {
|
||||
// This is temp until we retrieve this data from the frontend
|
||||
// TODO: Update the objects to contains objective + any other required information
|
||||
const Portfolios = [
|
||||
{
|
||||
id: "f290f1ee-6c54-4b01-90e6-d701748f0851",
|
||||
properties: [],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
|
||||
title: "Portfolio 1",
|
||||
budget: "£500k",
|
||||
budget: 500000,
|
||||
properties: [],
|
||||
co2Reduction: 5.4,
|
||||
totalWorksHours: 45,
|
||||
totalValueIncrease: 500000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
|
||||
title: "Portfolio 2",
|
||||
budget: "150k",
|
||||
budget: 150000,
|
||||
properties: [],
|
||||
co2Reduction: 9.0,
|
||||
totalWorksHours: 30,
|
||||
totalValueIncrease: 150000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
|
||||
title: "Portfolio 3",
|
||||
budget: "£1m",
|
||||
budget: 1000000,
|
||||
properties: [],
|
||||
co2Reduction: 15.4,
|
||||
totalWorksHours: 100,
|
||||
totalValueIncrease: 1000000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
|
||||
title: "Portfolio 4",
|
||||
budget: "£2m",
|
||||
budget: 2000000,
|
||||
properties: [],
|
||||
co2Reduction: 3.8,
|
||||
totalWorksHours: 150,
|
||||
totalValueIncrease: 2000000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
|
||||
title: "Portfolio 5",
|
||||
budget: "£25k",
|
||||
budget: 25000,
|
||||
properties: [],
|
||||
co2Reduction: 1.9,
|
||||
totalWorksHours: 15,
|
||||
totalValueIncrease: 25000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
|
||||
title: "Portfolio 6",
|
||||
budget: "£10k",
|
||||
budget: 10000,
|
||||
properties: [],
|
||||
co2Reduction: 1.4,
|
||||
totalWorksHours: 10,
|
||||
totalValueIncrease: 10000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
|
||||
title: "Portfolio 7",
|
||||
budget: "£33k",
|
||||
budget: 33000,
|
||||
properties: [],
|
||||
co2Reduction: 10.4,
|
||||
totalWorksHours: 25,
|
||||
totalValueIncrease: 33000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
|
||||
title: "Portfolio 8",
|
||||
budget: "£670k",
|
||||
budget: 670000,
|
||||
properties: [],
|
||||
co2Reduction: 4.5,
|
||||
totalWorksHours: 65,
|
||||
totalValueIncrease: 670000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
|
||||
title: "Portfolio 9",
|
||||
budget: "£240k",
|
||||
budget: 240000,
|
||||
properties: [],
|
||||
co2Reduction: 8.4,
|
||||
totalWorksHours: 40,
|
||||
totalValueIncrease: 240000 * 1.2,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
|
||||
title: "Portfolio 10",
|
||||
budget: "93k",
|
||||
budget: 93000,
|
||||
properties: [],
|
||||
co2Reduction: 5.4,
|
||||
totalWorksHours: 18,
|
||||
totalValueIncrease: 93000 * 1.2,
|
||||
},
|
||||
];
|
||||
const demo_id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
|
||||
|
||||
let page_config;
|
||||
let pageName;
|
||||
let budget;
|
||||
let co2Reduction: number;
|
||||
let totalWorksHours: number;
|
||||
let totalValueIncrease: number;
|
||||
if (params.slug === demo_id) {
|
||||
page_config = {
|
||||
properties: [],
|
||||
...searchParams,
|
||||
};
|
||||
pageName = searchParams.name;
|
||||
budget = searchParams.budget;
|
||||
co2Reduction = 0;
|
||||
totalWorksHours = 0;
|
||||
totalValueIncrease = 0;
|
||||
} else {
|
||||
page_config = Portfolios.filter((portfolio) => {
|
||||
return portfolio.id == params.slug;
|
||||
})[0];
|
||||
pageName = page_config.title;
|
||||
budget = page_config.budget;
|
||||
co2Reduction = page_config.co2Reduction as number;
|
||||
totalWorksHours = page_config.totalWorksHours as number;
|
||||
totalValueIncrease = page_config.totalValueIncrease as number;
|
||||
}
|
||||
|
||||
// TODO: Put this back in for demo
|
||||
// const properties = page_config.properties;
|
||||
|
||||
const properties: [] = [];
|
||||
|
||||
// TODO: Add the porfolio summary information on the left
|
||||
// Add an empty state for when there are no properties
|
||||
// Create populated state for when there are properties
|
||||
|
|
@ -88,11 +160,38 @@ export default async function Page({
|
|||
return (
|
||||
<>
|
||||
<div className="flex justify-center">
|
||||
<h1 className="text-3xl font-bold mt-3">Portfolio: {pageName}</h1>
|
||||
<h1 className="text-3xl font-bold mt-3 mb-4">Portfolio: {pageName}</h1>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div className="grid w-full max-w-7xl ">
|
||||
<div className="flex justify-end">
|
||||
<div className="grid grid-cols-5 gap-4 w-full max-w-7xl h-screen">
|
||||
<div className="bg-brandmidblue p-4 rounded-lg shadow text-white 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: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">
|
||||
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 Value Increase: £{totalValueIncrease}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-span-3 bg-white">
|
||||
{properties ? <EmptyPropertyState /> : "Implement me"}
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<AddNew portfolioId={demo_id} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue