mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
Completed demo for now
This commit is contained in:
Khalim Conn-Kowlessar
parent
a89ae6155b
commit
9fd6720053
3 changed files with 261 additions and 27 deletions
|
|
@ -17,8 +17,8 @@ function ProfileDropDown() {
|
|||
{session.user.image ? (
|
||||
<img
|
||||
src={session.user.image}
|
||||
alt={session.user.image}
|
||||
className="inline h-12 w-12 rounded-full "
|
||||
alt={"Profile"}
|
||||
className="inline h-12 w-12 rounded-full text-white"
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-block h-12 w-12 overflow-hidden rounded-full bg-stone-100">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,32 @@
|
|||
import { PencilSquareIcon, HomeIcon } from "@heroicons/react/24/outline";
|
||||
import AddNew from "../../components/portfolio/AddNew";
|
||||
import { formatNumber } from "@/app/utils";
|
||||
import Link from "next/link";
|
||||
import { SearchData } from "@/types/epc";
|
||||
|
||||
function generateProperties(value: number, suffix: string) {
|
||||
const length = Math.ceil(value / 30000);
|
||||
|
||||
return Array.from({ length }, (_, index) => ({
|
||||
id: `${index + 1}-k290f1ee-6c54-4b01-90e6-d701748f0851-${suffix}`,
|
||||
lmkKey: "demo-property",
|
||||
address: `${index + 1} Test Street`,
|
||||
postcode: "TE1 1ST",
|
||||
cost: 30000,
|
||||
co2Reduction: 9 / 5,
|
||||
targetEpcRating: "C",
|
||||
}));
|
||||
}
|
||||
|
||||
type Property = {
|
||||
id: string;
|
||||
address: string;
|
||||
postcode: string;
|
||||
cost: number;
|
||||
co2Reduction: number;
|
||||
lmkKey: string;
|
||||
targetEpcRating: string;
|
||||
};
|
||||
|
||||
function EmptyPropertyState() {
|
||||
return (
|
||||
|
|
@ -14,6 +41,48 @@ function EmptyPropertyState() {
|
|||
);
|
||||
}
|
||||
|
||||
function Propertycards({
|
||||
properties,
|
||||
portfolioId,
|
||||
}: {
|
||||
properties: Property[];
|
||||
portfolioId: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<ul className="w-full">
|
||||
{properties.map((property) => (
|
||||
<li
|
||||
key={property.id}
|
||||
className="border-l-4 border-l-brandmidblue bg-white rounded-lg shadow mb-4 p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center ">
|
||||
<div>
|
||||
<HomeIcon className="h-10 w-10 mx-auto text-gray-200" />
|
||||
</div>
|
||||
<div className="ml-4 ">
|
||||
<h3 className="text-xl font-medium">{property.address}</h3>
|
||||
<p className="text-gray-600">{property.postcode}</p>
|
||||
</div>
|
||||
<div className="ml-10">Cost: £{formatNumber(property.cost)}</div>
|
||||
<div className="ml-4">
|
||||
Co2 Savings (t): {property.co2Reduction}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/portfolio/${portfolioId}/property/${property.lmkKey}/plan?postcode=${property.postcode}&targetEpcRating=${property.targetEpcRating}`}
|
||||
className="bg-brandtan text-white rounded-lg px-4 py-2 hover:bg-hovertan transition-colors duration-200"
|
||||
>
|
||||
Go to Plan
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
searchParams,
|
||||
|
|
@ -26,97 +95,116 @@ export default async function Page({
|
|||
const Portfolios = [
|
||||
{
|
||||
id: "f290f1ee-6c54-4b01-90e6-d701748f0851",
|
||||
properties: [],
|
||||
properties: [] as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0851",
|
||||
title: "Portfolio 1",
|
||||
budget: 500000,
|
||||
properties: [],
|
||||
properties: generateProperties(500000, "1") as Property[],
|
||||
co2Reduction: 5.4,
|
||||
totalWorksHours: 45,
|
||||
totalValueIncrease: 500000 * 1.2,
|
||||
rentalYieldIncrease: 500000 * 0.002,
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0852",
|
||||
title: "Portfolio 2",
|
||||
budget: 150000,
|
||||
properties: [],
|
||||
cost: 150000,
|
||||
co2Reduction: 9.0,
|
||||
totalWorksHours: 30,
|
||||
totalValueIncrease: 150000 * 1.2,
|
||||
rentalYieldIncrease: 150000 * 0.002,
|
||||
properties: generateProperties(30000, "2") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0853",
|
||||
title: "Portfolio 3",
|
||||
budget: 1000000,
|
||||
properties: [],
|
||||
cost: 1000000,
|
||||
co2Reduction: 15.4,
|
||||
totalWorksHours: 100,
|
||||
totalValueIncrease: 1000000 * 1.2,
|
||||
rentalYieldIncrease: 1000000 * 0.002,
|
||||
properties: generateProperties(1000000, "3") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0854",
|
||||
title: "Portfolio 4",
|
||||
budget: 2000000,
|
||||
properties: [],
|
||||
cost: 2000000,
|
||||
co2Reduction: 3.8,
|
||||
totalWorksHours: 150,
|
||||
totalValueIncrease: 2000000 * 1.2,
|
||||
rentalYieldIncrease: 2000000 * 0.002,
|
||||
properties: generateProperties(2000000, "4") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0855",
|
||||
title: "Portfolio 5",
|
||||
budget: 25000,
|
||||
properties: [],
|
||||
budget: 35000,
|
||||
cost: 35000,
|
||||
co2Reduction: 1.9,
|
||||
totalWorksHours: 15,
|
||||
totalValueIncrease: 25000 * 1.2,
|
||||
totalValueIncrease: 35000 * 1.2,
|
||||
rentalYieldIncrease: 35000 * 0.002,
|
||||
properties: generateProperties(35000, "5") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0856",
|
||||
title: "Portfolio 6",
|
||||
budget: 10000,
|
||||
properties: [],
|
||||
budget: 30000,
|
||||
cost: 30000,
|
||||
co2Reduction: 1.4,
|
||||
totalWorksHours: 10,
|
||||
totalValueIncrease: 10000 * 1.2,
|
||||
totalValueIncrease: 30000 * 1.2,
|
||||
rentalYieldIncrease: 30000 * 0.002,
|
||||
properties: generateProperties(10000, "6") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0857",
|
||||
title: "Portfolio 7",
|
||||
budget: 33000,
|
||||
properties: [],
|
||||
cost: 33000,
|
||||
co2Reduction: 10.4,
|
||||
totalWorksHours: 25,
|
||||
totalValueIncrease: 33000 * 1.2,
|
||||
rentalYieldIncrease: 33000 * 0.002,
|
||||
properties: generateProperties(33000, "7") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0858",
|
||||
title: "Portfolio 8",
|
||||
budget: 670000,
|
||||
properties: [],
|
||||
cost: 670000,
|
||||
co2Reduction: 4.5,
|
||||
totalWorksHours: 65,
|
||||
totalValueIncrease: 670000 * 1.2,
|
||||
rentalYieldIncrease: 670000 * 0.002,
|
||||
properties: generateProperties(670000, "8") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0859",
|
||||
title: "Portfolio 9",
|
||||
budget: 240000,
|
||||
properties: [],
|
||||
cost: 240000,
|
||||
co2Reduction: 8.4,
|
||||
totalWorksHours: 40,
|
||||
totalValueIncrease: 240000 * 1.2,
|
||||
rentalYieldIncrease: 240000 * 0.002,
|
||||
properties: generateProperties(240000, "9") as Property[],
|
||||
},
|
||||
{
|
||||
id: "d290f1ee-6c54-4b01-90e6-d701748f0860",
|
||||
title: "Portfolio 10",
|
||||
budget: 93000,
|
||||
properties: [],
|
||||
cost: 93000,
|
||||
co2Reduction: 5.4,
|
||||
totalWorksHours: 18,
|
||||
totalValueIncrease: 93000 * 1.2,
|
||||
rentalYieldIncrease: 93000 * 0.002,
|
||||
properties: generateProperties(93000, "10") as Property[],
|
||||
},
|
||||
];
|
||||
const demo_id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
|
||||
|
|
@ -127,9 +215,11 @@ export default async function Page({
|
|||
let co2Reduction: number;
|
||||
let totalWorksHours: number;
|
||||
let totalValueIncrease: number;
|
||||
let rentalYieldIncrease: number;
|
||||
let totalCost: number;
|
||||
if (params.slug === demo_id) {
|
||||
page_config = {
|
||||
properties: [],
|
||||
properties: [] as Property[],
|
||||
...searchParams,
|
||||
};
|
||||
pageName = searchParams.name;
|
||||
|
|
@ -137,6 +227,8 @@ export default async function Page({
|
|||
co2Reduction = 0;
|
||||
totalWorksHours = 0;
|
||||
totalValueIncrease = 0;
|
||||
rentalYieldIncrease = 0;
|
||||
totalCost = 0;
|
||||
} else {
|
||||
page_config = Portfolios.filter((portfolio) => {
|
||||
return portfolio.id == params.slug;
|
||||
|
|
@ -146,12 +238,12 @@ export default async function Page({
|
|||
co2Reduction = page_config.co2Reduction as number;
|
||||
totalWorksHours = page_config.totalWorksHours as number;
|
||||
totalValueIncrease = page_config.totalValueIncrease as number;
|
||||
rentalYieldIncrease = page_config.rentalYieldIncrease as number;
|
||||
totalCost = page_config.cost as number;
|
||||
}
|
||||
|
||||
// TODO: Put this back in for demo
|
||||
// const properties = page_config.properties;
|
||||
|
||||
const properties: [] = [];
|
||||
const properties = page_config.properties;
|
||||
|
||||
// TODO: Add the porfolio summary information on the left
|
||||
// Add an empty state for when there are no properties
|
||||
|
|
@ -171,6 +263,7 @@ export default async function Page({
|
|||
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>
|
||||
|
|
@ -184,12 +277,19 @@ export default async function Page({
|
|||
Total Value Increase: £{totalValueIncrease}
|
||||
</li>
|
||||
<li className="px-2 mb-2">
|
||||
Annual Value Increase: £{totalValueIncrease}
|
||||
Annual rental yield Increase: £{rentalYieldIncrease}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-span-3 bg-white">
|
||||
{properties ? <EmptyPropertyState /> : "Implement me"}
|
||||
{properties.length === 0 ? (
|
||||
<EmptyPropertyState />
|
||||
) : (
|
||||
<Propertycards
|
||||
properties={properties}
|
||||
portfolioId={params.slug}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-span-1 flex justify-center">
|
||||
<AddNew portfolioId={demo_id} />
|
||||
|
|
|
|||
|
|
@ -121,6 +121,19 @@ export default function Plan({
|
|||
},
|
||||
];
|
||||
|
||||
const demo_ids = [
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0851",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0852",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0853",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0854",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0855",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0856",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0857",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0858",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0859",
|
||||
"d290f1ee-6c54-4b01-90e6-d701748f0860",
|
||||
];
|
||||
|
||||
// Manage state of the selected parts - start with partsConfig
|
||||
const [parts, setParts] = useState<Part[]>(partsConfig);
|
||||
|
||||
|
|
@ -148,18 +161,139 @@ export default function Plan({
|
|||
router.push(`/portfolio/${portfolioId}/error`);
|
||||
}
|
||||
|
||||
const { data, error, isLoading } = useQuery<SearchData, Error>({
|
||||
// For the demo, we want to disable this query if the portfolioId is in the demo_ids array
|
||||
const {
|
||||
data: dataResponse,
|
||||
error,
|
||||
isLoading,
|
||||
} = useQuery<SearchData, Error>({
|
||||
queryKey: ["search", postcode],
|
||||
queryFn: async () => fetchData(postcode as string),
|
||||
enabled: !demo_ids.includes(portfolioId),
|
||||
});
|
||||
|
||||
// We'll be able to delete this after the demo
|
||||
let isLoadingCheck;
|
||||
let errorCheck;
|
||||
let data: SearchData;
|
||||
if (demo_ids.includes(portfolioId)) {
|
||||
// For the demo, if the demo_ids include the portfolio id we're looking at, we don't pull the property data
|
||||
// we use a pre-canned config
|
||||
isLoadingCheck = false;
|
||||
errorCheck = null;
|
||||
data = {
|
||||
"columns-names": [],
|
||||
rows: [
|
||||
{
|
||||
"low-energy-fixed-light-count": "0",
|
||||
address: "demo address",
|
||||
"uprn-source": "demo",
|
||||
"floor-height": "demo",
|
||||
"heating-cost-potential": "demo",
|
||||
"unheated-corridor-length": "demo",
|
||||
"hot-water-cost-potential": "demo",
|
||||
"construction-age-band": "demo",
|
||||
"potential-energy-rating": "demo",
|
||||
"mainheat-energy-eff": "demo",
|
||||
"windows-env-eff": "demo",
|
||||
"lighting-energy-eff": "demo",
|
||||
"environment-impact-potential": "demo",
|
||||
"glazed-type": "demo",
|
||||
"heating-cost-current": "demo",
|
||||
address3: "demo",
|
||||
"mainheatcont-description": "demo",
|
||||
"sheating-energy-eff": "demo",
|
||||
"property-type": "demo",
|
||||
"local-authority-label": "demo",
|
||||
"fixed-lighting-outlets-count": "demo",
|
||||
"energy-tariff": "demo",
|
||||
"mechanical-ventilation": "demo",
|
||||
"hot-water-cost-current": "demo",
|
||||
county: "demo",
|
||||
postcode: "demo",
|
||||
"solar-water-heating-flag": "demo",
|
||||
constituency: "demo",
|
||||
"co2-emissions-potential": "demo",
|
||||
"number-heated-rooms": "demo",
|
||||
"floor-description": "demo",
|
||||
"energy-consumption-potential": "demo",
|
||||
"local-authority": "demo",
|
||||
"built-form": "demo",
|
||||
"number-open-fireplaces": "demo",
|
||||
"windows-description": "demo",
|
||||
"glazed-area": "demo",
|
||||
"inspection-date": "demo",
|
||||
"mains-gas-flag": "demo",
|
||||
"co2-emiss-curr-per-floor-area": "demo",
|
||||
address1: "demo",
|
||||
"heat-loss-corridor": "demo",
|
||||
"flat-storey-count": "demo",
|
||||
"constituency-label": "demo",
|
||||
"roof-energy-eff": "demo",
|
||||
"total-floor-area": "demo",
|
||||
"building-reference-number": "demo",
|
||||
"environment-impact-current": "demo",
|
||||
"co2-emissions-current": "demo",
|
||||
"roof-description": "demo",
|
||||
"floor-energy-eff": "demo",
|
||||
"number-habitable-rooms": "demo",
|
||||
address2: "demo",
|
||||
"hot-water-env-eff": "demo",
|
||||
posttown: "demo",
|
||||
"mainheatc-energy-eff": "demo",
|
||||
"main-fuel": "demo",
|
||||
"lighting-env-eff": "demo",
|
||||
"windows-energy-eff": "demo",
|
||||
"floor-env-eff": "demo",
|
||||
"sheating-env-eff": "demo",
|
||||
"lighting-description": "demo",
|
||||
"roof-env-eff": "demo",
|
||||
"walls-energy-eff": "demo",
|
||||
"photo-supply": "demo",
|
||||
"lighting-cost-potential": "demo",
|
||||
"mainheat-env-eff": "demo",
|
||||
"multi-glaze-proportion": "demo",
|
||||
"main-heating-controls": "demo",
|
||||
"lodgement-datetime": "demo",
|
||||
"flat-top-storey": "demo",
|
||||
"current-energy-rating": "D",
|
||||
"secondheat-description": "demo",
|
||||
"walls-env-eff": "demo",
|
||||
"transaction-type": "demo",
|
||||
uprn: "demo",
|
||||
"current-energy-efficiency": "demo",
|
||||
"energy-consumption-current": "demo",
|
||||
"mainheat-description": "demo",
|
||||
"lighting-cost-current": "demo",
|
||||
"lodgement-date": "demo",
|
||||
"extension-count": "demo",
|
||||
"mainheatc-env-eff": "demo",
|
||||
"lmk-key": lmkKey,
|
||||
"wind-turbine-count": "demo",
|
||||
tenure: "demo",
|
||||
"floor-level": "demo",
|
||||
"potential-energy-efficiency": "demo",
|
||||
"hot-water-energy-eff": "demo",
|
||||
"low-energy-lighting": "demo",
|
||||
"walls-description": "demo",
|
||||
"hotwater-description": "demo",
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
isLoadingCheck = isLoading;
|
||||
errorCheck = error;
|
||||
data = dataResponse as SearchData;
|
||||
}
|
||||
|
||||
// TODO: Add a loading state and error handling
|
||||
if (isLoading) {
|
||||
if (isLoadingCheck) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error fetching data: {error.message}</div>;
|
||||
console.log(errorCheck);
|
||||
if (errorCheck) {
|
||||
return <div>Error fetching data: {errorCheck.message}</div>;
|
||||
}
|
||||
|
||||
const propertyData = data.rows.filter((row) => row["lmk-key"] === lmkKey)[0];
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue