principal distributor create with address and salescoordinator attendance system create
This commit is contained in:
Sibunnayak
parent
a6bf1af0e9
commit
49c1e59ee4
263
src/App.js
263
src/App.js
@ -1,111 +1,192 @@
|
||||
import React, { Component, Suspense } from "react";
|
||||
// import React, { Component, Suspense } from "react";
|
||||
// import axios from "axios";
|
||||
// import { Router, Route, Routes, HashRouter } from "react-router-dom";
|
||||
// import { useState, useEffect } from "react";
|
||||
// import { Toaster } from "react-hot-toast";
|
||||
// import "./scss/style.scss";
|
||||
// import ForgotPassword from "./views/pages/register/ForgotPassword";
|
||||
// import NewRegister from "./views/pages/register/NewRegister";
|
||||
// import ProtectedRoute from './components/ProtectedRoute';
|
||||
// import { isAutheticated } from "./auth";
|
||||
// import InternetConnectionPopUp from "./views/InternetConnectionPopUp";
|
||||
|
||||
// const loading = (
|
||||
// <div className="pt-3 text-center">
|
||||
// <div className="sk-spinner sk-spinner-pulse"></div>
|
||||
// </div>
|
||||
// );
|
||||
// // import EditProducts from './views/Commerce/Editproducts'
|
||||
// // Containers
|
||||
// const DefaultLayout = React.lazy(() => import("./layout/DefaultLayout"));
|
||||
|
||||
// // Pages
|
||||
// const Login = React.lazy(() => import("./views/pages/login/Login"));
|
||||
// const Register = React.lazy(() =>
|
||||
// import("./views/pages/register/Change_password")
|
||||
// );
|
||||
// const Page404 = React.lazy(() =>
|
||||
// import("./views/pages/register/page404/Page404")
|
||||
// );
|
||||
// const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));
|
||||
|
||||
// const App = () => {
|
||||
// const [userdata, setUserData] = useState(null);
|
||||
// const token = isAutheticated();
|
||||
|
||||
// useEffect(() => {
|
||||
// const getUser = async () => {
|
||||
// let existanceData = localStorage.getItem("authToken");
|
||||
// if (!existanceData) {
|
||||
// // console.log(existanceData.userData)
|
||||
// setUserData(false);
|
||||
// } else {
|
||||
// try {
|
||||
// // console.log('requesting user data from server')
|
||||
// let response = await axios.get(`/api/v1/user/details`, {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
// });
|
||||
// // console.log("jjjjjjjj", response.data);
|
||||
// const data = response?.data;
|
||||
// if (
|
||||
// data?.success &&
|
||||
// (data?.user?.role === "admin" || data?.user?.role === "Employee")
|
||||
// ) {
|
||||
// setUserData(data?.user);
|
||||
// } else {
|
||||
// setUserData(false);
|
||||
// }
|
||||
// } catch (err) {
|
||||
// setUserData(false);
|
||||
// console.log(err);
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
// getUser();
|
||||
// }, []);
|
||||
// return (
|
||||
// <HashRouter>
|
||||
// <Suspense fallback={loading}>
|
||||
// <Routes>
|
||||
// <Route exact path="/" name="Login Page" element={<Login />} />
|
||||
// <Route
|
||||
// exact
|
||||
// path="/register"
|
||||
// name="Register Page"
|
||||
// element={<NewRegister />}
|
||||
// />
|
||||
// <Route
|
||||
// exact
|
||||
// path="/password/forgot"
|
||||
// name="Forgot Page"
|
||||
// element={<ForgotPassword />}
|
||||
// />
|
||||
// <Route exact path="/404" name="Page 404" element={<Page404 />} />
|
||||
// <Route exact path="/500" name="Page 500" element={<Page500 />} />
|
||||
|
||||
// <Route
|
||||
// path="/"
|
||||
// name="Home"
|
||||
// element={<ProtectedRoute
|
||||
// element={
|
||||
// userdata &&
|
||||
// (userdata.role === "admin" || userdata.role === "Employee") ? (
|
||||
// <DefaultLayout />
|
||||
// ) : userdata === false ? (
|
||||
// <Login />
|
||||
// ) : (
|
||||
// <div></div>
|
||||
// )
|
||||
// }/>}
|
||||
// />
|
||||
|
||||
// <Route path="*" name="Home" element={<ProtectedRoute element={<DefaultLayout />} />}/>
|
||||
// </Routes>
|
||||
// <Toaster />
|
||||
// </Suspense>
|
||||
// <InternetConnectionPopUp />
|
||||
// </HashRouter>
|
||||
// );
|
||||
// };
|
||||
// export default App;
|
||||
|
||||
import React, { Suspense, useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { Router, Route, Routes, HashRouter } from "react-router-dom";
|
||||
import { useState, useEffect } from "react";
|
||||
import { HashRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import "./scss/style.scss";
|
||||
import ForgotPassword from "./views/pages/register/ForgotPassword";
|
||||
import NewRegister from "./views/pages/register/NewRegister";
|
||||
// import ProtectedRoute from './components/ProtectedRoute';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
import { isAutheticated } from "./auth";
|
||||
import InternetConnectionPopUp from "./views/InternetConnectionPopUp";
|
||||
|
||||
const loading = (
|
||||
<div className="pt-3 text-center">
|
||||
<div className="sk-spinner sk-spinner-pulse"></div>
|
||||
</div>
|
||||
<div className="pt-3 text-center">
|
||||
<div className="sk-spinner sk-spinner-pulse"></div>
|
||||
</div>
|
||||
);
|
||||
// import EditProducts from './views/Commerce/Editproducts'
|
||||
// Containers
|
||||
const DefaultLayout = React.lazy(() => import("./layout/DefaultLayout"));
|
||||
|
||||
// Pages
|
||||
const DefaultLayout = React.lazy(() => import("./layout/DefaultLayout"));
|
||||
const Login = React.lazy(() => import("./views/pages/login/Login"));
|
||||
const Register = React.lazy(() =>
|
||||
import("./views/pages/register/Change_password")
|
||||
);
|
||||
const Page404 = React.lazy(() =>
|
||||
import("./views/pages/register/page404/Page404")
|
||||
);
|
||||
const Page404 = React.lazy(() => import("./views/pages/register/page404/Page404"));
|
||||
const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));
|
||||
|
||||
const App = () => {
|
||||
const [userdata, setUserData] = useState(null);
|
||||
const token = isAutheticated();
|
||||
const [userdata, setUserData] = useState(null);
|
||||
const token = isAutheticated();
|
||||
|
||||
useEffect(() => {
|
||||
const getUser = async () => {
|
||||
let existanceData = localStorage.getItem("authToken");
|
||||
if (!existanceData) {
|
||||
// console.log(existanceData.userData)
|
||||
setUserData(false);
|
||||
} else {
|
||||
try {
|
||||
// console.log('requesting user data from server')
|
||||
let response = await axios.get(`/api/v1/user/details`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log("jjjjjjjj", response.data);
|
||||
const data = response?.data;
|
||||
if (
|
||||
data?.success &&
|
||||
(data?.user?.role === "admin" || data?.user?.role === "Employee")
|
||||
) {
|
||||
setUserData(data?.user);
|
||||
} else {
|
||||
setUserData(false);
|
||||
}
|
||||
} catch (err) {
|
||||
setUserData(false);
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
getUser();
|
||||
}, []);
|
||||
return (
|
||||
<HashRouter>
|
||||
<Suspense fallback={loading}>
|
||||
<Routes>
|
||||
<Route exact path="/" name="Login Page" element={<Login />} />
|
||||
<Route
|
||||
exact
|
||||
path="/register"
|
||||
name="Register Page"
|
||||
element={<NewRegister />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/password/forgot"
|
||||
name="Forgot Page"
|
||||
element={<ForgotPassword />}
|
||||
/>
|
||||
<Route exact path="/404" name="Page 404" element={<Page404 />} />
|
||||
<Route exact path="/500" name="Page 500" element={<Page500 />} />
|
||||
|
||||
<Route
|
||||
path="/"
|
||||
name="Home"
|
||||
element={
|
||||
userdata &&
|
||||
(userdata.role === "admin" || userdata.role === "Employee") ? (
|
||||
<DefaultLayout />
|
||||
) : userdata === false ? (
|
||||
<Login />
|
||||
) : (
|
||||
<div></div>
|
||||
)
|
||||
useEffect(() => {
|
||||
const getUser = async () => {
|
||||
let existanceData = localStorage.getItem("authToken");
|
||||
if (!existanceData) {
|
||||
setUserData(false);
|
||||
} else {
|
||||
try {
|
||||
let response = await axios.get(`/api/v1/user/details`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
const data = response?.data;
|
||||
if (data?.success && (data?.user?.role === "admin" || data?.user?.role === "Employee")) {
|
||||
setUserData(data?.user);
|
||||
} else {
|
||||
setUserData(false);
|
||||
}
|
||||
} catch (err) {
|
||||
setUserData(false);
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
/>
|
||||
};
|
||||
getUser();
|
||||
}, [token]);
|
||||
|
||||
<Route path="*" name="Home" element={<DefaultLayout />} />
|
||||
</Routes>
|
||||
<Toaster />
|
||||
</Suspense>
|
||||
<InternetConnectionPopUp />
|
||||
</HashRouter>
|
||||
);
|
||||
return (
|
||||
<HashRouter>
|
||||
<Suspense fallback={loading}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Login />} />
|
||||
<Route path="/register" element={<NewRegister />} />
|
||||
<Route path="/password/forgot" element={<ForgotPassword />} />
|
||||
<Route path="/404" element={<Page404 />} />
|
||||
<Route path="/500" element={<Page500 />} />
|
||||
|
||||
<Route
|
||||
path="/*"
|
||||
element={<ProtectedRoute element={DefaultLayout} />}
|
||||
/>
|
||||
|
||||
{/* Redirect all other routes to 404 */}
|
||||
<Route path="*" element={<Navigate to="/404" />} />
|
||||
</Routes>
|
||||
<Toaster />
|
||||
</Suspense>
|
||||
<InternetConnectionPopUp />
|
||||
</HashRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
21
src/_nav.js
21
src/_nav.js
@ -38,13 +38,13 @@ const _nav = [
|
||||
icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
|
||||
group: "",
|
||||
},
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: "Customers",
|
||||
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
||||
// to: "/customers-details",
|
||||
// group: "Customers",
|
||||
// },
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Principal Distributor",
|
||||
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
||||
to: "/principal-distributor",
|
||||
group: "PrincipalDistributor",
|
||||
},
|
||||
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
@ -84,6 +84,13 @@ const _nav = [
|
||||
group: "SalesCoOrdinator",
|
||||
},
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: "Attendance",
|
||||
// icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
|
||||
// to: "/attendance/today",
|
||||
// group: "AttendanceSalesCoOrdinator",
|
||||
// },
|
||||
// {
|
||||
// component: CNavGroup,
|
||||
// name: "Orders",
|
||||
// icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
|
||||
|
||||
@ -1,18 +1,35 @@
|
||||
import React, { useEffect, useState, } from "react";
|
||||
// import React, { useEffect, useState, } from "react";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
// const ProtectedRoute = (props) => {
|
||||
// let Cmp = props;
|
||||
// const history = useNavigate();
|
||||
// useEffect(() => {
|
||||
// if (!localStorage.getItem('authToken'))
|
||||
// history('/')
|
||||
// }, [])
|
||||
// return (
|
||||
// <>
|
||||
// <Cmp />
|
||||
// {/* {...props} */}
|
||||
// </>
|
||||
// )
|
||||
// }
|
||||
|
||||
// export default ProtectedRoute
|
||||
import React, { useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
const ProtectedRoute = (props) => {
|
||||
let Cmp = props;
|
||||
const history = useNavigate();
|
||||
|
||||
const ProtectedRoute = ({ element: Element }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('authToken'))
|
||||
history('/')
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<Cmp />
|
||||
{/* {...props} */}
|
||||
</>
|
||||
)
|
||||
if (!localStorage.getItem('authToken')) {
|
||||
navigate('/');
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
return <Element />;
|
||||
}
|
||||
|
||||
export default ProtectedRoute
|
||||
export default ProtectedRoute;
|
||||
|
||||
|
||||
@ -15,8 +15,8 @@ import { cibGmail } from "@coreui/icons";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
const setupAxios = () => {
|
||||
// axios.defaults.baseURL = "http://localhost:5000";
|
||||
axios.defaults.baseURL = "https://cheminova-api-2.onrender.com";
|
||||
axios.defaults.baseURL = "http://localhost:5000";
|
||||
// axios.defaults.baseURL = "https://cheminova-api-2.onrender.com";
|
||||
|
||||
axios.defaults.headers = {
|
||||
"Cache-Control": "no-cache,no-store",
|
||||
|
||||
@ -89,9 +89,9 @@ import EditShippingPolicy from "./views/Content/editShippingPolicy";
|
||||
import EditRefundpolicy from "./views/Content/editRefundPolicy";
|
||||
import EditAboutUs from "./views/Content/editAboutUs";
|
||||
|
||||
// import EditUserAddress from "./views/customerDetails/editUserAddress";
|
||||
// import editPrincipalDistributorAddress from "./views/customerDetails/editPrincipalDistributorAddress";
|
||||
// import AddUserAddress from "./views/customerDetails/addUserAddress";
|
||||
import viewDetails from "./views/customerDetails/viewDetails";
|
||||
import viewDetails from "./views/PrincipalDistributors/viewDetails";
|
||||
import Design from "./views/Design/design";
|
||||
import RegisterImage from "./views/Images/RegisterImage";
|
||||
import LoginImage from "./views/Images/LoginImage";
|
||||
@ -112,11 +112,11 @@ import CreateBlog from "./views/Blog/CreateBlog";
|
||||
import users from "./views/Users/users";
|
||||
import UpdateBlog from "./views/Blog/EditBlog";
|
||||
import ViewBlog from "./views/Blog/ViewBlog";
|
||||
import CustomerTable from "./views/customerDetails/customerTable";
|
||||
import SingleUserAllDetails from "./views/customerDetails/singleUserAllDetails";
|
||||
import principalDistributor from "./views/PrincipalDistributors/principalDistributor";
|
||||
import SinglePrincipalDistributorAllDetails from "./views/PrincipalDistributors/singlePrincipalDistributorAllDetails";
|
||||
|
||||
import { element } from "prop-types";
|
||||
import AddCustomer from "./views/customerDetails/addCustomer";
|
||||
import addPrincipalDistributor from "./views/PrincipalDistributors/addPrincipalDistributor";
|
||||
import InStoreCashOrders from "./views/orders/InStoreCashOrders";
|
||||
|
||||
import InStoreQRCodeOrders from "./views/orders/InStoreQRCodeOrders";
|
||||
@ -127,6 +127,9 @@ import Currency from "./views/configuration/Currency";
|
||||
import SalesCoOrdinator from "./views/SalesCoOrdinators/SalesCoOrdinator";
|
||||
import EditSalesCoOrdinator from "./views/SalesCoOrdinators/EditSalesCoOrdinator";
|
||||
import AddSalesCoOrdinator from "./views/SalesCoOrdinators/AddSalesCoOrdinator";
|
||||
import TodayAttendanceSales from "./views/SalesAttendance/TodayAttendanceSales";
|
||||
import AttendanceSalesCoordinator from "./views/SalesAttendance/AttendanceSalesCoordinator";
|
||||
import SingleAttendanceSalesCoOrdinator from "./views/SalesAttendance/SingleAttendanceSalesCoordinator";
|
||||
const routes = [
|
||||
//dashboard
|
||||
|
||||
@ -194,6 +197,25 @@ const routes = [
|
||||
element: AddSalesCoOrdinator,
|
||||
navName: "SalesCoOrdinators",
|
||||
},
|
||||
// Attendence SalesCoOrdinator
|
||||
{
|
||||
path: "/attendance/today",
|
||||
name: "Today's Attendance SalesCoOrdinator",
|
||||
element: TodayAttendanceSales,
|
||||
navName: "AttendanceSalesCoOrdinator",
|
||||
},
|
||||
{
|
||||
path: "/salescoordinator/attendance",
|
||||
name: "Attendance SalesCoOrdinator",
|
||||
element: AttendanceSalesCoordinator,
|
||||
navName: "AttendanceSalesCoOrdinator",
|
||||
},
|
||||
{
|
||||
path: "/attendance/view/:id",
|
||||
name: "Single SalesCoOrdinator Attendance",
|
||||
element: SingleAttendanceSalesCoOrdinator,
|
||||
navName: "AttendanceSalesCoOrdinator",
|
||||
},
|
||||
//Gst tax
|
||||
{
|
||||
path: "/tax",
|
||||
@ -240,22 +262,22 @@ const routes = [
|
||||
// },
|
||||
//------------------customers Route-------------------------
|
||||
{
|
||||
path: "/customers-details",
|
||||
name: "Customers",
|
||||
element: CustomerTable,
|
||||
navName: "Customers",
|
||||
path: "/principal-distributor",
|
||||
name: "PrincipalDistributor",
|
||||
element: principalDistributor,
|
||||
navName: "PrincipalDistributor",
|
||||
},
|
||||
{
|
||||
path: "/customers-details/:_id",
|
||||
name: "Customers",
|
||||
element: SingleUserAllDetails,
|
||||
navName: "Customers",
|
||||
path: "/principal-distributor/:_id",
|
||||
name: "PrincipalDistributor",
|
||||
element: SinglePrincipalDistributorAllDetails,
|
||||
navName: "PrincipalDistributor",
|
||||
},
|
||||
{
|
||||
path: "/add-customer",
|
||||
name: "Customers",
|
||||
element: AddCustomer,
|
||||
navName: "Customers",
|
||||
path: "/add-principal-distributor",
|
||||
name: "PrincipalDistributor",
|
||||
element: addPrincipalDistributor,
|
||||
navName: "PrincipalDistributor",
|
||||
},
|
||||
//------------------ End customers Route-------------------------
|
||||
|
||||
@ -267,7 +289,7 @@ const routes = [
|
||||
// {
|
||||
// path: "/users-address/edit/:id",
|
||||
// name: "Edit user address",
|
||||
// element: EditUserAddress,
|
||||
// element: editPrincipalDistributorAddress,
|
||||
// },
|
||||
{
|
||||
path: "/users-address/view",
|
||||
|
||||
361
src/views/PrincipalDistributors/addPrincipalDistributor.js
Normal file
361
src/views/PrincipalDistributors/addPrincipalDistributor.js
Normal file
@ -0,0 +1,361 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
TextField,
|
||||
Button,
|
||||
Card,
|
||||
FormControl,
|
||||
Grid,
|
||||
FormHelperText,
|
||||
OutlinedInput,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
const styles = {
|
||||
formStyle: {
|
||||
fontWeight: "700",
|
||||
fontSize: "12px",
|
||||
fontFamily: "inter",
|
||||
marginBottom: "3px",
|
||||
marginLeft: "0",
|
||||
},
|
||||
topRightButton: {
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "10px",
|
||||
},
|
||||
};
|
||||
|
||||
const AddPrincipalDistributor = () => {
|
||||
const navigate = useNavigate();
|
||||
const [user, setUser] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
phone: "",
|
||||
});
|
||||
const [id, setUserId] = useState("");
|
||||
const token = isAutheticated();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState({
|
||||
street: "",
|
||||
city: "",
|
||||
state: "",
|
||||
postalCode: "",
|
||||
country: "",
|
||||
company_name: "",
|
||||
gst_number: "",
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
setData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
};
|
||||
|
||||
const handleInputChanges = (e) => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleAddressSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (
|
||||
data.street === "" ||
|
||||
data.city === "" ||
|
||||
data.state === "" ||
|
||||
data.postalCode === "" ||
|
||||
data.country === ""
|
||||
) {
|
||||
toast.error("Please fill all mandatory fields.");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
axios
|
||||
.post(
|
||||
`/api/shipping/address/admin/new/${id}`,
|
||||
{ ...data },
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
setLoading(false);
|
||||
navigate("/principal-distributor");
|
||||
toast.success(res.data.message ? res.data.message : "Address Added!");
|
||||
})
|
||||
.catch((error) => {
|
||||
setLoading(false);
|
||||
toast.error(
|
||||
error.response.data.message
|
||||
? error.response.data.message
|
||||
: "Something went wrong!"
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const generatePassword = (name, email) => {
|
||||
const combinedStr = (name + email).toLowerCase();
|
||||
const specialChars = "@#*";
|
||||
const alphaChars = combinedStr.match(/[a-zA-Z]/g);
|
||||
const filteredChars = combinedStr.match(/[^\W_]/g);
|
||||
let passwordChars = alphaChars.concat(filteredChars);
|
||||
|
||||
const specialChar = specialChars.charAt(
|
||||
Math.floor(Math.random() * specialChars.length)
|
||||
);
|
||||
const randomIndex = Math.floor(Math.random() * (passwordChars.length + 1));
|
||||
passwordChars.splice(randomIndex, 0, specialChar);
|
||||
|
||||
passwordChars = passwordChars.sort(() => Math.random() - 0.5);
|
||||
const password = passwordChars.join("").slice(0, 8);
|
||||
return password;
|
||||
};
|
||||
|
||||
const handleFormSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (!user.name || !user.email || !user.phone) {
|
||||
throw new Error("Fill all fields!");
|
||||
}
|
||||
|
||||
const generatedPassword = generatePassword(user.name, user.email);
|
||||
setUser({ ...user, password: generatedPassword });
|
||||
|
||||
const response = await axios.post("/api/v1/user/register", {
|
||||
...user,
|
||||
password: generatedPassword,
|
||||
});
|
||||
if (response.status === 201) {
|
||||
toast.success("User Added Successfully");
|
||||
// console.log(response.data);
|
||||
setUserId(response.data.userId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.response.data.message);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/principal-distributor");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
sx={{ padding: "1rem", marginBottom: "1rem", position: "relative" }}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
onClick={handleCancel}
|
||||
sx={styles.topRightButton}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<form style={{ marginBottom: "2rem" }} onSubmit={handleFormSubmit}>
|
||||
<TextField
|
||||
id="name"
|
||||
required
|
||||
type="text"
|
||||
sx={{ marginBottom: "2rem", width: "50%" }}
|
||||
name="name"
|
||||
value={user.name}
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
onChange={handleInputChanges}
|
||||
/>
|
||||
<br />
|
||||
<TextField
|
||||
id="email"
|
||||
type="email"
|
||||
sx={{ mb: "2rem", width: "50%" }}
|
||||
required
|
||||
name="email"
|
||||
value={user.email}
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
onChange={handleInputChanges}
|
||||
/>
|
||||
<br />
|
||||
<TextField
|
||||
id="phone"
|
||||
type="tel"
|
||||
sx={{ mb: "2rem", width: "50%" }}
|
||||
required
|
||||
name="phone"
|
||||
value={user.phone}
|
||||
label="Mobile Number"
|
||||
variant="outlined"
|
||||
onChange={handleInputChanges}
|
||||
/>
|
||||
<br />
|
||||
<Button variant="contained" disabled={id?.length > 0} type="submit">
|
||||
Add Principal Distributor
|
||||
</Button>
|
||||
<br />
|
||||
</form>
|
||||
|
||||
<form onSubmit={handleAddressSubmit}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
STREET ADDRESS*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Street Address"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="street"
|
||||
required
|
||||
type="text"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
COUNTRY*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Country"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="country"
|
||||
required
|
||||
type="text"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth variant="outlined">
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
TOWN CITY*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Town City"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="city"
|
||||
required
|
||||
type="text"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
STATE*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="State"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="state"
|
||||
required
|
||||
type="text"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
ZIP CODE*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Zip Code"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="postalCode"
|
||||
required
|
||||
type="number"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
Company Name
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Company name"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="company_name"
|
||||
type="text"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
GST Number
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="GST Number"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="gst_number"
|
||||
type="text"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!id?.length > 0}
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddPrincipalDistributor;
|
||||
@ -18,7 +18,7 @@ import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function AddUserAddress() {
|
||||
const token = isAutheticated();
|
||||
console.log(token);
|
||||
// console.log(token);
|
||||
const [selectUserType, setSelectUserType] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
@ -15,7 +15,7 @@ import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
export default function EditUserAddress() {
|
||||
export default function editPrincipalDistributorAddress() {
|
||||
const token = isAutheticated();
|
||||
|
||||
const [selectUserType, setSelectUserType] = useState("");
|
||||
@ -18,7 +18,7 @@ import SearchIcon from "@mui/icons-material/Search";
|
||||
import Fuse from "fuse.js";
|
||||
import { Typography } from "@material-ui/core";
|
||||
import OrderDetails from "./orderDetails";
|
||||
const CustomerTable = () => {
|
||||
const principalDistributor = () => {
|
||||
const token = isAutheticated();
|
||||
const [query, setQuery] = useState("");
|
||||
const navigate = useNavigate();
|
||||
@ -44,6 +44,7 @@ const CustomerTable = () => {
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res.data);
|
||||
setUsers(res.data.users);
|
||||
setLoading(false);
|
||||
})
|
||||
@ -62,7 +63,7 @@ const CustomerTable = () => {
|
||||
useEffect(() => {
|
||||
getUsers();
|
||||
}, [success]);
|
||||
console.log(users);
|
||||
// console.log(users);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = () => {
|
||||
@ -72,7 +73,7 @@ const CustomerTable = () => {
|
||||
};
|
||||
loadData();
|
||||
}, [currentPage, itemPerPage, users]);
|
||||
console.log(users);
|
||||
// console.log(users);
|
||||
|
||||
// const handleDelete = (id) => {
|
||||
// swal({
|
||||
@ -128,7 +129,7 @@ const CustomerTable = () => {
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
All Customers
|
||||
All Principal Distributor
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
@ -141,10 +142,10 @@ const CustomerTable = () => {
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/add-customer");
|
||||
navigate("/add-principal-distributor");
|
||||
}}
|
||||
>
|
||||
Add User
|
||||
Add Principal Distributor
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -191,7 +192,7 @@ const CustomerTable = () => {
|
||||
style={{ background: "rgb(140, 213, 213)" }}
|
||||
>
|
||||
<tr>
|
||||
<th>Customer Name</th>
|
||||
<th>Principal Distributor Name</th>
|
||||
<th>Unique Id </th>
|
||||
{/* <th>Profile Image</th> */}
|
||||
|
||||
@ -313,7 +314,9 @@ const CustomerTable = () => {
|
||||
Delete
|
||||
</button>
|
||||
</Link> */}
|
||||
<Link to={`/customers-details/${user?._id}`}>
|
||||
<Link
|
||||
to={`/principal-distributor/${user?._id}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
@ -435,4 +438,4 @@ const CustomerTable = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerTable;
|
||||
export default principalDistributor;
|
||||
@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
const SingleUserAllDetails = () => {
|
||||
const SinglePrincipalDistributorAllDetails = () => {
|
||||
const [user, setUser] = useState();
|
||||
const [userOrder, setUserOrder] = useState();
|
||||
const [userAllAddress, setUserAllAddress] = useState([]);
|
||||
@ -23,7 +23,7 @@ const SingleUserAllDetails = () => {
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log(res.data);
|
||||
console.log(res.data);
|
||||
setUserAllAddress(res.data?.UserShippingAddress || []);
|
||||
// toast.success(res.data.message ? res.data.message : "Address fetch!");
|
||||
|
||||
@ -80,9 +80,9 @@ const SingleUserAllDetails = () => {
|
||||
getUserAddress();
|
||||
getUserDetails();
|
||||
}, [_id]);
|
||||
console.log(userOrder, " Single user order data ");
|
||||
console.log(userAllAddress, "user all address ");
|
||||
console.log(user, "user ");
|
||||
// console.log(userOrder, " Single user order data ");
|
||||
// console.log(userAllAddress, "user all address ");
|
||||
// console.log(user, "user ");
|
||||
let totalSpent = 0;
|
||||
|
||||
// Iterate through each order and sum up the total_amount
|
||||
@ -92,8 +92,8 @@ const SingleUserAllDetails = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* SingleUserAllDetails
|
||||
<Link to={`/customers-details`}>
|
||||
{/* SinglePrincipalDistributorAllDetails
|
||||
<Link to={`/principal-distributor`}>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
@ -112,14 +112,14 @@ const SingleUserAllDetails = () => {
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Single Customer All Details
|
||||
Principal Distributor All Details
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<Link to="/customers-details">
|
||||
<Link to="/principal-distributor">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
@ -325,4 +325,4 @@ const SingleUserAllDetails = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleUserAllDetails;
|
||||
export default SinglePrincipalDistributorAllDetails;
|
||||
328
src/views/SalesAttendance/AttendanceSalesCoordinator.js
Normal file
328
src/views/SalesAttendance/AttendanceSalesCoordinator.js
Normal file
@ -0,0 +1,328 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import swal from "sweetalert";
|
||||
|
||||
const AttendanceSalesCoordinator = () => {
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(true);
|
||||
const [salescoordinatorsData, setSalesCoOrdinatorsData] = useState([]);
|
||||
|
||||
const nameRef = useRef();
|
||||
const mobileRef = useRef();
|
||||
const VerifySalesCoOrdinatorRef = useRef();
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [totalData, setTotalData] = useState(0);
|
||||
|
||||
const getSalesCoOrdinatorsData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/salescoordinator/getAll/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
params: {
|
||||
page: currentPage,
|
||||
show: itemPerPage,
|
||||
name: nameRef.current.value,
|
||||
mobileNumber: mobileRef.current.value,
|
||||
isVerified: VerifySalesCoOrdinatorRef.current.value,
|
||||
},
|
||||
});
|
||||
setSalesCoOrdinatorsData(res.data?.salesCoOrinators);
|
||||
setTotalData(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(() => {
|
||||
getSalesCoOrdinatorsData();
|
||||
}, [success, itemPerPage, currentPage]);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
SalesCoOrdinators Attendance
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/attendance/today", { replace: true });
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-lg-1">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setItemPerPage(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="form-control"
|
||||
disabled={loading}
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<label>SalesCoOrdinator Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="SalesCoOrdinator name"
|
||||
className="form-control"
|
||||
ref={nameRef}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<label>Mobile Number:</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Mobile Number"
|
||||
className="form-control"
|
||||
ref={mobileRef}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<label>Verify SalesCoOrdinator:</label>
|
||||
<select
|
||||
className="form-control"
|
||||
ref={VerifySalesCoOrdinatorRef}
|
||||
disabled={loading}
|
||||
>
|
||||
<option value="">----Select----</option>
|
||||
<option value="true">YES</option>
|
||||
<option value="false">NO</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<button
|
||||
className="btn btn-primary ms-1 mt-4"
|
||||
onClick={() => {
|
||||
getSalesCoOrdinatorsData();
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Searching.." : "Filter"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table className="table table-centered table-nowrap">
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<tr>
|
||||
<th className="text-start">Name</th>
|
||||
<th className="text-start">Mobile No.</th>
|
||||
<th className="text-start">Email</th>
|
||||
<th className="text-start">Verify</th>
|
||||
<th className="text-start">Register On</th>
|
||||
<th className="text-start">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : salescoordinatorsData?.length > 0 ? (
|
||||
salescoordinatorsData?.map((salescoordinator, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">
|
||||
{salescoordinator?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{salescoordinator?.mobileNumber}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{salescoordinator?.email ? (
|
||||
salescoordinator?.email
|
||||
) : (
|
||||
<small className="m-0 text-secondary">
|
||||
No Email Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<span
|
||||
className={`badge text-white ${
|
||||
salescoordinator?.isVerified === true
|
||||
? "text-bg-success"
|
||||
: "text-bg-danger"
|
||||
}`}
|
||||
>
|
||||
{salescoordinator?.isVerified
|
||||
? "YES"
|
||||
: "NO"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{new Date(
|
||||
salescoordinator.createdAt
|
||||
).toLocaleString("en-IN", {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
})}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link
|
||||
to={`/attendance/view/${salescoordinator._id}`}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm waves-effect waves-light btn-table mt-1 mx-1"
|
||||
>
|
||||
View Attendance
|
||||
</button>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No SalesCoOrdinator Available...</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
|
||||
{totalData} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) =>
|
||||
prev > 1 ? prev - 1 : prev
|
||||
)
|
||||
}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
currentPage * itemPerPage >= totalData
|
||||
? "paginate_button page-item next disabled"
|
||||
: "paginate_button page-item next"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) =>
|
||||
prev * itemPerPage < totalData
|
||||
? prev + 1
|
||||
: prev
|
||||
)
|
||||
}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendanceSalesCoordinator;
|
||||
255
src/views/SalesAttendance/SingleAttendanceSalesCoordinator.js
Normal file
255
src/views/SalesAttendance/SingleAttendanceSalesCoordinator.js
Normal file
@ -0,0 +1,255 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import swal from "sweetalert";
|
||||
|
||||
const SingleAttendanceSalesCoOrdinator = () => {
|
||||
const { id } = useParams();
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [salesCoordinator, setSalesCoordinator] = useState({});
|
||||
const [attendanceData, setAttendanceData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [totalData, setTotalData] = useState(0);
|
||||
|
||||
const getSingleSalesCoOrdinatorAttendance = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/v1/attendance/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
params: {
|
||||
page: currentPage,
|
||||
show: itemPerPage,
|
||||
},
|
||||
});
|
||||
setSalesCoordinator(res.data?.user);
|
||||
setAttendanceData(res.data?.attendance);
|
||||
// console.log(res.data);
|
||||
setTotalData(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(() => {
|
||||
getSingleSalesCoOrdinatorAttendance();
|
||||
}, [itemPerPage, currentPage]);
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
SalesCoOrdinator Attendance
|
||||
<div style={{ fontSize: "16px", marginTop: "5px" }}>
|
||||
{salesCoordinator.name} ({salesCoordinator.email})
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/salescoordinator/attendance", {
|
||||
replace: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-lg-1">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setItemPerPage(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="form-control"
|
||||
disabled={loading}
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table className="table table-centered table-nowrap">
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<tr>
|
||||
<th className="text-start">Date</th>
|
||||
<th className="text-start">Time</th>
|
||||
<th className="text-start">Location</th>
|
||||
<th className="text-start">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="4">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : attendanceData?.length > 0 ? (
|
||||
attendanceData?.map((attendance, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">
|
||||
{new Date(
|
||||
attendance?.date
|
||||
).toLocaleDateString("en-IN", {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.time || (
|
||||
<small className="m-0 text-secondary">
|
||||
No Time Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.location || (
|
||||
<small className="m-0 text-secondary">
|
||||
No Location Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.notes || (
|
||||
<small className="m-0 text-secondary">
|
||||
No Note Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr className="text-center">
|
||||
<td colSpan="4">
|
||||
<h5>No Attendance Records Available...</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
|
||||
{totalData} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) =>
|
||||
prev > 1 ? prev - 1 : prev
|
||||
)
|
||||
}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
currentPage * itemPerPage >= totalData
|
||||
? "paginate_button page-item next disabled"
|
||||
: "paginate_button page-item next"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) =>
|
||||
prev * itemPerPage < totalData
|
||||
? prev + 1
|
||||
: prev
|
||||
)
|
||||
}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleAttendanceSalesCoOrdinator;
|
||||
274
src/views/SalesAttendance/TodayAttendanceSales.js
Normal file
274
src/views/SalesAttendance/TodayAttendanceSales.js
Normal file
@ -0,0 +1,274 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import swal from "sweetalert";
|
||||
|
||||
const TodayAttendanceSales = () => {
|
||||
const token = isAutheticated();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [salescoordinatorsData, setSalesCoOrdinatorsData] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemPerPage, setItemPerPage] = useState(10);
|
||||
const [totalData, setTotalData] = useState(0);
|
||||
|
||||
const getTodayAttendanceData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/v1/attendance/today`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
params: {
|
||||
page: currentPage,
|
||||
show: itemPerPage,
|
||||
},
|
||||
});
|
||||
setSalesCoOrdinatorsData(res.data?.attendance);
|
||||
setTotalData(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(() => {
|
||||
getTodayAttendanceData();
|
||||
}, [itemPerPage, currentPage]);
|
||||
|
||||
const today = new Date().toLocaleDateString("en-IN", {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
<div className="page-content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Today's SalesCoOrdinators Attendance
|
||||
<div
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
marginTop: "5px",
|
||||
marginBottom: "3px",
|
||||
}}
|
||||
>
|
||||
Date : {today}
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-title-right">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/salescoordinator/attendance", {
|
||||
replace: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Show SalesCoOrdinator Attendance
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<div className="row ml-0 mr-0 mb-10">
|
||||
<div className="col-lg-1">
|
||||
<div className="dataTables_length">
|
||||
<label className="w-100">
|
||||
Show
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setItemPerPage(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="form-control"
|
||||
disabled={loading}
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
entries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table className="table table-centered table-nowrap">
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<tr>
|
||||
<th className="text-start">ID</th>
|
||||
<th className="text-start">Name</th>
|
||||
<th className="text-start">Email</th>
|
||||
<th className="text-start">Position</th>
|
||||
<th className="text-start">Time</th>
|
||||
<th className="text-start">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : salescoordinatorsData?.length > 0 ? (
|
||||
salescoordinatorsData?.map((attendance, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">
|
||||
{attendance?.user?.id}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.user?.name}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.user?.email ? (
|
||||
attendance?.user?.email
|
||||
) : (
|
||||
<small className="m-0 text-secondary">
|
||||
No Email Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.user?.userType || (
|
||||
<small className="m-0 text-secondary">
|
||||
No Position Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.time || (
|
||||
<small className="m-0 text-secondary">
|
||||
No Time Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{attendance?.note ? (
|
||||
attendance?.note
|
||||
) : (
|
||||
<small className="m-0 text-secondary">
|
||||
No Note Added!
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No Attendance Records Available...</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
|
||||
{totalData} entries
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) =>
|
||||
prev > 1 ? prev - 1 : prev
|
||||
)
|
||||
}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
currentPage * itemPerPage >= totalData
|
||||
? "paginate_button page-item next disabled"
|
||||
: "paginate_button page-item next"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) =>
|
||||
prev * itemPerPage < totalData
|
||||
? prev + 1
|
||||
: prev
|
||||
)
|
||||
}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TodayAttendanceSales;
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import swal from "sweetalert";
|
||||
import debounce from 'lodash.debounce';
|
||||
|
||||
const SalesCoOrdinator = () => {
|
||||
const token = isAutheticated();
|
||||
@ -36,8 +37,6 @@ const SalesCoOrdinator = () => {
|
||||
isVerified: VerifySalesCoOrdinatorRef.current.value,
|
||||
},
|
||||
});
|
||||
// console.log(res.data.salesCoOrinators
|
||||
// );
|
||||
setSalesCoOrdinatorsData(res.data?.salesCoOrinators);
|
||||
setTotalData(res.data?.total_data);
|
||||
} catch (err) {
|
||||
@ -58,6 +57,15 @@ const SalesCoOrdinator = () => {
|
||||
getSalesCoOrdinatorsData();
|
||||
}, [success, itemPerPage, currentPage]);
|
||||
|
||||
const debouncedSearch = useCallback(debounce(() => {
|
||||
setCurrentPage(1);
|
||||
getSalesCoOrdinatorsData();
|
||||
}, 500), []);
|
||||
|
||||
const handleSearchChange = () => {
|
||||
debouncedSearch();
|
||||
};
|
||||
|
||||
const handleDelete = (id) => {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
@ -163,6 +171,7 @@ const SalesCoOrdinator = () => {
|
||||
placeholder="SalesCoOrdinator name"
|
||||
className="form-control"
|
||||
ref={nameRef}
|
||||
onChange={handleSearchChange}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
@ -173,6 +182,7 @@ const SalesCoOrdinator = () => {
|
||||
placeholder="Mobile Number"
|
||||
className="form-control"
|
||||
ref={mobileRef}
|
||||
onChange={handleSearchChange}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
@ -181,6 +191,7 @@ const SalesCoOrdinator = () => {
|
||||
<select
|
||||
className="form-control"
|
||||
ref={VerifySalesCoOrdinatorRef}
|
||||
onChange={handleSearchChange}
|
||||
disabled={loading}
|
||||
>
|
||||
<option value="">----Select----</option>
|
||||
@ -188,18 +199,6 @@ const SalesCoOrdinator = () => {
|
||||
<option value="false">NO</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-lg-2">
|
||||
<button
|
||||
className="btn btn-primary ms-1 mt-4"
|
||||
onClick={() => {
|
||||
getSalesCoOrdinatorsData();
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Searching.." : "Filter"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
@ -271,16 +270,6 @@ const SalesCoOrdinator = () => {
|
||||
})}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{/* <Link to={`/salescoordinator/view/${salescoordinator._id}`}>
|
||||
<button
|
||||
style={{ color: "white", marginRight: "1rem" }}
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link> */}
|
||||
|
||||
<Link
|
||||
to={`/salescoordinator/edit/${salescoordinator._id}`}
|
||||
>
|
||||
@ -290,19 +279,17 @@ const SalesCoOrdinator = () => {
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="btn btn-info btn-sm waves-effect waves-light btn-table mt-1 mx-1"
|
||||
className="btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
style={{ color: "white" }}
|
||||
type="button"
|
||||
className="btn btn-danger btn-sm waves-effect waves-light btn-table mt-1 mx-1"
|
||||
onClick={() => {
|
||||
handleDelete(salescoordinator._id);
|
||||
}}
|
||||
style={{ color: "white" }}
|
||||
className="btn btn-danger btn-sm waves-effect waves-light btn-table ml-2"
|
||||
onClick={() => handleDelete(salescoordinator._id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@ -311,108 +298,34 @@ const SalesCoOrdinator = () => {
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr className="text-center">
|
||||
<td colSpan="6">
|
||||
<h5>No SalesCoOrdinator Available...</h5>
|
||||
<tr>
|
||||
<td className="text-center" colSpan="6">
|
||||
No SalesCoOrdinator found!
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
className="dataTables_info"
|
||||
id="datatable_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
|
||||
{totalData} entries
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div>
|
||||
Showing {salescoordinatorsData?.length} of {totalData} entries
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={
|
||||
currentPage === 1
|
||||
? "paginate_button page-item previous disabled"
|
||||
: "paginate_button page-item previous"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev - 1)}
|
||||
disabled={loading}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
disabled={loading}
|
||||
>
|
||||
{currentPage - 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li className="paginate_button page-item active">
|
||||
<span className="page-link">{currentPage}</span>
|
||||
</li>
|
||||
|
||||
{!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
totalData - 1
|
||||
) && (
|
||||
<li className="paginate_button page-item ">
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => prev + 1)
|
||||
}
|
||||
disabled={loading}
|
||||
>
|
||||
{currentPage + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<li
|
||||
className={
|
||||
!(
|
||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||
totalData - 1
|
||||
)
|
||||
? "paginate_button page-item next"
|
||||
: "paginate_button page-item next disabled"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="page-link"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => setCurrentPage((prev) => prev + 1)}
|
||||
disabled={loading}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setCurrentPage(currentPage - 1)}
|
||||
disabled={currentPage === 1 || loading}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage(currentPage + 1)}
|
||||
disabled={salescoordinatorsData?.length < itemPerPage || loading}
|
||||
className="btn btn-primary ml-2"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,441 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
TextField,
|
||||
Button,
|
||||
Card,
|
||||
FormControl,
|
||||
Grid,
|
||||
FormHelperText,
|
||||
OutlinedInput,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
import axios from "axios"; // Import axios for making HTTP requests
|
||||
import { isAutheticated } from "src/auth";
|
||||
const styles = {
|
||||
formStyle: {
|
||||
fontWeight: "700",
|
||||
fontSize: "12px",
|
||||
fontFamily: "inter",
|
||||
marginBottom: "3px",
|
||||
marginLeft: "0",
|
||||
},
|
||||
};
|
||||
const AddCustomer = () => {
|
||||
const navigate = useNavigate();
|
||||
const [user, setUser] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
password: "", // No need to initialize password here
|
||||
});
|
||||
const [id, setUserId] = useState("");
|
||||
const token = isAutheticated();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState({
|
||||
first_Name: "",
|
||||
last_Name: "",
|
||||
phone_Number: Number,
|
||||
street: "",
|
||||
city: "",
|
||||
state: "",
|
||||
postalCode: "",
|
||||
country: "",
|
||||
company_name: "",
|
||||
gst_number: Number,
|
||||
});
|
||||
|
||||
// console.log(data);
|
||||
const handleChange = (e) => {
|
||||
setData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
||||
};
|
||||
|
||||
const handerInputChanges = (e) => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
function handleAddressSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (
|
||||
data.first_Name === "" ||
|
||||
data.last_Name === "" ||
|
||||
data.phone_Number === null ||
|
||||
data.street === "" ||
|
||||
data.city === "" ||
|
||||
data.state === "" ||
|
||||
data.postalCode === "" ||
|
||||
data.country === ""
|
||||
) {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Please fill All mendetory fields ",
|
||||
icon: "warning",
|
||||
button: "ok",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
axios
|
||||
.post(
|
||||
`/api/shipping/address/admin/new/${id}`,
|
||||
{
|
||||
...data,
|
||||
},
|
||||
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
setLoading(false);
|
||||
// setSuccess((prev) => !prev);
|
||||
navigate("/customers-details");
|
||||
toast.success(res.data.message ? res.data.message : "Address Added!");
|
||||
})
|
||||
.catch((error) => {
|
||||
setLoading(false);
|
||||
toast.error(
|
||||
error.response.data.message
|
||||
? error.response.data.message
|
||||
: "Something went wrong!"
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// Generate password function
|
||||
const generatePassword = (name, email) => {
|
||||
const combinedStr = (name + email).toLowerCase(); // Convert to lowercase for consistency
|
||||
const specialChars = "@#*"; // Define the set of special characters
|
||||
const alphaChars = combinedStr.match(/[a-zA-Z]/g); // Filter out alphabetic characters
|
||||
const filteredChars = combinedStr.match(/[^\W_]/g); // Filter out non-alphanumeric characters
|
||||
let passwordChars = alphaChars.concat(filteredChars); // Combine alphabetic and filtered characters
|
||||
|
||||
// Insert a random special character at a random position in the password characters array
|
||||
const specialChar = specialChars.charAt(
|
||||
Math.floor(Math.random() * specialChars.length)
|
||||
); // Pick a random special character
|
||||
const randomIndex = Math.floor(Math.random() * (passwordChars.length + 1)); // Pick a random position to insert the special character
|
||||
passwordChars.splice(randomIndex, 0, specialChar); // Insert the special character at the random position
|
||||
|
||||
passwordChars = passwordChars.sort(() => Math.random() - 0.5); // Shuffle the characters
|
||||
const password = passwordChars.join("").slice(0, 8); // Take the first 8 characters
|
||||
return password;
|
||||
};
|
||||
const handleFormSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
if (!user.name || !user.email) {
|
||||
throw new Error("Fill all fields!");
|
||||
}
|
||||
|
||||
// Generate password based on name and email
|
||||
const generatedPassword = generatePassword(user.name, user.email);
|
||||
console.log(generatedPassword); // Use generatedPassword instead of generatePassword
|
||||
setUser({ ...user, password: generatedPassword }); // Set generated password to user state
|
||||
|
||||
const response = await axios.post("/api/v1/user/register", {
|
||||
...user, // Send user details
|
||||
password: generatedPassword, // Send generated password to the backend
|
||||
});
|
||||
if (response.status === 201) {
|
||||
toast.success("User Added Successful");
|
||||
setUserId(response.data.userId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.response.data.message);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
console.log(user);
|
||||
console.log("this is the id ", id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card sx={{ padding: "1rem", marginBottom: "1rem" }}>
|
||||
<form style={{ marginBottom: "2rem" }} onSubmit={handleFormSubmit}>
|
||||
<TextField
|
||||
id="name"
|
||||
required
|
||||
type="text"
|
||||
sx={{ marginBottom: "2rem", width: "50%" }}
|
||||
name="name"
|
||||
value={user.name}
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
onChange={handerInputChanges}
|
||||
/>
|
||||
<br />
|
||||
<TextField
|
||||
id="email"
|
||||
type="email"
|
||||
sx={{ mb: "2rem", width: "50%" }}
|
||||
required
|
||||
name="email"
|
||||
value={user.email}
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
onChange={handerInputChanges}
|
||||
/>
|
||||
<br />
|
||||
|
||||
<Button variant="contained" disabled={id?.length > 0} type="submit">
|
||||
Add user
|
||||
</Button>
|
||||
<br />
|
||||
</form>
|
||||
|
||||
<form onSubmit={handleAddressSubmit}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
FIRST NAME*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="First name"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="first_Name"
|
||||
required
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
LAST NAME*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Last name"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="last_Name"
|
||||
required
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth variant="outlined">
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
PHONE NUMBER*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Phone name"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="phone_Number"
|
||||
required
|
||||
type="number"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
STREET ADDRESS*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Street Address"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="street"
|
||||
required
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
COUNTRY*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Country"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="country"
|
||||
required
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth variant="outlined">
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
TOWN CITY*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Town City"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="city"
|
||||
required
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
STATE*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="State"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="state"
|
||||
required
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
ZIP CODE*
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Zip Code"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="postalCode"
|
||||
required
|
||||
type="number"
|
||||
onChange={(e) => handleChange(e)}
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
Company Name
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="Company name"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="company_name"
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<FormControl variant="outlined" fullWidth>
|
||||
<FormHelperText
|
||||
id="outlined-weight-helper-text"
|
||||
sx={styles.formStyle}
|
||||
>
|
||||
GST Number
|
||||
</FormHelperText>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="outlined-adornment-weight"
|
||||
placeholder="GST Number"
|
||||
aria-describedby="outlined-weight-helper-text"
|
||||
name="gst_number"
|
||||
type="text"
|
||||
onChange={(e) => handleChange(e)}
|
||||
|
||||
// value={accountDetails.firstname}
|
||||
// onChange={handerInputChanges}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={id?.length == 0}
|
||||
type="submit"
|
||||
onClick={handleAddressSubmit}
|
||||
>
|
||||
Add address
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddCustomer;
|
||||
Loading…
Reference in New Issue
Block a user