junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-08 11:37:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added epc target popup on summary box in plan

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-05-31 09:51:49 +01:00
parent bb1eff91d0
commit f3793ad020
2 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/plan/PlanPart.tsx
View file

@ -22,7 +22,7 @@ export default function PlanPart({
{ label: "option 2", value: "option 2" },
{ label: "option 3", value: "option 3" },
{ label: "option 4", value: "option 4" },
{ label: "option 5", value: "option 5" },
{ label: "option5", value: "option 5" },
];
const [selectedOption, setSelectedOption] = useState(options[0].value);
@ -37,7 +37,7 @@ export default function PlanPart({
<h2 className="flex-1 text-lg font-bold mb-2 text-left">{title}</h2>
<div>{selectedOption}</div>
<div className="flex-1 text-center">
<p>Cost: {cost}</p>
<p>Cost: £{cost}</p>
</div>
<div className="flex-1 text-center">
<p>CO2 Emissions: {co2Emissions}</p>

45
src/app/portfolio/[slug]/property/[lmkKey]/plan/page.tsx
View file

@ -1,12 +1,13 @@
"use client";
import { SearchData } from "@/types/epc";
import { EpcRating, SearchData } from "@/types/epc";
import { useQuery } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { fetchData } from "../utils";
import { useState } from "react";
import { PencilSquareIcon } from "@heroicons/react/24/outline";
import PlanPart from "@/app/components/plan/PlanPart";
import EditEpctargetModal from "@/app/components/property/EditEpcTargetModal";
export default function Plan({
params,
@ -20,12 +21,8 @@ export default function Plan({
const portfolioId = params.slug;
const lmkKey = params.lmkKey;
const postcode = searchParams.postcode;
const targetEpcRating = searchParams.targetEpcRating ?? "C";
const [budget, setBudget] = useState("Not set");
const [totalCost, setTotalCost] = useState("Not set");
const [installTime, setInstallTime] = useState("Not set");
// Temp config for the demo
const partsConfig = [
{ part: "Roof", cost: 1000, co2Emissions: 50, workHours: 20 },
{ part: "Walls", cost: 1000, co2Emissions: 50, workHours: 20 },
@ -57,6 +54,19 @@ export default function Plan({
},
];
const totalWorkHours = partsConfig.reduce(
(sum, part) => sum + part.workHours,
0
);
const [budget, setBudget] = useState("Not set");
const [totalCost, setTotalCost] = useState("Not set");
const [installTime, setInstallTime] = useState(totalWorkHours);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [targetEpcRating, setTargetEpcRating] = useState<EpcRating | "">(
(searchParams.targetEpcRating as EpcRating) ?? "C"
);
if (postcode === undefined) {
router.push(`/portfolio/${portfolioId}/error`);
}
@ -101,15 +111,19 @@ export default function Plan({
<div className="bg-brandmidblue p-4 rounded-lg shadow text-white ">
<h2 className="text-lg font-bold mb-4">Summary</h2>
<ul>
<li className="mb-2 mb-2 flex items-center cursor-pointer">
<li
onClick={() => setIsEditModalOpen(true)}
className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200"
>
Target EPC: {targetEpcRating}
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
<li className="mb-2">Total cost: {totalCost}</li>
<li className="mb-2">Budget: {budget}</li>
<li className="mb-2">Installation Time: {installTime}</li>
{/* flex items-center text-brandmidblue hover:text-brandblue transition-colors duration-200 cursor-pointer */}
<li className="mb-2 flex items-center cursor-pointer">
<li className="px-2 mb-2">Total cost: {totalCost}</li>
<li className="px-2 mb-2">Budget: {budget}</li>
<li className="px-2 mb-2">
Installation Time: {installTime} hours
</li>
<li className="px-2 mb-2 flex items-center cursor-pointer hover:bg-brandblue hover:rounded-md transition-colors duration-200">
Edit Property Details
<PencilSquareIcon className="h-6 w-6 ml-2" />
</li>
@ -118,6 +132,13 @@ export default function Plan({
</div>
</div>
</div>
<EditEpctargetModal
isEditModalOpen={isEditModalOpen}
setIsEditModalOpen={setIsEditModalOpen}
setTargetEpcRating={setTargetEpcRating}
targetEpcRating={targetEpcRating}
currentEpcRating={propertyData["current-energy-rating"]}
/>
</section>
);
}