RD map with PD,TM,SC

src/routes.js

@@ -151,6 +151,7 @@ import AddRetailDistributor from "./views/RetailDistributors/addRetailDistributo
 import ViewPrincipalDistributorSC from "./views/SalesCoOrdinators/ViewPrincipalDistributorSC";
 import ViewRetailDistributorSC from "./views/SalesCoOrdinators/ViewRetailDistributorSC";
 import ViewRetailDistributorPD from "./views/PrincipalDistributors/ViewRetailDistributorPD";
+import MapRD from "./views/RetailDistributors/MapRD";
 const routes = [
   //dashboard
 
@@ -360,6 +361,12 @@ const routes = [
     element: AddRetailDistributor,
     navName: "RetailDistributor",
   },
+  {
+    path: "/retaildistributor/mapping/:id",
+    name: "Mapping Retail Distributor with PD SC TM",
+    element: MapRD,
+    navName: "RetailDistributor",
+  },
   //----------------------- End Product Management Routes------------------------------------------------
 
   //Departure

src/views/Leaves/TodayLeaves.js

@@ -27,7 +27,7 @@ const TodayLeave = () => {
           show: itemPerPage,
         },
       });
-      console.log(res.data);
+      // console.log(res.data);
       setSalesCoOrdinatorsData(res.data?.leave);
       setTotalData(res.data?.total_data);
     } catch (err) {

src/views/RetailDistributors/MapRD.js

@@ -0,0 +1,897 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import axios from "axios";
+import {
+  Box,
+  Typography,
+  Grid,
+  Paper,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import { useParams, useNavigate } from "react-router-dom";
+import { isAutheticated } from "../../auth";
+import Button from "@material-ui/core/Button";
+import swal from "sweetalert";
+import debounce from "lodash.debounce";
+import TextField from "@mui/material/TextField";
+import DialogActions from "@mui/material/DialogActions";
+
+const MapRD = () => {
+  const { id } = useParams();
+  const token = isAutheticated();
+  const navigate = useNavigate();
+
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(true);
+  const [data, setData] = useState(null);
+
+  const pdnameRef = useRef();
+  const pdmobileRef = useRef();
+  const scnameRef = useRef();
+  const scmobileRef = useRef();
+  const tmnameRef = useRef();
+  const tmmobileRef = useRef();
+
+  const [modalcurrentPage, setmodalCurrentPage] = useState(1);
+  const modalitemPerPage = 10;
+  const [openPDModal, setOpenPDModal] = useState(false);
+  const [openSCModal, setOpenSCModal] = useState(false);
+  const [openTMModal, setOpenTMModal] = useState(false);
+
+  // For opening each modal
+  const handleOpenPDModal = () => setOpenPDModal(true);
+  const handleOpenSCModal = () => setOpenSCModal(true);
+  const handleOpenTMModal = () => setOpenTMModal(true);
+
+  // For closing each modal
+  const handleClosePDModal = () => setOpenPDModal(false);
+  const handleCloseSCModal = () => setOpenSCModal(false);
+  const handleCloseTMModal = () => setOpenTMModal(false);
+
+  const [modalTotalData, setModalTotalData] = useState(0);
+  const [modalSalesCoordinators, setModalSalesCoordinators] = useState([]);
+  const [modalPrincipalDistributors, setmodalPrincipalDistributors] = useState(
+    []
+  );
+  const [modalterritorymanagers, setmodalterritorymanagers] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Commented out the API call and using dummy data
+        const response = await axios.get(`/api/getRD/${id}`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "multipart/form-data",
+          },
+        });
+        setData(response.data);
+        // console.log('Retailer Details: ', response.data);
+      } catch (error) {
+        console.error("Error fetching data: ", error);
+      }
+    };
+
+    fetchData();
+  }, [id, token, success]);
+
+  // SC
+  const getSalesCoOrdinatorsData = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(`/api/salescoordinator/getAll`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: modalcurrentPage,
+          show: modalitemPerPage,
+          name: scnameRef.current?.value,
+          mobileNumber: scmobileRef.current?.value,
+        },
+      });
+      setModalSalesCoordinators(res.data?.salesCoOrinators);
+      setModalTotalData(res.data?.total_data);
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (openSCModal) {
+      getSalesCoOrdinatorsData();
+    }
+  }, [openSCModal, modalcurrentPage]);
+
+  // Debounced search for Sales Coordinators in modal
+  const debouncedmodalSearchforSC = useCallback(
+    debounce(() => {
+      setmodalCurrentPage(1);
+      getSalesCoOrdinatorsData();
+    }, 500),
+    [modalcurrentPage]
+  );
+
+  const handlemodalSearchChangeinSC = useCallback(() => {
+    debouncedmodalSearchforSC();
+  }, [debouncedmodalSearchforSC]);
+
+  // PD
+  const getprincipaldistributorData = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(`/api/v1/admin/users`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: modalcurrentPage,
+          show: modalitemPerPage,
+          name: pdnameRef.current?.value,
+          mobileNumber: pdmobileRef.current?.value,
+        },
+      });
+      setmodalPrincipalDistributors(res.data?.users);
+      setModalTotalData(res.data?.totalUsers);
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (openPDModal) {
+      getprincipaldistributorData();
+    }
+  }, [openPDModal, modalcurrentPage]);
+
+  // Debounced search for Principal Distributors in modal
+  const debouncedmodalSearchforPD = useCallback(
+    debounce(() => {
+      setmodalCurrentPage(1);
+      getprincipaldistributorData();
+    }, 500),
+    [modalcurrentPage]
+  );
+
+  const handlemodalSearchChangeinPD = useCallback(() => {
+    debouncedmodalSearchforPD();
+  }, [debouncedmodalSearchforPD]);
+
+  // TM
+  const getTerritorymanagersData = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(`/api/territorymanager/getAll`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: modalcurrentPage,
+          show: modalitemPerPage,
+          name: tmnameRef.current?.value,
+          mobileNumber: tmmobileRef.current?.value,
+        },
+      });
+      setmodalterritorymanagers(res.data?.territoryManager);
+      setModalTotalData(res.data?.total_data);
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (openTMModal) {
+      getTerritorymanagersData();
+    }
+  }, [openTMModal, modalcurrentPage]);
+
+  // Debounced search for Territory manager in modal
+  const debouncedmodalSearchforTM = useCallback(
+    debounce(() => {
+      setmodalCurrentPage(1);
+      getTerritorymanagersData();
+    }, 500),
+    [modalcurrentPage]
+  );
+
+  const handlemodalSearchChangeinTM = useCallback(() => {
+    debouncedmodalSearchforTM();
+  }, [debouncedmodalSearchforTM]);
+
+  const handlePreviousPage = () => {
+    if (modalcurrentPage > 1) {
+      setmodalCurrentPage(modalcurrentPage - 1);
+    }
+  };
+  const handleDelete = (designation) => {
+    swal({
+      title: "Are you sure?",
+      icon: "warning",
+      buttons: {
+        Yes: { text: "Yes", value: true },
+        Cancel: { text: "Cancel", value: "cancel" },
+      },
+    }).then((value) => {
+      if (value === true) {
+        // Create the data object based on designation
+        let data = {};
+        if (designation === "TM") {
+          data.mappedTM = true;
+        } else if (designation === "SC") {
+          data.mappedSC = true;
+        } else {
+          data.principal_distributor = true;
+        }
+  
+        // Make the PATCH request with the constructed data object
+        axios
+          .patch(
+            `/api/unmap/${id}`,
+            data, // Send the constructed data object
+            {
+              headers: {
+                "Access-Control-Allow-Origin": "*",
+                Authorization: `Bearer ${token}`,
+              },
+            }
+          )
+          .then((res) => {
+            swal({
+              title: "Deleted",
+              text: "Retail Distributor Unmapped successfully!",
+              icon: "success",
+              button: "Ok",
+            });
+            setSuccess((prev) => !prev);
+          })
+          .catch((err) => {
+            let msg = err?.response?.data?.message || "Something went wrong!";
+            swal({
+              title: "Warning",
+              text: msg,
+              icon: "error",
+              button: "Retry",
+              dangerMode: true,
+            });
+          });
+      }
+    });
+  };
+  
+  const handleUpdateMapping = async (rdid, designation) => {
+    try {
+      // Create the data object based on designation
+      let data = {};
+      if (designation === "TM") {
+        data.mappedTM = rdid;
+      } else if (designation === "SC") {
+        data.mappedSC = rdid;
+      } else {
+        data.principal_distributor = rdid;
+      }
+  
+      // Make the API request
+      await axios.put(
+        `/api/mapped/${id}`,
+        data, // Send the constructed data object
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+  
+      // Success alert
+      swal({
+        title: "Success",
+        text: "Mapped successfully!",
+        icon: "success",
+        button: "Ok",
+      });
+  
+      // Trigger success state change and close modals
+      setSuccess((prev) => !prev);
+      handleClosePDModal();
+      handleCloseSCModal();
+      handleCloseTMModal();
+    } catch (err) {
+      // Handle error and show error message
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    }
+  };  
+
+  if (!data) {
+    return <Typography>Loading...</Typography>;
+  }
+
+  return (
+    <Box sx={{ p: 3 }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 3,
+        }}
+      >
+        <Typography variant="h4">Retailer Details</Typography>
+        <Button
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            marginBottom: "1rem",
+            textTransform: "capitalize",
+          }}
+          onClick={() => {
+            navigate("/retail-distributor", { replace: true });
+          }}
+        >
+          Cancel
+        </Button>
+      </Box>
+
+      <Paper sx={{ p: 2, mb: 3 }}>
+        <Typography variant="h5" gutterBottom>
+          Retailer Details
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <Typography>
+              <strong>Trade Name:</strong> {data.kyc.trade_name}
+            </Typography>
+            <Typography>
+              <strong>Name:</strong> {data.name}
+            </Typography>
+            <Typography>
+              <strong>Address:</strong> {data.kyc.address}
+            </Typography>
+            <Typography>
+              <strong>Town/City:</strong> {data.kyc.city}
+            </Typography>
+            <Typography>
+              <strong>District:</strong> {data.kyc.district}
+            </Typography>
+            <Typography>
+              <strong>State:</strong> {data.kyc.state}
+            </Typography>
+            <Typography>
+              <strong>Pincode:</strong> {data.kyc.pincode}
+            </Typography>
+            <Typography>
+              <strong>Mobile Number:</strong> {data.mobile_number}
+            </Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <Typography>
+              <strong>Mapped Territory Manager:</strong>{" "}
+              {data?.mappedTM?.name || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Mapped Principal Distributor:</strong>{" "}
+              {data?.principal_distributer?.name || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Mapped Sales Coordinator:</strong>{" "}
+              {data?.mappedSC?.name || "Not Mapped"}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+
+      {/* Territory Managers */}
+      <Paper sx={{ p: 2, mb: 3 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="h6" gutterBottom>
+            Territory Manager Details
+          </Typography>
+          <Box>
+            <Button
+              variant="contained"
+              color="primary"
+              size="small" // Set button size to small
+              style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
+              onClick={handleOpenTMModal}
+            >
+              Map TM
+            </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              size="small" // Set button size to small
+              style={{ backgroundColor: "red" }}
+              onClick={() => handleDelete("TM")}
+            >
+              Unmap TM
+            </Button>
+          </Box>
+        </Box>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <Typography>
+              <strong>Name:</strong> {data.mappedTM?.name || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Mobile Number:</strong>{" "}
+              {data.mappedTM?.mobileNumber || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Email:</strong> {data.mappedTM?.email || "Not Mapped"}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+
+      {/* Sales Coordinators */}
+      <Paper sx={{ p: 2, mb: 3 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="h6" gutterBottom>
+            Sales Coordinator Details
+          </Typography>
+          <Box>
+            <Button
+              variant="contained"
+              color="primary"
+              size="small" // Set button size to small
+              style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
+              onClick={handleOpenSCModal}
+            >
+              Map SC
+            </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              size="small" // Set button size to small
+              style={{ backgroundColor: "red" }}
+              onClick={() => handleDelete("SC")}
+            >
+              Unmap SC
+            </Button>
+          </Box>
+        </Box>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <Typography>
+              <strong>Name:</strong> {data.mappedSC?.name || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Mobile Number:</strong>{" "}
+              {data.mappedSC?.mobileNumber || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Email:</strong> {data.mappedSC?.email || "Not Mapped"}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+
+      {/* Principal Distributor */}
+      <Paper sx={{ p: 2, mb: 3 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="h6" gutterBottom>
+            Principal Distributor Details
+          </Typography>
+          <Box>
+            <Button
+              variant="contained"
+              color="primary"
+              size="small" // Set button size to small
+              style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
+              onClick={handleOpenPDModal}
+            >
+              Map PD
+            </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              size="small" // Set button size to small
+              style={{ backgroundColor: "red" }}
+              onClick={() => handleDelete("PD")}
+            >
+              Unmap PD
+            </Button>
+          </Box>
+        </Box>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <Typography>
+              <strong>Name:</strong>{" "}
+              {data.principal_distributer?.name || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Mobile Number:</strong>{" "}
+              {data.principal_distributer?.phone || "Not Mapped"}
+            </Typography>
+            <Typography>
+              <strong>Email:</strong>{" "}
+              {data.principal_distributer?.email || "Not Mapped"}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+      {/* Principal Distributor */}
+      <Dialog
+        open={openPDModal}
+        onClose={handleClosePDModal}
+        maxWidth="md"
+        fullWidth
+      >
+        <DialogTitle>Search and Add Principal Distributor</DialogTitle>
+        <DialogContent>
+          <div
+            style={{
+              display: "flex",
+              gap: "16px",
+              marginBottom: "2rem",
+              marginTop: "-1rem",
+            }}
+          >
+            <TextField
+              label="Principal Distributor Name"
+              placeholder="Principal Distributor name"
+              inputRef={pdnameRef}
+              onChange={handlemodalSearchChangeinPD}
+              disabled={loading}
+              style={{ flex: 1, marginRight: "16px" }}
+            />
+            <TextField
+              style={{ flex: 1 }}
+              label="Mobile Number"
+              placeholder="Mobile Number"
+              inputRef={pdmobileRef}
+              onChange={handlemodalSearchChangeinPD}
+              disabled={loading}
+            />
+          </div>
+          <div className="table-responsive table-shoot mt-3">
+            <table className="table table-centered table-nowrap">
+              <thead>
+                <tr>
+                  <th>Id</th>
+                  <th>SBU</th>
+                  <th>Name</th>
+                  <th>Mobile</th>
+                  <th>Email</th>
+                  <th>SC</th>
+                  <th>TM</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {modalPrincipalDistributors.length > 0 ? (
+                  modalPrincipalDistributors.map((PD) => (
+                    <tr key={PD._id}>
+                      <td>{PD.uniqueId}</td>
+                      <td>{PD.SBU}</td>
+                      <td>{PD.name}</td>
+                      <td>{PD.phone}</td>
+                      <td>{PD.email}</td>
+                      <td>{PD.mappedbySC?.name || "N/A"}</td>
+                      <td>{PD.mappedby?.name || "N/A"}</td>
+                      <td>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => handleUpdateMapping(PD._id, "PD")}
+                        >
+                          Add
+                        </Button>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan="6" className="text-center">
+                      No Principal Distributor found!
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="d-flex justify-content-between">
+            <div>
+              Showing {modalPrincipalDistributors?.length} of {modalTotalData}{" "}
+              entries
+            </div>
+            <div>
+              <button
+                onClick={handlePreviousPage}
+                disabled={modalcurrentPage === 1 || loading}
+                className="btn btn-primary"
+              >
+                Previous
+              </button>
+              <button
+                onClick={
+                  modalPrincipalDistributors.length === modalitemPerPage
+                    ? setmodalCurrentPage(modalcurrentPage + 1)
+                    : null
+                }
+                disabled={
+                  modalPrincipalDistributors?.length < modalitemPerPage ||
+                  loading
+                }
+                className="btn btn-primary ml-2"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClosePDModal} color="secondary">
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+      {/* Sales Coordinator */}
+      <Dialog
+        open={openSCModal}
+        onClose={handleCloseSCModal}
+        maxWidth="md"
+        fullWidth
+      >
+        <DialogTitle>Search and Add Sales Coordinator</DialogTitle>
+        <DialogContent>
+          <div
+            style={{
+              display: "flex",
+              gap: "16px",
+              marginBottom: "2rem",
+              marginTop: "-1rem",
+            }}
+          >
+            <TextField
+              label="Sales Coordinator Name"
+              placeholder="Sales Coordinator name"
+              inputRef={scnameRef}
+              onChange={handlemodalSearchChangeinSC}
+              disabled={loading}
+              style={{ flex: 1, marginRight: "16px" }}
+            />
+            <TextField
+              style={{ flex: 1 }}
+              label="Mobile Number"
+              placeholder="Mobile Number"
+              inputRef={scmobileRef}
+              onChange={handlemodalSearchChangeinSC}
+              disabled={loading}
+            />
+          </div>
+
+          <div className="table-responsive table-shoot mt-3">
+            <table className="table table-centered table-nowrap">
+              <thead>
+                <tr>
+                  <th>Id</th>
+                  <th>Name</th>
+                  <th>Mobile</th>
+                  <th>TM</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {modalSalesCoordinators.map((coordinator) => (
+                  <tr key={coordinator._id}>
+                    <td>{coordinator.uniqueId}</td>
+                    <td>{coordinator.name}</td>
+                    <td>{coordinator.mobileNumber}</td>
+                    <td>{coordinator.mappedby?.name || "N/A"}</td>
+                    <td>
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={() => handleUpdateMapping(coordinator._id, "SC")}
+                      >
+                        Add
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="d-flex justify-content-between">
+            <div>
+              Showing {modalSalesCoordinators?.length} of {modalTotalData}{" "}
+              entries
+            </div>
+            <div>
+              <button
+                onClick={handlePreviousPage}
+                disabled={modalcurrentPage === 1 || loading}
+                className="btn btn-primary"
+              >
+                Previous
+              </button>
+              <button
+                onClick={
+                  modalSalesCoordinators.length === modalitemPerPage
+                    ? setmodalCurrentPage(modalcurrentPage + 1)
+                    : null
+                }
+                disabled={
+                  modalSalesCoordinators?.length < modalitemPerPage || loading
+                }
+                className="btn btn-primary ml-2"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseSCModal} color="secondary">
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+      {/* Territory Manager */}
+      <Dialog
+        open={openTMModal}
+        onClose={handleCloseTMModal}
+        maxWidth="md"
+        fullWidth
+      >
+        <DialogTitle>Search and Add Territory Manager</DialogTitle>
+        <DialogContent>
+          <div
+            style={{
+              display: "flex",
+              gap: "16px",
+              marginBottom: "2rem",
+              marginTop: "-1rem",
+            }}
+          >
+            <TextField
+              label="Territory Manager Name"
+              placeholder="Territory Manager name"
+              inputRef={tmnameRef}
+              onChange={handlemodalSearchChangeinTM}
+              disabled={loading}
+              style={{ flex: 1, marginRight: "16px" }}
+            />
+            <TextField
+              style={{ flex: 1 }}
+              label="Mobile Number"
+              placeholder="Mobile Number"
+              inputRef={tmmobileRef}
+              onChange={handlemodalSearchChangeinTM}
+              disabled={loading}
+            />
+          </div>
+          <div className="table-responsive table-shoot mt-3">
+            <table className="table table-centered table-nowrap">
+              <thead>
+                <tr>
+                  <th>Id</th>
+                  <th>Name</th>
+                  <th>Mobile</th>
+                  <th>Email</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {modalterritorymanagers.length > 0 ? (
+                  modalterritorymanagers.map((TM) => (
+                    <tr key={TM._id}>
+                      <td>{TM.uniqueId}</td>
+                      <td>{TM.name}</td>
+                      <td>{TM.mobileNumber}</td>
+                      <td>{TM.email}</td>
+                      <td>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => handleUpdateMapping(TM._id, "TM")}
+                        >
+                          Add
+                        </Button>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan="6" className="text-center">
+                      No Territory Manager found!
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="d-flex justify-content-between">
+            <div>
+              Showing {modalterritorymanagers?.length} of {modalTotalData}{" "}
+              entries
+            </div>
+            <div>
+              <button
+                onClick={handlePreviousPage}
+                disabled={modalcurrentPage === 1 || loading}
+                className="btn btn-primary"
+              >
+                Previous
+              </button>
+              <button
+                onClick={
+                  modalterritorymanagers.length === modalitemPerPage
+                    ? setmodalCurrentPage(modalcurrentPage + 1)
+                    : null
+                }
+                disabled={
+                  modalterritorymanagers?.length < modalitemPerPage || loading
+                }
+                className="btn btn-primary ml-2"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseTMModal} color="secondary">
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default MapRD;

src/views/RetailDistributors/RetailDistributor.js

@@ -157,6 +157,7 @@ const [totalPages, setTotalPages] = useState(1);
                           <th className="text-start">Principal Distributor</th>
                           <th className="text-start">Territory Manager</th>
                           <th className="text-start">Sales Coordinator</th>
+                          <th className="text-start">Mapping</th>
                           <th className="text-start">Action</th>
                         </tr>
                       </thead>
@@ -200,6 +201,22 @@ const [totalPages, setTotalPages] = useState(1);
                               <td className="text-start">
                               {retailDistributor?.mappedSCDetails?.name || "N/A"}
                               </td>
+                              <td className="text-start">
+                              <Link
+                                    // to={`/retaildistributor/mapping/${retailDistributor._id}`}
+                                  >
+                                    <button
+                                      style={{
+                                        color: "white",
+                                        marginRight: "1rem",
+                                      }}
+                                      type="button"
+                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-2"
+                                    >
+                                       Map
+                                    </button>
+                                  </Link>
+                                  </td>
                               <td className="text-start">
                                 <Link
                                   to={`/retaildistributor/view/${retailDistributor._id}`}

src/views/RetailDistributors/SingleRetailDistributor.js

@@ -18,7 +18,7 @@ const SingleRetailDistributor = () => {
     const fetchData = async () => {
       try {
         // Commented out the API call and using dummy data
-        const response = await axios.get(`api/getRD/${id}`, {
+        const response = await axios.get(`/api/getRD/${id}`, {
           headers: {
             'Access-Control-Allow-Origin': '*',
             Authorization: `Bearer ${token}`,
@@ -154,7 +154,7 @@ const SingleRetailDistributor = () => {
             {retailerDetails.kyc.fertilizer_license_img ? (
               <Avatar
                 variant="square"
-                src={retailerDetails.fertilizer_license_img.url}
+                src={retailerDetails.kyc.fertilizer_license_img.url}
                 sx={{ width: 100, height: 100, mb: 2, cursor: 'pointer' }}
                 onClick={() => handleOpenPopup(retailerDetails.kyc.fertilizer_license_img.url)}
               />