updates on the api integration and the design changes on the whole website

src/components/nearle_components/LocationAutocomplete.js

@@ -12,6 +12,7 @@ import { fetchAppLocations } from 'pages/api/api';
 const LocationAutocomplete = forwardRef(
   (
     {
+      locaName,
       setAppId,
       setLocoName,
       setPage,
@@ -92,6 +93,13 @@ const LocationAutocomplete = forwardRef(
       <Autocomplete
         id="location-autocomplete"
         options={locations || []}
+        // Controlled by the caller's `locaName` string (the selected zone's
+        // locationname) so an external reset (e.g. setLocoName('All')) is
+        // reflected in the input — previously uncontrolled, so callers
+        // passing `locaName` had no effect and the pill silently kept
+        // showing the last user-picked zone.
+        value={locaName ? (locations || []).find((l) => l.locationname === locaName) ?? null : null}
+        isOptionEqualToValue={(option, value) => option?.applocationid === value?.applocationid}
         getOptionLabel={(option) => option?.locationname ?? ''}
         PaperComponent={paperComponent}
         sx={{ ...sx }}