customerEdit

src/pages/nearle/clients/clients1.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Avatar, Pagination, Tooltip, stepContentClasses } from '@mui/material';
-import { useEffect, useRef, useState, Fragment } from 'react';
+import { useEffect, useRef, useState, Fragment, useMemo } from 'react';
-// import { useTheme, styled } from "@mui/material/styles";
 import { useTheme } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import HeartFilled from '@mui/icons-material/Favorite';
@@ -9,6 +8,9 @@ import HeartFilled from '@mui/icons-material/Favorite';
 import Loader from 'components/Loader';
 import CloseIcon from '@mui/icons-material/Close';
 import { FilterList } from '@mui/icons-material';
+import { FaRegEdit } from 'react-icons/fa';
+import { RiEdit2Fill } from 'react-icons/ri';
+import { enqueueSnackbar } from 'notistack';
 
 import {
   Box,
@@ -42,8 +44,13 @@ import {
   TableHead,
   TableCell,
   TableBody,
-  TableRow
+  TableRow,
+  Autocomplete
 } from '@mui/material';
+import Geocode from 'react-geocode';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import parse from 'autosuggest-highlight/parse';
+import { debounce } from '@mui/material/utils';
 import ClearIcon from '@mui/icons-material/Clear';
 import { MdPersonAdd } from 'react-icons/md';
 // import { MdAccountCircle } from "react-icons/md";
@@ -53,35 +60,7 @@ import { MdPersonAddDisabled } from 'react-icons/md';
 // import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { ThemeMode } from 'config';
 // import { FaUserLarge } from "react-icons/fa6";
-import { enqueueSnackbar } from 'notistack';
+import { MoreOutlined, SearchOutlined, DeleteFilled } from '@ant-design/icons';
-import {
-  RightOutlined,
-  LeftOutlined,
-  AudioMutedOutlined,
-  CloseOutlined,
-  DeleteOutlined,
-  DownloadOutlined,
-  InfoCircleOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-  MoreOutlined,
-  PaperClipOutlined,
-  PhoneOutlined,
-  PictureOutlined,
-  SendOutlined,
-  SmileOutlined,
-  SoundOutlined,
-  VideoCameraOutlined,
-  SearchOutlined,
-  BarChartOutlined,
-  UsergroupAddOutlined,
-  NotificationOutlined,
-  PercentageOutlined,
-  CheckCircleFilled,
-  ClockCircleFilled,
-  MinusCircleFilled,
-  DeleteFilled
-} from '@ant-design/icons';
 // import ChatDrawer from "sections/apps/chat/ChatDrawer";
 // import ChatHistory from "sections/apps/chat/ChatHistory";
 // import UserAvatar from "sections/apps/chat/UserAvatar";
@@ -93,7 +72,6 @@ import { PopupTransition } from 'components/@extended/Transitions';
 import axios from 'axios';
 // import HoverSocialCard from "../../pages/reports/HoverSocialCard";
 import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
-
 // import TasksCard from "sections/widget/data/TasksCard";
 // import ApplicationSales from "sections/widget/data/ApplicationSales";
 // import Button from "themes/overrides/Button";
@@ -139,6 +117,23 @@ const drawerWidth = 320;
 //   })
 // );
 
+// ==============================|| 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 };
+
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiDialog-paperWidthSm': {
     maxWidth: '60%',
@@ -174,6 +169,8 @@ const Clients1 = () => {
   const ref = useRef(null);
   const [open, setOpen] = React.useState(false);
   const [open3, setOpen3] = React.useState(false);
+  const [open4, setOpen4] = React.useState(false);
+  const [selectedCustomer, setSelectedCustomer] = useState({}); // to edit
 
   const [packDays, setPackDays] = useState(0);
   const [startDate, setStartDate] = useState('');
@@ -198,6 +195,128 @@ const Clients1 = () => {
   const [tenid, setTenid] = useState('');
   const [loading1, setLoading1] = useState(false);
   const [currentcustomerid, setCurrentcustomerid] = useState('');
+
+  const [address, setAddress] = useState('');
+  const [latlong, setLatlong] = 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
+            });
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    } catch (err) {
+      console.log(err);
+    }
+  }, [address]);
+
+  useEffect(() => {
+    selectedCustomer &&
+      setLatlong({
+        lat: selectedCustomer.latitude,
+        lng: selectedCustomer.longitude
+      });
+  }, [selectedCustomer]);
+
+  const openToast = (message, variant, duration) => {
+    enqueueSnackbar(message, {
+      variant: variant,
+      anchorOrigin: { vertical: 'top', horizontal: 'right' },
+      autoHideDuration: duration
+    });
+  };
+
+  useEffect(() => {
+    console.log('selectedCustomer', selectedCustomer);
+  }, [selectedCustomer]);
+
+  // ==============================|| for dialog ||============================== //
+
+  const handleClickOpen4 = () => {
+    setOpen4(true);
+  };
+
+  const handleClose4 = () => {
+    setOpen4(false);
+  };
   /* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
   const textFieldRef = useRef(null);
 
@@ -258,12 +377,6 @@ const Clients1 = () => {
     }
   }, []);
 
-  //   useEffect(() => {
-  //     if (tenid) {
-  //       fetchData1();
-  //     }
-  //   }, []);
-
   useEffect(() => {
     if (tenid && !search) {
       //   fetchData1();
@@ -423,6 +536,7 @@ const Clients1 = () => {
             // setArr(arr)
             // setRows([...arr])
             // setStafflist([...arr])
+            setSelectedCustomer(arr[0]);
             setUsers([...arr]);
             setTempusers([...arr]);
             // if(arr[0].customerid){
@@ -482,33 +596,6 @@ const Clients1 = () => {
     }
   };
 
-  // const fetchData = async (customerId) => {
-  //   setUsernameload(true);
-
-  //   try {
-  //     const response = await axios.get(
-  //       `${process.env.REACT_APP_URL}/customers/summary?customerid=${customerId}`
-  //     );
-  //     if (response.data.status) {
-  //       setvisits(response.data.customervisits.visits);
-  //       setBillAmount(response.data.customervisits.billamount);
-  //       setPromotions(response.data.customervisits.promotions);
-  //       setCustVisits(response.data.customervisits);
-  //       setCustService(response.data.customerservices);
-  //       setCustMembership(response.data.customermembership);
-  //       console.log("customervisits", response.data.customervisits);
-  //       console.log("customerservices", response.data.customerservices);
-  //       console.log("customermembership", response.data.customermembership);
-  //     }
-  //     setLoading(false);
-  //     setUsernameload(false);
-  //   } catch (error) {
-  //     console.error("Error fetching data:", error);
-  //     setLoading(false);
-  //     setUsernameload(false);
-  //   }
-  // };
-
   const fetchData = async (tid) => {
     try {
       await axios
@@ -609,6 +696,66 @@ const Clients1 = () => {
     );
   }
 
+  // ==============================|| updateCustomer (post)||============================== //
+  const updateCustomer = async () => {
+    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.doorno) {
+      openToast('Enter Door Number ', '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 {
+        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: selectedCustomer.suburb,
+          city: selectedCustomer.city,
+          state: selectedCustomer.state,
+          postcode: selectedCustomer.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);
+          handleClose4();
+          fetchtable(localStorage.getItem('tenantid'));
+        }
+      } catch (error) {
+        console.log('postUpdate error', error);
+      }
+    }
+  };
+
   return (
     <>
       {(loading || usernameload) && <Loader />}
@@ -806,6 +953,7 @@ const Clients1 = () => {
                             setContactno(user.contactno);
                             fetchData(user.customerid);
                             fetchpercentage(user.customerid);
+                            setSelectedCustomer(user);
                           }}
                         >
                           <ListItemAvatar>
@@ -1105,7 +1253,7 @@ const Clients1 = () => {
                                   {
                                     <DeleteFilled
                                       style={{
-                                        fontSize: '20px',
+                                        fontSize: '12px',
                                         marginRight: '15px'
                                       }}
                                     />
@@ -1284,6 +1432,24 @@ const Clients1 = () => {
                                   </DialogActions>
                                 </BootstrapDialog> */}
                               </MenuItem>
