fix: customer edit dialog field names + safe stub

- pre-fill from confirmed fields (name/phone/email)
- submit stubbed to toast until PATCH /admin/customers/:id exists
- flagged in comment for Phase 3 backend work

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/pages/nearle/customers/customers.js

@@ -1,5 +1,4 @@
-import { React, useState, useEffect, useRef, useMemo } from 'react';
+import { React, useState, useEffect, useRef } from 'react';
-import axios from 'axios';
 import { FaRegEdit } from 'react-icons/fa';
 import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
 
@@ -23,7 +22,6 @@ import {
   DialogContent,
   Button,
   TextField,
-  Autocomplete,
   Avatar,
   Paper,
   useMediaQuery,
@@ -39,10 +37,6 @@ import {
   MdOutlineHowToReg,
   MdOutlinePlace
 } from 'react-icons/md';
-import Geocode from 'react-geocode';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
-import parse from 'autosuggest-highlight/parse';
-import { debounce } from '@mui/material/utils';
 // project imports
 import Loader from 'components/Loader';
 import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
@@ -108,23 +102,6 @@ const AccentAvatar = ({ color, selected, size = 24, children }) => (
   </Avatar>
 );
 
-// ==============================|| google address ||============================== //
-const GOOGLE_MAPS_API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
-
-function loadScript(src, position, id) {
-  if (!position) {
-    return;
-  }
-
-  const script = document.createElement('script');
-  script.setAttribute('async', '');
-  script.setAttribute('id', id);
-  script.src = src;
-  position.appendChild(script);
-}
-
-const autocompleteService = { current: null };
-
 // ==============================|| MUI TABLE - ENHANCED ||============================== //
 
 export default function Customers() {
@@ -138,138 +115,9 @@ export default function Customers() {
   const [locaName, setLocoName] = useState('All');
   const [selectedCustomer, setSelectedCustomer] = useState({}); // to edit
   const [open, setOpen] = useState(false);
-  const [address, setAddress] = useState('');
-  const [latlong, setLatlong] = useState({});
-  const [city, setCity] = useState('');
-  const [postcode, setPostcode] = useState('');
-  const [state, setState] = useState('');
-  const [suburb, setSuburb] = useState('');
   const [searchword, setSearchword] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
 
-  // ==============================|| for google address ||============================== //
-  const [value, setValue] = useState(null);
-  const [inputValue, setInputValue] = useState('');
-  const [options, setOptions] = useState([]);
-  const loaded = useRef(false);
-  if (typeof window !== 'undefined' && !loaded.current) {
-    if (!document.querySelector('#google-maps')) {
-      loadScript(
-        `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`,
-        document.querySelector('head'),
-        'google-maps'
-      );
-    }
-
-    loaded.current = true;
-  }
-  const fetch = useMemo(
-    () =>
-      debounce((request, callback) => {
-        autocompleteService.current.getPlacePredictions(request, callback);
-      }, 400),
-    []
-  );
-  useEffect(() => {
-    let active = true;
-
-    if (!autocompleteService.current && window.google) {
-      autocompleteService.current = new window.google.maps.places.AutocompleteService();
-    }
-    if (!autocompleteService.current) {
-      return undefined;
-    }
-
-    if (inputValue === '') {
-      setOptions(value ? [value] : []);
-      return undefined;
-    }
-
-    fetch({ input: inputValue }, (results) => {
-      if (active) {
-        let newOptions = [];
-
-        if (value) {
-          newOptions = [value];
-        }
-
-        if (results) {
-          newOptions = [...newOptions, ...results];
-        }
-
-        setOptions(newOptions);
-      }
-    });
-
-    return () => {
-      active = false;
-    };
-  }, [value, inputValue, fetch]);
-
-  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
-  useEffect(() => {
-    try {
-      console.log('selected address =>', address);
-      Geocode.fromAddress(address).then(
-        (response) => {
-          console.log('lat long response =>', response.results[0]);
-          if (response.status == 'OK') {
-            const { lat, lng } = response.results[0].geometry.location;
-            setLatlong({
-              lat,
-              lng
-            });
-            // setSelectedCustomer({
-            //   ...selectedCustomer,
-            //   latitude: lat,
-            //   longitude: lng
-            // });
-            if (response.results[0].address_components) {
-              let place = response.results[0];
-              let city1, zipcode1, state1, suburb1;
-              for (let i = 0; i < place.address_components.length; i++) {
-                for (let j = 0; j < place.address_components[i].types.length; j++) {
-                  switch (place.address_components[i].types[j]) {
-                    case 'locality':
-                      city1 = place.address_components[i].long_name;
-                      break;
-                    case 'administrative_area_level_1':
-                      state1 = place.address_components[i].long_name;
-                      break;
-                    case 'postal_code':
-                      zipcode1 = place.address_components[i].long_name;
-                      break;
-                    case 'sublocality':
-                      suburb1 = place.address_components[i].long_name;
-                      break;
-                  }
-                }
-              }
-              setCity(city1 || '');
-              setState(state1 || '');
-              setPostcode(zipcode1 || '');
-              setSuburb(suburb1 || '');
-              setSelectedCustomer((prev) => ({
-                ...prev,
-                city: city1 || '',
-                state: state1 || '',
-                postcode: zipcode1 || '',
-                suburb: suburb1 || '',
-                latitude: lat || '',
-                longitude: lng || ''
-              }));
-            }
-          }
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
-    } catch (err) {
-      console.log(err);
-    }
-  }, [address]);
-
   // ==============================|| getallcustomers (customers) ||============================== //
 
   const {
@@ -325,67 +173,16 @@ export default function Customers() {
   useEffect(() => {
     console.log('pageCount', pageCount);
   }, [pageCount]);
-  // ==============================|| updateCustomer (post)||============================== //
+  // ==============================|| updateCustomer (PATCH) ||============================== //
+  // TEMPORARY: PATCH /admin/customers/:id doesn't exist yet — it wasn't part
+  // of the endpoints built alongside GET /admin/customers. Once it ships,
+  // this becomes:
+  //   axios.patch(`${process.env.REACT_APP_URL}/admin/customers/${selectedCustomer.appcustomerid}`,
+  //     { name: selectedCustomer.name, phone: selectedCustomer.phone, email: selectedCustomer.email })
+  // Stub avoids sending a request that would 404 — same pattern used for
+  // cancelOrder/cancelDeliveryAPI before the cancel endpoint shipped.
   const updateCustomer = async () => {
-    console.log('selectedCustomer', selectedCustomer);
+    OpenToast('Customer edit coming soon', 'info', 3000);
-
-    if (!selectedCustomer.firstname) {
-      OpenToast('Enter Door NO', 'warning', 1500);
-    } else if (!selectedCustomer.contactno) {
-      OpenToast('Enter Contact Number ', 'warning', 1500);
-    } else if (!selectedCustomer.address) {
-      OpenToast('Enter Valid Address', 'warning', 1500);
-    } else if (!selectedCustomer.suburb) {
-      OpenToast('Enter Suburb', 'warning', 1500);
-    } else if (!selectedCustomer.city) {
-      OpenToast('Enter City ', 'warning', 1500);
-    } else if (!selectedCustomer.state) {
-      OpenToast('Enter State', 'warning', 1500);
-    } else if (!selectedCustomer.postcode) {
-      OpenToast('Enter PostCode', 'warning', 1500);
-    } else if (!selectedCustomer.landmark) {
-      OpenToast('Enter Landmark', 'warning', 1500);
-    } else if (!selectedCustomer.latitude) {
-      OpenToast('Enter Latitude', 'warning', 1500);
-    } else if (!selectedCustomer.longitude) {
-      OpenToast('Enter Longitude', 'warning', 1500);
-    } else {
-      try {
-        // NOTE: no Doormile "update customer" endpoint has been specified —
-        // this still calls the old /customers/update path and will fail
-        // against api.doormile.com. Left as-is rather than guessed at.
-        const postUpdateResponse = await axios.put(`${process.env.REACT_APP_URL}/customers/update`, {
-          customerid: selectedCustomer.customerid,
-          configid: 1,
-          firstname: selectedCustomer.firstname,
-          applocationid: selectedCustomer.applocationid,
-          profileimage: '',
-          dialcode: '+91',
-          contactno: selectedCustomer.contactno,
-          devicetype: '',
-          deviceid: '',
-          customertoken: '123',
-          address: selectedCustomer.address,
-          suburb: suburb,
-          city: city,
-          state: state,
-          postcode: postcode,
-          landmark: selectedCustomer.landmark,
-          doorno: selectedCustomer.doorno,
-          latitude: selectedCustomer.latitude.toString(),
-          longitude: selectedCustomer.longitude.toString()
-        });
-
-        console.log('postUpdateResponse', postUpdateResponse);
-        if (postUpdateResponse.data.status) {
-          OpenToast(postUpdateResponse.data.message, 'success', 1500);
-          setOpen(false);
-          getallcustomersRefetch();
-        }
-      } catch (error) {
-        console.log('postUpdate error', error);
-      }
-    }
   };
   const KPI_META = [
     { key: 'total',    label: 'Total Customers', color: '#C01227', icon: MdOutlineGroups,    value: pageCount?.Total ?? 0 },
@@ -780,36 +577,36 @@ export default function Customers() {
                 Customer
               </Typography>
               <Typography sx={{ fontWeight: 800, fontSize: { xs: '1.05rem', sm: '1.2rem' }, lineHeight: 1.2, mt: 0.25 }}>
-                Edit {selectedCustomer?.firstname || 'Customer'}
+                Edit {selectedCustomer?.name || 'Customer'}
               </Typography>
             </Stack>
           </Stack>
         </DialogTitle>
         <DialogContent>
           <Grid container spacing={2} sx={{ mt: 2 }}>
-            <Grid item xs={6}>
+            <Grid item xs={12} sm={6}>
-              <Typography sx={{ mb: 1 }}>Customer Name</Typography>
+              <Typography sx={{ mb: 1 }}>Name</Typography>
               <TextField
                 variant="outlined"
                 fullWidth
-                defaultValue={selectedCustomer?.firstname}
+                value={selectedCustomer?.name || ''}
                 onChange={(e) => {
-                  setSelectedCustomer({
+                  setSelectedCustomer((prev) => ({
-                    ...selectedCustomer,
+                    ...prev,
-                    firstname: e.target.value
+                    name: e.target.value
-                  });
+                  }));
                 }}
               />
             </Grid>
-            <Grid item xs={6}>
+            <Grid item xs={12} sm={6}>
-              <Typography sx={{ mb: 1 }}>Contact Number</Typography>
+              <Typography sx={{ mb: 1 }}>Phone</Typography>
               <Stack direction={'row'} spacing={1}>
                 <TextField readonly variant="outlined" value={'+91'} sx={{ width: 60 }} />
                 <TextField
                   variant="outlined"
                   fullWidth
                   type="text"
-                  value={selectedCustomer?.contactno || ''}
+                  value={selectedCustomer?.phone || ''}
                   inputProps={{
                     maxLength: 10,
                     inputMode: 'numeric', // mobile numeric keypad
@@ -820,168 +617,40 @@ export default function Customers() {
 
                     setSelectedCustomer((prev) => ({
                       ...prev,
-                      contactno: value
+                      phone: value
                     }));
                   }}
                 />
               </Stack>
             </Grid>
             <Grid item xs={12}>
-              <Typography sx={{ mb: 1 }}>Address</Typography>
+              <Typography sx={{ mb: 1 }}>Email</Typography>
-              <Autocomplete
-                id="google-map-demo"
-                sx={{}}
-                fullWidth
-                getOptionLabel={(option) => (typeof option === 'string' ? option : option?.description || '')}
-                filterOptions={(x) => x}
-                options={options}
-                autoComplete
-                includeInputInList
-                filterSelectedOptions
-                value={selectedCustomer?.address}
-                noOptionsText="No locations"
-                onChange={(event, newValue) => {
-                  setOptions(newValue ? [newValue, ...options] : options);
-                  setValue(newValue);
-                  console.log('newValue', newValue || '');
-                  setAddress(newValue?.description);
-                  setSelectedCustomer({
-                    ...selectedCustomer,
-                    address: newValue?.description
-                  });
-                }}
-                onInputChange={(event, newInputValue) => {
-                  setInputValue(newInputValue);
-                }}
-                renderInput={(params) => <TextField {...params} fullWidth />}
-                renderOption={(props, option) => {
-                  const matches = option.structured_formatting.main_text_matched_substrings || [];
-
-                  const parts = parse(
-                    option.structured_formatting.main_text,
-                    matches.map((match) => [match.offset, match.offset + match.length])
-                  );
-
-                  return (
-                    <li {...props}>
-                      <Grid container alignItems="center">
-                        <Grid item sx={{ display: 'flex', width: 44 }}>
-                          <LocationOnIcon sx={{ color: 'text.secondary' }} />
-                        </Grid>
-                        <Grid
-                          item
-                          sx={{
-                            width: 'calc(100% - 44px)',
-                            wordWrap: 'break-word'
-                          }}
-                        >
-                          {parts?.map((part, index) => (
-                            <Box
-                              key={index}
-                              component="span"
-                              sx={{
-                                fontWeight: part.highlight ? 'bold' : 'regular'
-                              }}
-                            >
-                              {part.text}
-                            </Box>
-                          ))}
-                          <Typography variant="body2" color="text.secondary">
-                            {option?.structured_formatting.secondary_text}
-                          </Typography>
-                        </Grid>
-                      </Grid>
-                    </li>
-                  );
-                }}
-              />
-            </Grid>
-            <Grid item xs={6}>
-              <Typography sx={{ mb: 1 }}>Location</Typography>
               <TextField
                 variant="outlined"
                 fullWidth
-                value={selectedCustomer?.suburb}
+                type="email"
+                value={selectedCustomer?.email || ''}
                 onChange={(e) => {
-                  const value = e.target.value;
                   setSelectedCustomer((prev) => ({
                     ...prev,
-                    suburb: value
+                    email: e.target.value
                   }));
-                  // setSuburb(e.target.value);
                 }}
               />
             </Grid>
-            <Grid item xs={6}>
+            <Grid item xs={12} sm={6} sx={{ cursor: 'not-allowed' }}>
-              <Typography sx={{ mb: 1 }}>City</Typography>
+              <Typography sx={{ mb: 1 }}>Total Bookings</Typography>
+              <TextField variant="outlined" fullWidth disabled value={selectedCustomer?.totalbookings ?? 0} />
+            </Grid>
+            <Grid item xs={12} sm={6} sx={{ cursor: 'not-allowed' }}>
+              <Typography sx={{ mb: 1 }}>Joined</Typography>
               <TextField
                 variant="outlined"
                 fullWidth
-                value={selectedCustomer.city || city || ''}
+                disabled
-                onChange={(e) => {
+                value={selectedCustomer?.createdat ? new Date(selectedCustomer.createdat).toLocaleDateString() : '—'}
-                  const value = e.target.value;
-                  setSelectedCustomer((prev) => ({
-                    ...prev,
-                    city: value
-                  }));
-                  // setCity(e.target.value);
-                }}
               />
             </Grid>
-            <Grid item xs={6}>
-              <Typography sx={{ mb: 1 }}>State</Typography>
-              <TextField
-                variant="outlined"
-                fullWidth
-                value={selectedCustomer.state || state || ''}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setSelectedCustomer((prev) => ({
-                    ...prev,
-                    state: value
-                  }));
-                  // setState(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={6}>
-              <Typography sx={{ mb: 1 }}>Postcode</Typography>
-              <TextField
-                variant="outlined"
-                fullWidth
-                value={postcode == '' ? selectedCustomer.postcode : postcode}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setSelectedCustomer((prev) => ({
-                    ...prev,
-                    postcode: value
-                  }));
-                  // setPostcode(e.target.value);
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <Typography sx={{ mb: 1 }}>Landmark</Typography>
-              <TextField
-                variant="outlined"
-                fullWidth
-                defaultValue={selectedCustomer.landmark}
-                onChange={(e) => {
-                  setSelectedCustomer({
-                    ...selectedCustomer,
-                    landmark: e.target.value
-                  });
-                }}
-              />
-            </Grid>
-            <Grid item xs={6} sx={{ cursor: 'not-allowed' }}>
-              <Typography sx={{ mb: 1 }}>Latitude</Typography>
-              <TextField variant="outlined" fullWidth value={latlong.lat} sx={{ cursor: 'not-allowed' }} />
-            </Grid>
-            <Grid item xs={6} sx={{ cursor: 'not-allowed' }}>
-              <Typography sx={{ mb: 1 }}>Longitude</Typography>
-              <TextField readonly variant="outlined" fullWidth value={latlong.lng} />
-            </Grid>
           </Grid>
         </DialogContent>
         <DialogActions sx={{ mr: 2, mb: 2 }}>