diff --git a/src/pages/nearle/clients/clients1.js b/src/pages/nearle/clients/clients1.js
index 66a1ab3..9f7ec83 100644
--- a/src/pages/nearle/clients/clients1.js
+++ b/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 { useTheme, styled } from "@mui/material/styles";
+import { useEffect, useRef, useState, Fragment, useMemo } from 'react';
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 {
- 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 { MoreOutlined, SearchOutlined, 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) && }
@@ -806,6 +953,7 @@ const Clients1 = () => {
setContactno(user.contactno);
fetchData(user.customerid);
fetchpercentage(user.customerid);
+ setSelectedCustomer(user);
}}
>
@@ -1105,7 +1253,7 @@ const Clients1 = () => {
{
@@ -1284,6 +1432,24 @@ const Clients1 = () => {
*/}
+
{/*