implemented layout of plan card

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

@@ -1,18 +1,35 @@
 export default function EpcCard({
   epcRating,
   fullMargin = true,
+  expected = false,
 }: {
   epcRating: string;
   fullMargin: boolean;
+  expected?: boolean;
 }) {
   let marginClass = "";
   if (fullMargin) {
     marginClass = "mx-auto";
   }
 
+  let title;
+  let bgStyling;
+  if (expected) {
+    title = "Expected Energy Rating";
+    bgStyling = "bg-green-600";
+  } else {
+    title = "Energy Rating";
+    bgStyling = "bg-brandblue";
+  }
+
   return (
-    <div className="flex flex-col items-center p-8 shadow rounded-md max-w-xl  justify-start text-gray-100 bg-brandblue">
-      <div className="text-xl font-bold mb-4 text-center">Energy Rating</div>
+    <div
+      className={
+        "flex flex-col items-center p-8 shadow rounded-md max-w-xl  justify-start text-gray-100 " +
+        bgStyling
+      }
+    >
+      <div className="text-xl font-bold mb-4 text-center">{title}</div>
       <div className="text-6xl font-bold">{epcRating}</div>
     </div>
   );

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

@@ -2,7 +2,63 @@ import { Recommendation } from "@/app/db/schema/recommendations";
 import { PropertyMeta } from "@/app/db/schema/property";
 import RecommendationContainer from "@/app/components/building-passport/RecommendationContainer";
 import { getPlans, getPropertyMeta } from "../utils";
-import { sapToEpc } from "@/app/utils";
+import { formatDateTime, formatNumber, sapToEpc } from "@/app/utils";
+import EpcCard from "@/app/components/building-passport/EpcCard";
+import { ChevronRight } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/app/shadcn_components/ui/card";
+import { Button } from "@/app/shadcn_components/ui/button";
+
+function PlanCard({
+  expectedEpcRating,
+  createdAt,
+  totalEstimatedCost,
+  totalSapPoints,
+}: {
+  expectedEpcRating: string;
+  createdAt: Date;
+  totalEstimatedCost: number;
+  totalSapPoints: number;
+}) {
+  return (
+    <Card className="flex items-start">
+      <div className="flex-none w-1/5">
+        <EpcCard
+          epcRating={expectedEpcRating}
+          fullMargin={true}
+          expected={true}
+        />
+      </div>
+      <div className="flex-grow pl-4 flex flex-col justify-between">
+        <CardHeader className="flex justify-end items-center">
+          <CardTitle>
+            <Button className="bg-brandblue hover:bg-hoverblue">
+              Go to plan
+              <ChevronRight className="ml-2 h-4 w-4" />
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <CardDescription>Created: {formatDateTime(createdAt)}</CardDescription>
+        <CardContent>
+          <div className="flex justify-between mb-2">
+            <span>Total cost:</span>
+            <span>£{formatNumber(totalEstimatedCost)}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Total SAP points:</span>
+            <span>{totalSapPoints}</span>
+          </div>
+        </CardContent>
+      </div>
+    </Card>
+  );
+}
 
 export default async function Recommendations({
   params,
@@ -18,7 +74,7 @@ export default async function Recommendations({
     <div className="leading-loose tracking-wider">
       <div className="flex py-8 text-lg">Retrofit Plans</div>
 
-      <div>
+      <div className="max-w-3xl">
         {plans.map((plan, index) => {
           const totalEstimatedCost = plan.planRecommendations.reduce(
             (acc, rec) => acc + rec.recommendation.estimatedCost,
@@ -38,13 +94,13 @@ export default async function Recommendations({
           const expectedEpcRating = sapToEpc(expectedSapPoints);
 
           return (
-            <div key={index}>
-              <div>Created At: {plan.createdAt.toISOString()}</div>
-              <div>Is Default: {plan.isDefault ? "Yes" : "No"}</div>
-              <div>Total Estimated Cost: £{totalEstimatedCost}</div>
-              <div>Total SAP Points: {totalSapPoints}</div>
-              <div>Expected EP Rating: {expectedEpcRating}</div>
-            </div>
+            <PlanCard
+              key={index}
+              expectedEpcRating={expectedEpcRating}
+              createdAt={plan.createdAt}
+              totalEstimatedCost={totalEstimatedCost}
+              totalSapPoints={totalSapPoints}
+            />
           );
         })}
       </div>

src/app/utils.ts

@@ -47,7 +47,7 @@ export function sapToEpc(sapPoints: number): string {
   }
 }
 
-export function formatDateTime(dateTimeString: string): string {
+export function formatDateTime(dateTimeString: string | Date): string {
   // Create a new Date object
   const dateTime = new Date(dateTimeString);