In our HRM project, we have a manager panel that allows the manager to add and list employees, view, approve or reject employees' expense, leave, and advance requests, as well as edit their own profile.
- Inbox
- Mail service
- Notification
- Worker Add Pages Update
- Worker validation change
Install project with npm
git clone https://github.com/humanresourcesteam/react.js-managerpanel.git
cd my-project
npm install
Clone the project
git clone https://github.com/humanresourcesteam/react.js-managerpanel.git
Go to the project directory
cd my-project
Install dependencies
npm install
Start the server
npm run start
Clone the project
docker push aliogutcen/my-react-manager:20
Running on Docker
docker build -t <my-react-manager> .
docker run -p 3000:3000 <my-react-manager>
import "./datatable.scss";
import { managerColumns, managerRows } from "../../datatablesoruce";
import { DataGrid, GridColumnHeaderFilterIconButton } from "@mui/x-data-grid";
import { useState, useEffect } from "react";
import ManagerService from "../../service/ManagerService";
import WorkerService from "../../service/WorkerService";
import Cookies from "js-cookie";
import { Link } from "react-router-dom";
import withAuth from "../../withAuth";
const Datatable = () => {
const [id, setId] = useState("");
const [managerid, setManagerid] = useState("");
const [companyid, setCompanyid] = useState("");
const token = Cookies.get("token");
const [worker, setWorker] = useState([]);
useEffect(() => {
ManagerService.getInfoForAdmin(token).then((response) => {
setCompanyid(response.data.companyid);
setManagerid(response.data.id);
});
}, []);
useEffect(() => {
if (companyid) {
WorkerService.getAllWorker(companyid).then((response) => {
console.log(response);
setWorker(response.data);
});
}
}, [companyid]);
const actionColumn = [
{
field: "action",
headerName: "Action",
width: 200,
renderCell: (params) => {
return (
<div className="cellAction">
<div className="view">
<Link
className="links"
to={"/employee/" + params.row.id}
style={{ textDecoration: "none" }}
>
<span>View Profile</span>
</Link>
</div>
</div>
);
},
},
];
return (
<div className="datatable">
<div className="dataTableTitle">
<Link to="/employee/add" className="link">
Add new employee
</Link>
</div>
<DataGrid
style={{ fontWeight: "600" }}
className="datagrid"
rows={worker}
columns={managerColumns.concat(actionColumn)}
rowHeight={100}
initialState={{
pagination: {
paginationModel: {
pageSize: 7,
},
},
}}
pageSizeOptions={[5]}
/>
</div>
);
};
export default Datatable;