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

src/components/nearle_components/GlobalToast.js

@@ -1,7 +1,7 @@
 import { enqueueSnackbar, closeSnackbar } from 'notistack';
 
 import { setSnackbarId } from '../../store/reducers/toastSlice';
-import { store, dispatch } from 'store';
+import { dispatch } from 'store';
 
 export const GlobalToast = (message, color = 'default', vertical = 'top') => {
   const id = enqueueSnackbar(message, {
@@ -20,11 +20,3 @@ export const GlobalToast = (message, color = 'default', vertical = 'top') => {
 
   return id;
 };
-
-// GLOBAL close function
-export const closeGlobalToast = () => {
-  const id = store.getState().toastSlice.snackbarId;
-  if (id) {
-    closeSnackbar(id);
-  }
-};

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 }}

src/components/nearle_components/SearchBar.js

@@ -1,77 +0,0 @@
-// DebouncedSearchBar.jsx
-import React, { useEffect, useRef, useState } from 'react';
-import { FormControl, OutlinedInput, InputAdornment, IconButton, useTheme } from '@mui/material';
-import SearchOutlined from '@mui/icons-material/SearchOutlined';
-import ClearIcon from '@mui/icons-material/Clear';
-
-const SearchBar = ({ value, onChange, sx, placeholder = 'Search (Ctrl + K)', delay = 300 }) => {
-  const theme = useTheme();
-  const inputRef = useRef(null);
-
-  // Local input state for immediate UI update
-  const [inputValue, setInputValue] = useState(value || '');
-
-  /* Sync external value when it changes */
-  useEffect(() => {
-    setInputValue(value || '');
-  }, [value]);
-
-  /* ================================
-      🔥 Debounce Logic
-     ================================ */
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      if (inputValue !== value) {
-        onChange({ target: { value: inputValue } });
-      }
-    }, delay);
-
-    return () => clearTimeout(handler);
-  }, [inputValue]);
-
-  /* CTRL + K / CMD + K & ESC behavior */
-  useEffect(() => {
-    const handleKeyPress = (event) => {
-      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        inputRef.current?.focus();
-      }
-
-      if (event.key === 'Escape' && document.activeElement === inputRef.current) {
-        inputRef.current.blur();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyPress);
-    return () => document.removeEventListener('keydown', handleKeyPress);
-  }, []);
-
-  return (
-    <FormControl fullWidth>
-      <OutlinedInput
-        inputRef={inputRef}
-        placeholder={placeholder}
-        sx={{
-          borderRadius: 0,
-          ...sx
-        }}
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)} // No direct onChange
-        autoComplete="off"
-        size="large"
-        startAdornment={
-          <InputAdornment position="start" sx={{ mr: -0.5, color: theme.palette.secondary.main }}>
-            <SearchOutlined />
-          </InputAdornment>
-        }
-        endAdornment={
-          <IconButton sx={{ visibility: inputValue ? 'visible' : 'hidden' }} onClick={() => setInputValue('')}>
-            <ClearIcon style={{ fontSize: 'large', color: theme.palette.primary.main }} />
-          </IconButton>
-        }
-      />
-    </FormControl>
-  );
-};
-
-export default SearchBar;

src/components/nearle_components/StatusChip.js

