code handover

src/components/nearle_components/LocationAutocomplete.js

@@ -0,0 +1,30 @@
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import React, { forwardRef } from 'react';
+import { Autocomplete, InputAdornment, TextField } from '@mui/material';
+
+const LocationAutocomplete = forwardRef(({ setAppId, setLocoName, setPage, sx, textfeildSx }, ref) => {
+  const locations = JSON.parse(localStorage.getItem('applocations') || '[]');
+
+  return (
+    <Autocomplete
+      id="location-autocomplete"
+      options={locations || []}
+      getOptionLabel={(option) => option?.locationname ?? ''}
+      sx={{ ...sx }}
+      onChange={(event, value, reason) => {
+        if (reason === 'clear') {
+          setAppId?.(0);
+          setLocoName?.('');
+          setPage?.(0);
+        } else if (value) {
+          setAppId?.(value.applocationid);
+          setLocoName?.(value.locationname);
+          setPage?.(0);
+        }
+      }}
+      renderInput={(params) => <TextField {...params} inputRef={ref} label={'Select Zones'} sx={{ ...textfeildSx }} />}
+    />
+  );
+});
+
+export default LocationAutocomplete;