updates on the redesign page for all the pages

src/components/nearle_components/LocationAutocomplete.js

@@ -1,51 +1,135 @@
 import React, { forwardRef, useEffect, useState } from 'react';
-import { Autocomplete, TextField } from '@mui/material';
+
+import { Autocomplete, TextField, Avatar, Stack } from '@mui/material';
 import axios from 'axios';
+import { MdMyLocation } from 'react-icons/md';
 
-const LocationAutocomplete = forwardRef(({ setAppId, setLocoName, setPage, sx, textfeildSx }, ref) => {
-  const [locations, setLocations] = useState(JSON.parse(localStorage.getItem('applocations') || '[]'));
+// Pill variant — opt-in via `pill` prop. Mirrors the design used across the
+// deliveries / dispatch filter rows (rounded pill, soft tinted bg, accent
+// border + focus ring, optional leading avatar icon). The default
+// (`pill={false}` or omitted) renders the original outlined TextField with
+// label "Select Zones" so existing callers are not affected.
+const LocationAutocomplete = forwardRef(
+  (
+    {
+      setAppId,
+      setLocoName,
+      setPage,
+      sx,
+      textfeildSx,
+      textfieldSx,
+      pill = false,
+      accentColor = '#6366f1',
+      icon,
+      placeholder = 'Select Zone',
+      paperComponent
+    },
+    ref
+  ) => {
+    const [locations, setLocations] = useState(JSON.parse(localStorage.getItem('applocations') || '[]'));
 
-  useEffect(() => {
-    const fetchLocations = async () => {
-      try {
-        const userid = localStorage.getItem('userid');
-        if (!userid) return;
-        const response = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
-        if (response.data.status) {
-          const updatedLocations = [...response.data.details, { locationname: 'All', applocationid: 0 }];
-          localStorage.setItem('applocations', JSON.stringify(updatedLocations));
-          setLocations(updatedLocations);
+    useEffect(() => {
+      const fetchLocations = async () => {
+        try {
+          const userid = localStorage.getItem('userid');
+          if (!userid) return;
+          const response = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
+          if (response.data.status) {
+            const updatedLocations = [...response.data.details, { locationname: 'All', applocationid: 0 }];
+            localStorage.setItem('applocations', JSON.stringify(updatedLocations));
+            setLocations(updatedLocations);
+          }
+        } catch (err) {
+          console.error('Error fetching locations in LocationAutocomplete:', err);
         }
-      } catch (err) {
-        console.error('Error fetching locations in LocationAutocomplete:', err);
+      };
+
+      if (locations.length === 0) {
+        fetchLocations();
       }
-    };
+    }, [locations.length]);
 
-    if (locations.length === 0) {
-      fetchLocations();
-    }
-  }, [locations.length]);
+    // Helpers (only used by pill variant) — match the deliveries page's
+    // token shorthand so the same opacity ramp is applied here.
+    const a = (suffix) => `${accentColor}${suffix}`;
+    const tint = a('08');
+    const ring = a('26');
+    const edge = a('55');
+    const soft = a('18');
 
-  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);
+    const pillSx = pill
+      ? {
+          cursor: 'pointer',
+          '& .MuiOutlinedInput-root': {
+            borderRadius: '999px',
+            bgcolor: tint,
+            fontWeight: 600,
+            color: '#0f172a',
+            paddingRight: '8px',
+            cursor: 'pointer',
+            transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.2s',
+            '& fieldset': { borderColor: edge, borderWidth: 1.5 },
+            '&:hover fieldset': { borderColor: accentColor },
+            '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring}` },
+            '&.Mui-focused fieldset': { borderColor: accentColor, borderWidth: 2 }
+          },
+          '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: accentColor }
         }
-      }}
-      renderInput={(params) => <TextField {...params} inputRef={ref} label={'Select Zones'} sx={{ ...textfeildSx }} />}
-    />
-  );
-});
+      : {};
+
+    const Adornment = pill && (
+      <Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5, mr: 0.25, flexShrink: 0 }}>
+        <Avatar
+          sx={{
+            width: 24,
+            height: 24,
+            bgcolor: soft,
+            color: accentColor,
+            transition: 'background-color 0.15s, color 0.15s'
+          }}
+        >
+          {icon || <MdMyLocation size={14} />}
+        </Avatar>
+      </Stack>
+    );
+
+    return (
+      <Autocomplete
+        id="location-autocomplete"
+        options={locations || []}
+        getOptionLabel={(option) => option?.locationname ?? ''}
+        PaperComponent={paperComponent}
+        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) =>
+          pill ? (
+            <TextField
+              {...params}
+              inputRef={ref}
+              placeholder={placeholder}
+              InputProps={{
+                ...params.InputProps,
+                startAdornment: Adornment
+              }}
+              sx={{ ...pillSx, ...(textfieldSx || textfeildSx || {}) }}
+            />
+          ) : (
+            <TextField {...params} inputRef={ref} label={'Select Zones'} sx={{ ...(textfieldSx || textfeildSx || {}) }} />
+          )
+        }
+      />
+    );
+  }
+);
 
 export default LocationAutocomplete;