Adding recommendation cards

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

@@ -0,0 +1,46 @@
+"use client";
+import { ComponentRecommendation } from "@/app/db/schema/recommendations";
+import { useState } from "react";
+import { formatNumber } from "@/app/utils";
+
+export default function RecommendationCard({
+  componentType,
+  recommendationData,
+}: {
+  componentType: string;
+  recommendationData: ComponentRecommendation[];
+}) {
+  const defaultComponent = recommendationData.find(
+    (rec: ComponentRecommendation) => rec.default
+  ) as ComponentRecommendation;
+
+  const [cardComponent, setCardComponent] =
+    useState<ComponentRecommendation>(defaultComponent);
+
+  return (
+    <div
+      className="active:shadow active:bg-brandmidblue w-full border rounded p-4 cursor-pointer text-gray-900 bg-gray-50 hover:bg-hoverblue hover:text-gray-100 transition-colors rounded-md flex flex-col justify-start"
+      onClick={() => {
+        console.log("clicked");
+        // replace with your modal opening logic
+      }}
+    >
+      <h2 className="font-bold mb-4 text-lg">{componentType}</h2>
+      <p className="mb-3">{cardComponent.description}</p>
+      <table className="w-full text-left">
+        <tbody>
+          <tr>
+            <td>Estimated Cost:</td>
+            <td>{"£" + formatNumber(cardComponent.estimatedCost)}</td>
+          </tr>
+          {cardComponent.newUValue && (
+            <tr>
+              <td>New U-Value:</td>
+              <td>{cardComponent.newUValue}</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/app/db/schema/recommendations.ts

@@ -0,0 +1,14 @@
+export interface ComponentRecommendation {
+  id: number;
+  type: string;
+  description: string;
+  estimatedCost: number;
+  default: boolean;
+  newUValue?: number;
+}
+
+export interface Recommendation {
+  Walls?: ComponentRecommendation[];
+  Ventilation?: ComponentRecommendation[];
+  Floor?: ComponentRecommendation[];
+}

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

@@ -1,7 +1,83 @@
+import {
+  Recommendation,
+  ComponentRecommendation,
+} from "@/app/db/schema/recommendations";
+import RecommendationCard from "@/app/components/building-passport/RecommendationCard";
+
 export default function Recommendations() {
+  const recommendations: Recommendation = {
+    Walls: [
+      {
+        id: 1,
+        type: "internal_wall_insulation",
+        description: "140mm Mineral Wool internal wall insulation",
+        estimatedCost: 9_450,
+        default: true,
+        newUValue: 0.29,
+      },
+      {
+        id: 2,
+        type: "internal_wall_insulation",
+        description: "30mm Vacuum Insulation Panels wall insulation",
+        estimatedCost: 10_135,
+        default: false,
+        newUValue: 0.28,
+      },
+      {
+        id: 3,
+        type: "internal_external_wall_insulation",
+        description:
+          "80mm Mineral Wool External Wall Insulation and 30mm rigid insulation internal wall insulation",
+        estimatedCost: 13_450,
+        default: false,
+        newUValue: 0.25,
+      },
+    ],
+    Ventilation: [
+      {
+        id: 4,
+        type: "mechanical_ventilation",
+        description: "Two decentralised mechanical ventilation units",
+        estimatedCost: 750,
+        default: true,
+      },
+    ],
+    Floor: [
+      {
+        id: 5,
+        type: "suspended_floor_insulation",
+        description: "70mm Rigid insulation foam boards with floor screed",
+        estimatedCost: 3_450,
+        default: true,
+        newUValue: 0.24,
+      },
+      {
+        id: 5,
+        type: "suspended_floor_insulation",
+        description: "90mm Rigid insulation foam boards with floor screed",
+        estimatedCost: 4_120,
+        default: true,
+        newUValue: 0.24,
+      },
+    ],
+  };
+
   return (
-    <div>
-      <div className="flex p-8">Recommendations</div>
+    <div className="leading-loose tracking-wider">
+      <div className="flex py-8 text-lg">Recommendations</div>
+      <div className="flex flex-col grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
+        {Object.entries(recommendations).map(
+          ([componentType, recommendationData], idx) => {
+            return (
+              <RecommendationCard
+                key={idx}
+                componentType={componentType}
+                recommendationData={recommendationData}
+              />
+            );
+          }
+        )}
+      </div>
     </div>
   );
 }