diff --git a/src/pages/nearle/orders/multipleOrders.js b/src/pages/nearle/orders/multipleOrders.js
index feec990..9ab46ee 100644
--- a/src/pages/nearle/orders/multipleOrders.js
+++ b/src/pages/nearle/orders/multipleOrders.js
@@ -1,7 +1,1153 @@
 import React from 'react';
+import Loader from 'components/Loader';
+import { useEffect, useState, useRef, Fragment } from 'react';
+import { useTheme } from '@mui/material/styles';
+import MainCard from 'components/MainCard';
+import axios from 'axios';
+import ClearIcon from '@mui/icons-material/Clear';
+import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
+import { Empty } from 'antd';
+import MyLocationIcon from '@mui/icons-material/MyLocation';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+var utc = require('dayjs/plugin/utc');
+dayjs.extend(utc);
+import { enqueueSnackbar } from 'notistack';
+import { useNavigate } from 'react-router';
+
+import {
+  FormControl,
+  InputAdornment,
+  Grid,
+  Typography,
+  Stack,
+  Box,
+  Button,
+  TextField,
+  Autocomplete,
+  CardActions,
+  Chip,
+  Avatar,
+  Divider,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Checkbox,
+  DialogActions,
+  CircularProgress,
+  ButtonGroup,
+  FormLabel,
+  IconButton,
+  Drawer,
+  InputLabel,
+  Select,
+  MenuItem,
+  Switch,
+  CardHeader,
+  Card,
+  OutlinedInput,
+  FormGroup,
+  FormControlLabel,
+  Table,
+  TableContainer,
+  TableCell,
+  TableBody,
+  TableRow,
+  Paper,
+  TableHead
+} from '@mui/material';
+import { log } from 'util';
 
 const MultipleOrders = () => {
-  return <div>MultipleOrders</div>;
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const [locaName, setLocoName] = useState('Select Location');
+  const [locations, setLocations] = useState([]);
+  const [tenantlist, setTenantlist] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [btnLoading, setBtnLoading] = useState(false);
+  const [appId, setAppId] = useState(0);
+  const [isAppLocation, setIsAppLocation] = useState(false);
+  const [isBusiness, setIsBusiness] = useState(false);
+  const [isClient, setisclient] = useState(false);
+  const [tenantLocations, setTenantlocations] = useState([]);
+  const userid = localStorage.getItem('userid');
+  const tenId = localStorage.getItem('tenantid');
+  const [tenantid, setTenantid] = useState();
+  const [tid, setTid] = useState(0);
+  const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
+  const [tenantlocation, setTenantlocation] = useState('');
+  const [isLocation, setIsLocation] = useState(false);
+  const [basePrice, setBasePrice] = useState(0);
+  const [pricePerKm, setPricePerKm] = useState(0);
+  const [minKm, setMinKm] = useState(0);
+  const [tenantinfo, setTenantinfo] = useState({});
+  const [pickCust, setPickCust] = useState({});
+  const [dropCust, setDropCust] = useState([]);
+  const [isCustomerOpen, setIsCustomerOpen] = useState(false);
+  const [searchCustList, setSearchCustList] = useState('');
+  const [customerlist, setCustomerlist] = useState([]);
+  const [clientdetail, setClientdetail] = useState([]);
+  const [appLocaLat, setAppLocaLat] = useState();
+  const [appLocaLng, setAppLocaLng] = useState();
+  const [appLocaRadius, setAppLocaRadius] = useState();
+  const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
+  const [timeslotarr, setTimeslotarr] = useState([]);
+  const [showDistance, setShowDistance] = useState(false);
+  const [subCat, setSubCat] = useState([]);
+  const [subCatName, setSubCatName] = useState('Select ');
+  const [subCatId, setSubCatId] = useState(0);
+  const [weight, setWeight] = useState('');
+  const [selectedCatChip, setSelectedCatChip] = useState(null);
+  const [isSms, setIsSms] = useState(0);
+  const [starttime, setStatrttime] = useState();
+  const [endtime, setEndtime] = useState();
+  const [selectedtime, setSelectedtime] = useState('');
+  const [distance, setDistance] = useState(0);
+  const [alertmessage, setAlertmessage] = useState('');
+  const [otherinstructions, setOtherinstructions] = useState('');
+  const [totalCharge, setTotalCharge] = useState(0);
+  const [admintoken, setAdmintoken] = useState();
+  const [tenant, setTenant] = useState(0);
+  const [totaldist, settotaldist] = useState(0);
+  const [totalAmt, settotalAmt] = useState(0);
+
+  // =============================================== || chipStyle ( time slot) || ===============================================
+  const chipStyle = (chipLabel) => ({
+    cursor: 'pointer',
+    backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : 'default',
+    color: selectedCatChip === chipLabel ? '#fff' : '',
+    '&:hover': {
+      backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : theme.palette.primary.light,
+      color: '#fff'
+    }
+  });
+  const handleChipClick = (chipLabel) => {
+    setSelectedCatChip(chipLabel);
+  };
+
+  // =============================================== || opentoast || ===============================================
+  const opentoast = (message, variant, time) => {
+    enqueueSnackbar(message, {
+      variant: variant,
+      anchorOrigin: { vertical: 'top', horizontal: 'right' },
+      autoHideDuration: time ? time : 1500
+    });
+    console.log(alertmessage);
+  };
+  // ==============================|| fetchAppLocations ||============================== //
+  const fetchAppLocations = async () => {
+    try {
+      const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
+      // const updatedLocations = [
+      //   ...locationRes.data.details,
+      //   { partnername: 'All', applocationid: -1 }
+      // ];
+      // console.log('fetchAppLocations', updatedLocations);
+      console.log('fetchAppLocations', locationRes.data.details);
+      setLocations(locationRes.data.details);
+    } catch (err) {
+      console.log('locationRes', err);
+    }
+  };
+  useEffect(() => {
+    fetchAppLocations();
+  }, []);
+
+  // ===================================================== || fetchtenantinfolist || =====================================================
+
+  const fetchtenantinfolist = async (id) => {
+    setLoading(true);
+    await axios
+      .get(`${process.env.REACT_APP_URL}/tenants/gettenants/?applocationid=${id}&status=active`)
+
+      .then((res) => {
+        console.log(res);
+        if (res.data.status) {
+          let arr = [];
+          res.data.details.map((val) => {
+            arr.push({
+              ...val,
+              label: `${val.tenantname}`
+            });
+          });
+          setTenantlist(arr);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
+  // ============================================= || fetchTenantPricing  || =============================================
+
+  const fetchTenantPricing = async (id) => {
+    try {
+      const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantpricing/?tenantid=${tenId}`);
+      console.log('pricingResponse', pricingResponse.data.details);
+      setBasePrice(pricingResponse.data.details.baseprice);
+      setPricePerKm(pricingResponse.data.details.priceperkm);
+      setMinKm(pricingResponse.data.details.minkm);
+    } catch (error) {
+      console.log('fetchTenantPricing error', error);
+    }
+  };
+  useEffect(() => {
+    fetchTenantPricing();
+  }, []);
+  // ============================================= || gettenantlocations (branches) || =============================================
+  const gettenantlocations = async (id) => {
+    try {
+      const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`);
+      console.log('gettenantlocations', res.data.details);
+      if (res.data.details.length == 1) {
+        setIsLocation(true);
+        setTenantlocations(res.data.details);
+        setPickCust(res.data.details[0]);
+        setTenanatLocoId(res.data.details[0].locationid);
+        setTenantlocation(res.data.details[0].locationaddress); //client address
+        setIsBusiness(true);
+      } else {
+        setTenantlocations(res.data.details);
+        setIsBusiness(false); // became true after select from tenanatLocations
+      }
+    } catch (err) {
+      console.log('gettenantlocations', err);
+    }
+  };
+  useEffect(() => {
+    gettenantlocations(tenId);
+  }, []);
+  // ========================================================= || clientdetails || =========================================================
+  const clientdetails = async () => {
+    try {
+      let url =
+        searchCustList == ''
+          ? `${process.env.REACT_APP_URL}/customers/gettenantcustomers/?tenantid=${tenId}&pageno=1&pagesize=10`
+          : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tenId}&keyword=${searchCustList}`;
+      await axios
+        .get(url)
+        .then((res) => {
+          if (res.data.status) {
+            console.log('clientdetails', res.data.details);
+
+            setClientdetail(res.data.details);
+            setCustomerlist(res.data.details);
+            let arr = [];
+            res.data.details.map((val) => {
+              arr.push({
+                label: `${val.firstname} | ${val.contactno}`,
+                ...val
+              });
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          opentoast('server error', 'warning');
+        });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEffect(() => {
+    if (tenId) {
+      clientdetails();
+    }
+  }, [searchCustList.length > 3, searchCustList == '', tenId]);
+
+  // ========================================================= || calculateTotal(dist , charge) || =========================================================
+  const calculateTotal = () => {
+    let a1 = 0;
+    let a2 = 0;
+    dropCust.map((customer) => {
+      a1 += customer.distance;
+      a2 += customer.totalcharge;
+    });
+    settotaldist(a1);
+    settotalAmt(a2);
+  };
+  useEffect(() => {
+    calculateTotal();
+  }, [dropCust]);
+
+  // ========================================================= || handleCheckboxChange || =========================================================
+  const handleCheckboxChange = async (event, customer) => {
+    if (event.target.checked) {
+      // If the checkbox is checked, calculate the distance and add the customer
+      try {
+        const obj = await calculateDistance(customer);
+        const { roundedDistance, totalcharge } = obj;
+        // Create a new customer object with the distance property
+        const updatedCustomer = {
+          ...customer,
+          distance: roundedDistance,
+          totalcharge: totalcharge
+        };
+
+        // Add the updated customer object to dropCust
+        setDropCust((prevDropCust) => [...prevDropCust, updatedCustomer]);
+
+        // Log the rounded distance
+        console.log(`Rounded Distance: ${roundedDistance} km`);
+      } catch (error) {
+        console.error('Failed to calculate distance:', error);
+      }
+    } else {
+      // If the checkbox is unchecked, remove the customer from dropCust
+      setDropCust((prevDropCust) => {
+        return prevDropCust.filter((cust) => cust.customerid !== customer.customerid);
+      });
+    }
+  };
+
+  // ========================================================= || calculateDistance || =========================================================
+  const calculateDistance = async (customer) => {
+    const service = new google.maps.DistanceMatrixService();
+
+    // Helper function to get the distance matrix
+    const getDistanceMatrix = (origins, destinations) => {
+      return new Promise((resolve, reject) => {
+        service.getDistanceMatrix(
+          {
+            origins: [new google.maps.LatLng(origins.locationlatitude, origins.locationlong)],
+            destinations: [new google.maps.LatLng(destinations.latitude, destinations.longitude)],
+            travelMode: 'DRIVING',
+            unitSystem: google.maps.UnitSystem.METRIC // Distances in metric units (km)
+          },
+          (response, status) => {
+            if (status === 'OK') {
+              resolve(response);
+            } else {
+              reject(new Error(`Error calculating distance: ${status}`));
+            }
+          }
+        );
+      });
+    };
+
+    try {
+      // Call getDistanceMatrix and wait for the response
+      const response = await getDistanceMatrix(pickCust, customer);
+
+      // Extract distance from the first result
+      const distanceInMeters = response.rows[0].elements[0].distance.value;
+
+      // Convert distance from meters to kilometers
+      const distanceInKilometers = distanceInMeters / 1000;
+
+      // Round the distance to the nearest integer
+      const roundedDistance = Math.round(distanceInKilometers);
+      let totalcharge;
+      if (roundedDistance < minKm) {
+        setTotalCharge(basePrice);
+      } else {
+        console.log('minKm', minKm);
+        console.log('pricePerKm', pricePerKm);
+        console.log('basePrice', basePrice);
+        totalcharge = (roundedDistance - minKm) * pricePerKm + basePrice;
+        console.log('totalcharge', totalcharge);
+        setTotalCharge(totalcharge);
+      }
+
+      // Return the rounded distance
+      return { roundedDistance, totalcharge };
+    } catch (error) {
+      console.error('Error calculating distance:', error);
+      throw error; // Rethrow the error to be handled by the caller
+    }
+  };
+
+  // ==================================================== || fetchTiming || ====================================================
+  const fetchTiming = async () => {
+    setLoading(true);
+    await axios
+      .get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`)
+      .then((res) => {
+        console.log('fetchTiming', res);
+        const { opentime, closetime, latitude, longitude, radius } = res.data.details[0];
+        if (res.data.status) {
+          setAppLocaLat(latitude);
+          setAppLocaLng(longitude);
+          setAppLocaRadius(radius);
+          setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
+          setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
+          console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`);
+          console.log('endtime', `${dayjs().format('MM-DD-YYYY')} ${closetime} `);
+          let arr = [];
+          for (
+            let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`, j = 0;
+            dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0;
+            j++, i = dayjs(i).add(30, 'm')
+          ) {
+            arr.push(i);
+          }
+          console.log('setTimeslotarr', arr);
+          setTimeslotarr(arr);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
+  useEffect(() => {
+    if (appId) {
+      fetchTiming();
+    }
+  }, [starttime, endtime, appId]);
+  // ==================================================== || getsubcategories || ====================================================
+  const getsubcategories = async () => {
+    await axios
+      .get(`${process.env.REACT_APP_URL}/utils/getsubcategories/?moduleid=6`)
+      .then((res) => {
+        console.log('subcateRes', res.data.details);
+        if (res.data.status) {
+          setSubCat(res.data.details);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  useEffect(() => {
+    getsubcategories();
+  }, []);
+  const fetchAppAdminTokens = async () => {
+    setLoading(true);
+    await axios
+      .get(`${process.env.REACT_APP_URL}/utils/getapplocationconfig/?applocationid=${appId}`)
+      .then((res) => {
+        const userfcmtokemArray = res.data.details.applocationadmins.map((admin) => admin.userfcmtokem); // fcm => firebase cloud messaging
+        console.log('fetchAppAdminTokens', res);
+        console.log('userfcmtokemArray', userfcmtokemArray);
+        if (res.data.status) {
+          setAdmintoken(userfcmtokemArray);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (starttime && endtime) {
+      fetchAppAdminTokens();
+    }
+  }, [starttime, endtime]);
+
+  useEffect(() => {
+    console.log('pickCust', pickCust);
+  }, [pickCust]);
+  useEffect(() => {
+    console.log('dropCust', dropCust);
+  }, [dropCust]);
+  // ==================================================== || fetchtenantinfo || ====================================================
+  const fetchtenantinfo = async () => {
+    setLoading(true);
+    console.log('tid', tid);
+
+    await axios
+      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
+      .then((res) => {
+        console.log('fetchtenantinfo', res);
+        if (res.data.status) {
+          setTenant(res.data.details);
+          setTenantid(res.data.details.tenantid);
+          fetchAppAdminTokens();
+          setSubCatName(res.data.details.subcategoryname);
+          setSubCatId(res.data.details.subcategoryid);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
+  useEffect(() => {
+    if (tid) {
+      fetchtenantinfo();
+    }
+  }, [tid]);
+  // ================================================== ||  sendnotifications || ==================================================
+  const sendnotifications = async () => {
+    setLoading(true);
+    await axios
+      .post(`${process.env.REACT_APP_URL}/utils/sendnotifications`, {
+        priority: 'high',
+        registration_ids: admintoken,
+        data: {
+          accessid: process.env.REACT_APP_RIDER_ACCESS_ID
+        },
+        notification: {
+          title: 'Nearle Merchant',
+          body: 'An Order has been placed successfully,kindly process the same',
+          sound: 'ring'
+        }
+      })
+      .then((res) => {
+        console.log(res);
+        if (res.data.message == 'Success') {
+          enqueueSnackbar('Notification sent Successfully', {
+            variant: 'success',
+            anchorOrigin: { vertical: 'top', horizontal: 'right' },
+            autoHideDuration: 1000
+          });
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+        enqueueSnackbar(err.message, {
+          variant: 'error',
+          anchorOrigin: { vertical: 'top', horizontal: 'right' },
+          autoHideDuration: 1000
+        });
+        setLoading(false);
+      });
+  };
+  // =============================================== ||  createorders  || ===============================================
+  const createorders = async () => {
+    const arr = dropCust.map((customer) => ({
+      applocationid: pickCust.applocationid,
+      cancellled: '',
+      //   categoryid: +tenant.categoryid,
+      configid: 9,
+      customerid: 0,
+      deliveryaddress: customer.address || '',
+      deliverycharge: +customer.totalcharge || 0,
+      deliverycity: customer.city || '',
+      deliverycontactno: customer.contactno || '',
+      deliverycustomer: customer.firstname || '',
+      deliveryid: +customer.customerid,
+      deliverylandmark: customer.landmark || '',
+      deliverylat: customer.latitude.toString(),
+      deliverylocation: customer.suburb || '',
+      deliverylocationid: customer.deliverylocationid || 0,
+      deliverylong: customer.longitude.toString(),
+      deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} `,
+      deliverytype: 'B',
+      delivered: '',
+      itemcount: 1,
+      kms: customer.distance.toString() || 0,
+      locationid: +pickCust.locationid,
+      moduleid: +pickCust.moduleid,
+      orderamount: +customer.totalcharge || 0,
+      ordercharges: 0.0,
+      orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      orderheaderid: 0,
+      orderid: '', //
+      ordernotes: otherinstructions,
+      orderstatus: 'created',
+      ordervalue: +customer.totalcharge || 0,
+      partnerid: pickCust.partnerid,
+      partneruserid: +userid,
+      paymentstatus: 1,
+      paymenttype: 42,
+      pending: '',
+      pickupaddress: pickCust.locationaddress || '',
+      pickupcity: pickCust.locationcity || '',
+      pickupcontactno: pickCust.locationcontact || '',
+      pickupcustomer: pickCust.locationname || '',
+      pickuplandmark: pickCust.landmark || '',
+      pickuplat: pickCust.locationlatitude.toString(),
+      pickuplocation: pickCust.locationsuburb || '',
+      pickuplocationid: pickCust.locationid || 0,
+      pickuplong: pickCust.locationlong.toString(),
+      processing: '',
+      ready: '',
+      remarks: '',
+      //   smsdelivery: isSms,
+      //   subcategoryid: +subCatId,
+      taxamount: 0.0,
+      tenantid: pickCust.tenantid,
+      tenantuserid: 0
+    }));
+    console.log('arr', arr);
+
+    if (!tenId) {
+      opentoast('Choose Client ', 'warning');
+    }
+    //  else if (!tenantinfo.address) {
+    //   opentoast('Choose Pickup Location', 'warning');
+    // } else if (!clientinfo.address) {
+    //   opentoast('Choose Drop Location', 'warning');
+    // } else if (!selectedtime) {
+    //   opentoast('Choose Schedule Time', 'warning');
+    // }
+    else {
+      setLoading(true);
+
+      await axios
+        .post(`${process.env.REACT_APP_URL}/orders/createorders`, arr)
+        .then((res) => {
+          if (res.data.status) {
+            enqueueSnackbar('Order Created Successfully', {
+              variant: 'success',
+              anchorOrigin: { vertical: 'top', horizontal: 'right' },
+              autoHideDuration: 1000
+            });
+            if (admintoken) {
+              // notifyadmin(admintoken);
+              sendnotifications();
+            }
+
+            navigate('/orders');
+          } else {
+            opentoast(res.data.message, 'warning');
+          }
+          setLoading(false);
+          console.log(res);
+        })
+        .catch((err) => {
+          console.log(err);
+          //   opentoast(err.data.message, 'warning');
+          setLoading(false);
+        });
+    }
+    console.log(arr);
+  };
+  return (
+    <>
+      {loading && <Loader />}
+      <Grid
+        container
+        spacing={3}
+        sx={{
+          position: 'sticky',
+          top: '60px',
+          bgcolor: theme.palette.background.default,
+          zIndex: 100,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'start',
+          alignItems: 'center',
+          spacing: 5
+        }}
+      >
+        <Grid item xs={12} sx={{ width: '100%', mt: -1 }}>
+          <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
+            <Typography variant="h3"> Create Multiple Order</Typography>
+            {tenantLocations.length == 1 ? (
+              <TextField
+                // disabled={!isAppLocation || !isClient}
+                variant="outlined"
+                fullWidth
+                label={'Business Location'}
+                value={tenantLocations[0].locationname}
+                focused
+                sx={{ width: '350px' }}
+                InputProps={{
+                  style: { color: theme.palette.primary.main },
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <MyLocationIcon color="primary" />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            ) : (
+              <Autocomplete
+                fullWidth
+                // disabled={!isAppLocation || !isClient}
+                id="combo-box-demo"
+                options={tenantLocations || []}
+                getOptionLabel={(option) => `${option.locationname} (${option.locationsuburb})` || ''}
+                renderInput={(params) => <TextField {...params} label="Select Business Locations" focused color="primary" />}
+                sx={{ width: '350px' }}
+                onChange={(event, value, reason) => {
+                  if (value) {
+                    console.log('Business Locations', value);
+                    console.log('locationid', value.locationid);
+                    setTenanatLocoId(value.locationid);
+                    setTid(value.tenantid);
+                    setTenantlocation(value.locationaddress);
+                    setIsLocation(true);
+                    setIsBusiness(true);
+                    setPickCust(value);
+                  }
+                  if (reason == 'clear') {
+                    setIsLocation(false);
+                    setIsBusiness(false);
+                  }
+                }}
+              />
+            )}
+          </Stack>
+        </Grid>
+
+        {/* ===================================================== || Pickup || ===================================================== */}
+        <Grid item xs={12} sx={{ width: '100%' }}>
+          <MainCard
+            sx={{ height: '100%' }}
+            title={'Pickup'}
+            secondary={
+              <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
+                <DatePicker
+                  format="DD-MM-YYYY"
+                  onChange={(e) => {
+                    let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
+                    console.log('dateres11');
+                    console.log(dateres11);
+                    setSelectedtime('');
+                    if (dateres11 <= 0) {
+                      console.log('startdate', e);
+                      setStartdate(e);
+                      let arr = [];
+                      timeslotarr.map((val) => {
+                        if (dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
+                          arr.push(val);
+                        }
+                      });
+                      if (arr[0]) {
+                        setOrderarr([
+                          {
+                            sno: 1,
+                            address: '',
+                            customerid: '',
+                            deliverytime: dayjs(arr[0]) || '',
+                            deliverylocationid: '',
+                            clientname: '',
+                            contactno: '',
+                            latitude: '',
+                            longitude: ''
+                          }
+                        ]);
+                      } else {
+                        setOrderarr([]);
+                      }
+                    } else {
+                      setAlertmessage('choose Upcoming Date');
+                      opentoast('choose Upcoming Date', 'warning');
+                      setStartdate(NaN);
+                    }
+                  }}
+                  value={dayjs(startdate)}
+                  sx={{ width: '100%' }}
+                  disablePast
+                />
+              </LocalizationProvider>
+            }
+          >
+            <TableContainer component={Paper}>
+              <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Tenant</TableCell>
+                    <TableCell>Address</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>{pickCust.locationname}</TableCell>
+                    <TableCell>{pickCust.locationaddress}</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </MainCard>
+        </Grid>
+        {/* ===================================================== || Drop  || ===================================================== */}
+        <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
+          <MainCard
+            sx={{ height: '100%' }}
+            title={`Drop (${dropCust?.length || 0})`}
+            secondary={
+              <Button
+                variant="outlined"
+                size="small"
+                sx={{
+                  '&:hover': {
+                    bgcolor: theme.palette.primary.main,
+                    color: 'white'
+                  }
+                }}
+                onClick={() => {
+                  if (!isLocation) {
+                    opentoast('Select Business Location', 'warning');
+                  } else {
+                    setIsCustomerOpen(true);
+                    setSearchCustList('');
+                  }
+                }}
+              >
+                Select Customers
+              </Button>
+            }
+          >
+            <TableContainer component={Paper}>
+              <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>S.No</TableCell>
+                    <TableCell>Customer</TableCell>
+                    <TableCell>Address</TableCell>
+                    <TableCell>Kms</TableCell>
+                    <TableCell align="right">Charge</TableCell>
+                    <TableCell>Action</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {dropCust.map((customer, index) => (
+                    <TableRow key={index}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{customer.firstname}</TableCell>
+                      <TableCell>{customer.address}</TableCell>
+                      <TableCell>{customer.distance}</TableCell>
+                      <TableCell align="right">{`₹${customer.totalcharge}.00`}</TableCell>
+                      <TableCell align="center">
+                        {
+                          <CloseOutlined
+                            style={{ cursor: 'pointer', color: 'red' }}
+                            onClick={(event) => handleCheckboxChange(event, customer)}
+                          />
+                        }
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                  {dropCust.length != 0 && (
+                    <TableRow>
+                      <TableCell>Total</TableCell>
+                      <TableCell></TableCell>
+                      <TableCell></TableCell>
+                      <TableCell>{totaldist}</TableCell>
+                      <TableCell align="right">{`₹${totalAmt}.00`}</TableCell>
+                      <TableCell></TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </MainCard>
+        </Grid>
+        {/* ================================================= || Time || ================================================= */}
+
+        {/* <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
+          <MainCard sx={{ mt: 2, height: '390px' }}>
+            <Grid container spacing={4}>
+              <Grid item xs={12} md={6}>
+                <Typography variant="h5">Date</Typography>
+                <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
+                  <DatePicker
+                    format="DD-MM-YYYY"
+                    onChange={(e) => {
+                      let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
+                      console.log('dateres11');
+                      console.log(dateres11);
+                      setSelectedtime('');
+                      if (dateres11 <= 0) {
+                        console.log('startdate', e);
+                        setStartdate(e);
+                        let arr = [];
+                        timeslotarr.map((val) => {
+                          if (dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
+                            arr.push(val);
+                          }
+                        });
+                        if (arr[0]) {
+                          setOrderarr([
+                            {
+                              sno: 1,
+                              address: '',
+                              customerid: '',
+                              deliverytime: dayjs(arr[0]) || '',
+                              deliverylocationid: '',
+                              clientname: '',
+                              contactno: '',
+                              latitude: '',
+                              longitude: ''
+                            }
+                          ]);
+                        } else {
+                          setOrderarr([]);
+                        }
+                      } else {
+                        setAlertmessage('choose Upcoming Date');
+                        opentoast('choose Upcoming Date', 'warning');
+                        setStartdate(NaN);
+                      }
+                    }}
+                    value={dayjs(startdate)}
+                    sx={{ width: '100%', mt: 2 }}
+                    disablePast
+                  />
+                </LocalizationProvider>
+                <Typography variant="h5" sx={{ my: 2 }}>
+                  Time
+                </Typography>
+                <MainCard
+                  sx={{
+                    height: '210px',
+                    mt: 1,
+                    overflowY: 'scroll',
+                    '&::-webkit-scrollbar': {
+                      width: '3px', // Width of vertical scrollbar
+                      height: '10px' // Height of horizontal scrollbar
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                      backgroundColor: '#65387A' // Color of the scrollbar thumb
+                    }
+                  }}
+                >
+                  <Grid container spacing={2}>
+                    {timeslotarr.map((val, index) => {
+                      if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
+                        return (
+                          <Fragment key={index}>
+                            <Grid item>
+                              <Chip
+                                key={index}
+                                sx={{ cursor: 'pointer' }}
+                                color={dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm') ? 'primary' : 'default'}
+                                label={dayjs(val).format('hh:mm A')}
+                                onClick={() => {
+                                  setSelectedtime(val);
+                                }}
+                              />
+                            </Grid>
+                          </Fragment>
+                        );
+                      }
+                    })}
+                  </Grid>
+                </MainCard>
+              </Grid>
+              <Grid item xs={12} sm={6} sx={{}}>
+                {showDistance && (
+                  <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
+                    <Stack spacing={1.5}>
+                      <Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
+                    </Stack>
+                    <Stack spacing={1.5}>
+                      <Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
+                    </Stack>
+                  </Stack>
+                )}
+
+                <Stack direction={'column'} justifyContent={'space-between'} sx={{ mb: 2 }}>
+                  <Typography variant="h5">Category</Typography>
+                  <Autocomplete
+                    // disablePortal
+                    id="combo-box-demo"
+                    options={subCat}
+                    getOptionLabel={(option) => `${option.subcategoryname}` || ''}
+                    sx={{ my: 2, zIndex: '99' }}
+                    fullWidth
+                    renderInput={(params) => <TextField {...params} label={subCatName == '' ? tenant.subcategoryname : subCatName} />}
+                    onChange={(event, value, reason) => {
+                      if (value) {
+                        console.log(value);
+                        setSubCatName(value.subcategoryname);
+                        setSubCatId(value.subcategoryid);
+                      }
+                    }}
+                  />
+                </Stack>
+                <Typography variant="h5">Weight</Typography>
+                <Stack direction={'row'} justifyContent={'space-evenly'} sx={{ border: '1px solid #eee', my: 2, py: 2 }}>
+                  <Chip
+                    variant="contained"
+                    color="default"
+                    label="1-10kgs"
+                    sx={chipStyle('1-10kgs')}
+                    onClick={() => {
+                      handleChipClick('1-10kgs');
+                      setWeight('1-10kgs');
+                    }}
+                  />
+                  <Chip
+                    variant="contained"
+                    color="default"
+                    label="11-20kgs"
+                    sx={chipStyle('11-20kgs')}
+                    onClick={() => {
+                      handleChipClick('11-20kgs');
+                      setWeight('11-20kgs');
+                    }}
+                  />
+                  <Chip
+                    variant="contained"
+                    color="default"
+                    label="21-30kgs"
+                    sx={chipStyle('21-30kgs')}
+                    onClick={() => {
+                      handleChipClick('21-30kgs');
+                      setWeight('21-30kgs');
+                    }}
+                  />
+                </Stack>
+                <Stack direction={'row'} justifyContent={'space-between'} sx={{ mt: 4 }}>
+                  <Typography variant="h5">SMS Delivery</Typography>
+                  <Switch
+                    checked={isSms === 1}
+                    onChange={(e) => {
+                      setIsSms(e.target.checked ? 1 : 0);
+                    }}
+                  />
+                </Stack>
+              </Grid>
+            </Grid>
+          </MainCard>
+        </Grid> */}
+        <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
+          {/* ================================================= || Notes || ================================================= */}
+          <MainCard sx={{ mt: 2 }} title={'Notes'}>
+            <Grid container>
+              <Grid item xs={12}>
+                <TextField
+                  focused
+                  id="outlined-multiline-static"
+                  sx={{ width: '100%', height: '100%', mb: 2 }}
+                  multiline
+                  rows={1}
+                  placeholder="Notes"
+                  value={otherinstructions}
+                  onChange={(e) => setOtherinstructions(e.target.value)}
+                />
+              </Grid>
+              <Stack direction="row" justifyContent={'end'} sx={{ mt: 2, width: '100%' }}>
+                <Button
+                  disabled={dropCust.length == 0}
+                  size="medium"
+                  variant="outlined"
+                  onClick={() => {
+                    setLoading(true);
+                    setBtnLoading(true);
+                    createorders();
+                    setTimeout(() => {
+                      setLoading(false);
+                      setBtnLoading(false);
+                    }, 2000);
+                  }}
+                  sx={{
+                    '&:hover': {
+                      transform: 'scale(1.05)',
+                      transition: 'transform 0.3s ease'
+                    }
+                  }}
+                >
+                  {btnLoading ? <CircularProgress color="primary" size={20} thickness={10} /> : 'Create'}
+                </Button>
+              </Stack>
+            </Grid>
+          </MainCard>
+        </Grid>
+      </Grid>
+      {/* ============================================= || saved address Dialog || ============================================= */}
+      <Dialog
+        open={isCustomerOpen}
+        onClose={() => {
+          setIsCustomerOpen(false);
+        }}
+        fullWidth
+        sx={{ minWidth: 'lg' }}
+      >
+        <DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
+          <Stack>
+            <Typography variant="h4"> {`Select Drop Customers (${dropCust.length || 0})`}</Typography>
+            <FormControl
+              sx={{
+                width: '100%',
+                mt: 1
+              }}
+            >
+              <Stack spacing={2} sx={{ py: 0.2 }}>
+                <OutlinedInput
+                  fullWidth
+                  id="input-search-header"
+                  placeholder="Search"
+                  value={searchCustList}
+                  onChange={(e) => setSearchCustList(e.target.value)}
+                  sx={{
+                    '& .MuiOutlinedInput-input': {
+                      p: '10.5px 0px 12px'
+                    },
+                    bgcolor: 'white'
+                  }}
+                  startAdornment={
+                    <InputAdornment position="start">
+                      <SearchOutlined style={{ fontSize: 'small' }} />
+                    </InputAdornment>
+                  }
+                  endAdornment={
+                    <IconButton
+                      sx={{ visibility: searchCustList ? 'visible' : 'hidden' }}
+                      onClick={() => {
+                        setSearchCustList('');
+                      }}
+                    >
+                      <ClearIcon />
+                    </IconButton>
+                  }
+                  autoComplete="off"
+                />
+              </Stack>
+            </FormControl>
+          </Stack>
+        </DialogTitle>
+        <Divider />
+        <DialogContent sx={{ p: 2.5 }}>
+          {customerlist.length == 0 ? (
+            <Stack spacing={2} direction={'row'} alignItems={'center'} justifyContent={'center'} sx={{ minHeight: 600, maxHeight: 600 }}>
+              <Empty />
+            </Stack>
+          ) : (
+            <Stack spacing={2} sx={{ minHeight: 600, maxHeight: 600 }}>
+              {customerlist &&
+                customerlist.map((customer, index) => (
+                  <FormGroup key={index}>
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={dropCust.some((cust) => cust.customerid === customer.customerid)} // Set the checked state of the checkbox based on whether the customer is in `dropCust`
+                          onChange={(event) => handleCheckboxChange(event, customer)}
+                        />
+                      }
+                      label={
+                        <div style={{ width: '100%' }}>
+                          <Typography variant="subtitle1" sx={{ textAlign: 'left' }}>
+                            {`${customer.firstname} (${customer.contactno})`}
+                          </Typography>
+
+                          <Typography variant="body2" color="secondary" sx={{ textAlign: 'left' }}>
+                            {customer.address}
+                          </Typography>
+                        </div>
+                      }
+                    />
+                  </FormGroup>
+                ))}
+            </Stack>
+          )}
+        </DialogContent>
+        <Divider />
+        <DialogActions sx={{ p: 2.5 }}>
+          <Button
+            color="error"
+            variant="outlined"
+            sx={{
+              '&:hover': {
+                bgcolor: 'red',
+                color: 'white'
+              }
+            }}
+            onClick={() => {
+              setIsCustomerOpen(false);
+            }}
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
 };
 
 export default MultipleOrders;