gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

employee section ui is done

Browse Source
This commit is contained in:
roshangarg 2024-04-26 19:34:55 +05:30
parent 8ce42aeb2d
commit a7122792fa
6 changed files with 964 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/_nav.js
View File

@ -24,6 +24,7 @@ import {
cilUser,
cilAlarm,
cilFeaturedPlaylist,
cilLocationPin,
} from "@coreui/icons";
import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react";
@ -40,12 +41,7 @@ const _nav = [
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
to: "/customers-details",
},
// {
// component: CNavItem,
// name: "Design",
// icon: <CIcon icon={cibMaterialDesign} customClassName="nav-icon" />,
// to: "/design",
// },
{
component: CNavGroup,
name: "Charts",
@ -297,6 +293,12 @@ const _nav = [
icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
to: "/contact/request",
},
// {
// component: CNavItem,
// name: "Email CMS",
// icon: <CIcon icon={cilLocationPin} customClassName="nav-icon" />,
// to: "/email-cms",
// },
],
},
//Blog start
@ -306,6 +308,13 @@ const _nav = [
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/blogs",
},
// Employee
{
component: CNavItem,
name: "Employee",
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
to: "/employee",
},
// {
// component: CNavGroup,

38
src/routes.js
View File

@ -137,6 +137,10 @@ import { element } from "prop-types";
import OrderdayChart from "./views/Charts/OrderDaywise";
import RevenueCharts from "./views/Charts/RevenueCharts";
import AddCustomer from "./views/customerDetails/addCustomer";
import EmailCms from "./views/CustomerSupport/EmailCMS/EmailCms";
import RegistrationEmail from "./views/CustomerSupport/EmailCMS/RegistrationEmail";
import Employee from "./views/EmployeeAccess/Employee";
import AddEmployee from "./views/EmployeeAccess/addEmployee";
const routes = [
{ path: "/", exact: true, name: "Home" },
{
@ -275,6 +279,16 @@ const routes = [
element: AddContactRequest,
},
//Support Requests
// {
// path: "/email-cms",
// name: "CustomerSupport Requests",
// element: EmailCms,
// },
// {
// path: "/email-cms/registration-email",
// name: "CustomerSupport Requests",
// element: RegistrationEmail,
// },
{
path: "/support/request",
@ -334,17 +348,17 @@ const routes = [
path: "/home",
name: "Home",
element: Home,
},
},
{
path: "/home/panel-1",
name: "EditPanel1",
element: EditPanel1,
},
},
{
path: "/home/panel-2",
name: "EditPanel2",
element: EditPanel2,
},
},
{
path: "/home/panel-3",
name: "EditPanel3",
@ -354,12 +368,7 @@ const routes = [
path: "/home/panel-4",
name: "EditPanel4",
element: Editpanel4,
},
},
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
//Complaints
@ -568,6 +577,17 @@ const routes = [
name: "Blogs",
element: ViewBlog,
},
// Employee
{
path: "/employee",
name: "Employee",
element: Employee,
},
{
path: "/add-employee",
name: "Employee",
element: AddEmployee,
},
//Charts
{
path: "/new-user-day-wise",

111
src/views/CustomerSupport/EmailCMS/EmailCms.js Normal file
View File

@ -0,0 +1,111 @@
import {
Button,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import React from "react";
import { Link } from "react-router-dom";
export default function EmailCms() {
const pages = [
{
name: "New user registration",
action: "Edit",
path: "/email-cms/registration-email",
},
{
name: "Forgot Password",
action: "Edit",
path: "#",
},
{
name: "Change Password Notification ",
action: "Edit",
path: "#",
},
{
name: "New Order",
action: "Edit",
path: "#",
},
{
name: "Order - Processing",
action: "Edit",
path: "#",
},
{
name: "Order - Dispatched",
action: "Edit",
path: "#",
},
{
name: "Order - Delivered",
action: "Edit",
path: "#",
},
{
name: "Order - Cancelled",
action: "Edit",
path: "#",
},
];
return (
<div className="main-content">
<Typography variant="h6" fontWeight={"bold"}>
Email CMS
</Typography>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{pages.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">
{" "}
<Link to={row.path}>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
>
{row.action}
</button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

207
src/views/CustomerSupport/EmailCMS/RegistrationEmail.js Normal file
View File

@ -0,0 +1,207 @@
import { Typography } from "@material-ui/core";
import { Box, Button } from "@mui/material";
import React, { useEffect, useState } from "react";
import ReactrichTextEditor from "../../Content/reactrichTextEditor";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { useNavigate, useNavigation } from "react-router-dom";
// const TOOLBAR_OPTIONS = [
// [{ header: [1, 2, 3, 4, 5, 6, false] }],
// [{ font: [] }],
// [{ list: "ordered" }, { list: "bullet" }],
// ["bold", "italic", "underline", "strike"],
// [{ color: [] }, { background: [] }],
// [{ align: [] }],
// [{ script: "super" }, { script: "sub" }],
// ["undo", "redo"],
// ];
export default function RegistrationEmail() {
const [title, setTitle] = useState("Registration Email");
const [welcomemsg, setWelcomeMsg] = useState("");
const [welcomemsgforDescription, setWelcomeMsgForDescription] = useState("");
const [subject, setSubject] = useState("");
const [description, setDescription] = useState("");
const [content, setContent] = useState("");
const [added, setAdded] = useState(false);
const [olderContent, setOlderContent] = useState("");
const [id, setId] = useState(null);
const token = isAutheticated();
const getTermsAndConditions = async () => {
const response = await axios.get("/api/get-email-data", {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status === 200) {
if (response.data?.registerEmaildata.length === 0) {
return;
}
// console.log(response);
// setContent(response?.data?.registerEmaildata[0]?.termsAndContionContent);
// setOlderContent(
// response?.data?.registerEmaildata[0]?.termsAndContionContent
// );
setSubject(response?.data?.registerEmaildata[0]?.subject);
setDescription(response?.data?.registerEmaildata[0]?.description);
setId(response?.data?.registerEmaildata[0]?._id);
}
};
const addTermsandConditions = async () => {
const response = await axios.post(
"/api/register-email",
{ subject: subject, description: description },
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 200) {
swal({
title: "Congratulations!!",
text: response?.data?.message,
icon: "success",
button: "OK",
});
}
};
const handleCancelClick = () => {
setAdded(!added);
};
const handleSaveClick = async () => {
// if (id === null) {
await addTermsandConditions();
setAdded(true);
// } else {
// await updateContent();
// setAdded(false);
// }
// Reload terms and conditions
// await getTermsAndConditions();
};
useEffect(() => {
// addTermsandConditions();
getTermsAndConditions();
}, [added]);
return (
<div>
<div style={{ display: "flex" }}>
<Button
variant="contained"
color="primary"
onClick={handleSaveClick}
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Save
</Button>
<Button
variant="contained"
color="primary"
onClick={handleCancelClick}
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Cancel
</Button>
</div>
<Box style={{ background: "#FFFFFF", color: "black", padding: "1rem" }}>
{/* <TextField
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
variant="outlined"
size="small"
fullWidth
/> */}
<Typography
style={{ margin: "0.5rem 0rem", fontWeight: "bold" }}
variant="h6"
>
{" "}
Email Confiramtion:{" "}
</Typography>
<div className="mb-3">
<label htmlFor="welcomeMsg" className="form-label">
Welcome Message*
</label>
<input
type="text"
className="form-control"
style={{ width: "300px" }}
id="welcomeMsg"
placeholder="Eg: Welcome to "
value={welcomemsg}
onChange={(e) => setWelcomeMsg(e.target.value)}
/>
<h6 style={{ fontWeight: "bold", marginTop: "1rem" }}>
App Name : Smellika
</h6>
<label htmlFor="title" className="form-label">
Subject*
</label>
<input
type="text"
className="form-control"
id="title"
value={subject}
onChange={(e) => setSubject(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="welcomeMsgforDes" className="form-label">
Welcome Message for Description*
</label>
<input
type="text"
className="form-control"
style={{ width: "300px" }}
id="welcomeMsgforDes"
placeholder="Eg: Welcome to "
value={welcomemsgforDescription}
onChange={(e) => setWelcomeMsgForDescription(e.target.value)}
/>
<label htmlFor="title" className="form-label">
Description *
</label>
<textarea
type="text"
className="form-control"
id="description"
rows="10"
cols="100"
value={description}
placeholder="your message..."
onChange={(e) => setDescription(e.target.value)}
></textarea>
</div>
</Box>
</div>
);
}

479
src/views/EmployeeAccess/Employee.js Normal file
View File

@ -0,0 +1,479 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
import {
Box,
FormControl,
IconButton,
InputLabel,
MenuItem,
Select,
TextField,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Fuse from "fuse.js";
import { Typography } from "@material-ui/core";
// import OrderDetails from "./orderDetails";
const Employee = () => {
const token = isAutheticated();
const [query, setQuery] = useState("");
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [loading1, setLoading1] = useState(true);
const [success, setSuccess] = useState(true);
const [users, setUsers] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [showData, setShowData] = useState(users);
const handleShowEntries = (e) => {
setCurrentPage(1);
setItemPerPage(e.target.value);
};
// const getUsers = async () => {
// axios
// .get(`/api/v1/admin/users`, {
// headers: {
// Authorization: `Bearer ${token}`,
// },
// })
// .then((res) => {
// setUsers(res.data.users);
// setLoading(false);
// })
// .catch((error) => {
// swal({
// title: error,
// text: "please login to access the resource or refresh the page ",
// icon: "error",
// button: "Retry",
// dangerMode: true,
// });
// setLoading(false);
// });
// };
// useEffect(() => {
// getUsers();
// }, [success]);
// console.log(users);
// useEffect(() => {
// const loadData = () => {
// const indexOfLastPost = currentPage * itemPerPage;
// const indexOfFirstPost = indexOfLastPost - itemPerPage;
// setShowData(users.slice(indexOfFirstPost, indexOfLastPost));
// };
// loadData();
// }, [currentPage, itemPerPage, users]);
// console.log(users);
// const handleDelete = (id) => {
// swal({
// title: "Are you sure?",
// icon: "error",
// buttons: {
// Yes: { text: "Yes", value: true },
// Cancel: { text: "Cancel", value: "cancel" },
// },
// }).then((value) => {
// if (value === true) {
// axios
// .delete(`/api/user-address/deleteAddress/${id}`, {
// headers: {
// "Access-Control-Allow-Origin": "*",
// Authorization: `Bearer ${token}`,
// },
// })
// .then((res) => {
// swal({
// title: "Deleted",
// text: "Address Deleted successfully!",
// icon: "success",
// button: "ok",
// });
// setSuccess((prev) => !prev);
// })
// .catch((err) => {
// swal({
// title: "Warning",
// text: "Something went wrong!",
// icon: "error",
// button: "Retry",
// dangerMode: true,
// });
// });
// }
// });
// };
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">
All Employees
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate("/add-employee");
}}
>
Add Employee
</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-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-100">
Show
<select
style={{ width: "10%" }}
name=""
onChange={(e) => handleShowEntries(e)}
className="
select-w
custom-select custom-select-sm
form-control form-control-sm
"
>
<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"
style={{ border: "1px solid" }}
>
<thead
className="thead-info"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th>Employee Name</th>
<th>Email</th>
<th>Access to </th>
<th>Action</th>
</tr>
</thead>
<tbody>
{!loading && showData.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Data Available</h5>
</td>
</tr>
)}
{!loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : (
// showData.map((user, i) => {
// return (
// <tr key={i}>
// <td className="text-start">{user.name}</td>
// <td>{user._id}</td>
// <td className="text-start">
// {new Date(user.createdAt).toLocaleString(
// "en-IN",
// {
// weekday: "short",
// month: "short",
// day: "numeric",
// year: "numeric",
// hour: "numeric",
// minute: "numeric",
// hour12: true,
// }
// )}
// </td>
// {loading1 && (
// <>
// <td className="text-start">loading...</td>
// <td className="text-start">loading...</td>
// </>
// )}
// <OrderDetails
// _id={user?._id}
// setLoading1={setLoading1}
// />
// <td className="text-start">
// {/* <Link
// to={`/users-address/view/${userAddress._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={`/users-address/edit/${userAddress._id}`}
// >
// <button
// style={{
// color: "white",
// marginRight: "1rem",
// }}
// type="button"
// className="
// btn btn-info btn-sm
// waves-effect waves-light
// btn-table
// mt-1
// mx-1
// "
// >
// Edit
// </button>
// </Link>
// <Link
// to={"#"}
// style={{
// marginRight: "1rem",
// }}
// >
// <button
// style={{ color: "white" }}
// type="button"
// className="
// btn btn-danger btn-sm
// waves-effect waves-light
// btn-table
// mt-1
// mx-1
// "
// onClick={() => {
// handleDelete(userAddress._id);
// }}
// >
// Delete
// </button>
// </Link> */}
// <Link to={`/customers-details/${user?._id}`}>
// <button
// type="button"
// className="mt-1 btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
// >
// View
// </button>
// </Link>
// </td>
// </tr>
// );
// })
<tr>
<th>Roshan Garg</th>
<th>roshan@gmail.com</th>
{/* <th>Profile Image</th> */}
<th>dashboard</th>
{/* <th>Last Purchase</th>
<th>Orders</th> */}
<th>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
Edit
</button>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
Delete
</button>
</th>
</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, users.length)} of{" "}
{users.length} 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"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
users.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
users.length - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Employee;

123
src/views/EmployeeAccess/addEmployee.js Normal file
View File

@ -0,0 +1,123 @@
import { Box, Button, Typography } from "@mui/material";
import React, { useState } from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import { useNavigate } from "react-router-dom";
import _nav from "src/_nav";
const AddEmployee = () => {
const [employeeName, setEmployeeName] = useState("");
const [email, setEmail] = useState("");
const navigate = useNavigate();
const [checkedItems, setCheckedItems] = useState({});
const filteredNav = _nav.filter((item) => item.name !== "Employee");
const handleCheckboxChange = (name) => (event) => {
setCheckedItems({
...checkedItems,
[name]: event.target.checked,
});
};
console.log(checkedItems);
return (
<div>
<Box style={{ background: "#FFFFFF", color: "black", padding: "1rem" }}>
{/* <TextField
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
variant="outlined"
size="small"
fullWidth
/> */}
<Typography
style={{ margin: "0.5rem 0rem", fontWeight: "bold" }}
variant="h6"
>
{" "}
Add Employee:{" "}
</Typography>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Employee Name*
</label>
<input
type="text"
className="form-control"
id="title"
placeholder="Eg: Roshan Garg"
value={employeeName}
onChange={(e) => setEmployeeName(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="welcomeMsgforDes" className="form-label">
Email*
</label>
<input
type="email"
className="form-control"
// style={{ width: "300px" }}
id="welcomeMsgforDes"
placeholder="Eg: rosham@gmailcom "
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<Box>
<label htmlFor="welcomeMsgforDes" className="form-label">
Access to*
</label>
<div>
{filteredNav.map((item, index) => (
<div key={index}>
<Checkbox
checked={checkedItems[item.name] || false}
onChange={handleCheckboxChange(item.name)}
inputProps={{ "aria-label": "controlled" }}
/>
{item.name}
</div>
))}
</div>
</Box>
<div style={{ display: "flex" }}>
<Button
variant="contained"
color="primary"
// onClick={handleSaveClick}
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Save
</Button>
<Button
variant="contained"
color="primary"
// onClick={handleCancelClick}
onClick={() => navigate("/employee")}
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Cancel
</Button>
</div>
</Box>
</div>
);
};
export default AddEmployee;