added co2 reduction functionality

src/app/components/plan/PartModal.tsx

@@ -17,6 +17,7 @@ type PartModalProps = {
   partIndex: number;
   setTotalCost: Dispatch<SetStateAction<string>>;
   setWorkHours: Dispatch<SetStateAction<number>>;
+  setCo2Reduction: Dispatch<SetStateAction<number>>;
 };
 
 export default function PartModal({
@@ -31,6 +32,7 @@ export default function PartModal({
   partIndex,
   setTotalCost,
   setWorkHours,
+  setCo2Reduction,
 }: PartModalProps) {
   function handleModalSubmit() {
     // Right now the dropdown is setting the state on the selected option so we might not need
@@ -39,9 +41,14 @@ export default function PartModal({
     parts[partIndex].cost = costInput;
     setTotalCost(formatNumber(parts.reduce((sum, part) => sum + part.cost, 0)));
 
-    // recalculata total hours
+    // recalculate total hours
     parts[partIndex].workHours = hoursInput;
     setWorkHours(parts.reduce((sum, part) => sum + part.workHours, 0));
+
+    // recalculate total co2 reduction
+    parts[partIndex].co2Reduction = co2ReductionInput;
+    setCo2Reduction(parts.reduce((sum, part) => sum + part.co2Reduction, 0));
+
     setParts(parts);
     setIsOpen(false);
   }
@@ -51,6 +58,9 @@ export default function PartModal({
   const [hoursInput, setHoursInput] = useState<number>(
     parts[partIndex].workHours
   );
+  const [co2ReductionInput, setCo2ReductionInput] = useState<number>(
+    parts[partIndex].co2Reduction
+  );
 
   return (
     <>
@@ -101,6 +111,7 @@ export default function PartModal({
                         setOptionInput(option.part);
                         setCostInput(option.cost);
                         setHoursInput(option.workHours);
+                        setCo2ReductionInput(option.co2Reduction);
                       }}
                       selectedOption={optionInput}
                     />

src/app/components/plan/PlanPart.tsx

@@ -13,6 +13,7 @@ type PlanPartProps = {
   setParts: Dispatch<SetStateAction<Part[]>>;
   setTotalCost: Dispatch<SetStateAction<string>>;
   setWorkHours: Dispatch<SetStateAction<number>>;
+  setCo2Reduction: Dispatch<SetStateAction<number>>;
 };
 
 export default function PlanPart({
@@ -25,9 +26,9 @@ export default function PlanPart({
   setParts,
   setTotalCost,
   setWorkHours,
+  setCo2Reduction,
 }: PlanPartProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [partCost, setPartCost] = useState(parts[partIndex].cost);
 
   // These are temporary options for the demo
   const options: PartOption[] = [
@@ -83,7 +84,7 @@ export default function PlanPart({
         <p>Cost: £{parts[partIndex].cost}</p>
       </div>
       <div className="flex-1 text-center">
-        <p>CO2 Reduction: {parts[partIndex].co2Reduction}</p>
+        <p>CO2 Saved: {parts[partIndex].co2Reduction}</p>
       </div>
       <div className="flex-1 text-center">
         <p>Work Hours: {parts[partIndex].workHours}</p>
@@ -100,6 +101,7 @@ export default function PlanPart({
         partIndex={partIndex}
         setTotalCost={setTotalCost}
         setWorkHours={setWorkHours}
+        setCo2Reduction={setCo2Reduction}
       />
     </div>
   );

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

@@ -131,6 +131,9 @@ export default function Plan({
   const [workHours, setWorkHours] = useState(
     parts.reduce((sum, part) => sum + part.workHours, 0)
   );
+  const [co2Reduction, setCo2Reduction] = useState(
+    parts.reduce((sum, part) => sum + part.co2Reduction, 0)
+  );
 
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isBudgetModalOpen, setIsBudgetModalOpen] = useState(false);
@@ -180,6 +183,7 @@ export default function Plan({
                   setParts={setParts}
                   setTotalCost={setTotalCost}
                   setWorkHours={setWorkHours}
+                  setCo2Reduction={setCo2Reduction}
                 />
               );
             })}
@@ -216,6 +220,7 @@ export default function Plan({
                 <li className="px-2 mb-2">
                   Installation Time: {workHours} hours
                 </li>
+                <li className="px-2 mb-2">Co2 saved: {co2Reduction}t</li>
               </ul>
             </div>
           </div>

src/types/parts.ts

@@ -0,0 +1,10 @@
+type Part = {
+  part: string;
+  cost: number;
+  co2Reduction: number;
+  workHours: number;
+};
+
+type PartOption = { label: string } & Part;
+
+export type { Part, PartOption };