RD map with PD,TM,SC
This commit is contained in:
Sibunnayak
parent
47130b8309
commit
070d5a4514
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
897
src/views/RetailDistributors/MapRD.js
Normal file
897
src/views/RetailDistributors/MapRD.js
Normal file
@ -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;
|
||||
@ -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}`}
|
||||
|
||||
@ -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)}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user