diff --git a/src/app/portfolio/[slug]/components/RemoteAssessmentDropdowns.tsx b/src/app/portfolio/[slug]/components/RemoteAssessmentDropdowns.tsx new file mode 100644 index 0000000..e056dd3 --- /dev/null +++ b/src/app/portfolio/[slug]/components/RemoteAssessmentDropdowns.tsx @@ -0,0 +1,172 @@ +import { Menu, Transition } from "@headlessui/react"; +import { Fragment } from "react"; +import { Button } from "@/app/shadcn_components/ui/button"; +import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid"; +import { Float } from "@headlessui-float/react"; + +export type Option = { label: string; value: string; disabled?: boolean }; + +// Extend ScenarioOption to include extra metadata +export type ScenarioOption = { + label: string; // scenario name + value: string; // scenario value + housingType?: string; // existing scenario housing type + goal?: string; // existing scenario goal + goalValue?: string; // existing scenario goal value +}; + +interface ScenarioSelectProps { + selectedValue: string | null; + onSelect: (option: ScenarioOption) => void; + scenarios: ScenarioOption[]; +} + +interface SelectDropdownProps { + options: Option[]; + selectedOption: string; + onSelectOption: (opt: Option) => void; +} + +export function SelectScenarioDropdown({ + selectedValue, + onSelect, + scenarios, +}: ScenarioSelectProps) { + const newOption: ScenarioOption = { + label: "New scenario", + value: "__new__", + }; + const options = [newOption, ...scenarios]; + + const selectedLabel = + options.find((o) => o.value === selectedValue)?.label || "Choose scenario"; + + return ( + + + {selectedValue === newOption.value && ( + + + + + {options.map((opt) => ( + + {({ active }) => ( + + )} + + ))} + + + + ); +} + +export function SelectDropdown({ + options, + selectedOption, + onSelectOption, +}: { + options: Option[]; + selectedOption: string; + onSelectOption: (opt: Option) => void; +}) { + const label = + options.find((o) => o.value === selectedOption)?.label || "Select…"; + + return ( + + + {label} + + + + + + {options.map((opt) => ( + + {({ active, disabled }) => ( + + )} + + ))} + + + + ); +} diff --git a/src/app/portfolio/[slug]/components/RemoteAssessmentModal.tsx b/src/app/portfolio/[slug]/components/RemoteAssessmentModal.tsx index 01586f4..1e88995 100644 --- a/src/app/portfolio/[slug]/components/RemoteAssessmentModal.tsx +++ b/src/app/portfolio/[slug]/components/RemoteAssessmentModal.tsx @@ -4,8 +4,6 @@ import { Dialog, Transition, Menu } from "@headlessui/react"; import { Fragment, useMemo } from "react"; import { Input } from "@/app/shadcn_components/ui/input"; import { Button } from "@/app/shadcn_components/ui/button"; -import { Float } from "@headlessui-float/react"; -import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/20/solid"; import { useMutation } from "@tanstack/react-query"; import { useSession } from "next-auth/react"; import { useForm, FormProvider } from "react-hook-form"; @@ -22,7 +20,10 @@ import { import { useToast } from "@/app/hooks/use-toast"; import { ScenarioSelect } from "@/app/db/schema/recommendations"; import { useState } from "react"; -import { SelectScenarioDropdown } from "./SelectScenarioDropdown"; +import { + SelectScenarioDropdown, + SelectDropdown, +} from "./RemoteAssessmentDropdowns"; type Option = { label: string; @@ -169,106 +170,6 @@ const formSchema = z.object({ type FormValues = z.infer; -export function SelectDropdown({ - options, - selectedOption, - onSelectOption, -}: DropdownProps) { - return ( - - - - {selectedOption || "Select option"} - - - - {options.map((option) => ( - - {({ active }) => ( - - )} - - ))} - - - - - ); -} - -export function SelectUpDropdown({ - options, - selectedOption, - onSelectOption, - width = "w-1/2", -}: OptionalDropdownProps) { - const menuButtonStyle = (width = "w-full") => - `inline-flex justify-center ${width} 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`; - - return ( - - - - {selectedOption || "Select option"} - - - - {options.map((option) => ( - - {({ active }) => ( - - )} - - ))} - - - - - ); -} - async function uploadCsvToS3({ presignedUrl, file, @@ -645,7 +546,7 @@ export default function RemoteAssessmentModal({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > -
+
Remote Assessment Details @@ -669,99 +570,112 @@ export default function RemoteAssessmentModal({ {selectedScenario !== null && ( <> - {/* 2) Scenario Name */} - ( - - Scenario Name - - - - - - )} - /> - - {/* 3) Housing Type */} - ( - - Housing Type - - {selectedScenario === NEW_SENTINEL ? ( - - field.onChange(o.value) - } +
+ {/* Scenario Name */} + ( + + + Scenario Name + + + - ) : ( - - )} - - - - )} - /> + + + + )} + /> - {/* 4) Goal */} - ( - - Goal - - {selectedScenario === NEW_SENTINEL ? ( - - field.onChange(o.value) - } - /> - ) : ( - - )} - - - - )} - /> + {/* Housing Type */} + ( + + + Housing Type + + + {selectedScenario === NEW_SENTINEL ? ( + + field.onChange(o.value) + } + /> + ) : ( + + )} + + + + )} + /> +
- {/* 5) Goal Value */} - ( - - Goal Value - - {selectedScenario === NEW_SENTINEL ? ( - - field.onChange(o.value) - } - /> - ) : ( - - )} - - - - )} - /> +
+ {/* Goal */} + ( + + + Goal + + + {selectedScenario === NEW_SENTINEL ? ( + + field.onChange(o.value) + } + /> + ) : ( + + )} + + + + )} + /> + + {/* Goal Value */} + ( + + + Goal Value + + + {selectedScenario === NEW_SENTINEL ? ( + + field.onChange(opt.value) + } + /> + ) : ( + + )} + + + + )} + /> +
)} @@ -770,11 +684,15 @@ export default function RemoteAssessmentModal({ name="addressLineOne" render={({ field }) => ( - Address + Address - + - + )} /> @@ -784,11 +702,17 @@ export default function RemoteAssessmentModal({ name="postcode" render={({ field }) => ( - Postcode + + Postcode + - + - + )} /> @@ -798,7 +722,7 @@ export default function RemoteAssessmentModal({ name="uprn" render={({ field }) => ( - UPRN + UPRN field.onChange(Number(e.target.value)) } + className="border-brandbrown focus-visible:ring-brandbrown focus-visible:border-brandbrown" /> - + )} /> @@ -819,7 +744,9 @@ export default function RemoteAssessmentModal({ name="valuation" render={({ field }) => ( - Valuation + + Valuation + The valuation can be found at{" "} field.onChange(Number(e.target.value)) } + className="border-brandbrown focus-visible:ring-brandbrown focus-visible:border-brandbrown" /> - + )} /> @@ -860,7 +788,7 @@ export default function RemoteAssessmentModal({ Property Type - field.onChange(o.value)} @@ -877,7 +805,7 @@ export default function RemoteAssessmentModal({ Built Form - field.onChange(o.value)} diff --git a/src/app/portfolio/[slug]/components/SelectScenarioDropdown.tsx b/src/app/portfolio/[slug]/components/SelectScenarioDropdown.tsx deleted file mode 100644 index ba01904..0000000 --- a/src/app/portfolio/[slug]/components/SelectScenarioDropdown.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Menu, Transition } from "@headlessui/react"; -import { Fragment } from "react"; -import { Button } from "@/app/shadcn_components/ui/button"; -import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid"; - -export type ScenarioOption = { - label: string; - value: string; -}; - -interface ScenarioSelectProps { - selectedValue: string | null; - onSelect: (option: ScenarioOption) => void; - scenarios: ScenarioOption[]; -} - -export function SelectScenarioDropdown({ - selectedValue, - onSelect, - scenarios, -}: ScenarioSelectProps) { - const createOption: ScenarioOption = { - label: "Create new scenario…", - value: "__new__", - }; - const options = [createOption, ...scenarios]; - - const selectedLabel = - options.find((o) => o.value === selectedValue)?.label || - "Select or create..."; - - return ( - - - {selectedLabel} - - - - - {options.map((opt) => ( - - {({ active }) => ( - - )} - - ))} - - - - ); -} diff --git a/tailwind.config.js b/tailwind.config.js index 80e8463..df92c55 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -102,7 +102,7 @@ module.exports = { hovertan: "#947750", brandgold: "#f1bb06", hovergold: "#c79d12", - brandbrown: "#3d1e05", + brandbrown: "#c4a47c", brandmidblue: "#3943b7", brandlightblue: "#00a9f4", border: "hsl(var(--border))", @@ -144,7 +144,7 @@ module.exports = { hoverblue: "#3e4073", brandtan: "#d3b488", hovertan: "#947750", - brandbrown: "#3d1e05", + brandbrown: "#c4a47c", brandmidblue: "#3943b7", brandlightblue: "#00a9f4", },