+                              <MenuItem onClick={handleCloseSort}>
+                                <Button
+                                  variant="text"
+                                  onClick={() => {
+                                    handleClickOpen4();
+                                  }}
+                                >
+                                  {
+                                    <RiEdit2Fill
+                                      style={{
+                                        fontSize: '12px',
+                                        marginRight: '15px'
+                                      }}
+                                    />
+                                  }{' '}
+                                  Edit
+                                </Button>
+                              </MenuItem>
                               {/*  <MenuItem onClick={handleCloseSort}>
                                 <Button
                                   variant="text"
@@ -1309,6 +1475,254 @@ const Clients1 = () => {
                         </Grid>
                       </Grid>
                     </Grid>
+                    {/* ======================================== || Edit Dialog || ======================================== */}
+                    <Dialog
+                      open={open4}
+                      onClose={handleClose4}
+                      aria-labelledby="alert-dialog-title"
+                      aria-describedby="alert-dialog-description"
+                      maxWidth="lg"
+                      fullWidth
+                    >
+                      <DialogTitle id="alert-dialog-title" sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
+                        <Stack direction={'row'} alignItems={'center'} spacing={1}>
+                          <FaRegEdit style={{ fontSize: 25 }} /> <Typography variant="h3">Edit Customer</Typography>
+                        </Stack>
+                      </DialogTitle>
+                      <DialogContent>
+                        <Grid container spacing={2} sx={{ mt: 2 }}>
+                          <Grid item xs={6}>
+                            <Typography sx={{ mb: 1 }}>Customer Name</Typography>
+                            <TextField
+                              variant="outlined"
+                              fullWidth
+                              defaultValue={selectedCustomer.firstname}
+                              onChange={(e) => {
+                                setSelectedCustomer({
+                                  ...selectedCustomer,
+                                  firstname: e.target.value
+                                });
+                              }}
+                            />
+                          </Grid>
+
+                          <Grid item xs={6}>
+                            {' '}
+                            <Typography sx={{ mb: 1 }}>Contact Number</Typography>
+                            <Stack direction={'row'}>
+                              <TextField readonly variant="outlined" value={'+91'} sx={{ width: 60 }} />
+                              <TextField
+                                variant="outlined"
+                                fullWidth
+                                defaultValue={selectedCustomer.contactno}
+                                onChange={(e) => {
+                                  setSelectedCustomer({
+                                    ...selectedCustomer,
+                                    contactno: e.target.value
+                                  });
+                                }}
+                                inputProps={{
+                                  maxLength: 10
+                                }}
+                              />
+                            </Stack>
+                          </Grid>
+
+                          <Grid item xs={12}>
+                            {' '}
+                            <Typography sx={{ mb: 1 }}>Address</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.description);
+                                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 }}>Door No</Typography>
+                            <TextField
+                              variant="outlined"
+                              fullWidth
+                              defaultValue={selectedCustomer.doorno}
+                              onChange={(e) => {
+                                setSelectedCustomer({
+                                  ...selectedCustomer,
+                                  doorno: e.target.value
+                                });
+                              }}
+                            />
+                          </Grid>
+
+                          <Grid item xs={6}>
+                            <Typography sx={{ mb: 1 }}>Suburb</Typography>
+                            <TextField
+                              variant="outlined"
+                              fullWidth
+                              defaultValue={selectedCustomer.suburb}
+                              onChange={(e) => {
+                                setSelectedCustomer({
+                                  ...selectedCustomer,
+                                  suburb: e.target.value
+                                });
+                              }}
+                            />
+                          </Grid>
+
+                          <Grid item xs={6}>
+                            {' '}
+                            <Typography sx={{ mb: 1 }}>City</Typography>
+                            <TextField
+                              variant="outlined"
+                              fullWidth
+                              defaultValue={selectedCustomer.city}
+                              onChange={(e) => {
+                                setSelectedCustomer({
+                                  ...selectedCustomer,
+                                  city: e.target.value
+                                });
+                              }}
+                            />
+                          </Grid>
+
+                          <Grid item xs={6}>
+                            {' '}
+                            <Typography sx={{ mb: 1 }}>State</Typography>
+                            <TextField
+                              variant="outlined"
+                              fullWidth
+                              defaultValue={selectedCustomer.state}
+                              onChange={(e) => {
+                                setSelectedCustomer({
+                                  ...selectedCustomer,
+                                  state: e.target.value
+                                });
+                              }}
+                            />
+                          </Grid>
+
+                          <Grid item xs={6}>
+                            {' '}
+                            <Typography sx={{ mb: 1 }}>Postcode</Typography>
+                            <TextField
+                              variant="outlined"
+                              fullWidth
+                              defaultValue={selectedCustomer.postcode}
+                              onChange={(e) => {
+                                setSelectedCustomer({
+                                  ...selectedCustomer,
+                                  postcode: e.target.value
+                                });
+                              }}
+                            />
+                          </Grid>
+
+                          <Grid item xs={6}>
+                            {' '}
+                            <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 }}>
+                        <Button onClick={handleClose4} variant="contained" color="error" sx={{ mr: 2 }}>
+                          Close
+                        </Button>
+                        <Button
+                          onClick={() => {
+                            updateCustomer();
+                          }}
+                          variant="contained"
+                          autoFocus
+                        >
+                          Update
+                        </Button>
+                      </DialogActions>
+                    </Dialog>
                     {/* ======================================== || Cards || ======================================== */}
                     <Grid
                       item