@@ -1,74 +0,0 @@
-import PropTypes from 'prop-types';
-import { Chip } from '@mui/material';
-
-// ==============================|| STATUS CHIP (Doormile-style soft badge) ||============================== //
-// One consistent soft-filled chip for every lifecycle status across orders,
-// deliveries, riders, tenants, invoices. Colour encodes meaning; the chip stays
-// quiet (soft bg + readable dark text) so tables don't turn into a rainbow.
-
-// Soft background + readable foreground per semantic tone.
-const TONE = {
-  amber:   { bg: '#FEF3C7', fg: '#92400E' },
-  indigo:  { bg: '#E0E7FF', fg: '#3730A3' },
-  cyan:    { bg: '#CFFAFE', fg: '#155E75' },
-  violet:  { bg: '#EDE9FE', fg: '#5B21B6' },
-  teal:    { bg: '#CCFBF1', fg: '#115E59' },
-  emerald: { bg: '#D1FAE5', fg: '#065F46' },
-  red:     { bg: '#FEE2E2', fg: '#991B1B' },
-  orange:  { bg: '#FFEDD5', fg: '#9A3412' },
-  sky:     { bg: '#E0F2FE', fg: '#075985' },
-  slate:   { bg: '#F1F5F9', fg: '#475569' },
-  brand:   { bg: '#F1E6F7', fg: '#5B1F73' }
-};
-
-// Status keyword -> tone + display label.
-const MAP = {
-  pending:    { tone: 'amber',   label: 'Pending' },
-  created:    { tone: 'sky',     label: 'Created' },
-  assigned:   { tone: 'indigo',  label: 'Assigned' },
-  accepted:   { tone: 'indigo',  label: 'Accepted' },
-  arrived:    { tone: 'cyan',    label: 'Arrived' },
-  picked:     { tone: 'violet',  label: 'Picked' },
-  'picked-up':{ tone: 'violet',  label: 'Picked Up' },
-  started:    { tone: 'cyan',    label: 'Started' },
-  active:     { tone: 'teal',    label: 'Active' },
-  'in-transit': { tone: 'teal',  label: 'In Transit' },
-  delivered:  { tone: 'emerald', label: 'Delivered' },
-  completed:  { tone: 'emerald', label: 'Completed' },
-  skipped:    { tone: 'orange',  label: 'Skipped' },
-  failed:     { tone: 'red',     label: 'Failed' },
-  cancelled:  { tone: 'red',     label: 'Cancelled' },
-  // riders / tenants
-  online:     { tone: 'emerald', label: 'Online' },
-  offline:    { tone: 'slate',   label: 'Offline' },
-  inactive:   { tone: 'slate',   label: 'Inactive' },
-  idle:       { tone: 'amber',   label: 'Idle' },
-  unknown:    { tone: 'slate',   label: 'Unknown' },
-  // invoices
-  paid:       { tone: 'emerald', label: 'Paid' },
-  unpaid:     { tone: 'amber',   label: 'Unpaid' },
-  open:       { tone: 'sky',     label: 'Open' },
-  overdue:    { tone: 'red',     label: 'Overdue' },
-  prepaid:    { tone: 'emerald', label: 'Prepaid' },
-  cod:        { tone: 'amber',   label: 'COD' }
-};
-
-export default function StatusChip({ status, label, size = 'small', sx }) {
-  const key = String(status || '').toLowerCase().trim().replace(/\s+/g, '-');
-  const cfg = MAP[key] || { tone: 'slate', label: status || '—' };
-  const tone = TONE[cfg.tone] || TONE.slate;
-  return (
-    <Chip
-      size={size}
-      label={label || cfg.label}
-      sx={{ bgcolor: tone.bg, color: tone.fg, border: 'none', fontWeight: 600, ...sx }}
-    />
-  );
-}
-
-StatusChip.propTypes = {
-  status: PropTypes.string,
-  label: PropTypes.node,
-  size: PropTypes.string,
-  sx: PropTypes.object
-};

src/components/nearle_components/TitleCard.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Stack, Typography, Box } from '@mui/material';
-
-const TitleCard = ({ sx, title, children, starticon }) => {
-  return (
-    <Box
-      sx={{
-        ...sx
-      }}
-    >
-      <Stack direction="row" flexWrap={'wrap'} alignItems="center" justifyContent="space-between" gap={1}>
-        <Stack>
-          {starticon && starticon}
-          <Typography variant="h3">{title}</Typography>
-        </Stack>
-        {children}
-      </Stack>
-    </Box>
-  );
-};
-
-export default TitleCard;