added all the inputs and state variables for the remote assesment modal

src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx

@@ -1,18 +1,117 @@
 "use client";
 
-import { Dialog, Transition } from "@headlessui/react";
+import { Dialog, Transition, Menu } from "@headlessui/react";
 import { useState, Fragment } from "react";
 import { useForm } from "react-hook-form";
-import {
-    Form,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-    FormField,
-  } from "@/app/shadcn_components/ui/form";
 import { Input } from "@/app/shadcn_components/ui/input";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Float } from "@headlessui-float/react";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+
+type Option = {
+  label: string;
+  value: string;
+  disabled: boolean;
+};
+
+type DropdownProps = {
+  options: Option[];
+  selectedOption: string;
+  onSelectOption: (option: Option) => void;
+};
+
+const selecthousingTypeOptions = [
+  {
+    label: "Social",
+    value: "Social",
+    disabled: false,
+  },
+  {
+    label: "Private",
+    value: "Private",
+    disabled: false,
+  },
+];
+
+const selectGoalOptions = [
+  {
+    label: "Increase EPC",
+    value: "Increase EPC",
+    disabled: false,
+  },
+  {
+    label: "Reduce energy consumption",
+    value: "Reduce energy consumption",
+    disabled: false,
+  },
+];
+
+const goalValueOptions = [
+  {
+    label: "C",
+    value: "C",
+    disabled: false,
+  },
+  {
+    label: "B",
+    value: "B",
+    disabled: false,
+  },
+  {
+    label: "A",
+    value: "A",
+    disabled: false,
+  },
+];
+
+export function SelectDropdown({
+  options,
+  selectedOption,
+  onSelectOption,
+}: DropdownProps) {
+  return (
+    <Menu as="div" className="relative inline-block text-left w-full">
+      <Float>
+        <Menu.Button className="inline-flex justify-center w-1/2 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">
+          {selectedOption || "Select an option"}
+          <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}
+          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-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+            {options.map((option) => (
+              <Menu.Item key={option.value} disabled={option.disabled}>
+                {({ active }) => (
+                  <button
+                    className={`${
+                      active
+                        ? "bg-brandmidblue text-white w-full"
+                        : "text-gray-900 w-full"
+                    } group flex items-center  px-4 py-2 text-sm `}
+                    onClick={() => onSelectOption(option)}
+                  >
+                    {option.label}
+                  </button>
+                )}
+              </Menu.Item>
+            ))}
+          </Menu.Items>
+        </Transition>
+      </Float>
+    </Menu>
+  );
+}
+
 
 export default function RemoteAssesmentModal({
   portfolioId,
@@ -29,10 +128,29 @@ export default function RemoteAssesmentModal({
   const [goalValue, setGoalValue] = useState<string>("");
   const [addressLineOne, setAddressLineOne] = useState<string>("");
   const [postcode, setPostcode] = useState<string>("");
-  const [buttonDisabled, setButtonDisabled] = useState(true);
+  const [uprn, setUprn] = useState<number | string | null>("");
+  const [valuation, setValuation] = useState<number | string | null>("");
+  // const [buttonDisabled, setButtonDisabled] = useState(true);
 
-  const form = useForm();
+  function handleScenarioChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setScenario(event.target.value);
+  }
 
+  function handleAddressLineOneChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setAddressLineOne(event.target.value);
+  }
+
+  function handlePostcodeChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setPostcode(event.target.value);
+  }
+
+  function handleUprnChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setUprn(event.target.value);
+  }
+
+  function handleValuationChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValuation(event.target.value);
+  }
 
   return (
     <>
@@ -68,23 +186,91 @@ export default function RemoteAssesmentModal({
                 <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 Goes Here
+                    className="text-lg font-medium leading-6 text-brandblue mb-3">
+                    {scenario} 
                   </Dialog.Title>
                   <div className="flex justify-center">
-                    Body Goes here
+                    Scenario Name
+                    <Input type="text" defaultValue={"Remote Assesment"} onChange={handleScenarioChange}/>
                   </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)}
+                  <div className="flex flex-col mt-6">
+                    <label
+                      htmlFor="portfolio-name"
+                      className="text-sm font-semibold text-gray-600 mb-1 relative leading-relaxed tracking-wider"
                     >
-                      Cancel
-                    </button>
+                      Housing type
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <SelectDropdown
+                      options={selecthousingTypeOptions}
+                      selectedOption={housingType}
+                      onSelectOption={(option) => sethousingType(option.value)}
+                    />
                   </div>
+                  <div className="flex flex-col mt-6">
+                    <label
+                      htmlFor="portfolio-name"
+                      className="text-sm font-semibold text-gray-600 mb-1 relative leading-relaxed tracking-wider"
+                    >
+                      Select Goal
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <SelectDropdown
+                      options={selectGoalOptions}
+                      selectedOption={selectedGoal}
+                      onSelectOption={(option) => setSelectedGoal(option.value)}
+                    />
+                    {selectedGoal === "Increase EPC" && (
+                      <div className="flex flex-col mt-6">
+                        <label
+                          htmlFor="csv-upload-epc"
+                          className="text-sm font-semibold text-gray-600 relative leading-relaxed tracking-wider"
+                        >
+                          Choose a target EPC value
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <SelectDropdown
+                          options={goalValueOptions}
+                          selectedOption={goalValue}
+                          onSelectOption={(option) => {
+                            setGoalValue(option.value);
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex justify-center mt-6">
+                    Address Line One
+                    <Input type="text" onChange={handleAddressLineOneChange}/>
+                  </div>
+                  <div className="flex justify-center mt-6">
+                    Postcode 
+                    <Input type="text" onChange={handlePostcodeChange}/>
+                  </div>
+                  <div className="flex justify-center mt-6">
+                    UPRN 
+                    <Input type="text" onChange={handleUprnChange}/>
+                  </div>
+                  <div className="flex justify-center mt-6">
+                    Valuation 
+                    <Input type="text" onChange={handleValuationChange}/>
+                  </div>
+                  <div className="flex justify-center mt-6">
+                    <Button
+                      onClick={() => {
+                        setIsOpen(false);
+                      }}
+                    >
+                      Submit
+                    </Button>
+                  </div>
+                  <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>
                 </Dialog.Panel>
               </Transition.Child>
             </div>
@@ -93,4 +279,5 @@ export default function RemoteAssesmentModal({
       </Transition>
     </>
   );
-}
+}
+

src/app/portfolio/[slug]/components/UploadCsvModal.tsx

@@ -96,7 +96,7 @@ const selectGoalOptions = [
   {
     label: "Reduce energy consumption",
     value: "Reduce energy consumption",
-    disabled: true,
+    disabled: false,
   },
 ];
 
@@ -272,7 +272,7 @@ export default function UploadCsvModal({
                         );
                       }}
                     />
-                    {selectedGoal && (
+                    {selectedGoal === "Increase EPC" && (
                       <div className="flex flex-col mt-6">
                         <label
                           htmlFor="csv-upload-epc"