Finished set EPC rating modal

src/app/components/property/EditEpcTargetModal.tsx

@@ -9,24 +9,45 @@ export default function EditEpctargetModal({
   setIsEditModalOpen,
   setTargetEpcRating,
   targetEpcRating,
+  currentEpcRating,
 }: {
   isEditModalOpen: boolean;
   setIsEditModalOpen: Dispatch<SetStateAction<boolean>>;
-  setTargetEpcRating: Dispatch<SetStateAction<EpcRating>>;
-  targetEpcRating: EpcRating;
+  setTargetEpcRating: Dispatch<SetStateAction<EpcRating | "">>;
+  targetEpcRating: EpcRating | "";
+  currentEpcRating: EpcRating;
 }) {
   function handleEditModalClose() {
     setIsEditModalOpen(false);
   }
 
-  const [modalEpcTarget, setModalEpcTarget] =
-    useState<EpcRating>(targetEpcRating);
+  const [modalEpcTarget, setModalEpcTarget] = useState<EpcRating | "">(
+    targetEpcRating
+  );
 
   function handleModalSubmit() {
     setTargetEpcRating(modalEpcTarget);
     setIsEditModalOpen(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={isEditModalOpen} as={Fragment}>
@@ -58,22 +79,22 @@ export default function EditEpctargetModal({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-screen-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <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"
                   >
                     Set a target EPC rating
                   </Dialog.Title>
-                  <EpcDropdownMenu
-                    options={[
-                      { label: "A", value: "A" },
-                      { label: "C", value: "C" },
-                    ]}
-                    selectedOption={{ label: "C", value: "C" }}
-                    onSelectOption={(option) => setModalEpcTarget(option.value)}
-                    modalEpcTarget={modalEpcTarget}
-                  />
+                  <div className="flex justify-center">
+                    <EpcDropdownMenu
+                      options={getEpcOptions(currentEpcRating)}
+                      onSelectOption={(option) =>
+                        setModalEpcTarget(option.value)
+                      }
+                      modalEpcTarget={modalEpcTarget}
+                    />
+                  </div>
 
                   <div className="mt-4 flex justify-end gap-2">
                     <button

src/app/components/property/EpcDropDownMenu.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
-import { SearchData, SearchResult } from "@/types/epc";
+import { SearchResult } from "@/types/epc";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 
 type Option = {
   label: SearchResult["current-energy-rating"];
@@ -9,31 +10,41 @@ type Option = {
 
 type DropdownProps = {
   options: Option[];
-  selectedOption: Option | null;
   onSelectOption: (option: Option) => void;
-  modalEpcTarget: SearchResult["current-energy-rating"];
+  modalEpcTarget: SearchResult["current-energy-rating"] | "";
 };
 
 export default function EpcDropdownMenu({
   options,
-  selectedOption,
   onSelectOption,
   modalEpcTarget,
 }: DropdownProps) {
   return (
-    <Menu>
-      <Menu.Button className="inline-flex w-full justify-center rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-        {"Selected option: " + modalEpcTarget ?? ""}
+    <Menu as="div" className="relative inline-block text-left w-full">
+      <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-brandblue rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+        Selected option: {modalEpcTarget ?? ""}{" "}
+        <ChevronDownIcon
+          className="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
+          aria-hidden="true"
+        />
       </Menu.Button>
-      <Transition as={Fragment}>
-        <Menu.Items>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <Menu.Items className="origin-bottom left-0 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
           {options.map((option) => (
             <Menu.Item key={option.value}>
               {({ active }) => (
                 <button
                   className={`${
-                    active ? "bg-blue-500 text-white" : "text-gray-900"
-                  } group flex items-center w-full px-2 py-2 text-sm`}
+                    active ? "bg-brandmidblue text-white" : "text-gray-900"
+                  } group flex items-center w-full px-4 py-2 text-sm`}
                   onClick={() => onSelectOption(option)}
                 >
                   {option.label}

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

@@ -7,7 +7,7 @@ import { ArrowLeftIcon } 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 EditEpcTargetModal from "../../../../components/property/EditEpcTargetModal";
 
 const EpcDefaults: { [key in EpcRating]: EpcRating } = {
   G: "C",
@@ -51,7 +51,7 @@ export default function PropertyPage({
 
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
-  const [targetEpcRating, setTargetEpcRating] = useState<EpcRating>("C");
+  const [targetEpcRating, setTargetEpcRating] = useState<EpcRating | "">("");
 
   const { data, error, isLoading } = useQuery<SearchData, Error>({
     queryKey: ["search", postcode],
@@ -70,8 +70,8 @@ export default function PropertyPage({
   const propertyData = data.rows.filter((row) => row["lmk-key"] === lmkKey)[0];
   const currentEpcRating = propertyData["current-energy-rating"];
 
-  if (!targetEpcRating) {
-    setTargetEpcRating(EpcDefaults[currentEpcRating]);
+  if (targetEpcRating === "") {
+    setTargetEpcRating(EpcDefaults[currentEpcRating] as EpcRating);
   }
 
   const handleEditClick = () => {
@@ -135,6 +135,7 @@ export default function PropertyPage({
           setIsEditModalOpen={setIsEditModalOpen}
           setTargetEpcRating={setTargetEpcRating}
           targetEpcRating={targetEpcRating}
+          currentEpcRating={currentEpcRating}
         />
 
         {/* Detail Modal */}