Added property description cards

src/app/components/property/partCard.tsx

@@ -1,17 +1,48 @@
-export default function PartCard({ title, handleDetailClick }) {
+import { Dialog } from "@headlessui/react";
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+
+export default function PartCard({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
   return (
-    <div className="mt-6">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-bold">{title}</h2>
-        <button
-          className="flex items-center text-blue-500"
-          onClick={handleDetailClick}
-        >
-          <div>PENCIL ICON</div>
-          Edit
-        </button>
+    <section>
+      <div className="mt-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-bold">{title}</h2>
+          <button
+            className="flex items-center text-blue-500"
+            onClick={() => setIsDetailModalOpen(true)}
+          >
+            <PencilSquareIcon className="h-6 w-6 ml-2 " />
+            Edit
+          </button>
+        </div>
+        <p className="text-gray-600">{description}</p>
       </div>
-      <p className="text-gray-600">Short description of the card</p>
-    </div>
+      <Dialog
+        open={isDetailModalOpen}
+        onClose={() => setIsDetailModalOpen(false)}
+        className="fixed inset-0 z-10"
+      >
+        <div className="flex items-center justify-center min-h-screen">
+          <Dialog.Overlay className="fixed inset-0 bg-black opacity-50" />
+
+          <div className="bg-white rounded p-6">
+            <Dialog.Title>Card Details</Dialog.Title>
+            <Dialog.Description>
+              This is the modal content for the card details.
+            </Dialog.Description>
+
+            {/* Add your card details and actions here */}
+          </div>
+        </div>
+      </Dialog>
+    </section>
   );
 }

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

@@ -3,11 +3,12 @@
 import { useState } from "react";
 import { Dialog } from "@headlessui/react";
 import Link from "next/link";
-import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
 import { SearchData, EpcRating } from "@/types/epc";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import EditEpcTargetModal from "../../../../components/property/EditEpcTargetModal";
+import PartCard from "@/app/components/property/PartCard";
 
 const EpcDefaults: { [key in EpcRating]: EpcRating } = {
   G: "C",
@@ -19,6 +20,50 @@ const EpcDefaults: { [key in EpcRating]: EpcRating } = {
   A: "A",
 };
 
+const partConfig = [
+  {
+    title: "General",
+    descriptionData: [
+      { key: "built-form", prefix: "", suffix: "" },
+      { key: "property-type", prefix: "", suffix: "" },
+    ],
+  },
+  {
+    title: "Roof",
+    descriptionData: [{ key: "roof-description", prefix: "", suffix: "" }],
+  },
+  {
+    title: "Walls & Floors",
+    descriptionData: [
+      { key: "walls-description", prefix: "Walls: ", suffix: "" },
+      { key: "floor-description", prefix: "Floors: ", suffix: "" },
+    ],
+  },
+  {
+    title: "Windows & Doors",
+    descriptionData: [{ key: "windows-description", prefix: "", suffix: "" }],
+  },
+  {
+    title: "Heating",
+    descriptionData: [{ key: "mainheat-description", prefix: "", suffix: "" }],
+  },
+  {
+    title: "Renewables",
+    descriptionData: [
+      { key: "photo-supply", prefix: "", suffix: "" },
+      { key: "solar-water-heating-flag", prefix: "", suffix: "" },
+    ],
+  },
+  {
+    title: "Other",
+    descriptionData: [
+      { key: "lighting-description", prefix: "Lights: ", suffix: "" },
+      { key: "number-open-fireplaces", prefix: "", suffix: " open fireplaces" },
+      { key: "energy-tariff", prefix: "Energy tariff: ", suffix: "" },
+    ],
+  },
+];
+
 async function fetchData(postcode: string): Promise<SearchData> {
   // TODO - add strict typing to the api response
 
@@ -50,7 +95,6 @@ export default function PropertyPage({
   }
 
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
   const [targetEpcRating, setTargetEpcRating] = useState<EpcRating | "">("");
 
   const { data, error, isLoading } = useQuery<SearchData, Error>({
@@ -78,9 +122,6 @@ export default function PropertyPage({
     setIsEditModalOpen(true);
   };
 
-  const handleDetailClick = () => {
-    setIsDetailModalOpen(true);
-  };
   // NextJS docs recomment fetching data directly in the component that needs it,
   // even if requeting the same data in multiple components. rather than passing data between
   // components as props
@@ -112,39 +153,35 @@ export default function PropertyPage({
             <h2 className="text-lg font-bold mb-2 flex">Target EPC rating</h2>
             <div className="flex">
               <p className="flex-col">Rating: {targetEpcRating}</p>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="w-6 h-6 ml-2"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-                />
-              </svg>
+              <PencilSquareIcon className="h-6 w-6 ml-2" />
             </div>
           </div>
         </div>
 
-        <div className="mt-6">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xl font-bold">Card Title</h2>
-            <button
-              className="flex items-center text-blue-500"
-              onClick={handleDetailClick}
-            >
-              <div>PENCIL ICON</div>
-              Edit
-            </button>
-          </div>
-          <p className="text-gray-600">Short description of the card</p>
-        </div>
+        <div>
+          {partConfig.map((part, index) => {
+            const descriptionList = part.descriptionData
+              .flatMap((data) => {
+                const { key, prefix, suffix } = data;
+                const value = propertyData[key];
 
-        {/* Add more rectangular cards here */}
+                if (!value) return null;
+
+                return `${prefix}${value}${suffix}`;
+              })
+              .filter((value) => value != null);
+
+            const description = descriptionList.join(", ") || "Not present";
+
+            return (
+              <PartCard
+                key={index}
+                title={part.title}
+                description={description}
+              />
+            );
+          })}
+        </div>
 
         <EditEpcTargetModal
           isEditModalOpen={isEditModalOpen}
@@ -153,26 +190,6 @@ export default function PropertyPage({
           targetEpcRating={targetEpcRating}
           currentEpcRating={currentEpcRating}
         />
-
-        {/* Detail Modal */}
-        <Dialog
-          open={isDetailModalOpen}
-          onClose={() => setIsDetailModalOpen(false)}
-          className="fixed inset-0 z-10"
-        >
-          <div className="flex items-center justify-center min-h-screen">
-            <Dialog.Overlay className="fixed inset-0 bg-black opacity-50" />
-
-            <div className="bg-white rounded p-6">
-              <Dialog.Title>Card Details</Dialog.Title>
-              <Dialog.Description>
-                This is the modal content for the card details.
-              </Dialog.Description>
-
-              {/* Add your card details and actions here */}
-            </div>
-          </div>
-        </Dialog>
       </div>
     </section>
   );