From c572fe8a21a60096243e775eb46be3923dc51385 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Tue, 25 Jul 2023 14:02:24 +0100
Subject: [PATCH] basic UI for proprty information

---
 src/app/db/schema/property.ts                 |  9 +++
 .../building-passport/[propertyId]/layout.tsx | 11 ++-
 .../building-passport/[propertyId]/page.tsx   | 78 +++++++++++++++++--
 3 files changed, 91 insertions(+), 7 deletions(-)

diff --git a/src/app/db/schema/property.ts b/src/app/db/schema/property.ts
index 89c8c48..121d7c4 100644
--- a/src/app/db/schema/property.ts
+++ b/src/app/db/schema/property.ts
@@ -5,4 +5,13 @@ export interface PropertyMeta {
   postcode: string;
   hasPreConditionReport: boolean;
   hasRecommendations: boolean;
+  createdAt: string;
+  propertyType: string;
+  builtForm: string;
+  localAuthority: string;
+  constituency: string;
+  numberOfRooms: number;
+  yearBuilt: number;
+  tenure: string;
+  currentEpcRating: string;
 }
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx
index 6760808..85058c4 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx
@@ -18,8 +18,16 @@ export default function DashboardLayout({
     postcode: "AB1 2CD",
     hasPreConditionReport: true,
     hasRecommendations: true,
+    createdAt: "2023-07-12 11:51:31.000 +0100",
+    propertyType: "House",
+    builtForm: "Detached",
+    localAuthority: "Birmingham",
+    constituency: "Birmingham",
+    numberOfRooms: 5,
+    yearBuilt: 1990,
+    tenure: "Rented (social)",
+    currentEpcRating: "C",
   };
-
   if (!propertyId && propertyId !== 0) {
     throw Error("Invalid propertyId");
   }
@@ -40,7 +48,6 @@ export default function DashboardLayout({
         <div className="col-span-12 justify-center bg-gray-50 py-2 rounded-md">
           <Toolbar propertyMeta={propertyMeta} portfolioId={portfolioId} />
         </div>
-
         {children}
       </div>
     </section>
diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
index a9a25e8..7a70db8 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
@@ -1,10 +1,78 @@
-import { Button } from "@/app/shadcn_components/ui/button";
-import { Toolbar } from "@/app/components/building-passport/Toolbar";
+import { PropertyMeta } from "@/app/db/schema/property";
+import {
+  HomeIcon,
+  BuildingOfficeIcon,
+  CalendarIcon,
+  HomeModernIcon,
+  ClockIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/solid";
 
-export default function BuildingPassportHome() {
+function EpcCard({ epcRating }: { epcRating: string }) {
   return (
-    <div>
-      <div className="flex p-8">Basic information</div>
+    <div className="flex flex-col items-center p-8 shadow rounded-md max-w-xl mx-auto justify-start text-gray-100 bg-brandblue">
+      <div className="text-xl font-bold mb-4">Energy Rating</div>
+      <div className="text-6xl font-bold">{epcRating}</div>
+    </div>
+  );
+}
+
+export default function BuildingPassportHome() {
+  const propertyMeta: PropertyMeta = {
+    id: 1,
+    address: "123 Fake Street",
+    postcode: "AB1 2CD",
+    hasPreConditionReport: true,
+    hasRecommendations: true,
+    createdAt: "2023-07-12 11:51:31.000 +0100",
+    propertyType: "House",
+    builtForm: "Detached",
+    localAuthority: "Birmingham",
+    constituency: "Birmingham",
+    numberOfRooms: 5,
+    yearBuilt: 1990,
+    tenure: "Rented (social)",
+    currentEpcRating: "C",
+  };
+
+  return (
+    <div className="flex flex-col items-center mt-4">
+      <div className="flex justify-center mt-4 space-x-2">
+        <EpcCard epcRating={propertyMeta.currentEpcRating} />
+        <div className="flex flex-col p-8 bg-white shadow rounded-md max-w-2xl mx-auto justify-start text-gray-700">
+          <div className="text-2xl font-bold mb-4">Your property</div>
+          <div className="flex items-center space-x-2 mb-2">
+            <CalendarIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Building Passport Created At:</div>
+            <div>{propertyMeta.createdAt}</div>
+          </div>
+          <div className="flex items-center space-x-2 mb-2">
+            <HomeIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Property Type:</div>
+            <div className="text-gray-700">{propertyMeta.propertyType}</div>
+          </div>
+          <div className="flex items-center space-x-2 mb-2">
+            <BuildingOfficeIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Built Form:</div>
+            <div className="text-gray-700">{propertyMeta.builtForm}</div>
+          </div>
+          <div className="flex items-center space-x-2 mb-2">
+            <ClockIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Year Built:</div>
+            <div className="text-gray-700">{propertyMeta.yearBuilt}</div>
+          </div>
+          <div className="flex items-center space-x-2 mb-2">
+            <UserGroupIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Tenure:</div>
+            <div className="text-gray-700">{propertyMeta.tenure}</div>
+          </div>
+          <div className="flex items-center space-x-2 mb-2">
+            <HomeModernIcon className="h-5 w-5 text-gray-400" />
+            <div className="text-gray-500">Number of Rooms:</div>
+            <div className="text-gray-700">{propertyMeta.numberOfRooms}</div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }