update modals & text & design

app/component/modalSearchCity/index.js

@@ -13,7 +13,10 @@ import { useProvince } from "@/context/ProvinceProvider";
 function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
   const { isProvinceInclude } = useProvince();
-  const newProvinceData = isProvinceInclude?.id === 63;
+  const newProvinceData =
+    isProvinceInclude && isProvinceInclude.id === "63"
+      ? false
+      : isProvinceInclude;
 
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
@@ -21,15 +24,12 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
 
   const handleClose = () => setOpen(false);
 
-  // Load states and cities from JSON files
   useEffect(() => {
-    // Format states data to match the structure expected by AutoCompleteSelect
     const formattedStates = statesData.map((state) => ({
       label: state.name,
       id: state.id,
     }));
 
-    // Format cities data
     const formattedCities = citiesData.map((city) => ({
       label: city.name,
       id: city.id,
@@ -40,7 +40,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
     setCities(formattedCities);
   }, []);
 
-  // Filter cities when state is selected
   useEffect(() => {
     if (provinceSelected) {
       const selectedState = states.find(
@@ -53,11 +52,11 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
         );
         setFilteredCities(filteredCities);
       }
-    } else if (isProvinceInclude) {
+    } else if (newProvinceData) {
       setSelected({
         ...selected,
         province: statesData.find(
-          (state) => state.id === isProvinceInclude.province_id
+          (state) => state.id === newProvinceData.province_id
         )?.name,
       });
     } else {
@@ -68,7 +67,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
 
   const updateData = (event, name) => {
     if (name === "province" && event !== provinceSelected) {
-      // If state changes, reset city selection
       setSelected({ province: event, city: "" });
     } else {
       setSelected({ ...selected, [name]: event });