nicer formatting on plan page

src/app/components/plan/PlanPart.tsx

@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction, useState } from "react";
 import PartModal from "./PartModal";
 import { formatNumber } from "@/app/utils";
 import type { Part, PartOption } from "@/types/parts";
+import { roundToDecimalPlaces } from "@/app/utils";
 
 type PlanPartProps = {
   partIndex: number;
@@ -84,7 +85,9 @@ export default function PlanPart({
         <p>Cost: £{parts[partIndex].cost}</p>
       </div>
       <div className="flex-1 text-center">
-        <p>CO2 Saved: {parts[partIndex].co2Reduction}</p>
+        <p>
+          CO2 Saved: {roundToDecimalPlaces(parts[partIndex].co2Reduction, 2)}
+        </p>
       </div>
       <div className="flex-1 text-center">
         <p>Work Hours: {parts[partIndex].workHours}</p>

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

@@ -10,7 +10,7 @@ import PlanPart from "@/app/components/plan/PlanPart";
 import EditEpctargetModal from "@/app/components/property/EditEpcTargetModal";
 import Link from "next/link";
 import BudgetModal from "@/app/components/plan/BudgetModal";
-import { formatNumber } from "@/app/utils";
+import { formatNumber, roundToDecimalPlaces } from "@/app/utils";
 import { Part } from "@/types/parts";
 
 export default function Plan({
@@ -32,92 +32,92 @@ export default function Plan({
       part: "Roof",
       option: "option 1",
       cost: 1200,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 1.3,
+      workHours: 6,
     },
     {
       part: "Walls",
       option: "option 1",
-      cost: 900,
-      co2Reduction: 50,
+      cost: 5000,
+      co2Reduction: 0.75,
       workHours: 20,
     },
     {
       part: "Floors",
       option: "option 1",
       cost: 4300,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 1.1,
+      workHours: 8,
     },
     {
       part: "Window Glazing",
       option: "option 1",
-      cost: 6000,
-      co2Reduction: 50,
-      workHours: 20,
+      cost: 3000,
+      co2Reduction: 0.18,
+      workHours: 15,
     },
     {
       part: "Window Draughproofing",
       option: "option 1",
       cost: 10,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.05,
+      workHours: 1,
     },
     {
       part: "Door Insulation",
       option: "option 1",
       cost: 250,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.3,
+      workHours: 7,
     },
     {
       part: "Door Draughproofing",
       option: "option 1",
       cost: 70,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.1,
+      workHours: 2,
     },
     {
       part: "Heating",
       option: "option 1",
       cost: 2300,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.25,
+      workHours: 15,
     },
     {
       part: "Hot Water",
       option: "option 1",
       cost: 5290,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.15,
+      workHours: 12,
     },
     {
       part: "Solar Panels",
       option: "option 1",
       cost: 1300,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.08,
+      workHours: 24,
     },
     {
       part: "Solar Hot Water",
       option: "option 1",
       cost: 1000,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.2,
+      workHours: 10,
     },
     {
       part: "Lighting",
       option: "option 1",
       cost: 20,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.01,
+      workHours: 1,
     },
     {
       part: "Chimneys/ Open Fire Places",
       option: "option 1",
       cost: 350,
-      co2Reduction: 50,
-      workHours: 20,
+      co2Reduction: 0.15,
+      workHours: 6,
     },
   ];
 
@@ -132,7 +132,10 @@ export default function Plan({
     parts.reduce((sum, part) => sum + part.workHours, 0)
   );
   const [co2Reduction, setCo2Reduction] = useState(
-    parts.reduce((sum, part) => sum + part.co2Reduction, 0)
+    roundToDecimalPlaces(
+      parts.reduce((sum, part) => sum + part.co2Reduction, 0),
+      2
+    )
   );
 
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
@@ -218,9 +221,11 @@ export default function Plan({
                 </Link>
                 <li className="px-2 mb-2">Total cost: £{totalCost}</li>
                 <li className="px-2 mb-2">
-                  Installation Time: {workHours} hours
+                  Installation Time: {roundToDecimalPlaces(workHours, 0)} hours
+                </li>
+                <li className="px-2 mb-2">
+                  Co2 saved: {roundToDecimalPlaces(co2Reduction, 2)}t
                 </li>
-                <li className="px-2 mb-2">Co2 saved: {co2Reduction}t</li>
               </ul>
             </div>
           </div>

src/app/utils.ts

@@ -19,3 +19,11 @@ export function formatNumber(number: number): string {
 
   return formattedNumber + suffixes[suffixIndex];
 }
+
+export function roundToDecimalPlaces(
+  number: number,
+  decimalPlaces: number
+): number {
+  const factor = 10 ** decimalPlaces;
+  return Math.round(number * factor) / factor;
+}