Added basic layout for property page

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@headlessui/react": "^1.7.14",
+        "@heroicons/react": "^2.0.18",
         "@types/node": "20.2.3",
         "@types/react": "18.2.7",
         "@types/react-dom": "18.2.4",
@@ -115,6 +116,14 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.0.18",
     "@types/node": "20.2.3",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",

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

@@ -1,7 +1,120 @@
-export default function () {
+"use client";
+
+import { useState } from "react";
+import { Dialog } from "@headlessui/react";
+import Link from "next/link";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+
+const PropertyPage = ({ params }: { params: { slug: string } }) => {
+  const portfolioId = params.slug;
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+
+  const handleEditClick = () => {
+    setIsEditModalOpen(true);
+  };
+
+  const handleDetailClick = () => {
+    setIsDetailModalOpen(true);
+  };
+
   return (
-    <>
-      <h1> Hello world</h1>
-    </>
+    <section>
+      <div className="h-2"></div>
+      {/* <Link
+        href={`/portfolio/${portfolioId}`}
+        className="mt-10 ml-2 bg-brandtan hover:bg-hovertan text-white px-4 py-1 rounded transition-colors duration-200"
+      >
+        <div>
+          <ArrowLeftIcon className="w-5 h-5 mr-1" />
+          Back to portfolio
+        </div>
+      </Link> */}
+      <Link href={`/portfolio/${portfolioId}`}>
+        <div className="ml-2 px-4 py-1 inline-flex items-center bg-brandtan hover:bg-hovertan text-white rounded transition-colors duration-200 cursor-pointer">
+          <ArrowLeftIcon className="w-5 h-5 mr-1" />
+          Back to portfolio
+        </div>
+      </Link>
+      <div className="max-w-3xl mx-auto p-6">
+        <h1 className="text-2xl text-center font-bold mb-4">Your Property</h1>
+
+        <p className="text-center mb-4">123 Main St, City, State</p>
+
+        <div className="flex space-x-4">
+          <div className="flex-1 border p-4">
+            <h2 className="text-lg font-bold mb-2">Current EPC rating</h2>
+            <p>Rating: A</p>
+          </div>
+
+          <div
+            className="flex-1 border p-4 cursor-pointer"
+            onClick={handleEditClick}
+          >
+            <h2 className="text-lg font-bold mb-2">Target EPC rating</h2>
+            <p>Rating: B</p>
+          </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>
+
+        {/* Add more rectangular cards here */}
+
+        {/* Edit Modal */}
+        <Dialog
+          open={isEditModalOpen}
+          onClose={() => setIsEditModalOpen(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>Edit Target EPC Rating</Dialog.Title>
+              <Dialog.Description>
+                This is the modal content for editing the target EPC rating.
+              </Dialog.Description>
+
+              {/* Add your form inputs and actions here */}
+            </div>
+          </div>
+        </Dialog>
+
+        {/* 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>
   );
-}
+};
+
+export default PropertyPage;