feat: Implement dynamic state and city selection

- Load states and cities from JSON data files
- Filter cities based on selected state
- Update UI to disable city dropdown until state is selected
- Fix AutoCompleteSelect component to properly handle selection
- Reset city selection when state changes
- Display selected state and city in button

app/component/element/AutoCompleteSelect.js

@@ -2,14 +2,15 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function AutoCompleteSelect({ list, isError, updateData, name, label }) {
+function AutoCompleteSelect({ list, isError, updateData, name, label, disabled = false }) {
   return (
     <Autocomplete
       disablePortal
       options={list}
+      disabled={disabled}
       className="!w-full !rounded-lg auto-complete-selector"
-      onChange={(event) => {
-        updateData && updateData(event.target.innerText, "value", name);
+      onChange={(event, newValue) => {
+        updateData && updateData(newValue ? newValue.label : "", name);
       }}
       sx={{
         ...styleTextSelectRight,
@@ -51,8 +52,7 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
         <Button
           fullWidth
           {...props}
-          style={{}}
-          key={props.id}
+          key={option.id || props.id}
           className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
         >
           {option.label}