added modal functionality for each card

src/app/components/property/PartModal.tsx

@@ -0,0 +1,107 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Dispatch, Fragment, SetStateAction, useState } from "react";
+import { TanButton } from "../button";
+import { EpcRating } from "@/types/epc";
+
+export default function PartModal({
+  isOpen,
+  setIsOpen,
+  title,
+  targetEpcRating,
+  currentEpcRating,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  title: string;
+  targetEpcRating: EpcRating | "";
+  currentEpcRating: EpcRating;
+}) {
+  function handleEditModalClose() {
+    setIsOpen(false);
+  }
+
+  const [modalEpcTarget, setModalEpcTarget] = useState<EpcRating | "">(
+    targetEpcRating
+  );
+
+  function handleModalSubmit() {
+    setIsOpen(false);
+  }
+
+  function getEpcOptions(
+    epc: EpcRating
+  ): { label: EpcRating; value: EpcRating }[] {
+    const alphabet = "ABCDEFG";
+    const index = alphabet.indexOf(epc.toUpperCase());
+
+    if (index === -1) {
+      throw new Error("Invalid letter input");
+    }
+
+    const epcOptions = alphabet.slice(0, index + 1).split("");
+
+    return epcOptions.map((opt) => ({
+      label: opt as EpcRating,
+      value: opt as EpcRating,
+    }));
+  }
+
+  return (
+    <>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog
+          as="div"
+          className="relative z-10"
+          onClose={() => setIsOpen(false)}
+        >
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-1/2 max-w-screen-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-brandblue mb-3"
+                  >
+                    {title}
+                  </Dialog.Title>
+                  <div className="flex justify-center"></div>
+
+                  <div className="mt-4 flex justify-end gap-2">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={() => setIsOpen(false)}
+                    >
+                      Cancel
+                    </button>
+                    <TanButton label={"Save"} onClick={handleModalSubmit} />
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}

src/app/components/property/partCard.tsx

@@ -1,6 +1,7 @@
 import { Dialog } from "@headlessui/react";
 import { PencilSquareIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
+import PartModal from "./PartModal";
 
 export default function PartCard({
   title,
@@ -10,6 +11,7 @@ export default function PartCard({
   description: string;
 }) {
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
+
   return (
     <section>
       <div className="mt-6">
@@ -25,24 +27,13 @@ export default function PartCard({
         </div>
         <p className="text-gray-600">{description}</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>
+      <PartModal
+        isOpen={isDetailModalOpen}
+        setIsOpen={setIsDetailModalOpen}
+        title={title}
+        targetEpcRating="C"
+        currentEpcRating="D"
+      />
     </section>
   );
 }