formatting frontend for new recommendations

src/app/components/building-passport/RecommendationCard.tsx

@@ -16,6 +16,8 @@ const noSelectionStyling =
 const TitleMap = {
   wall_insulation: "Wall Insulation",
   floor_insulation: "Floor Insulation",
+  roof_insulation: "Roof Insulation",
+  mechanical_ventilation: "Mechanical Ventilation",
 };
 
 export default function RecommendationCard({

src/app/components/building-passport/RecommendationContainer.tsx

@@ -43,20 +43,29 @@ export default function RecommendationContainer({
       (rec: Recommendation) => rec.default
     ) || { estimatedCost: 0, sapPoints: 0 };
 
-  // const defaultVentiliationRecommendations = recommendations.Ventilation?.find(
-  //   (rec: ComponentRecommendation) => rec.default
-  // ) || { estimatedCost: 0, sapPoints: 0 };
+  const defaultRoofRecommendations =
+    categorizedRecommendations.roof_insulation?.find(
+      (rec: Recommendation) => rec.default
+    ) || { estimatedCost: 0, sapPoints: 0 };
+
+  const defaultVentiliationRecommendations =
+    categorizedRecommendations.mechanical_ventilation?.find(
+      (rec: Recommendation) => rec.default
+    ) || { estimatedCost: 0, sapPoints: 0 };
 
   const [costMap, setCostMap] = useState<RecommendationMetricMap>({
     wall_insulation: defaultWallsRecommendations?.estimatedCost || 0,
     floor_insulation: defaultFloorRecommendations?.estimatedCost || 0,
-    // Ventilation: defaultVentiliationRecommendations?.estimatedCost || 0,
+    roof_insulation: defaultRoofRecommendations?.estimatedCost || 0,
+    mechanical_ventilation:
+      defaultVentiliationRecommendations?.estimatedCost || 0,
   });
 
   const [sapMap, setSapMap] = useState<RecommendationMetricMap>({
     wall_insulation: defaultWallsRecommendations?.sapPoints || 0,
     floor_insulation: defaultFloorRecommendations.sapPoints || 0,
-    // Ventilation: defaultVentiliationRecommendations.sapPoints,
+    roof_insulation: defaultRoofRecommendations.sapPoints || 0,
+    mechanical_ventilation: defaultVentiliationRecommendations.sapPoints || 0,
   });
 
   const [totalEstimatedCost, setTotalEstimatedCost] = useState(

src/app/components/building-passport/RecommendationCostSummaryCard.tsx

@@ -20,7 +20,9 @@ export default function RecommendationCostSummaryCard({
           <td className="font-medium pl-4 py-2">
             Total SAP Points Improvement:
           </td>
-          <td className="pr-2">{totalSapPoints}</td>
+          <td className="pr-2">
+            {Math.round((totalSapPoints + Number.EPSILON) * 100) / 100}
+          </td>
         </tr>
       </tbody>
     </table>

src/app/db/schema/recommendations.ts

@@ -144,7 +144,11 @@ export type PlanRecommendations = InferModel<
 
 // We allow recommendation types to be a string however we'll set up a typing for it here to control
 // the types we expect
-export type RecommendationType = "wall_insulation" | "floor_insulation";
+export type RecommendationType =
+  | "wall_insulation"
+  | "floor_insulation"
+  | "roof_insulation"
+  | "mechanical_ventilation";
 
 export type UnnestedRecommendation = {
   quantity: number;

src/app/portfolio/[slug]/building-passport/[propertyId]/plans/page.tsx

@@ -10,12 +10,14 @@ function PlanCard({
   totalEstimatedCost,
   totalSapPoints,
   planId,
+  isDefault,
 }: {
   expectedEpcRating: string;
   createdAt: Date;
   totalEstimatedCost: number;
   totalSapPoints: number;
   planId: string;
+  isDefault: boolean;
 }) {
   return (
     <Card className="flex items-start">
@@ -23,7 +25,7 @@ function PlanCard({
         <EpcCard
           epcRating={expectedEpcRating}
           fullMargin={true}
-          expected={true}
+          expected={isDefault}
         />
       </div>
       <div className="flex-grow pl-4 flex flex-col justify-between">
@@ -35,7 +37,9 @@ function PlanCard({
           </div>
           <div className="flex justify-between">
             <span>Total SAP points:</span>
-            <span>{totalSapPoints}</span>
+            <span>
+              {Math.round((totalSapPoints + Number.EPSILON) * 100) / 100}
+            </span>
           </div>
         </CardContent>
       </div>
@@ -92,14 +96,17 @@ export default async function RecommendationPlans({
           const expectedEpcRating = sapToEpc(expectedSapPoints);
 
           return (
-            <PlanCard
-              key={index}
-              expectedEpcRating={expectedEpcRating}
-              createdAt={plan.createdAt}
-              totalEstimatedCost={totalEstimatedCost}
-              totalSapPoints={totalSapPoints}
-              planId={String(plan.id)}
-            />
+            <div className="mb-4">
+              <PlanCard
+                key={index}
+                expectedEpcRating={expectedEpcRating}
+                createdAt={plan.createdAt}
+                totalEstimatedCost={totalEstimatedCost}
+                totalSapPoints={totalSapPoints}
+                planId={String(plan.id)}
+                isDefault={plan.isDefault}
+              />
+            </div>
           );
         })}
       </div>

src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts

@@ -13,7 +13,7 @@ import {
 } from "@/app/db/schema/property";
 import { plan, Plan } from "@/app/db/schema/recommendations";
 import { getRating } from "@/app/utils";
-import { eq } from "drizzle-orm";
+import { eq, desc } from "drizzle-orm";
 
 type RecommendationList = {
   recommendation: Recommendation;
@@ -53,6 +53,7 @@ type PlanRelation = Plan & {
 export async function getPlans(propertyId: string): Promise<PlanRelation[]> {
   const data = await db.query.plan.findMany({
     where: eq(plan.propertyId, BigInt(propertyId)),
+    orderBy: [desc(plan.createdAt)],
     with: {
       planRecommendations: {
         columns: {},

src/types/recommendations.ts

@@ -1,6 +1,6 @@
 export interface RecommendationMetricMap {
   wall_insulation: number;
   floor_insulation: number;
-  // TODO: Implement ventilation
-  // Ventilation: number;
+  roof_insulation: number;
+  mechanical_ventilation: number;
 }