├── frontend ├── src │ ├── index.css │ ├── component │ │ ├── City.css │ │ ├── Role.css │ │ ├── Salary.css │ │ ├── State.css │ │ ├── CityForm.css │ │ ├── CityTable.css │ │ ├── Company.css │ │ ├── CompanyForm.css │ │ ├── Country.css │ │ ├── CountryForm.css │ │ ├── Department.css │ │ ├── Employee.css │ │ ├── Position.css │ │ ├── StateForm.css │ │ ├── StateTable.css │ │ ├── CompanyFormEdit.css │ │ ├── CountryTable.css │ │ ├── DepartmentForm.css │ │ ├── DepartmentTable.css │ │ ├── EmployeeFormEdit.css │ │ ├── PositionForm.css │ │ ├── PositionTable.css │ │ ├── RoleFormEdit.css │ │ ├── hr │ │ │ ├── DashboardHR.css │ │ │ ├── LeaveApplicationHR.css │ │ │ ├── LeaveApplicationHRTable.css │ │ │ └── LeaveApplicationHR.jsx │ │ ├── AdminCompanyTable.css │ │ ├── admin │ │ │ ├── AdminPortal.css │ │ │ ├── AdminPortalForm.css │ │ │ ├── AdminProjectBid.css │ │ │ ├── AdminPortalFormEdit.css │ │ │ ├── AdminPortalTable.css │ │ │ ├── AdminProjectBidForm.css │ │ │ ├── AdminProjectBidTable.css │ │ │ ├── AdminProjectBidFormEdit.css │ │ │ ├── DashboardAdmin.css │ │ │ ├── AdminPortalForm.jsx │ │ │ ├── AdminPortalFormEdit.jsx │ │ │ ├── AdminPortal.jsx │ │ │ ├── AdminProjectBid.jsx │ │ │ ├── AdminPortalTable.jsx │ │ │ └── DashboardAdmin.jsx │ │ ├── employee │ │ │ ├── Education.css │ │ │ ├── FamilyInfo.css │ │ │ ├── PersonalInfo.css │ │ │ ├── EducationForm.css │ │ │ ├── EducationTable.css │ │ │ ├── FamilyInfoForm.css │ │ │ ├── FamilyInfoTable.css │ │ │ ├── PersonalInfoForm.jsx │ │ │ ├── PersonalInfoTable.css │ │ │ ├── WorkExperience.css │ │ │ ├── LeaveApplicationEmp.css │ │ │ ├── PersonalInfoFormEdit.css │ │ │ ├── WorkExperienceForm.css │ │ │ ├── WorkExperienceTable.css │ │ │ ├── LeaveApplicationEmpForm.css │ │ │ ├── LeaveApplicationEmpTable.css │ │ │ ├── DashboardEmployee.css │ │ │ ├── FamilyInfoForm.jsx │ │ │ ├── WorkExperienceForm.jsx │ │ │ ├── EducationForm.jsx │ │ │ ├── LeaveApplicationEmpForm.jsx │ │ │ ├── PersonalInfo.jsx │ │ │ ├── Education.jsx │ │ │ ├── FamilyInfo.jsx │ │ │ ├── WorkExperience.jsx │ │ │ ├── FamilyInfoFormEdit.jsx │ │ │ ├── WorkExperienceFormEdit.jsx │ │ │ ├── EducationFormEdit.jsx │ │ │ ├── LeaveApplicationEmp.jsx │ │ │ └── LeaveApplicationEmpFormEdit.jsx │ │ ├── EmployeeTable.css │ │ ├── NotFound404.jsx │ │ ├── EmployeeInfo.css │ │ ├── NavBar.css │ │ ├── Temp.jsx │ │ ├── RoleForm.css │ │ ├── Login.css │ │ ├── CountryForm.jsx │ │ ├── EmployeeInfo.jsx │ │ ├── CountryFormEdit.jsx │ │ ├── Login.jsx │ │ ├── RoleForm.jsx │ │ ├── NavBar.jsx │ │ ├── StateForm.jsx │ │ ├── PositionForm.jsx │ │ ├── DepartmentForm.jsx │ │ ├── RoleTable.css │ │ ├── City.jsx │ │ ├── StateFormEdit.jsx │ │ ├── RoleFormEdit.jsx │ │ ├── DepartmentFormEdit.jsx │ │ ├── PositionFormEdit.jsx │ │ ├── Company.jsx │ │ ├── Role.jsx │ │ ├── State.jsx │ │ ├── CityForm.jsx │ │ ├── Country.jsx │ │ ├── Position.jsx │ │ ├── Department.jsx │ │ ├── CityFormEdit.jsx │ │ ├── SalaryForm.jsx │ │ ├── CountryTable.jsx │ │ └── Salary.jsx │ ├── history.js │ ├── img │ │ └── logo.png │ ├── App.css │ ├── App.test.js │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── .current.swp ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── .gitignore ├── package.json └── README.md ├── backend ├── .gitignore ├── .env ├── package.json └── README.md └── README.md /frontend/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/City.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Role.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Salary.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/State.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/CityForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/CityTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Company.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/CompanyForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Country.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/CountryForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Department.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Employee.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/Position.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/StateForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/StateTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/CompanyFormEdit.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/CountryTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/DepartmentForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/DepartmentTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/EmployeeFormEdit.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/PositionForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/PositionTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/RoleFormEdit.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/hr/DashboardHR.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/AdminCompanyTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortal.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortalForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminProjectBid.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/Education.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/FamilyInfo.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/PersonalInfo.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/hr/LeaveApplicationHR.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortalFormEdit.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortalTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminProjectBidForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminProjectBidTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/EducationForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/EducationTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/FamilyInfoForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/FamilyInfoTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/PersonalInfoForm.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/PersonalInfoTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/WorkExperience.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/hr/LeaveApplicationHRTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminProjectBidFormEdit.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/LeaveApplicationEmp.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/PersonalInfoFormEdit.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/WorkExperienceForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/WorkExperienceTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /backend/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | config.js 3 | jwtKey.js -------------------------------------------------------------------------------- /frontend/src/component/employee/LeaveApplicationEmpForm.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend/src/component/employee/LeaveApplicationEmpTable.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /backend/.env: -------------------------------------------------------------------------------- 1 | DATABASEURL= mongodb://localhost:27017/emp 2 | JWTKEY=xyz -------------------------------------------------------------------------------- /frontend/src/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from "history"; 2 | export default createBrowserHistory(); 3 | -------------------------------------------------------------------------------- /frontend/.current.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amideb/employee-managenet-system-mern-college-project/HEAD/frontend/.current.swp -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amideb/employee-managenet-system-mern-college-project/HEAD/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/src/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amideb/employee-managenet-system-mern-college-project/HEAD/frontend/src/img/logo.png -------------------------------------------------------------------------------- /frontend/src/component/employee/DashboardEmployee.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | @media (max-width: 1000px) { 4 | 5 | .main-title-employee{ 6 | /* color: red !important; */ 7 | font-size: 14px !important; 8 | } 9 | } -------------------------------------------------------------------------------- /frontend/src/App.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | box-sizing: border-box; 4 | /* font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; */ 5 | font-family: 'Roboto', sans-serif; 6 | } -------------------------------------------------------------------------------- /frontend/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /frontend/src/component/EmployeeTable.css: -------------------------------------------------------------------------------- 1 | #search-bar{ 2 | /* margin-left: 15px; */ 3 | width: 98%; 4 | margin:auto; 5 | margin-bottom: 5px; 6 | } 7 | #search-bar div{ 8 | /* margin-left: 15px; */ 9 | width: 100%; 10 | } 11 | @media (max-width: 1000px) { 12 | #search-bar{ 13 | width: 95%; 14 | } 15 | } -------------------------------------------------------------------------------- /frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /frontend/src/component/NotFound404.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export class NotFound404 extends Component { 4 | render() { 5 | return ( 6 |
7 | 8 |

404 | Not Found

9 |
10 | ) 11 | } 12 | } 13 | 14 | export default NotFound404; 15 | 16 | -------------------------------------------------------------------------------- /frontend/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "nodemon app.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.19.0", 13 | "cors": "^2.8.5", 14 | "dotenv": "^8.2.0", 15 | "express": "^4.17.1", 16 | "joi": "^14.3.1", 17 | "jsonwebtoken": "^8.5.1", 18 | "mongoose": "^5.5.11", 19 | "mongoose-auto-increment": "^5.0.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /frontend/src/component/EmployeeInfo.css: -------------------------------------------------------------------------------- 1 | #outer-empingo-div{ 2 | /* background: #000; */ 3 | width: 80%; 4 | margin: auto; 5 | margin-top: 60px; 6 | } 7 | #outer-empingo-div a:hover{ 8 | text-decoration:none; 9 | } 10 | .empinfo-button{ 11 | /* background-color:#404e67; */ 12 | border-color:#404e67; 13 | color:#404e67; 14 | margin: 10px; 15 | 16 | } 17 | .empinfo-button:hover{ 18 | background-color:#404e67; 19 | /* border-color:#404e67; */ 20 | color:#fff; 21 | border-color:#404e67; 22 | 23 | 24 | } 25 | .empinfo-button:active{ 26 | background-color:#404e67 !important; 27 | /* border-color:#404e67; */ 28 | color:#fff !important; 29 | border-color:#404e67 !important; 30 | 31 | 32 | } -------------------------------------------------------------------------------- /frontend/src/component/NavBar.css: -------------------------------------------------------------------------------- 1 | #main-nav { 2 | /* width: 100%; */ 3 | height: 55px; 4 | background-color: white !important; 5 | -webkit-box-shadow: 0px 10px 13px -11px rgba(0, 0, 0, 0.75); 6 | -moz-box-shadow: 0px 10px 13px -11px rgba(0, 0, 0, 0.75); 7 | box-shadow: 0px 10px 13px -11px rgba(0, 0, 0, 0.75); 8 | padding: 0px; 9 | padding-right: 10px; 10 | } 11 | 12 | #nav-bar-logo { 13 | height: 40px; 14 | margin-left: 10px; 15 | margin-top: 5px; 16 | padding: 0px 17 | } 18 | #logo-anchor{ 19 | padding: 0px; 20 | margin: 0px; 21 | /* float: left; */ 22 | } 23 | #logout-navbar-nav{ 24 | /* background-color: red; */ 25 | width: 10%; 26 | background-color: white; 27 | /* margin: 10px; */ 28 | 29 | 30 | } 31 | #toggle-switch{ 32 | margin-left: 20px; 33 | height: 50px; 34 | /* margin-top: 20px; */ 35 | float: right; 36 | /* padding-top: 20px; */ 37 | display: inline-block; 38 | padding-top: 15px; 39 | } 40 | .navbar-right-content{ 41 | text-decoration: none; 42 | color: black; 43 | margin-right:30px; 44 | margin: 10px; 45 | } 46 | .navBar-username { 47 | float: right; 48 | margin-right: 30px; 49 | } 50 | 51 | -------------------------------------------------------------------------------- /frontend/src/component/Temp.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import '../App.css'; 3 | import { AgGridReact } from 'ag-grid-react'; 4 | import 'ag-grid-community/dist/styles/ag-grid.css'; 5 | import 'ag-grid-community/dist/styles/ag-theme-balham.css'; 6 | 7 | class Temp extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | columnDefs: [{ 12 | headerName: "Make", field: "make" 13 | }, { 14 | headerName: "Model", field: "model" 15 | }, { 16 | headerName: "Price", field: "price" 17 | }], 18 | rowData: [{ 19 | make: "Toyota", model: "Celica", price: 35000 20 | }, { 21 | make: "Ford", model: "Mondeo", price: 32000 22 | }, { 23 | make: "Porsche", model: "Boxter", price: 72000 24 | }] 25 | } 26 | } 27 | 28 | render() { 29 | return ( 30 |
36 | 39 | 40 |
41 | ); 42 | } 43 | } 44 | 45 | export default Temp; -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 7 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 8 | "@fortawesome/react-fontawesome": "^0.1.4", 9 | "ag-grid-community": "^21.0.1", 10 | "ag-grid-react": "^21.0.1", 11 | "axios": "^0.21.1", 12 | "bootstrap": "^4.3.1", 13 | "i": "^0.3.6", 14 | "jsonwebtoken": "^8.5.1", 15 | "npm": "^6.14.11", 16 | "react": "^16.8.6", 17 | "react-bootstrap": "^1.5.1", 18 | "react-dom": "^16.8.6", 19 | "react-dom-factories": "^1.0.2", 20 | "react-router-dom": "^5.2.0", 21 | "react-scripts": "^4.0.3", 22 | "react-spinners": "^0.10.6", 23 | "react-switch": "^5.0.0" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": "react-app" 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /backend/README.md: -------------------------------------------------------------------------------- 1 | # Employee Management System 2 | 3 | Note: this is a repository of Employee Management System backend. the repository of the Frontend is available here: 4 | 5 | ------------- 6 | 7 | Website: 8 | 9 | ------------- 10 | 11 | - Employee Management system is a web application that enables users to create,store and manage Employee Records 12 | - The application also provides facilities of a payroll system and leave application 13 | - It is a management system that helps to manage employees and also the company’s different task and project 14 | - Employee management system can manage and store details like employees personal info and also details of different department of the company and different branches of the organization 15 | 16 | ------------- 17 | 18 | This web application contains three account access: 19 | - Admin 20 | - HR 21 | - Employee 22 | 23 | All three accounts contain different privileges and authentication. 24 | 25 | ------------- 26 | Technology used : 27 | - REACT JS 28 | - NODE JS 29 | - EXPRESS 30 | - MONGO DB 31 | 32 | ------------- 33 | 34 | The different part or module of this project is as follows: 35 | - Login Page 36 | - Admin Dashboard 37 | - HR Dashboard 38 | - Employee Dashboard 39 | - Authentication and authorization(user verification) 40 | - Database(MongoDB) 41 | - Mobile-Friendly UI 42 | 43 | ------------- 44 | 45 | 46 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # Employee Management System 2 | 3 | Note: this is a repository of Employee Management System Frontend. the repository of the backend is available here: 4 | 5 | ------------- 6 | 7 | Website: 8 | ------------- 9 | 10 | - Employee Management system is a web application that enables users to create,store and manage Employee Records 11 | - The application also provides facilities of a payroll system and leave application 12 | - It is a management system that helps to manage employees and also the company’s different task and project 13 | - Employee management system can manage and store details of employees like employees personal info and also details of different department of the company and different branches of the organization 14 | 15 | ------------- 16 | 17 | This web application contains three account access: 18 | - Admin 19 | - HR 20 | - Employee 21 | 22 | All three accounts contain different privileges and authentication. 23 | 24 | ------------- 25 | Technology used : 26 | - REACT JS 27 | - NODE JS 28 | - EXPRESS 29 | - MONGO DB 30 | 31 | ------------- 32 | 33 | The different part or module of this project is as follows: 34 | - Login Page 35 | - Admin Dashboard 36 | - HR Dashboard 37 | - Employee Dashboard 38 | - Authentication and authorization(user verification) 39 | - Database(MongoDB) 40 | - Mobile-Friendly UI 41 | 42 | ------------- 43 | 44 | 45 | -------------------------------------------------------------------------------- /frontend/src/component/RoleForm.css: -------------------------------------------------------------------------------- 1 | #form-submit-button button{ 2 | background-color: #0069d9; 3 | border-color: #0069d9; 4 | /* float: left; */ 5 | 6 | } 7 | #form-cancel-button{ 8 | /* float: left; */ 9 | /* float:right; */ 10 | position: absolute; 11 | right: 0; 12 | bottom: 0; 13 | margin: 0px; 14 | /* background-color: red; */ 15 | 16 | } 17 | #form-cancel-button button{ 18 | /* float: left; */ 19 | /* float:right; */ 20 | background-color: rgb(233, 233, 233); 21 | border-color:rgb(233, 233, 233); 22 | color: black; 23 | } 24 | #form-cancel-button button:focus{ 25 | /* float: left; */ 26 | /* float:right; */ 27 | outline: 0; 28 | box-shadow: 0; 29 | } 30 | #form-cancel-button-inner{ 31 | /* padding: 0px; */ 32 | } 33 | #form{ 34 | /* background-color: blue; */ 35 | position: relative; 36 | margin: 0; 37 | font-size: 15px; 38 | } 39 | #role-form-outer-div{ 40 | width: 80%; 41 | margin:30px auto; 42 | } 43 | .form-input{ 44 | /* margin-right: 0 ; */ 45 | } 46 | 47 | 48 | 49 | #role-form-title { 50 | margin: 20px; 51 | } 52 | 53 | @media (max-width: 576px) { 54 | #form-cancel-button-inner{ 55 | padding: 0px; 56 | } 57 | } 58 | 59 | @media (max-width: 1000px) { 60 | #role-form-title{ 61 | /* color: red; */ 62 | font-size: 22px; 63 | } 64 | 65 | } 66 | -------------------------------------------------------------------------------- /frontend/src/component/Login.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2b447b; 3 | } 4 | #root { 5 | height: auto; 6 | } 7 | 8 | #main-outer-div { 9 | position: relative; 10 | background-color: #fff; 11 | width: 80%; 12 | max-width: 400px; 13 | margin: auto; 14 | margin-top: 7%; 15 | padding: 30px; 16 | border-radius: 10px; 17 | } 18 | 19 | .container { 20 | } 21 | 22 | #logo-img { 23 | width: 100%; 24 | margin: 10% auto 10%; 25 | } 26 | 27 | #logo-div { 28 | width: 50%; 29 | margin: 0 auto; 30 | } 31 | 32 | #title-div { 33 | margin: 0 auto; 34 | text-align: center; 35 | } 36 | 37 | .login-form-input { 38 | box-sizing: border-box; 39 | width: 100%; 40 | border-radius: 10px; 41 | height: 40px; 42 | margin: 10px 0 10px; 43 | padding: 15px; 44 | border: 1px; 45 | background-color: #eef3ff; 46 | } 47 | 48 | .login-form-input:focus { 49 | outline: 0; 50 | } 51 | 52 | #outer-login-form-div { 53 | width: 90%; 54 | margin: 0 auto; 55 | } 56 | .login-form-input[type="submit"] { 57 | background-color: #395faf; 58 | border-width: 0px; 59 | margin-top: 15px; 60 | padding: 0px; 61 | } 62 | 63 | .loading { 64 | text-align: center; 65 | margin-top: 15px; 66 | } 67 | 68 | .title { 69 | font-size: 20px; 70 | } 71 | 72 | .alert { 73 | font-size: 14px; 74 | text-align: center; 75 | color: red; 76 | } 77 | 78 | @media (max-width: 300px) { 79 | #main-outer-div { 80 | width: 50%; 81 | min-width: 0px; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /frontend/src/component/CountryForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./CountryForm.css"; 3 | import { HashRouter as Router, Route, Link } from "react-router-dom"; 4 | import { Form,Button,Col,Row } from "react-bootstrap"; 5 | // import Form from 'react-bootstrap/Form' 6 | 7 | 8 | class CountryForm extends Component { 9 | render() { 10 | // let value=(this.props.pass) ? undefined : ""; 11 | return ( 12 |
13 | 14 |

Add Country Details

15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | Country 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | {/*
49 | */} 50 | 51 | ); 52 | } 53 | } 54 | 55 | export default CountryForm; 56 | -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | 28 | 29 | 30 | React App 31 | 32 | 33 | 34 |
35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /frontend/src/component/employee/FamilyInfoForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./FamilyInfoForm.css"; 3 | import { Form,Button,Col,Row } from "react-bootstrap"; 4 | import axios from "axios"; 5 | 6 | class FamilyInfoForm extends Component { 7 | state = { 8 | }; 9 | componentWillMount() { 10 | 11 | } 12 | render() { 13 | return ( 14 |
15 | 16 |

Add FamilyInfo Details

17 |
18 | 19 | 20 | 21 | 22 | Name 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Relationship 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | DOB 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | Occupation 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 | ); 68 | } 69 | } 70 | 71 | export default FamilyInfoForm; 72 | -------------------------------------------------------------------------------- /frontend/src/component/employee/WorkExperienceForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./WorkExperienceForm.css"; 3 | import { Form,Button,Col,Row } from "react-bootstrap"; 4 | import axios from "axios"; 5 | 6 | class WorkExperienceForm extends Component { 7 | state = { 8 | }; 9 | componentWillMount() { 10 | 11 | } 12 | render() { 13 | return ( 14 |
15 | 16 |

Add WorkExperience Details

17 |
18 | 19 | 20 | 21 | 22 | Company Name 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Designation 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | FromDate 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ToDate 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 | ); 68 | } 69 | } 70 | 71 | export default WorkExperienceForm; 72 | -------------------------------------------------------------------------------- /frontend/src/component/EmployeeInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./EmployeeInfo.css"; 3 | import { Form, Button, Col, Row } from "react-bootstrap"; 4 | import { HashRouter as Router, Route, Link } from "react-router-dom"; 5 | 6 | 7 | 8 | export class EmployeeInfo extends Component { 9 | render() { 10 | return ( 11 |
12 |
22 | 23 | 24 |

Employee Information of {this.props.data["FirstName"]+" "+this.props.data["LastName"]}

25 |
26 | 27 | 36 | 37 | 38 | 46 | 47 | 48 | 56 | 57 | 58 | 66 | 67 |
68 |
69 | ); 70 | } 71 | } 72 | 73 | export default EmployeeInfo; 74 | -------------------------------------------------------------------------------- /frontend/src/component/employee/EducationForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./EducationForm.css"; 3 | import { Form,Button,Col,Row } from "react-bootstrap"; 4 | import axios from "axios"; 5 | 6 | class EducationForm extends Component { 7 | state = { 8 | }; 9 | componentWillMount() { 10 | 11 | } 12 | render() { 13 | return ( 14 |
15 | 16 |

Add Education Details

17 |
18 | 19 | 20 | 21 | 22 | School / University 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Degree 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | Grade 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | Passing Of Year 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 | ); 68 | } 69 | } 70 | 71 | export default EducationForm; 72 | -------------------------------------------------------------------------------- /frontend/src/component/CountryFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./CountryForm.css"; 3 | import { HashRouter as Router, Route, Link } from "react-router-dom"; 4 | // import { Form,Button } from "react-bootstrap"; 5 | import { Form, Button, Col, Row } from "react-bootstrap"; 6 | 7 | class CountryForm extends Component { 8 | state = { 9 | CountryData: this.props.editData["CountryName"] 10 | }; 11 | onChange(e) { 12 | this.setState({ CountryData: e.target.value }); 13 | } 14 | 15 | render() { 16 | return ( 17 |
18 |

Edit Country Details

19 | 20 |
21 |
24 | this.props.onCountryEditUpdate( 25 | this.props.editData, 26 | e 27 | // e.target[1].value 28 | ) 29 | } 30 | > 31 | 32 | 33 | Country 34 | 35 | 36 | this.onChange(value)} 43 | /> 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 57 | 58 | 59 |
60 |
61 |
62 | ); 63 | } 64 | } 65 | 66 | export default CountryForm; 67 | -------------------------------------------------------------------------------- /frontend/src/component/admin/DashboardAdmin.css: -------------------------------------------------------------------------------- 1 | /* html, 2 | body, 3 | #root { 4 | height: 100%; 5 | } */ 6 | body { 7 | /* background-color: white; */ 8 | } 9 | 10 | #outer-main-div { 11 | width: 100%; 12 | height: 100vh; 13 | } 14 | #outer-nav { 15 | height: 60px; 16 | width: 100%; 17 | position: fixed; 18 | z-index: 1; 19 | } 20 | 21 | #main-non-nav { 22 | height: 100%; 23 | background-color: rgb(255, 255, 255); 24 | } 25 | 26 | #sidebar { 27 | transition: all 0.1s linear; 28 | background-color: #404e67; 29 | width: 240px; 30 | height: 100%; 31 | float: left; 32 | overflow: auto; 33 | /* padding-top: 60px; */ 34 | /* margin-top: 60px; */ 35 | /* display: block; */ 36 | /* z-index: 2; */ 37 | } 38 | .display-none{ 39 | width: 0px !important; 40 | } 41 | .display-block{ 42 | width: 240px !important; 43 | } 44 | #sidebar::-webkit-scrollbar { 45 | width: 0 !important; 46 | } 47 | #sidebar-top-content { 48 | padding-top: 55px; 49 | } 50 | #main-title { 51 | font-size: 20px; 52 | margin: 40px 40px 30px 20px; 53 | /* margin-right:1000px; */ 54 | color: white; 55 | } 56 | #main-area { 57 | /* background-color: red; */ 58 | height: 100%; 59 | overflow-y: auto; 60 | /* margin-left: 240px; */ 61 | } 62 | .sidebar-icon { 63 | margin-right: 10px; 64 | color: white; 65 | } 66 | .navbar-ul li a { 67 | text-decoration: none; 68 | color: white; 69 | } 70 | .navbar-ul li { 71 | list-style-type: none; 72 | margin-left: 10px; 73 | margin-top: 20px; 74 | } 75 | 76 | @media (max-width: 1000px) { 77 | #sidebar { 78 | width: auto; 79 | width: 70px; 80 | } 81 | .display-block{ 82 | width: 70px !important; 83 | } 84 | #main-title { 85 | /* margin-left: 10px; */ 86 | /* color: red; */ 87 | margin: 5px; 88 | } 89 | .navbar-ul li { 90 | list-style-type: none; 91 | margin-left: -40px; 92 | margin-top: 20px; 93 | font-size: 12px; 94 | text-align: center; 95 | } 96 | .navbar-ul{ 97 | /* padding: 0px; */ 98 | } 99 | .sidebar-icon { 100 | display: block; 101 | /* margin-bottom: 10px; */ 102 | margin: auto; 103 | /* size: 300px; */ 104 | /* scale: 2; */ 105 | height: 25px; 106 | width: 25px !important; 107 | } 108 | #main-area { 109 | /* margin-left: 70px; */ 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /frontend/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortalForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./AdminPortalForm.css"; 3 | import { Form, Button, Col, Row } from "react-bootstrap"; 4 | // import Form from 'react-bootstrap/Form' 5 | 6 | class AdminPortalForm extends Component { 7 | state = { 8 | status: "" 9 | }; 10 | handleChange = event => { 11 | this.setState({ 12 | status: event.target.value 13 | }); 14 | }; 15 | render() { 16 | return ( 17 |
18 |

Add Portal Details

19 |
20 |
21 | 22 | 23 | Portal 24 | 25 | 26 | 32 | 33 | 34 | 35 | 36 | 37 | Status 38 | 39 | 40 | 49 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 71 | 72 | 73 |
74 |
75 |
76 | ); 77 | } 78 | } 79 | 80 | export default AdminPortalForm; 81 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortalFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./AdminPortalForm.css"; 3 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 4 | // import { Form,Button } from "react-bootstrap"; 5 | import { Form,Button,Col,Row } from "react-bootstrap"; 6 | 7 | class AdminPortalForm extends Component { 8 | state = { 9 | PortalData: this.props.editData["PortalName"], 10 | Status:this.props.editData["Status"] 11 | }; 12 | onChange(e) { 13 | this.setState({ PortalData: e.target.value }); 14 | } 15 | onStatusChange=(e)=>{ 16 | this.setState({ Status: e.target.value }); 17 | this.props.onStatusChange(e) 18 | } 19 | 20 | render() { 21 | return ( 22 |
23 |

Edit Portal Details

24 | 25 |
26 | this.props.onPortalEditUpdate( 27 | this.props.editData, 28 | e.target[0].value 29 | ) 30 | }> 31 | 32 | 33 | 34 | Portal 35 | 36 | 37 | this.onChange(value)}/> 40 | 41 | 42 | 43 | 44 | 45 | Status 46 | 47 | 48 | 59 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 |
84 | ); 85 | } 86 | } 87 | 88 | export default AdminPortalForm; 89 | -------------------------------------------------------------------------------- /frontend/src/component/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Login.css"; 3 | import Logo from "../img/logo.png"; 4 | import { css } from "@emotion/core"; 5 | // First way to import 6 | import { ScaleLoader } from "react-spinners"; 7 | const override = css` 8 | display: block; 9 | margin: 0 auto; 10 | border-color: red; 11 | `; 12 | 13 | class Login extends Component { 14 | render() { 15 | // let value=(this.props.pass) ? undefined : ""; 16 | return ( 17 |
18 |
19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 |

Sign in

27 |
28 | 29 |
30 |
31 | {/*
*/} 32 | 39 | {/*
*/} 40 | {/*
*/} 41 | 47 | {/*
*/} 48 | {/*
*/} 49 | 55 | {/*
*/} 56 | {!this.props.pass ? ( 57 |

Invalid UserName or Password

58 | ) : ( 59 | "" 60 | )} 61 |
62 |
63 | 64 |
65 | 72 |
73 |
74 |
75 |
76 | ); 77 | } 78 | } 79 | 80 | export default Login; 81 | -------------------------------------------------------------------------------- /frontend/src/component/employee/LeaveApplicationEmpForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./LeaveApplicationEmpForm.css"; 3 | import { Form,Button,Col,Row } from "react-bootstrap"; 4 | import axios from "axios"; 5 | 6 | class LeaveApplicationEmpForm extends Component { 7 | state = { 8 | }; 9 | componentWillMount() { 10 | 11 | } 12 | render() { 13 | return ( 14 |
15 | 16 |

Add LeaveApplicationEmp Details

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | Leave Type 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | FromDate 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ToDate 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | Reason for leave 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | Leave Status 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 |
87 | ); 88 | } 89 | } 90 | 91 | export default LeaveApplicationEmpForm; 92 | -------------------------------------------------------------------------------- /frontend/src/component/RoleForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./RoleForm.css"; 3 | import { Form, Button, Col, Row } from "react-bootstrap"; 4 | import axios from "axios"; 5 | 6 | class RoleForm extends Component { 7 | state = { 8 | companyInfo: [] 9 | }; 10 | companyData = []; 11 | loadCompanyInfo = () => { 12 | axios 13 | .get("http://localhost:4000/api/company", { 14 | headers: { 15 | authorization: localStorage.getItem("token") || "" 16 | } 17 | }) 18 | .then(response => { 19 | this.companyData = response.data; 20 | 21 | this.setState({ companyInfo: response.data }); 22 | }) 23 | .catch(error => { 24 | console.log(error); 25 | }); 26 | }; 27 | componentWillMount() { 28 | this.loadCompanyInfo(); 29 | } 30 | render() { 31 | return ( 32 |
33 |

Add Role Details

34 |
35 |
36 | 37 | 38 | Company 39 | 40 | 41 | 42 | 45 | {this.companyData.map((data, index) => ( 46 | 47 | ))} 48 | 49 | 50 | 51 | 52 | 53 | 54 | Role 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 76 | 77 | 78 |
79 |
80 |
81 | ); 82 | } 83 | } 84 | 85 | export default RoleForm; 86 | -------------------------------------------------------------------------------- /frontend/src/component/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./NavBar.css"; 3 | import { Navbar, Nav } from "react-bootstrap"; 4 | import Logo from "../img/logo.png"; 5 | import Switch from "react-switch"; 6 | 7 | class NavBar extends Component { 8 | render() { 9 | // let value=(this.props.pass) ? undefined : ""; 10 | return ( 11 |
12 | {/* */} 17 | 18 | 19 | 20 | {/*
*/} 21 | 22 | 23 | 24 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | {/* 48 | 49 | 50 | admin 51 | 52 | 53 | 54 | */} 55 | 56 | 57 | 65 | 66 | {/*
*/} 67 | 68 | 69 | {/* 70 | Navbar with text 71 | 72 | 73 | 74 | Signed in as: Mark Otto 75 | 76 | 77 | Signed in as: Mark Otto 78 | 79 | 80 | 81 | */} 82 |
83 | ); 84 | } 85 | } 86 | 87 | export default NavBar; 88 | -------------------------------------------------------------------------------- /frontend/src/component/StateForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./StateForm.css"; 3 | import axios from "axios"; 4 | 5 | import { Form, Button, Col, Row } from "react-bootstrap"; 6 | 7 | class StateForm extends Component { 8 | state = { 9 | countryInfo: [] 10 | }; 11 | countryData = []; 12 | loadCountryInfo = () => { 13 | axios 14 | .get("http://localhost:4000/api/country", { 15 | headers: { 16 | authorization: localStorage.getItem("token") || "" 17 | } 18 | }) 19 | .then(response => { 20 | this.countryData = response.data; 21 | 22 | this.setState({ countryInfo: response.data }); 23 | }) 24 | .catch(error => { 25 | console.log(error); 26 | }); 27 | }; 28 | componentWillMount() { 29 | this.loadCountryInfo(); 30 | } 31 | render() { 32 | return ( 33 |
34 |

Add State Details

35 | 36 |
37 |
38 | 39 | 40 | Country 41 | 42 | 43 | 44 | 47 | {this.countryData.map((data, index) => ( 48 | 49 | ))} 50 | 51 | 52 | 53 | 54 | 55 | 56 | State 57 | 58 | 59 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 78 | 79 | 80 |
81 |
82 |
83 | ); 84 | } 85 | } 86 | 87 | export default StateForm; 88 | -------------------------------------------------------------------------------- /frontend/src/component/PositionForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./PositionForm.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class PositionForm extends Component { 8 | state = { 9 | companyInfo: [] 10 | }; 11 | companyData = []; 12 | loadCompanyInfo = () => { 13 | axios 14 | .get("http://localhost:4000/api/company", { 15 | headers: { 16 | authorization: localStorage.getItem("token") || "" 17 | } 18 | }) 19 | .then(response => { 20 | this.companyData = response.data; 21 | this.setState({ companyInfo: response.data }); 22 | }) 23 | .catch(error => { 24 | console.log(error); 25 | }); 26 | }; 27 | componentWillMount() { 28 | this.loadCompanyInfo(); 29 | } 30 | render() { 31 | return ( 32 |
33 |

Add Position Details

34 | 35 |
36 |
37 | 38 | 39 | Company 40 | 41 | 42 | 43 | 46 | {this.companyData.map((data, index) => ( 47 | 48 | ))} 49 | 50 | 51 | 52 | 53 | 54 | 55 | Position 56 | 57 | 58 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 77 | 78 | 79 |
80 |
81 |
82 | ); 83 | } 84 | } 85 | 86 | export default PositionForm; 87 | -------------------------------------------------------------------------------- /frontend/src/component/DepartmentForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./DepartmentForm.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class DepartmentForm extends Component { 8 | state = { 9 | companyInfo: [] 10 | }; 11 | companyData = []; 12 | loadCompanyInfo = () => { 13 | axios 14 | .get("http://localhost:4000/api/company", { 15 | headers: { 16 | authorization: localStorage.getItem("token") || "" 17 | } 18 | }) 19 | .then(response => { 20 | // if(response.data.length==0){this.roleObj=["temp"];} 21 | // else{ 22 | 23 | // } 24 | this.companyData = response.data; 25 | 26 | // this.portalsData=this.portalsData.filter((data)=>data["Status"]==1); 27 | 28 | this.setState({ companyInfo: response.data }); 29 | }) 30 | .catch(error => { 31 | console.log(error); 32 | }); 33 | }; 34 | componentWillMount() { 35 | this.loadCompanyInfo(); 36 | } 37 | render() { 38 | return ( 39 |
40 |

Add Department Details

41 | 42 |
43 |
44 | 45 | 46 | Company 47 | 48 | 49 | 50 | 53 | {this.companyData.map((data, index) => ( 54 | 55 | ))} 56 | 57 | 58 | 59 | 60 | 61 | 62 | Department 63 | 64 | 65 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 84 | 85 | 86 |
87 |
88 |
89 | ); 90 | } 91 | } 92 | 93 | export default DepartmentForm; 94 | -------------------------------------------------------------------------------- /frontend/src/component/RoleTable.css: -------------------------------------------------------------------------------- 1 | #add-button { 2 | float: right; 3 | background-color: #0069d9; 4 | border: 0; 5 | margin: 10px; 6 | /* padding: 5px; */ 7 | /* border-radius: 5px; */ 8 | /* padding: 10px; */ 9 | color: white; 10 | -webkit-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75); 11 | -moz-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75); 12 | box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75); 13 | } 14 | #add-button:hover { 15 | -webkit-box-shadow: 0px 0px 9px -1px rgba(0, 0, 1); 16 | -moz-box-shadow: 0px 0px 9px -1px rgba(0, 0, 1); 17 | box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 1); 18 | } 19 | #plus-icon { 20 | /* margin: 5px; */ 21 | margin-right: 10px; 22 | /* float: left; */ 23 | /* margin-right: 10px; */ 24 | } 25 | #role-title { 26 | /* float: left; */ 27 | display: inline-block; 28 | margin: 10px; 29 | font-size: 28px; 30 | /* width: 100px; */ 31 | /* color: red; */ 32 | } 33 | #role-table { 34 | font-size: 15px; 35 | width: 98%; 36 | /* margin-left: 100px; */ 37 | /* border: 1px solid black; */ 38 | margin: 5px auto; 39 | /* background-color: red; */ 40 | text-align: left; 41 | border-collapse: collapse; 42 | /* overflow: scroll; */ 43 | } 44 | #table-div svg{ 45 | cursor: pointer; 46 | } 47 | #role-table tr { 48 | border-bottom: 1px solid rgb(187, 187, 187); 49 | height: 40px; 50 | /* background-color: blue; */ 51 | } 52 | #role-table thead { 53 | border-bottom: 1px solid rgb(187, 187, 187); 54 | background-color:rgb(238, 238, 240); 55 | /* height: 40px; */ 56 | /* padding: 100px; */ 57 | /* padding-bottom: 50px; */ 58 | /* height:0px; */ 59 | /* padding-top: 100px; */ 60 | /* background-color: blue; */ 61 | } 62 | #role-table th { 63 | /* border: 1px solid black; */ 64 | /* padding-bottom: 50px; */ 65 | /* height:0px; */ 66 | padding-top: 10px; 67 | padding-bottom: 10px; 68 | /* padding-top: 100px; */ 69 | /* background-color: blue; */ 70 | } 71 | #loading-bar { 72 | /* margin-top: 100px; */ 73 | width: 100%; 74 | } 75 | #table-outer-div-scroll{ 76 | /* overflow: auto; */ 77 | /* height: 100%; */ 78 | /* width: 100%; */ 79 | /* box-sizing: content-box; */ 80 | /* padding-right: 17px; */ 81 | /* background-color: red; */ 82 | } 83 | #table-outer-div-scroll::-webkit-scrollbar{ 84 | /* width: 0; */ 85 | } 86 | #inner-table-div{ 87 | overflow-x: auto; 88 | } 89 | #table-div{ 90 | width: 98%; 91 | height:550px; 92 | margin: auto; 93 | font-size: 14px !important; 94 | /* line-height: 100px; */ 95 | } 96 | .ag-header{ 97 | font-size: 14px !important; 98 | height: 40px !important; 99 | } 100 | 101 | #clear-both{ 102 | clear: both; 103 | } 104 | 105 | @media (max-width: 1000px) { 106 | #role-title { 107 | font-size: 20px; 108 | margin: 10px; 109 | margin-top: 20px; 110 | } 111 | #inner-table-div{ 112 | overflow-x: auto; 113 | width: 95%; 114 | margin: auto; 115 | } 116 | #role-table th { 117 | font-size: 15px; 118 | } 119 | #add-button{ 120 | margin: 10px; 121 | margin-top: 20px; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /frontend/src/component/employee/PersonalInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./PersonalInfo.css"; 3 | import axios from "axios"; 4 | import PersonalInfoTable from "./PersonalInfoTable.jsx"; 5 | import PersonalInfoFormEdit from "./PersonalInfoFormEdit.jsx"; 6 | class PersonalInfo extends Component { 7 | state = { 8 | table: true, 9 | editForm: false, 10 | editData: {}, 11 | addFormGender: "", 12 | editFormGender: "" 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | 19 | {this.state.table ? ( 20 | this.state.editForm ? ( 21 | 27 | ) : ( 28 | 34 | ) 35 | ) : ( 36 |
37 | )} 38 | 39 | ); 40 | } 41 | handleEditPersonalInfo = e => { 42 | console.log(e); 43 | console.log("clicked6"); 44 | this.setState({ editForm: true }); 45 | this.setState({ editData: e }); 46 | this.setState({ editFormGender: e["Gender"] }); 47 | }; 48 | handleEditFormClose = () => { 49 | console.log("clicked5"); 50 | this.setState({ editForm: false }); 51 | }; 52 | handlePersonalInfoEditUpdate = (info, newInfo) => { 53 | newInfo.preventDefault(); 54 | console.log("zero data", newInfo.target[0].value); 55 | let body = { 56 | Gender: this.state.editFormGender, 57 | ContactNo: newInfo.target[5].value, 58 | EmergencyContactNo: newInfo.target[6].value, 59 | Email: newInfo.target[7].value, 60 | PANcardNo: newInfo.target[8].value, 61 | DOB: newInfo.target[9].value, 62 | BloodGroup: newInfo.target[10].value, 63 | Hobbies: newInfo.target[11].value, 64 | PresentAddress: newInfo.target[12].value, 65 | PermanetAddress: newInfo.target[13].value 66 | }; 67 | console.log("update", body); 68 | axios 69 | .put("http://localhost:4000/api/personal-info/" + info["_id"], body, { 70 | headers: { 71 | authorization: localStorage.getItem("token") || "" 72 | } 73 | }) 74 | .then(res => { 75 | this.setState({ table: false }); 76 | this.setState({ table: true }); 77 | }) 78 | .catch(err => { 79 | console.log(err); 80 | }); 81 | 82 | this.setState({ editForm: false }); 83 | }; 84 | handleEditFormGenderChange = e => { 85 | // console.log(e.currentTarget.value); 86 | // console.log("ggggggggggggggggggggggggggggeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeennnnnnnnnnnnnnnnnnnnnnnnn") 87 | this.setState({ 88 | editFormGender: e.currentTarget.value 89 | }); 90 | }; 91 | } 92 | 93 | export default PersonalInfo; 94 | -------------------------------------------------------------------------------- /frontend/src/component/City.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./City.css"; 3 | import axios from "axios"; 4 | import CityTable from "./CityTable.jsx"; 5 | import CityForm from "./CityForm.jsx"; 6 | import CityFormEdit from "./CityFormEdit.jsx"; 7 | 8 | 9 | class City extends Component { 10 | state = { 11 | table: true, 12 | editForm: false, 13 | editData: {} 14 | }; 15 | 16 | render() { 17 | return ( 18 | 19 | {this.state.table ? ( 20 | this.state.editForm ? ( 21 | 26 | ) : ( 27 | 31 | ) 32 | ) : ( 33 | 37 | )} 38 | 39 | ); 40 | } 41 | handleCitySubmit = event => { 42 | event.preventDefault(); 43 | console.log("id", event.target[0].value, event.target[1].value); 44 | this.setState({ table: true }); 45 | 46 | let body = { 47 | StateID: event.target[1].value, 48 | CityName: event.target[2].value 49 | }; 50 | axios 51 | .post("http://localhost:4000/api/city", body, { 52 | headers: { 53 | authorization: localStorage.getItem("token") || "" 54 | } 55 | }) 56 | .then(res => { 57 | this.setState({ table: false }); 58 | this.setState({ table: true }); 59 | }) 60 | .catch(err => { 61 | console.log(err); 62 | }); 63 | 64 | }; 65 | handleAddCity = () => { 66 | console.log("clicked1"); 67 | this.setState({ table: false }); 68 | }; 69 | handleEditCity = e => { 70 | console.log(e); 71 | console.log("clicked6"); 72 | this.setState({ editForm: true }); 73 | this.setState({ editData: e }); 74 | }; 75 | handleFormClose = () => { 76 | console.log("clicked1"); 77 | this.setState({ table: true }); 78 | }; 79 | handleEditFormClose = () => { 80 | console.log("clicked5"); 81 | this.setState({ editForm: false }); 82 | }; 83 | handleFormClose = () => { 84 | console.log("clicked1"); 85 | this.setState({ table: true }); 86 | }; 87 | handleCityEditUpdate = (info, newInfo) => { 88 | newInfo.preventDefault(); 89 | this.setState({ table: true }); 90 | 91 | let body = { 92 | StateID: newInfo.target[1].value, 93 | CityName: newInfo.target[2].value 94 | }; 95 | 96 | axios 97 | .put("http://localhost:4000/api/city/" + info["_id"], body, { 98 | headers: { 99 | authorization: localStorage.getItem("token") || "" 100 | } 101 | }) 102 | .then(res => { 103 | console.log("uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu") 104 | this.setState({ editForm: false }); 105 | this.setState({ table: true }); 106 | }) 107 | .catch(err => { 108 | console.log(err); 109 | }); 110 | }; 111 | } 112 | 113 | export default City; 114 | -------------------------------------------------------------------------------- /frontend/src/component/StateFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | import { Form, Button, Col, Row } from "react-bootstrap"; 4 | 5 | class StateForm extends Component { 6 | state = { 7 | StateData: this.props.editData["StateName"], 8 | countryInfo: [] 9 | }; 10 | countryData = []; 11 | loadCountryInfo = () => { 12 | axios 13 | .get("http://localhost:4000/api/country", { 14 | headers: { 15 | authorization: localStorage.getItem("token") || "" 16 | } 17 | }) 18 | .then(response => { 19 | this.countryData = response.data; 20 | 21 | this.setState({ portalsInfo: response.data }); 22 | }) 23 | .catch(error => { 24 | console.log(error); 25 | }); 26 | }; 27 | componentWillMount() { 28 | this.loadCountryInfo(); 29 | } 30 | onChange(e) { 31 | this.setState({ StateData: e.target.value }); 32 | } 33 | 34 | render() { 35 | return ( 36 |
37 |

Edit State Details

38 | 39 |
40 |
this.props.onStateEditUpdate(this.props.editData, e)} 43 | > 44 | 45 | 46 | Country 47 | 48 | 49 | 50 | 53 | {this.countryData.map((data, index) => ( 54 | 62 | ))} 63 | 64 | 65 | 66 | 67 | 68 | 69 | State 70 | 71 | 72 | this.onChange(value)} 79 | /> 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 93 | 94 | 95 |
96 |
97 |
98 | ); 99 | } 100 | } 101 | 102 | export default StateForm; 103 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Employee Management System 2 | 3 | Note: start with : npm start & install : npm install 4 | 5 | ------------- 6 | 7 | Website: 8 | ------------- 9 | 10 | - Employee Management system is a web application that enables users to create,store and manage Employee Records 11 | - The application also provides facilities of a payroll system and leave application 12 | - It is a management system that helps to manage employees and also the company’s different task and project 13 | - Employee management system can manage and store details of employees like employees personal info and also details of different department of the company and different branches of the organization 14 | 15 | ------------- 16 | 17 | This web application contains three account access: 18 | - Admin 19 | - HR 20 | - Employee 21 | 22 | All three accounts contain different privileges and authentication. 23 | 24 | ------------- 25 | Technology used : 26 | - REACT JS 27 | - NODE JS 28 | - EXPRESS 29 | - MONGO DB 30 | 31 | ------------- 32 | 33 | The different part or module of this project is as follows: 34 | - Login Page 35 | - Admin Dashboard 36 | - HR Dashboard 37 | - Employee Dashboard 38 | - Authentication and authorization(user verification) 39 | - Database(MongoDB) 40 | - Mobile-Friendly UI 41 | 42 | 43 | ![image10](https://user-images.githubusercontent.com/57451228/125170462-d8b12c80-e1cc-11eb-9df4-a2ced9688f60.png) 44 | ![image11](https://user-images.githubusercontent.com/57451228/125170463-d9e25980-e1cc-11eb-9af0-2ed0b5b83398.png) 45 | ![image12](https://user-images.githubusercontent.com/57451228/125170464-da7af000-e1cc-11eb-90d0-99bb67bb29f0.png) 46 | ![image13](https://user-images.githubusercontent.com/57451228/125170466-da7af000-e1cc-11eb-9045-45f3af205e6e.png) 47 | ![image14](https://user-images.githubusercontent.com/57451228/125170468-db138680-e1cc-11eb-9d80-dceeb1fc4518.png) 48 | ![image15](https://user-images.githubusercontent.com/57451228/125170469-dbac1d00-e1cc-11eb-95f3-9c8703b0bd07.png) 49 | ![image16](https://user-images.githubusercontent.com/57451228/125170471-dbac1d00-e1cc-11eb-83b4-c089aa8289ea.png) 50 | ![image17](https://user-images.githubusercontent.com/57451228/125170474-dc44b380-e1cc-11eb-9214-68e6654a1dca.png) 51 | ![image18](https://user-images.githubusercontent.com/57451228/125170476-dc44b380-e1cc-11eb-8000-a257b7b69413.png) 52 | ![image19](https://user-images.githubusercontent.com/57451228/125170479-dcdd4a00-e1cc-11eb-8c09-cd8bb5767ab6.png) 53 | ![image20](https://user-images.githubusercontent.com/57451228/125170482-dd75e080-e1cc-11eb-9d63-f4a4669294e7.png) 54 | ![image1](https://user-images.githubusercontent.com/57451228/125170484-dd75e080-e1cc-11eb-83b2-fe0ea121194e.png) 55 | ![image2](https://user-images.githubusercontent.com/57451228/125170486-de0e7700-e1cc-11eb-9cae-b5b32200f6e4.png) 56 | ![image3](https://user-images.githubusercontent.com/57451228/125170487-de0e7700-e1cc-11eb-94fa-c836bba0075d.png) 57 | ![image4](https://user-images.githubusercontent.com/57451228/125170488-dea70d80-e1cc-11eb-80fd-5d08c7771f8b.png) 58 | ![image5](https://user-images.githubusercontent.com/57451228/125170489-df3fa400-e1cc-11eb-83e3-efecc4b6f7ab.png) 59 | ![image6](https://user-images.githubusercontent.com/57451228/125170490-df3fa400-e1cc-11eb-9e2d-50d8bf2f91dd.png) 60 | ![image7](https://user-images.githubusercontent.com/57451228/125170491-dfd83a80-e1cc-11eb-9878-b44a343122b7.png) 61 | ![image8](https://user-images.githubusercontent.com/57451228/125170492-dfd83a80-e1cc-11eb-8cd9-a93b87990c08.png) 62 | ![image9](https://user-images.githubusercontent.com/57451228/125170493-e070d100-e1cc-11eb-9ced-47520ef40e1b.png) 63 | 64 | 65 | ------------- 66 | -------------------------------------------------------------------------------- /frontend/src/component/RoleFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Form, Button, Col, Row } from "react-bootstrap"; 3 | import axios from "axios"; 4 | 5 | class RoleForm extends Component { 6 | state = { 7 | RoleData: this.props.editData["RoleName"], 8 | companyInfo: [] 9 | }; 10 | onChange(e) { 11 | this.setState({ RoleData: e.target.value }); 12 | } 13 | 14 | companyData = []; 15 | loadCompanyInfo = () => { 16 | axios 17 | .get("http://localhost:4000/api/company", { 18 | headers: { 19 | authorization: localStorage.getItem("token") || "" 20 | } 21 | }) 22 | .then(response => { 23 | this.companyData = response.data; 24 | this.setState({ companyInfo: response.data }); 25 | }) 26 | .catch(error => { 27 | console.log(error); 28 | }); 29 | }; 30 | componentWillMount() { 31 | this.loadCompanyInfo(); 32 | } 33 | 34 | render() { 35 | return ( 36 |
37 |

Edit Role Details

38 |
39 |
42 | this.props.onRoleEditUpdate( 43 | this.props.editData, 44 | e.target[0].value, 45 | e.target[1].value 46 | ) 47 | } 48 | > 49 | 50 | 51 | Company 52 | 53 | 54 | 55 | 58 | {this.companyData.map((data, index) => ( 59 | 67 | ))} 68 | 69 | 70 | 71 | 72 | 73 | Role 74 | 75 | 76 | this.onChange(value)} 83 | /> 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 97 | 98 | 99 |
100 |
101 |
102 | ); 103 | } 104 | } 105 | 106 | export default RoleForm; 107 | -------------------------------------------------------------------------------- /frontend/src/component/DepartmentFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./DepartmentFormEdit.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class DepartmentForm extends Component { 8 | state = { 9 | DepartmentData: this.props.editData["DepartmentName"], 10 | companyInfo: [] 11 | }; 12 | onChange(e) { 13 | this.setState({ DepartmentData: e.target.value }); 14 | } 15 | companyData = []; 16 | loadCompanyInfo = () => { 17 | axios 18 | .get("http://localhost:4000/api/company", { 19 | headers: { 20 | authorization: localStorage.getItem("token") || "" 21 | } 22 | }) 23 | .then(response => { 24 | // if(response.data.length==0){this.roleObj=["temp"];} 25 | // else{ 26 | 27 | // } 28 | this.companyData = response.data; 29 | 30 | // this.portalsData=this.portalsData.filter((data)=>data["Status"]==1); 31 | 32 | this.setState({ companyInfo: response.data }); 33 | }) 34 | .catch(error => { 35 | console.log(error); 36 | }); 37 | }; 38 | componentWillMount() { 39 | this.loadCompanyInfo(); 40 | } 41 | 42 | render() { 43 | // let value=(this.props.pass) ? undefined : ""; 44 | return ( 45 |
46 |

Edit Department Details

47 | 48 |
49 |
52 | this.props.onDepartmentEditUpdate(this.props.editData, e) 53 | } 54 | > 55 | 56 | 57 | Company 58 | 59 | 60 | 61 | 64 | {this.companyData.map((data, index) => ( 65 | 73 | ))} 74 | 75 | 76 | 77 | 78 | 79 | 80 | Department 81 | 82 | 83 | this.onChange(value)} 90 | /> 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 104 | 105 | 106 |
107 |
108 |
109 | ); 110 | } 111 | } 112 | 113 | export default DepartmentForm; 114 | -------------------------------------------------------------------------------- /frontend/src/component/PositionFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./PositionForm.css"; 3 | import { HashRouter as Router, Route, Link } from "react-router-dom"; 4 | // import { Form,Button } from "react-bootstrap"; 5 | import { Form, Button, Col, Row } from "react-bootstrap"; 6 | import axios from "axios"; 7 | 8 | class PositionForm extends Component { 9 | state = { 10 | PositionData: this.props.editData["PositionName"], 11 | companyInfo: [] 12 | }; 13 | onChange(e) { 14 | this.setState({ PositionData: e.target.value }); 15 | } 16 | companyData = []; 17 | loadCompanyInfo = () => { 18 | axios 19 | .get("http://localhost:4000/api/company", { 20 | headers: { 21 | authorization: localStorage.getItem("token") || "" 22 | } 23 | }) 24 | .then(response => { 25 | // if(response.data.length==0){this.roleObj=["temp"];} 26 | // else{ 27 | 28 | // } 29 | this.companyData = response.data; 30 | 31 | // this.portalsData=this.portalsData.filter((data)=>data["Status"]==1); 32 | 33 | this.setState({ companyInfo: response.data }); 34 | }) 35 | .catch(error => { 36 | console.log(error); 37 | }); 38 | }; 39 | componentWillMount() { 40 | this.loadCompanyInfo(); 41 | } 42 | 43 | render() { 44 | // let value=(this.props.pass) ? undefined : ""; 45 | return ( 46 |
47 |

Edit Position Details

48 | 49 |
50 |
53 | this.props.onPositionEditUpdate( 54 | this.props.editData, 55 | e.target[0].value, 56 | e.target[1].value 57 | ) 58 | } 59 | > 60 | 61 | 62 | Company 63 | 64 | 65 | 66 | 69 | {this.companyData.map((data, index) => ( 70 | 78 | ))} 79 | 80 | 81 | 82 | 83 | 84 | 85 | Position 86 | 87 | 88 | this.onChange(value)} 95 | /> 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 109 | 110 | 111 |
112 |
113 |
114 | ); 115 | } 116 | } 117 | 118 | export default PositionForm; 119 | -------------------------------------------------------------------------------- /frontend/src/component/employee/Education.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Education.css"; 3 | import axios from "axios"; 4 | import EducationTable from "./EducationTable.jsx"; 5 | import EducationForm from "./EducationForm.jsx"; 6 | import EducationFormEdit from "./EducationFormEdit.jsx"; 7 | class Education extends Component { 8 | state = { 9 | table: true, 10 | editForm: false, 11 | editData: {}, 12 | 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | {/*

iiiiiiiiiinnnnnnnnnnnnnn{ 19 | JSON.stringify(this.props.data)}

*/} 20 | 21 | {this.state.table ? ( 22 | this.state.editForm ? ( 23 | 28 | ) : ( 29 | 35 | ) 36 | ) : ( 37 | 42 | )} 43 | 44 | ); 45 | } 46 | handleEducationSubmit = event => { 47 | event.preventDefault(); 48 | console.log("id", event.target[0].value, event.target[1].value); 49 | this.setState({ table: true }); 50 | 51 | let body = { 52 | 53 | SchoolUniversity: event.target[0].value, 54 | Degree: event.target[1].value, 55 | Grade: event.target[2].value, 56 | PassingOfYear: event.target[3].value, 57 | }; 58 | axios 59 | .post("http://localhost:4000/api/education/" + this.props.data["_id"], body, { 60 | headers: { 61 | authorization: localStorage.getItem("token") || "" 62 | } 63 | }) 64 | .then(res => { 65 | this.setState({ table: false }); 66 | this.setState({ table: true }); 67 | }) 68 | .catch(err => { 69 | console.log(err); 70 | }); 71 | }; 72 | handleAddEducation = () => { 73 | console.log("clicked1"); 74 | this.setState({ table: false }); 75 | }; 76 | handleEditEducation = e => { 77 | console.log(e); 78 | console.log("clicked6"); 79 | this.setState({ editForm: true }); 80 | this.setState({ editData: e }); 81 | this.setState({ editFormGender: e["Gender"] }) 82 | }; 83 | handleFormClose = () => { 84 | console.log("clicked1"); 85 | this.setState({ table: true }); 86 | }; 87 | handleEditFormClose = () => { 88 | console.log("clicked5"); 89 | this.setState({ editForm: false }); 90 | }; 91 | // handleFormClose = () => { 92 | // console.log("clicked1"); 93 | // this.setState({ table: true }); 94 | // }; 95 | handleEducationEditUpdate = (info, newInfo) => { 96 | newInfo.preventDefault(); 97 | console.log("zero data", newInfo.target[0].value); 98 | let body = { 99 | SchoolUniversity: newInfo.target[0].value, 100 | Degree: newInfo.target[1].value, 101 | Grade: newInfo.target[2].value, 102 | PassingOfYear: newInfo.target[3].value, 103 | }; 104 | console.log("update", body); 105 | axios 106 | .put( 107 | "http://localhost:4000/api/education/" + info["_id"], 108 | body, { 109 | headers: { 110 | authorization: localStorage.getItem("token") || "" 111 | } 112 | } 113 | ) 114 | .then(res => { 115 | this.setState({ table: false }); 116 | this.setState({ table: true }); 117 | }) 118 | .catch(err => { 119 | console.log(err); 120 | }); 121 | 122 | this.setState({ editForm: false }); 123 | }; 124 | 125 | } 126 | 127 | export default Education; 128 | -------------------------------------------------------------------------------- /frontend/src/component/employee/FamilyInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./FamilyInfo.css"; 3 | import axios from "axios"; 4 | import FamilyInfoTable from "./FamilyInfoTable.jsx"; 5 | import FamilyInfoForm from "./FamilyInfoForm.jsx"; 6 | import FamilyInfoFormEdit from "./FamilyInfoFormEdit.jsx"; 7 | class FamilyInfo extends Component { 8 | state = { 9 | table: true, 10 | editForm: false, 11 | editData: {}, 12 | 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | {/*

iiiiiiiiiinnnnnnnnnnnnnn{ 19 | JSON.stringify(this.props.data)}

*/} 20 | 21 | {this.state.table ? ( 22 | this.state.editForm ? ( 23 | 28 | ) : ( 29 | 35 | ) 36 | ) : ( 37 | 42 | )} 43 | 44 | ); 45 | } 46 | handleFamilyInfoSubmit = event => { 47 | event.preventDefault(); 48 | console.log("id", event.target[0].value, event.target[1].value); 49 | this.setState({ table: true }); 50 | 51 | let body = { 52 | Name: event.target[0].value, 53 | Relationship: event.target[1].value, 54 | DOB: event.target[2].value, 55 | Occupation: event.target[3].value, 56 | }; 57 | axios 58 | .post("http://localhost:4000/api/family-info/" + this.props.data["_id"], body, { 59 | headers: { 60 | authorization: localStorage.getItem("token") || "" 61 | } 62 | }) 63 | .then(res => { 64 | this.setState({ table: false }); 65 | this.setState({ table: true }); 66 | }) 67 | .catch(err => { 68 | console.log(err); 69 | }); 70 | }; 71 | handleAddFamilyInfo = () => { 72 | console.log("clicked1"); 73 | this.setState({ table: false }); 74 | }; 75 | handleEditFamilyInfo = e => { 76 | console.log(e); 77 | console.log("clicked6"); 78 | this.setState({ editForm: true }); 79 | this.setState({ editData: e }); 80 | this.setState({ editFormGender: e["Gender"] }) 81 | }; 82 | handleFormClose = () => { 83 | console.log("clicked1"); 84 | this.setState({ table: true }); 85 | }; 86 | handleEditFormClose = () => { 87 | console.log("clicked5"); 88 | this.setState({ editForm: false }); 89 | }; 90 | // handleFormClose = () => { 91 | // console.log("clicked1"); 92 | // this.setState({ table: true }); 93 | // }; 94 | handleFamilyInfoEditUpdate = (info, newInfo) => { 95 | newInfo.preventDefault(); 96 | console.log("zero data", newInfo.target[0].value); 97 | let body = { 98 | Name: newInfo.target[0].value, 99 | Relationship: newInfo.target[1].value, 100 | DOB: newInfo.target[2].value, 101 | Occupation: newInfo.target[3].value, 102 | }; 103 | console.log("update", body); 104 | axios 105 | .put( 106 | "http://localhost:4000/api/family-info/" + info["_id"], 107 | body, { 108 | headers: { 109 | authorization: localStorage.getItem("token") || "" 110 | } 111 | } 112 | ) 113 | .then(res => { 114 | this.setState({ table: false }); 115 | this.setState({ table: true }); 116 | }) 117 | .catch(err => { 118 | console.log(err); 119 | }); 120 | 121 | this.setState({ editForm: false }); 122 | }; 123 | 124 | } 125 | 126 | export default FamilyInfo; 127 | -------------------------------------------------------------------------------- /frontend/src/component/employee/WorkExperience.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./WorkExperience.css"; 3 | import axios from "axios"; 4 | import WorkExperienceTable from "./WorkExperienceTable.jsx"; 5 | import WorkExperienceForm from "./WorkExperienceForm.jsx"; 6 | import WorkExperienceFormEdit from "./WorkExperienceFormEdit.jsx"; 7 | class WorkExperience extends Component { 8 | state = { 9 | table: true, 10 | editForm: false, 11 | editData: {}, 12 | 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | {/*

iiiiiiiiiinnnnnnnnnnnnnn{ 19 | JSON.stringify(this.props.data)}

*/} 20 | 21 | {this.state.table ? ( 22 | this.state.editForm ? ( 23 | 29 | ) : ( 30 | 36 | ) 37 | ) : ( 38 | 43 | )} 44 | 45 | ); 46 | } 47 | handleWorkExperienceSubmit = event => { 48 | event.preventDefault(); 49 | console.log("id", event.target[0].value, event.target[1].value); 50 | this.setState({ table: true }); 51 | 52 | let body = { 53 | 54 | CompanyName: event.target[0].value, 55 | Designation: event.target[1].value, 56 | FromDate: event.target[2].value, 57 | ToDate: event.target[3].value, 58 | }; 59 | axios 60 | .post("http://localhost:4000/api/work-experience/" + this.props.data["_id"], body, { 61 | headers: { 62 | authorization: localStorage.getItem("token") || "" 63 | } 64 | }) 65 | .then(res => { 66 | this.setState({ table: false }); 67 | this.setState({ table: true }); 68 | }) 69 | .catch(err => { 70 | console.log(err); 71 | }); 72 | }; 73 | handleAddWorkExperience = () => { 74 | console.log("clicked1"); 75 | this.setState({ table: false }); 76 | }; 77 | handleEditWorkExperience = e => { 78 | console.log(e); 79 | console.log("clicked6"); 80 | this.setState({ editForm: true }); 81 | this.setState({ editData: e }); 82 | this.setState({ editFormGender: e["Gender"] }) 83 | }; 84 | handleFormClose = () => { 85 | console.log("clicked1"); 86 | this.setState({ table: true }); 87 | }; 88 | handleEditFormClose = () => { 89 | console.log("clicked5"); 90 | this.setState({ editForm: false }); 91 | }; 92 | // handleFormClose = () => { 93 | // console.log("clicked1"); 94 | // this.setState({ table: true }); 95 | // }; 96 | handleWorkExperienceEditUpdate = (info, newInfo) => { 97 | newInfo.preventDefault(); 98 | console.log("zero data", newInfo.target[0].value); 99 | let body = { 100 | CompanyName: newInfo.target[0].value, 101 | Designation: newInfo.target[1].value, 102 | FromDate: newInfo.target[2].value, 103 | ToDate: newInfo.target[3].value, 104 | }; 105 | console.log("update", body); 106 | axios 107 | .put( 108 | "http://localhost:4000/api/work-experience/" + info["_id"], 109 | body, { 110 | headers: { 111 | authorization: localStorage.getItem("token") || "" 112 | } 113 | } 114 | ) 115 | .then(res => { 116 | this.setState({ table: false }); 117 | this.setState({ table: true }); 118 | }) 119 | .catch(err => { 120 | console.log(err); 121 | }); 122 | 123 | this.setState({ editForm: false }); 124 | }; 125 | 126 | } 127 | 128 | export default WorkExperience; 129 | -------------------------------------------------------------------------------- /frontend/src/component/Company.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Company.css"; 3 | import axios from "axios"; 4 | import CompanyTable from "./CompanyTable.jsx"; 5 | import CompanyForm from "./CompanyForm.jsx"; 6 | import CompanyFormEdit from "./CompanyFormEdit.jsx"; 7 | class Company extends Component { 8 | state = { 9 | table: true, 10 | editForm: false, 11 | editData: {} 12 | }; 13 | 14 | render() { 15 | return ( 16 | 17 | {this.state.table ? ( 18 | this.state.editForm ? ( 19 | 24 | ) : ( 25 | 29 | ) 30 | ) : ( 31 | 35 | )} 36 | 37 | ); 38 | } 39 | handleCompanySubmit = event => { 40 | event.preventDefault(); 41 | console.log("id", event.target[0].value, event.target[1].value); 42 | this.setState({ table: true }); 43 | 44 | let body = { 45 | CompanyName: event.target[0].value, 46 | Address: event.target[1].value, 47 | CityID: event.target[4].value, 48 | PostalCode: event.target[5].value, 49 | Website: event.target[6].value, 50 | Email: event.target[7].value, 51 | ContactPerson: event.target[8].value, 52 | ContactNo: event.target[9].value, 53 | FaxNo: event.target[10].value, 54 | PanNo: event.target[11].value, 55 | GSTNo: event.target[12].value, 56 | CINNo: event.target[13].value, 57 | }; 58 | axios 59 | .post("http://localhost:4000/api/company", body, { 60 | headers: { 61 | authorization: localStorage.getItem("token") || "" 62 | } 63 | }) 64 | .then(res => { 65 | this.setState({ table: false }); 66 | this.setState({ table: true }); 67 | }) 68 | .catch(err => { 69 | console.log(err); 70 | }); 71 | }; 72 | handleAddCompany = () => { 73 | console.log("clicked1"); 74 | this.setState({ table: false }); 75 | }; 76 | handleEditCompany = e => { 77 | console.log(e); 78 | console.log("clicked6"); 79 | this.setState({ editForm: true }); 80 | this.setState({ editData: e }); 81 | }; 82 | handleFormClose = () => { 83 | console.log("clicked1"); 84 | this.setState({ table: true }); 85 | }; 86 | handleEditFormClose = () => { 87 | console.log("clicked5"); 88 | this.setState({ editForm: false }); 89 | }; 90 | handleFormClose = () => { 91 | console.log("clicked1"); 92 | this.setState({ table: true }); 93 | }; 94 | handleCompanyEditUpdate = (info, newInfo) => { 95 | newInfo.preventDefault(); 96 | let body = { 97 | CompanyName: newInfo.target[0].value, 98 | Address: newInfo.target[1].value, 99 | CityID: newInfo.target[4].value, 100 | PostalCode: newInfo.target[5].value, 101 | Website: newInfo.target[6].value, 102 | Email: newInfo.target[7].value, 103 | ContactPerson: newInfo.target[8].value, 104 | ContactNo: newInfo.target[9].value, 105 | FaxNo: newInfo.target[10].value, 106 | PanNo: newInfo.target[11].value, 107 | GSTNo: newInfo.target[12].value, 108 | CINNo: newInfo.target[13].value, 109 | }; 110 | console.log("update", body); 111 | axios 112 | .put( 113 | "http://localhost:4000/api/company/" + info["_id"], 114 | body, { 115 | headers: { 116 | authorization: localStorage.getItem("token") || "" 117 | } 118 | } 119 | ) 120 | .then(res => { 121 | // this.componentDidMount(); 122 | this.setState({ table: false }); 123 | this.setState({ table: true }); 124 | }) 125 | .catch(err => { 126 | console.log(err); 127 | }); 128 | 129 | this.setState({ editForm: false }); 130 | }; 131 | } 132 | 133 | export default Company; 134 | -------------------------------------------------------------------------------- /frontend/src/component/employee/FamilyInfoFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./FamilyInfoFormEdit.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class FamilyInfoForm extends Component { 8 | state = { 9 | // FamilyInfoData: this.props.editData["FamilyInfoName"], 10 | 11 | NameData: this.props.editData["Name"], 12 | RelationshipData: this.props.editData["Relationship"], 13 | DOBData: this.props.editData["DOB"].slice(0, 10), 14 | OccupationData: this.props.editData["Occupation"] 15 | }; 16 | onNameDataChange(e) { 17 | this.setState({ NameData: e.target.value }); 18 | } 19 | onRelationshipDataChange(e) { 20 | this.setState({ RelationshipData: e.target.value }); 21 | } 22 | onOccupationDataChange(e) { 23 | this.setState({ OccupationData: e.target.value }); 24 | } 25 | onDOBDataChange(e) { 26 | this.setState({ DOBData: e.target.value }); 27 | } 28 | 29 | componentWillMount() { 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 |

Edit FamilyInfo Details

36 | 37 |
38 |
41 | this.props.onFamilyInfoEditUpdate(this.props.editData, e) 42 | } 43 | > 44 | 45 | 46 | Name 47 | 48 | 49 | this.onNameDataChange(value)} 55 | /> 56 | 57 | 58 | 59 | 60 | Relationship 61 | 62 | 63 | this.onRelationshipDataChange(value)} 69 | /> 70 | 71 | 72 | 73 | 74 | DOB 75 | 76 | 77 | this.onDOBDataChange(value)} 83 | /> 84 | 85 | 86 | 87 | 88 | Occupation 89 | 90 | 91 | this.onOccupationDataChange(value)} 97 | /> 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 111 | 112 | 113 |
114 |
115 |
116 | ); 117 | } 118 | } 119 | 120 | export default FamilyInfoForm; 121 | -------------------------------------------------------------------------------- /frontend/src/component/employee/WorkExperienceFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./WorkExperienceFormEdit.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class WorkExperienceForm extends Component { 8 | state = { 9 | // WorkExperienceData: this.props.editData["WorkExperienceName"], 10 | 11 | CompanyNameData: this.props.editData["CompanyName"], 12 | DesignationData: this.props.editData["Designation"], 13 | FromDateData: this.props.editData["FromDate"].slice(0, 10), 14 | ToDateData: this.props.editData["ToDate"].slice(0, 10), 15 | }; 16 | onCompanyNameDataChange(e) { 17 | this.setState({ CompanyNameData: e.target.value }); 18 | } 19 | onDesignationDataChange(e) { 20 | this.setState({ DesignationData: e.target.value }); 21 | } 22 | onFromDateDataChange(e) { 23 | this.setState({ FromDateData: e.target.value }); 24 | } 25 | onToDateDataChange(e) { 26 | this.setState({ ToDateData: e.target.value }); 27 | } 28 | 29 | componentWillMount() { 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 |

Edit WorkExperience Details

36 | 37 |
38 |
41 | this.props.onWorkExperienceEditUpdate(this.props.editData, e) 42 | } 43 | > 44 | 45 | 46 | Company Name 47 | 48 | 49 | this.onCompanyNameDataChange(value)} 55 | /> 56 | 57 | 58 | 59 | 60 | Designation 61 | 62 | 63 | this.onDesignationDataChange(value)} 69 | /> 70 | 71 | 72 | 73 | 74 | FromDate 75 | 76 | 77 | this.onFromDateDataChange(value)} 82 | /> 83 | 84 | 85 | 86 | 87 | ToDate 88 | 89 | 90 | this.onToDateDataChange(value)} 95 | /> 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 109 | 110 | 111 |
112 |
113 |
114 | ); 115 | } 116 | } 117 | 118 | export default WorkExperienceForm; 119 | -------------------------------------------------------------------------------- /frontend/src/component/employee/EducationFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./EducationFormEdit.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class EducationForm extends Component { 8 | state = { 9 | // EducationData: this.props.editData["EducationName"], 10 | 11 | SchoolUniversityData: this.props.editData["SchoolUniversity"], 12 | DegreeData: this.props.editData["Degree"], 13 | GradeData: this.props.editData["Grade"], 14 | PassingOfYearData: this.props.editData["PassingOfYear"] 15 | }; 16 | onSchoolUniversityDataChange(e) { 17 | this.setState({ SchoolUniversityData: e.target.value }); 18 | } 19 | onDegreeDataChange(e) { 20 | this.setState({ DegreeData: e.target.value }); 21 | } 22 | onGradeDataChange(e) { 23 | this.setState({ GradeData: e.target.value }); 24 | } 25 | onPassingOfYearDataChange(e) { 26 | this.setState({ PassingOfYearData: e.target.value }); 27 | } 28 | 29 | componentWillMount() { 30 | } 31 | 32 | render() { 33 | return ( 34 |
35 |

Edit Education Details

36 | 37 |
38 |
41 | this.props.onEducationEditUpdate(this.props.editData, e) 42 | } 43 | > 44 | 45 | 46 | School / University 47 | 48 | 49 | this.onSchoolUniversityDataChange(value)} 55 | /> 56 | 57 | 58 | 59 | 60 | Degree 61 | 62 | 63 | this.onDegreeDataChange(value)} 69 | /> 70 | 71 | 72 | 73 | 74 | Grade 75 | 76 | 77 | this.onGradeDataChange(value)} 83 | /> 84 | 85 | 86 | 87 | 88 | Passing Of Year 89 | 90 | 91 | this.onPassingOfYearDataChange(value)} 97 | /> 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 111 | 112 | 113 |
114 |
115 |
116 | ); 117 | } 118 | } 119 | 120 | export default EducationForm; 121 | -------------------------------------------------------------------------------- /frontend/src/component/hr/LeaveApplicationHR.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./LeaveApplicationHR.css"; 3 | import axios from "axios"; 4 | import LeaveApplicationHRTable from "./LeaveApplicationHRTable.jsx"; 5 | // import LeaveApplicationHRForm from "./LeaveApplicationHRForm.jsx"; 6 | import LeaveApplicationHRFormEdit from "./LeaveApplicationHRFormEdit.jsx"; 7 | class LeaveApplicationHR extends Component { 8 | state = { 9 | table: true, 10 | editForm: false, 11 | editData: {}, 12 | 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | {/*

iiiiiiiiiinnnnnnnnnnnnnn{ 19 | JSON.stringify(this.props.data)}

*/} 20 | 21 | {this.state.table ? ( 22 | this.state.editForm ? ( 23 | 28 | ) : ( 29 | 34 | ) 35 | ) : ( 36 |
37 | // 42 | )} 43 | 44 | ); 45 | } 46 | handleLeaveApplicationHRSubmit = event => { 47 | event.preventDefault(); 48 | console.log("id", event.target[0].value, event.target[1].value); 49 | this.setState({ table: true }); 50 | 51 | let body = { 52 | 53 | // CompanyName: event.target[0].value, 54 | // Designation: event.target[1].value, 55 | // FromDate: event.target[2].value, 56 | // ToDate: event.target[3].value, 57 | 58 | Leavetype: event.target[0].value, 59 | FromDate: event.target[1].value, 60 | ToDate: event.target[2].value, 61 | Reasonforleave: event.target[3].value, 62 | Status: event.target[4].value, 63 | }; 64 | axios 65 | .post("http://localhost:4000/api/leave-application-hr/" + this.props.data["_id"], body, { 66 | headers: { 67 | authorization: localStorage.getItem("token") || "" 68 | } 69 | }) 70 | .then(res => { 71 | this.setState({ table: false }); 72 | this.setState({ table: true }); 73 | }) 74 | .catch(err => { 75 | console.log(err); 76 | }); 77 | }; 78 | handleAddLeaveApplicationHR = () => { 79 | console.log("clicked1"); 80 | this.setState({ table: false }); 81 | }; 82 | handleEditLeaveApplicationHR = e => { 83 | console.log(e); 84 | console.log("clicked6"); 85 | this.setState({ editForm: true }); 86 | this.setState({ editData: e }); 87 | this.setState({ editFormGender: e["Gender"] }) 88 | }; 89 | handleFormClose = () => { 90 | console.log("clicked1"); 91 | this.setState({ table: true }); 92 | }; 93 | handleEditFormClose = () => { 94 | console.log("clicked5"); 95 | this.setState({ editForm: false }); 96 | }; 97 | // handleFormClose = () => { 98 | // console.log("clicked1"); 99 | // this.setState({ table: true }); 100 | // }; 101 | handleLeaveApplicationHREditUpdate = (info, newInfo) => { 102 | newInfo.preventDefault(); 103 | console.log("zero data", newInfo.target[0].value); 104 | let body = { 105 | Status: newInfo.target[4].value, 106 | }; 107 | console.log("update", body); 108 | axios 109 | .put( 110 | "http://localhost:4000/api/leave-application-hr/" + info["_id"], 111 | body, { 112 | headers: { 113 | authorization: localStorage.getItem("token") || "" 114 | } 115 | } 116 | ) 117 | .then(res => { 118 | this.setState({ table: false }); 119 | this.setState({ table: true }); 120 | }) 121 | .catch(err => { 122 | console.log(err); 123 | }); 124 | 125 | this.setState({ editForm: false }); 126 | }; 127 | 128 | } 129 | 130 | export default LeaveApplicationHR; 131 | -------------------------------------------------------------------------------- /frontend/src/component/Role.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Role.css"; 3 | import axios from "axios"; 4 | import RoleTable from "./RoleTable.jsx"; 5 | import RoleForm from "./RoleForm.jsx"; 6 | import RoleFormEdit from "./RoleFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function RoleTableF() { 10 | // return ; 11 | // } 12 | // function RoleFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handleRoleSubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class Role extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {} 27 | }; 28 | 29 | render() { 30 | // let value=(this.props.pass) ? undefined : ""; 31 | return ( 32 | // 33 | 34 | {this.state.table ? ( 35 | this.state.editForm ? ( 36 | 41 | ) : ( 42 | 46 | ) 47 | ) : ( 48 | 52 | )} 53 | 54 | {/*
debru
*/} 55 | {/* */} 56 | {/* } /> */} 57 | 58 | {/* */} 59 | 60 | 61 | // 62 | ); 63 | } 64 | handleRoleSubmit = event => { 65 | event.preventDefault(); 66 | console.log("id", event.target[0].value, event.target[1].value); 67 | this.setState({ table: true }); 68 | 69 | let body = { 70 | CompanyID: event.target[0].value, 71 | RoleName: event.target[1].value 72 | }; 73 | // let body= "CompanyID=" + event.target[0].value + "&Role=" + event.target[1].value; 74 | // let body= "debru"; 75 | axios 76 | .post("http://localhost:4000/api/role", body, { 77 | headers: { 78 | authorization: localStorage.getItem("token") || "" 79 | } 80 | }) 81 | .then(res => { 82 | this.setState({ table: false }); 83 | this.setState({ table: true }); 84 | }) 85 | .catch(err => { 86 | console.log(err); 87 | }); 88 | // this.setState({ loading: true }); 89 | // this.login(event.target[0].value, event.target[1].value); 90 | // event.target.reset(); 91 | }; 92 | handleAddRole = () => { 93 | console.log("clicked1"); 94 | this.setState({ table: false }); 95 | }; 96 | handleEditRole = e => { 97 | console.log(e); 98 | console.log("clicked6"); 99 | this.setState({ editForm: true }); 100 | this.setState({ editData: e }); 101 | }; 102 | handleFormClose = () => { 103 | console.log("clicked1"); 104 | this.setState({ table: true }); 105 | }; 106 | handleEditFormClose = () => { 107 | console.log("clicked5"); 108 | this.setState({ editForm: false }); 109 | }; 110 | handleFormClose = () => { 111 | console.log("clicked1"); 112 | this.setState({ table: true }); 113 | }; 114 | handleRoleEditUpdate = (info, formData1, formData2) => { 115 | // this.setState({ table: true }); 116 | let body = { 117 | // ...info,CompanyID:formData1,Role:formData2 118 | 119 | CompanyID: formData1, 120 | RoleName: formData2, 121 | 122 | }; 123 | console.log("update", body); 124 | axios 125 | .put("http://localhost:4000/api/role/" + info["_id"], body, { 126 | headers: { 127 | authorization: localStorage.getItem("token") || "" 128 | } 129 | }) 130 | .then(res => { 131 | // this.componentDidMount(); 132 | this.setState({ table: false }); 133 | this.setState({ table: true }); 134 | }) 135 | .catch(err => { 136 | console.log(err); 137 | }); 138 | 139 | this.setState({ editForm: false }); 140 | }; 141 | } 142 | 143 | export default Role; 144 | -------------------------------------------------------------------------------- /frontend/src/component/State.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./State.css"; 3 | import axios from "axios"; 4 | import StateTable from "./StateTable.jsx"; 5 | import StateForm from "./StateForm.jsx"; 6 | import StateFormEdit from "./StateFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function StateTableF() { 10 | // return ; 11 | // } 12 | // function StateFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handleStateSubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class State extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {} 27 | }; 28 | 29 | render() { 30 | // let value=(this.props.pass) ? undefined : ""; 31 | return ( 32 | // 33 | 34 | {this.state.table ? ( 35 | this.state.editForm ? ( 36 | 41 | ) : ( 42 | 46 | ) 47 | ) : ( 48 | 52 | )} 53 | 54 | {/*
debru
*/} 55 | {/* */} 56 | {/* } /> */} 57 | 58 | {/* */} 59 | 60 | 61 | // 62 | ); 63 | } 64 | handleStateSubmit = event => { 65 | event.preventDefault(); 66 | console.log("id", event.target[0].value, event.target[1].value); 67 | this.setState({ table: true }); 68 | 69 | let body = { 70 | CountryID: event.target[0].value, 71 | StateName: event.target[1].value 72 | }; 73 | // let body= "CompanyID=" + event.target[0].value + "&State=" + event.target[1].value; 74 | // let body= "debru"; 75 | axios 76 | .post("http://localhost:4000/api/state", body, { 77 | headers: { 78 | authorization: localStorage.getItem("token") || "" 79 | } 80 | }) 81 | .then(res => { 82 | this.setState({ table: false }); 83 | this.setState({ table: true }); 84 | }) 85 | .catch(err => { 86 | console.log(err); 87 | }); 88 | // this.setState({ loading: true }); 89 | // this.login(event.target[0].value, event.target[1].value); 90 | // event.target.reset(); 91 | }; 92 | handleAddState = () => { 93 | console.log("clicked1"); 94 | this.setState({ table: false }); 95 | }; 96 | handleEditState = e => { 97 | console.log(e); 98 | console.log("clicked6"); 99 | this.setState({ editForm: true }); 100 | this.setState({ editData: e }); 101 | }; 102 | handleFormClose = () => { 103 | console.log("clicked1"); 104 | this.setState({ table: true }); 105 | }; 106 | handleEditFormClose = () => { 107 | console.log("clicked5"); 108 | this.setState({ editForm: false }); 109 | }; 110 | handleFormClose = () => { 111 | console.log("clicked1"); 112 | this.setState({ table: true }); 113 | }; 114 | handleStateEditUpdate = (info, newInfo) => { 115 | newInfo.preventDefault(); 116 | // this.setState({ table: true }); 117 | let body = { 118 | CountryID: newInfo.target[0].value, 119 | StateName: newInfo.target[1].value 120 | }; 121 | console.log("update", body); 122 | axios 123 | .put("http://localhost:4000/api/state/" + info["_id"], body, { 124 | headers: { 125 | authorization: localStorage.getItem("token") || "" 126 | } 127 | }) 128 | .then(res => { 129 | // this.componentDidMount(); 130 | this.setState({ table: false }); 131 | this.setState({ table: true }); 132 | }) 133 | .catch(err => { 134 | console.log(err); 135 | }); 136 | 137 | this.setState({ editForm: false }); 138 | }; 139 | } 140 | 141 | export default State; 142 | -------------------------------------------------------------------------------- /frontend/src/component/CityForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./CityForm.css"; 3 | import axios from "axios"; 4 | 5 | import { Form, Button, Col, Row } from "react-bootstrap"; 6 | 7 | class CityForm extends Component { 8 | state = { 9 | stateData: [], 10 | filteredStateData: [], 11 | countryData: [], 12 | filteredCountryData: [] 13 | }; 14 | 15 | onChange(e) { 16 | this.setState({ CityData: e.target.value }); 17 | } 18 | loadCountryInfo = () => { 19 | axios 20 | .get("http://localhost:4000/api/country", { 21 | headers: { 22 | authorization: localStorage.getItem("token") || "" 23 | } 24 | }) 25 | .then(response => { 26 | this.setState({ countryData: response.data }); 27 | }) 28 | .catch(error => { 29 | console.log(error); 30 | }); 31 | }; 32 | loadStateInfo = () => { 33 | axios 34 | .get("http://localhost:4000/api/state", { 35 | headers: { 36 | authorization: localStorage.getItem("token") || "" 37 | } 38 | }) 39 | .then(response => { 40 | this.setState({ stateData: response.data }); 41 | }) 42 | .catch(error => { 43 | console.log(error); 44 | }); 45 | }; 46 | 47 | componentWillMount() { 48 | this.loadCountryInfo(); 49 | this.loadStateInfo(); 50 | } 51 | onCountryChange(e) { 52 | console.log(e.target.value); 53 | let currentCountry = e.target.value; 54 | let filteredState = this.state.stateData.filter( 55 | data => data["country"][0]["_id"] == currentCountry 56 | ); 57 | this.setState({ filteredStateData: filteredState }); 58 | } 59 | render() { 60 | return ( 61 |
62 |

Add City Details

63 | 64 |
65 |
66 | 67 | 68 | Country 69 | 70 | 71 | 76 | 79 | {this.state.countryData.map((data, index) => ( 80 | 81 | ))} 82 | 83 | 84 | 85 | 86 | 87 | 88 | State 89 | 90 | 91 | 92 | 95 | {this.state.filteredStateData.map((data, index) => ( 96 | 97 | ))} 98 | 99 | 100 | 101 | 102 | 103 | 104 | City 105 | 106 | 107 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 126 | 127 | 128 |
129 |
130 |
131 | ); 132 | } 133 | } 134 | 135 | export default CityForm; 136 | -------------------------------------------------------------------------------- /frontend/src/component/Country.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Country.css"; 3 | import axios from "axios"; 4 | import CountryTable from "./CountryTable.jsx"; 5 | import CountryForm from "./CountryForm.jsx"; 6 | import CountryFormEdit from "./CountryFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function CountryTableF() { 10 | // return ; 11 | // } 12 | // function CountryFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handleCountrySubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class Country extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {} 27 | }; 28 | 29 | render() { 30 | // let value=(this.props.pass) ? undefined : ""; 31 | return ( 32 | // 33 | 34 | {this.state.table ? ( 35 | this.state.editForm ? ( 36 | 41 | ) : ( 42 | 46 | ) 47 | ) : ( 48 | 52 | )} 53 | 54 | {/*
debru
*/} 55 | {/* */} 56 | {/* } /> */} 57 | 58 | {/* */} 59 | 60 | 61 | // 62 | ); 63 | } 64 | handleCountrySubmit = event => { 65 | event.preventDefault(); 66 | console.log("name", event.target[0].value); 67 | this.setState({ table: true }); 68 | 69 | let body = { 70 | CountryName: event.target[0].value 71 | }; 72 | // let body= "CompanyID=" + event.target[0].value + "&Country=" + event.target[1].value; 73 | // let body= "debru"; 74 | axios 75 | .post("http://localhost:4000/api/country", body, { 76 | headers: { 77 | authorization: localStorage.getItem("token") || "" 78 | } 79 | }) 80 | .then(res => { 81 | this.setState({ table: false }); 82 | this.setState({ table: true }); 83 | }) 84 | .catch(err => { 85 | console.log(err); 86 | }); 87 | // this.setState({ loading: true }); 88 | // this.login(event.target[0].value, event.target[1].value); 89 | // event.target.reset(); 90 | }; 91 | handleAddCountry = () => { 92 | console.log("clicked1"); 93 | this.setState({ table: false }); 94 | }; 95 | handleEditCountry = e => { 96 | console.log(e); 97 | console.log("clicked6"); 98 | this.setState({ editForm: true }); 99 | this.setState({ editData: e }); 100 | }; 101 | handleFormClose = () => { 102 | console.log("clicked1"); 103 | this.setState({ table: true }); 104 | }; 105 | handleEditFormClose = () => { 106 | console.log("clicked5"); 107 | this.setState({ editForm: false }); 108 | }; 109 | handleFormClose = () => { 110 | console.log("clicked1"); 111 | this.setState({ table: true }); 112 | }; 113 | handleCountryEditUpdate = (info, newInfo) => { 114 | // this.setState({ table: true }); 115 | let body = { 116 | // ...info,CompanyID:formData1,Country:formData2 117 | // CompanyID: formData1, 118 | CountryName: newInfo.target[0].value, 119 | // CountryID: info["CountryID"] 120 | }; 121 | console.log("update", body); 122 | axios 123 | .put("http://localhost:4000/api/country/" + info["_id"], body, { 124 | headers: { 125 | authorization: localStorage.getItem("token") || "" 126 | } 127 | }) 128 | .then(res => { 129 | // this.componentDidMount(); 130 | this.setState({ table: false }); 131 | this.setState({ table: true }); 132 | }) 133 | .catch(err => { 134 | console.log(err); 135 | }); 136 | 137 | this.setState({ editForm: false }); 138 | }; 139 | } 140 | 141 | export default Country; 142 | -------------------------------------------------------------------------------- /frontend/src/component/employee/LeaveApplicationEmp.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./LeaveApplicationEmp.css"; 3 | import axios from "axios"; 4 | import LeaveApplicationEmpTable from "./LeaveApplicationEmpTable.jsx"; 5 | import LeaveApplicationEmpForm from "./LeaveApplicationEmpForm.jsx"; 6 | import LeaveApplicationEmpFormEdit from "./LeaveApplicationEmpFormEdit.jsx"; 7 | class LeaveApplicationEmp extends Component { 8 | state = { 9 | table: true, 10 | editForm: false, 11 | editData: {}, 12 | 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | {/*

iiiiiiiiiinnnnnnnnnnnnnn{ 19 | JSON.stringify(this.props.data)}

*/} 20 | 21 | {this.state.table ? ( 22 | this.state.editForm ? ( 23 | 28 | ) : ( 29 | 34 | ) 35 | ) : ( 36 | 41 | )} 42 | 43 | ); 44 | } 45 | handleLeaveApplicationEmpSubmit = event => { 46 | event.preventDefault(); 47 | console.log("id", event.target[0].value, event.target[1].value); 48 | this.setState({ table: true }); 49 | 50 | let body = { 51 | 52 | // CompanyName: event.target[0].value, 53 | // Designation: event.target[1].value, 54 | // FromDate: event.target[2].value, 55 | // ToDate: event.target[3].value, 56 | 57 | Leavetype: event.target[0].value, 58 | FromDate: event.target[1].value, 59 | ToDate: event.target[2].value, 60 | Reasonforleave: event.target[3].value, 61 | Status: event.target[4].value, 62 | }; 63 | axios 64 | .post("http://localhost:4000/api/leave-application-emp/" + this.props.data["_id"], body, { 65 | headers: { 66 | authorization: localStorage.getItem("token") || "" 67 | } 68 | }) 69 | .then(res => { 70 | this.setState({ table: false }); 71 | this.setState({ table: true }); 72 | }) 73 | .catch(err => { 74 | console.log(err); 75 | }); 76 | }; 77 | handleAddLeaveApplicationEmp = () => { 78 | console.log("clicked1"); 79 | this.setState({ table: false }); 80 | }; 81 | handleEditLeaveApplicationEmp = e => { 82 | console.log(e); 83 | console.log("clicked6"); 84 | this.setState({ editForm: true }); 85 | this.setState({ editData: e }); 86 | this.setState({ editFormGender: e["Gender"] }) 87 | }; 88 | handleFormClose = () => { 89 | console.log("clicked1"); 90 | this.setState({ table: true }); 91 | }; 92 | handleEditFormClose = () => { 93 | console.log("clicked5"); 94 | this.setState({ editForm: false }); 95 | }; 96 | // handleFormClose = () => { 97 | // console.log("clicked1"); 98 | // this.setState({ table: true }); 99 | // }; 100 | handleLeaveApplicationEmpEditUpdate = (info, newInfo) => { 101 | newInfo.preventDefault(); 102 | console.log("zero data", newInfo.target[0].value); 103 | let body = { 104 | Leavetype: newInfo.target[0].value, 105 | FromDate: newInfo.target[1].value, 106 | ToDate: newInfo.target[2].value, 107 | Reasonforleave: newInfo.target[3].value, 108 | Status: newInfo.target[4].value, 109 | }; 110 | console.log("update", body); 111 | axios 112 | .put( 113 | "http://localhost:4000/api/leave-application-emp/" + info["_id"], 114 | body, { 115 | headers: { 116 | authorization: localStorage.getItem("token") || "" 117 | } 118 | } 119 | ) 120 | .then(res => { 121 | this.setState({ table: false }); 122 | this.setState({ table: true }); 123 | }) 124 | .catch(err => { 125 | console.log(err); 126 | }); 127 | 128 | this.setState({ editForm: false }); 129 | }; 130 | 131 | } 132 | 133 | export default LeaveApplicationEmp; 134 | -------------------------------------------------------------------------------- /frontend/src/component/Position.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Position.css"; 3 | import axios from "axios"; 4 | import PositionTable from "./PositionTable.jsx"; 5 | import PositionForm from "./PositionForm.jsx"; 6 | import PositionFormEdit from "./PositionFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function PositionTableF() { 10 | // return ; 11 | // } 12 | // function PositionFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handlePositionSubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class Position extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {} 27 | }; 28 | 29 | render() { 30 | // let value=(this.props.pass) ? undefined : ""; 31 | return ( 32 | // 33 | 34 | {this.state.table ? ( 35 | this.state.editForm ? ( 36 | 41 | ) : ( 42 | 46 | ) 47 | ) : ( 48 | 52 | )} 53 | 54 | {/*
debru
*/} 55 | {/* */} 56 | {/* } /> */} 57 | 58 | {/* */} 59 | 60 | 61 | // 62 | ); 63 | } 64 | handlePositionSubmit = event => { 65 | event.preventDefault(); 66 | console.log("id", event.target[0].value, event.target[1].value); 67 | this.setState({ table: true }); 68 | 69 | let body = { 70 | CompanyID: event.target[0].value, 71 | PositionName: event.target[1].value 72 | }; 73 | // let body= "CompanyID=" + event.target[0].value + "&Position=" + event.target[1].value; 74 | // let body= "debru"; 75 | axios 76 | .post("http://localhost:4000/api/position", body, { 77 | headers: { 78 | authorization: localStorage.getItem("token") || "" 79 | } 80 | }) 81 | .then(res => { 82 | this.setState({ table: false }); 83 | this.setState({ table: true }); 84 | }) 85 | .catch(err => { 86 | console.log(err); 87 | }); 88 | // this.setState({ loading: true }); 89 | // this.login(event.target[0].value, event.target[1].value); 90 | // event.target.reset(); 91 | }; 92 | handleAddPosition = () => { 93 | console.log("clicked1"); 94 | this.setState({ table: false }); 95 | }; 96 | handleEditPosition = e => { 97 | console.log(e); 98 | console.log("clicked6"); 99 | this.setState({ editForm: true }); 100 | this.setState({ editData: e }); 101 | }; 102 | handleFormClose = () => { 103 | console.log("clicked1"); 104 | this.setState({ table: true }); 105 | }; 106 | handleEditFormClose = () => { 107 | console.log("clicked5"); 108 | this.setState({ editForm: false }); 109 | }; 110 | handleFormClose = () => { 111 | console.log("clicked1"); 112 | this.setState({ table: true }); 113 | }; 114 | handlePositionEditUpdate = (info, formData1, formData2) => { 115 | // this.setState({ table: true }); 116 | let body = { 117 | 118 | CompanyID: formData1, 119 | PositionName: formData2, 120 | }; 121 | console.log("update", body); 122 | axios 123 | .put( 124 | "http://localhost:4000/api/position/" + info["_id"], 125 | body, { 126 | headers: { 127 | authorization: localStorage.getItem("token") || "" 128 | } 129 | } 130 | ) 131 | .then(res => { 132 | // this.componentDidMount(); 133 | this.setState({ table: false }); 134 | this.setState({ table: true }); 135 | }) 136 | .catch(err => { 137 | console.log(err); 138 | }); 139 | 140 | this.setState({ editForm: false }); 141 | }; 142 | } 143 | 144 | export default Position; 145 | -------------------------------------------------------------------------------- /frontend/src/component/Department.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./Department.css"; 3 | import axios from "axios"; 4 | import DepartmentTable from "./DepartmentTable.jsx"; 5 | import DepartmentForm from "./DepartmentForm.jsx"; 6 | import DepartmentFormEdit from "./DepartmentFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function DepartmentTableF() { 10 | // return ; 11 | // } 12 | // function DepartmentFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handleDepartmentSubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class Department extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {} 27 | }; 28 | 29 | render() { 30 | // let value=(this.props.pass) ? undefined : ""; 31 | return ( 32 | // 33 | 34 | {this.state.table ? ( 35 | this.state.editForm ? ( 36 | 41 | ) : ( 42 | 46 | ) 47 | ) : ( 48 | 52 | )} 53 | 54 | {/*
debru
*/} 55 | {/* */} 56 | {/* } /> */} 57 | 58 | {/* */} 59 | 60 | 61 | // 62 | ); 63 | } 64 | handleDepartmentSubmit = event => { 65 | event.preventDefault(); 66 | console.log("id", event.target[0].value, event.target[1].value); 67 | this.setState({ table: true }); 68 | 69 | let body = { 70 | CompanyID: event.target[0].value, 71 | DepartmentName: event.target[1].value 72 | }; 73 | // let body= "CompanyID=" + event.target[0].value + "&Department=" + event.target[1].value; 74 | // let body= "debru"; 75 | axios 76 | .post("http://localhost:4000/api/department", body, { 77 | headers: { 78 | authorization: localStorage.getItem("token") || "" 79 | } 80 | }) 81 | .then(res => { 82 | this.setState({ table: false }); 83 | this.setState({ table: true }); 84 | }) 85 | .catch(err => { 86 | console.log(err); 87 | }); 88 | // this.setState({ loading: true }); 89 | // this.login(event.target[0].value, event.target[1].value); 90 | // event.target.reset(); 91 | }; 92 | handleAddDepartment = () => { 93 | console.log("clicked1"); 94 | this.setState({ table: false }); 95 | }; 96 | handleEditDepartment = e => { 97 | console.log(e); 98 | console.log("clicked6"); 99 | this.setState({ editForm: true }); 100 | this.setState({ editData: e }); 101 | }; 102 | handleFormClose = () => { 103 | console.log("clicked1"); 104 | this.setState({ table: true }); 105 | }; 106 | handleEditFormClose = () => { 107 | console.log("clicked5"); 108 | this.setState({ editForm: false }); 109 | }; 110 | handleFormClose = () => { 111 | console.log("clicked1"); 112 | this.setState({ table: true }); 113 | }; 114 | handleDepartmentEditUpdate = (info, newInfo) => { 115 | newInfo.preventDefault(); 116 | // this.setState({ table: true }); 117 | let body = { 118 | // ...info,CompanyID:formData1,Department:formData2 119 | 120 | CompanyID: newInfo.target[0].value, 121 | DepartmentName: newInfo.target[1].value, 122 | }; 123 | console.log("update", body); 124 | axios 125 | .put( 126 | "http://localhost:4000/api/department/" + info["_id"], 127 | body, { 128 | headers: { 129 | authorization: localStorage.getItem("token") || "" 130 | } 131 | } 132 | ) 133 | .then(res => { 134 | // this.componentDidMount(); 135 | this.setState({ table: false }); 136 | this.setState({ table: true }); 137 | }) 138 | .catch(err => { 139 | console.log(err); 140 | }); 141 | 142 | this.setState({ editForm: false }); 143 | }; 144 | } 145 | 146 | export default Department; 147 | -------------------------------------------------------------------------------- /frontend/src/component/employee/LeaveApplicationEmpFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./LeaveApplicationEmpFormEdit.css"; 3 | // import { Form,Button } from "react-bootstrap"; 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | import axios from "axios"; 6 | 7 | class LeaveApplicationEmpForm extends Component { 8 | state = { 9 | // LeaveApplicationEmpData: this.props.editData["LeaveApplicationEmpName"], 10 | 11 | // LeavetypeData: this.props.editData["Leavetype"], 12 | FromDateData: this.props.editData["FromDate"].slice(0, 10), 13 | ToDateData: this.props.editData["ToDate"].slice(0, 10), 14 | ReasonforleaveData: this.props.editData["Reasonforleave"], 15 | // StatusData: this.props.editData["Status"], 16 | 17 | // value={this.state.CompanyNameData} 18 | // onChange={value => this.onCompanyNameDataChange(value)} 19 | }; 20 | // onLeavetypeDataChange(e) { 21 | // this.setState({ CLeavetypeData: e.target.value }); 22 | // } 23 | 24 | onFromDateDataChange(e) { 25 | this.setState({ FromDateData: e.target.value }); 26 | } 27 | onToDateDataChange(e) { 28 | this.setState({ ToDateData: e.target.value }); 29 | } 30 | onReasonforleaveDataChange(e) { 31 | this.setState({ ReasonforleaveData: e.target.value }); 32 | } 33 | // onStatusDataChange(e) { 34 | // this.setState({StatusData: e.target.value }); 35 | // } 36 | 37 | componentWillMount() { 38 | } 39 | 40 | render() { 41 | return ( 42 |
43 |

Edit LeaveApplicationEmp Details

44 | 45 |
46 |
49 | this.props.onLeaveApplicationEmpEditUpdate(this.props.editData, e) 50 | } 51 | > 52 | 53 | 54 | Leave Type 55 | 56 | 57 | 58 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | FromDate 70 | 71 | 72 | this.onFromDateDataChange(value)} 77 | /> 78 | 79 | 80 | 81 | 82 | ToDate 83 | 84 | 85 | this.onToDateDataChange(value)} 90 | /> 91 | 92 | 93 | 94 | 95 | Reason for leave 96 | 97 | 98 | this.onReasonforleaveDataChange(value)}/> 101 | 102 | 103 | 104 | 105 | 106 | Leave Status 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 125 | 126 | 127 |
128 |
129 |
130 | ); 131 | } 132 | } 133 | 134 | export default LeaveApplicationEmpForm; 135 | -------------------------------------------------------------------------------- /frontend/src/component/CityFormEdit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | // import "./CityForm.css"; 3 | import { HashRouter as Router, Route, Link } from "react-router-dom"; 4 | // import { Form,Button } from "react-bootstrap"; 5 | import { Form, Button, Col, Row } from "react-bootstrap"; 6 | import axios from "axios"; 7 | 8 | class CityForm extends Component { 9 | state = { 10 | CityData: this.props.editData["CityName"], 11 | stateData: [], 12 | filteredStateData: [], 13 | countryData: [], 14 | filteredCountryData: [] 15 | }; 16 | 17 | onChange(e) { 18 | this.setState({ CityData: e.target.value }); 19 | } 20 | loadCountryInfo = () => { 21 | axios 22 | .get("http://localhost:4000/api/country", { 23 | headers: { 24 | authorization: localStorage.getItem("token") || "" 25 | } 26 | }) 27 | .then(response => { 28 | this.setState({ countryData: response.data }); 29 | }) 30 | .catch(error => { 31 | console.log(error); 32 | }); 33 | }; 34 | loadStateInfo = () => { 35 | axios 36 | .get("http://localhost:4000/api/state", { 37 | headers: { 38 | authorization: localStorage.getItem("token") || "" 39 | } 40 | }) 41 | .then(response => { 42 | this.setState({ stateData: response.data }); 43 | }) 44 | .catch(error => { 45 | console.log(error); 46 | }); 47 | }; 48 | 49 | componentWillMount() { 50 | this.loadCountryInfo(); 51 | this.loadStateInfo(); 52 | } 53 | onCountryChange(e) { 54 | console.log(e.target.value); 55 | let currentCountry = e.target.value; 56 | let filteredState = this.state.stateData.filter( 57 | data => data["country"][0]["_id"] == currentCountry 58 | ); 59 | this.setState({ filteredStateData: filteredState }); 60 | } 61 | 62 | onSelectCountry = (e, data) => { 63 | return this.props.editData["state"][0]["country"][0]["_id"] == data["_id"]; 64 | }; 65 | 66 | render() { 67 | return ( 68 |
69 |

Edit City Details

70 | 71 |
72 |
this.props.onCityEditUpdate(this.props.editData, e)} 75 | > 76 | 77 | 78 | Country 79 | 80 | 81 | 86 | 89 | {this.state.countryData.map((data, index) => ( 90 | 91 | ))} 92 | 93 | 94 | 95 | 96 | 97 | 98 | State 99 | 100 | 101 | 102 | 105 | {this.state.filteredStateData.map((data, index) => ( 106 | 114 | ))} 115 | 116 | 117 | 118 | 119 | 120 | 121 | City 122 | 123 | 124 | this.onChange(value)} 130 | value={this.state.CityData} 131 | /> 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 145 | 146 | 147 |
148 |
149 |
150 | ); 151 | } 152 | } 153 | 154 | export default CityForm; 155 | // onChange={value => this.onChange(value)} 156 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortal.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./AdminPortal.css"; 3 | import axios from "axios"; 4 | import AdminPortalTable from "./AdminPortalTable.jsx"; 5 | import AdminPortalForm from "./AdminPortalForm.jsx"; 6 | import AdminPortalFormEdit from "./AdminPortalFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function AdminPortalTableF() { 10 | // return ; 11 | // } 12 | // function AdminPortalFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handlePortalSubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class AdminPortal extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {}, 27 | addFormStatus: "", 28 | editFormStatus: "" 29 | }; 30 | 31 | render() { 32 | // let value=(this.props.pass) ? undefined : ""; 33 | return ( 34 | // 35 | 36 | {this.state.table ? ( 37 | this.state.editForm ? ( 38 | 44 | ) : ( 45 | 49 | ) 50 | ) : ( 51 | 56 | )} 57 | 58 | {/*
debru
*/} 59 | {/* */} 60 | {/* } /> */} 61 | 62 | {/* */} 63 | 64 | 65 | // 66 | ); 67 | } 68 | handlePortalSubmit = event => { 69 | event.preventDefault(); 70 | console.log("portal", event.target[0].value, event.target[1].value, event.target[2].value); 71 | console.log("portal status", this.state.addFormStatus); 72 | this.setState({ table: true }); 73 | 74 | let body = { 75 | PortalName: event.target[0].value, 76 | Status: this.state.addFormStatus 77 | }; 78 | // let body= "CompanyID=" + event.target[0].value + "&Portal=" + event.target[1].value; 79 | // let body= "debru"; 80 | axios 81 | .post("http://localhost:4000/api/admin/portal", body, { 82 | headers: { 83 | authorization: localStorage.getItem("token") || "" 84 | } 85 | }) 86 | .then(res => { 87 | this.setState({ table: false }); 88 | this.setState({ table: true }); 89 | }) 90 | .catch(err => { 91 | console.log(err); 92 | }); 93 | // this.setState({ loading: true }); 94 | // this.login(event.target[0].value, event.target[1].value); 95 | // event.target.reset(); 96 | }; 97 | handleAddPortal = () => { 98 | console.log("clicked1"); 99 | this.setState({ table: false }); 100 | }; 101 | handleEditPortal = e => { 102 | console.log(e); 103 | console.log("clicked6"); 104 | this.setState({ editForm: true }); 105 | this.setState({ editData: e }); 106 | this.setState({ editFormStatus: e["Status"] }); 107 | }; 108 | handleFormClose = () => { 109 | console.log("clicked1"); 110 | this.setState({ table: true }); 111 | }; 112 | handleEditFormClose = () => { 113 | console.log("clicked5"); 114 | this.setState({ editForm: false }); 115 | }; 116 | handleFormClose = () => { 117 | console.log("clicked1"); 118 | this.setState({ table: true }); 119 | }; 120 | handleAddFormStatusChange = (e) => { 121 | // console.log(e.currentTarget.value); 122 | this.setState({ 123 | addFormStatus: e.currentTarget.value 124 | }); 125 | 126 | }; 127 | handleEditFormStatusChange = (e) => { 128 | // console.log(e.currentTarget.value); 129 | this.setState({ 130 | editFormStatus: e.currentTarget.value 131 | }); 132 | 133 | }; 134 | handlePortalEditUpdate = (info, formData1) => { 135 | // this.setState({ table: true }); 136 | let body = { 137 | // ...info,CompanyID:formData1,Portal:formData2 138 | _id: info["_id"], 139 | PortalName: formData1, 140 | Status: this.state.editFormStatus, 141 | ID: info["ID"], 142 | }; 143 | console.log("update", body); 144 | axios 145 | .put("http://localhost:4000/api/admin/portal/" + info["ID"], body, { 146 | headers: { 147 | authorization: localStorage.getItem("token") || "" 148 | } 149 | }) 150 | .then(res => { 151 | // this.componentDidMount(); 152 | this.setState({ table: false }); 153 | this.setState({ table: true }); 154 | }) 155 | .catch(err => { 156 | console.log(err); 157 | }); 158 | 159 | this.setState({ editForm: false }); 160 | }; 161 | } 162 | 163 | export default AdminPortal; 164 | -------------------------------------------------------------------------------- /frontend/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminProjectBid.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./AdminProjectBid.css"; 3 | import axios from "axios"; 4 | import AdminProjectBidTable from "./AdminProjectBidTable.jsx"; 5 | import AdminProjectBidForm from "./AdminProjectBidForm.jsx"; 6 | import AdminProjectBidFormEdit from "./AdminProjectBidFormEdit.jsx"; 7 | // import { HashRouter as Router, Route, Link } from "react-router-dom"; 8 | 9 | // function AdminProjectBidTableF() { 10 | // return ; 11 | // } 12 | // function AdminProjectBidFormF() { 13 | // return ; 14 | // } 15 | 16 | // function handleProjectBidSubmit(e) { 17 | // e.preventDefault(); 18 | // console.log(e); 19 | 20 | // } 21 | 22 | class AdminProjectBid extends Component { 23 | state = { 24 | table: true, 25 | editForm: false, 26 | editData: {} 27 | }; 28 | 29 | render() { 30 | // let value=(this.props.pass) ? undefined : ""; 31 | return ( 32 | // 33 | 34 | {this.state.table ? ( 35 | this.state.editForm ? ( 36 | 41 | ) : ( 42 | 46 | ) 47 | ) : ( 48 | 52 | )} 53 | 54 | {/*
debrup
*/} 55 | {/* */} 56 | {/* } /> */} 57 | 58 | {/* */} 59 | 60 | 61 | // 62 | ); 63 | } 64 | handleProjectBidSubmit = event => { 65 | event.preventDefault(); 66 | console.log("id", event.target[0].value, event.target[1].value); 67 | this.setState({ table: true }); 68 | 69 | let body = { 70 | ProjectTitle: event.target[0].value, 71 | ProjectURL: event.target[1].value, 72 | ProjectDesc:event.target[2].value, 73 | Portal_ID:event.target[3].value, 74 | EstimatedTime:event.target[4].value, 75 | EstimatedCost:event.target[5].value, 76 | ResourceID:event.target[6].value, 77 | Status:event.target[7].value, 78 | Remark:event.target[8].value, 79 | 80 | 81 | 82 | }; 83 | // let body= "CompanyID=" + event.target[0].value + "&ProjectBid=" + event.target[1].value; 84 | // let body= ""; 85 | axios 86 | .post("http://localhost:4000/api/admin/project-bid", body, { 87 | headers: { 88 | authorization: localStorage.getItem("token") || "" 89 | } 90 | }) 91 | .then(res => { 92 | this.setState({ table: false }); 93 | this.setState({ table: true }); 94 | }) 95 | .catch(err => { 96 | console.log(err); 97 | }); 98 | // this.setState({ loading: true }); 99 | // this.login(event.target[0].value, event.target[1].value); 100 | // event.target.reset(); 101 | }; 102 | handleAddProjectBid = () => { 103 | console.log("clicked1"); 104 | this.setState({ table: false }); 105 | }; 106 | handleEditProjectBid = e => { 107 | console.log(e); 108 | console.log("clicked6"); 109 | this.setState({ editForm: true }); 110 | this.setState({ editData: e }); 111 | }; 112 | handleFormClose = () => { 113 | console.log("clicked1"); 114 | this.setState({ table: true }); 115 | }; 116 | handleEditFormClose = () => { 117 | console.log("clicked5"); 118 | this.setState({ editForm: false }); 119 | }; 120 | handleFormClose = () => { 121 | console.log("clicked1"); 122 | this.setState({ table: true }); 123 | }; 124 | handleProjectBidEditUpdate = (info,editInfo) => { 125 | // this.setState({ table: true }); 126 | let body = { 127 | // ...info,CompanyID:formData1,ProjectBid:formData2 128 | // _id: info["_id"], 129 | ProjectTitle: editInfo.target[0].value, 130 | ProjectURL: editInfo.target[1].value, 131 | ProjectDesc:editInfo.target[2].value, 132 | Portal_ID:editInfo.target[3].value, 133 | EstimatedTime:editInfo.target[4].value, 134 | EstimatedCost:editInfo.target[5].value, 135 | ResourceID:editInfo.target[6].value, 136 | Status:editInfo.target[7].value, 137 | Remark:editInfo.target[8].value, 138 | }; 139 | console.log("update", body); 140 | axios 141 | .put("http://localhost:4000/api/admin/project-bid/" + info["_id"], body, { 142 | headers: { 143 | authorization: localStorage.getItem("token") || "" 144 | } 145 | }) 146 | .then(res => { 147 | // this.componentDidMount(); 148 | this.setState({ table: false }); 149 | this.setState({ table: true }); 150 | }) 151 | .catch(err => { 152 | console.log(err); 153 | }); 154 | 155 | this.setState({ editForm: false }); 156 | }; 157 | } 158 | 159 | export default AdminProjectBid; 160 | -------------------------------------------------------------------------------- /frontend/src/component/SalaryForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | 4 | import { Form, Button, Col, Row } from "react-bootstrap"; 5 | 6 | class SalaryForm extends Component { 7 | state = { 8 | employeeData : [], 9 | 10 | 11 | } 12 | 13 | loadEmployeeInfo = () => { 14 | axios 15 | .get("http://localhost:4000/api/employee", { 16 | headers: { 17 | authorization: localStorage.getItem("token") || "" 18 | } 19 | }) 20 | .then(response => { 21 | this.setState({ employeeData: response.data }); 22 | }) 23 | .catch(error => { 24 | console.log(error); 25 | }); 26 | }; 27 | 28 | componentWillMount() { 29 | this.loadEmployeeInfo(); 30 | // this.loadPositionInfo(); 31 | // this.loadDepartmentInfo(); 32 | } 33 | 34 | render() { 35 | return ( 36 |
37 |

Add Salary Details

38 |
39 |
40 | 41 | 42 | 43 | Select Employee 44 | 45 | 46 | 50 | 51 | {this.state.employeeData.map((data, index) => ( 52 | 53 | ))} 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | Basic Salary 62 | 63 | 64 | 69 | 70 | 71 | 72 | 73 | 74 | Bank Name 75 | 76 | 77 | 82 | 83 | 84 | 85 | 86 | 87 | Account No 88 | 89 | 90 | 95 | 96 | 97 | 98 | 99 | 100 | Re-Enter Account No 101 | 102 | 103 | 108 | 109 | 110 | 111 | 112 | 113 | Account Holder Name 114 | 115 | 116 | 121 | 122 | 123 | 124 | 125 | 126 | IFSC Code 127 | 128 | 129 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | Tax Deduction 141 | 142 | 143 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 163 | 164 | 165 |
166 |
167 | 168 | {/*
169 |
*/} 170 | 171 | ); 172 | } 173 | } 174 | 175 | export default SalaryForm; 176 | -------------------------------------------------------------------------------- /frontend/src/component/admin/AdminPortalTable.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./AdminPortalTable.css"; 3 | import axios from "axios"; 4 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 5 | import { faPlus, faTrash, faEdit } from "@fortawesome/free-solid-svg-icons"; 6 | import { RingLoader } from "react-spinners"; 7 | import { css } from "@emotion/core"; 8 | import { Button } from "react-bootstrap"; 9 | 10 | 11 | import { AgGridReact } from "ag-grid-react"; 12 | import "ag-grid-community/dist/styles/ag-grid.css"; 13 | import "ag-grid-community/dist/styles/ag-theme-balham.css"; 14 | 15 | 16 | const override = css` 17 | display: block; 18 | margin: 0 auto; 19 | margin-top: 45px; 20 | border-color: red; 21 | `; 22 | 23 | class AdminPortalTable extends Component { 24 | state = { 25 | portalData: [], 26 | loading: true, 27 | 28 | columnDefs: [ 29 | 30 | { 31 | headerName: "Portal", 32 | field: "PortalName", 33 | sortable: true, 34 | // width: 150, 35 | // filter: true , 36 | }, 37 | 38 | { 39 | headerName: "Status", 40 | field: "Status", 41 | sortable: true, 42 | // width: 150, 43 | // filter: true , 44 | }, 45 | 46 | 47 | 48 | { 49 | headerName: "", 50 | field: "edit", 51 | filter: false, 52 | width: 30, 53 | cellRendererFramework: this.renderEditButton.bind(this) 54 | }, 55 | { 56 | headerName: "", 57 | field: "delete", 58 | filter: false, 59 | width: 30, 60 | cellRendererFramework: this.renderButton.bind(this) 61 | } 62 | ], 63 | rowData: [], 64 | defaultColDef: { 65 | resizable: true, 66 | width: 590, 67 | filter: "agTextColumnFilter" 68 | // filter: true , 69 | }, 70 | getRowHeight: function (params) { 71 | return 35; 72 | } 73 | }; 74 | portalObj = []; 75 | rowDataT = []; 76 | 77 | loadPortalData = () => { 78 | axios 79 | .get("http://localhost:4000/api/admin/portal", { 80 | headers: { 81 | authorization: localStorage.getItem("token") || "" 82 | } 83 | }) 84 | .then(response => { 85 | this.portalObj = response.data; 86 | // } 87 | console.log("response", response.data); 88 | this.setState({ portalData: response.data }); 89 | this.setState({ loading: false }); 90 | this.rowDataT = []; 91 | 92 | this.portalObj.map(data => { 93 | let temp = { 94 | data, 95 | PortalName: data["PortalName"], 96 | Status: data["Status"] == 1 ? "enable" : "disable", 97 | 98 | }; 99 | 100 | this.rowDataT.push(temp); 101 | }); 102 | this.setState({ rowData: this.rowDataT }); 103 | }) 104 | .catch(error => { 105 | console.log(error); 106 | }); 107 | }; 108 | 109 | onPortalDelete = e => { 110 | console.log(e); 111 | if ( 112 | window.confirm( 113 | "Are you sure to delete this record,It Will Delete All Projects Related to This Portal? " 114 | ) == true 115 | ) { 116 | axios 117 | .delete("http://localhost:4000/api/admin/portal/" + e, { 118 | headers: { 119 | authorization: localStorage.getItem("token") || "" 120 | } 121 | }) 122 | .then(res => { 123 | this.componentDidMount(); 124 | }) 125 | .catch(err => { 126 | console.log(err); 127 | }); 128 | } 129 | }; 130 | componentDidMount() { 131 | this.loadPortalData(); 132 | } 133 | renderButton(params) { 134 | console.log(params); 135 | return ( 136 | 139 | this.onPortalDelete(params.data.data["_id"]) 140 | } 141 | /> 142 | ); 143 | } 144 | renderEditButton(params) { 145 | console.log(params); 146 | return ( 147 | this.props.onEditPortal(params.data.data)} 150 | /> 151 | ); 152 | } 153 | 154 | render() { 155 | return ( 156 |
157 |

Portal Details

158 | 166 |
167 | 168 | {!this.state.loading ? ( 169 |
179 | 190 |
191 | ) : ( 192 |
193 | 200 |
201 | )} 202 | 203 |
204 | ); 205 | } 206 | } 207 | 208 | export default AdminPortalTable; 209 | -------------------------------------------------------------------------------- /frontend/src/component/admin/DashboardAdmin.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "./DashboardAdmin.css"; 3 | import { HashRouter as Router, Route, Link } from "react-router-dom"; 4 | import { Switch } from "react-router"; 5 | import { Redirect } from "react-router-dom"; 6 | 7 | import Role from "../Role.jsx"; 8 | import NavBar from "../NavBar.jsx"; 9 | import RoleForm from "../RoleForm.jsx"; 10 | import Position from "../Position.jsx"; 11 | import Department from "../Department.jsx"; 12 | import AdminPortal from "./AdminPortal.jsx"; 13 | import AdminProjectBid from "./AdminProjectBid.jsx"; 14 | import NotFound404 from "../NotFound404.jsx"; 15 | 16 | 17 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 18 | import { 19 | faUsersCog, 20 | faUsers, 21 | faChair, 22 | faBuilding, 23 | faDollarSign, 24 | faTasks 25 | } from "@fortawesome/free-solid-svg-icons"; 26 | 27 | function RoleAdminF() { 28 | return ; 29 | } 30 | function RoleFormF() { 31 | return ; 32 | } 33 | 34 | function PositionF() { 35 | return ; 36 | } 37 | function DepartmentF() { 38 | return ; 39 | } 40 | function AdminPortalF() { 41 | return ; 42 | } 43 | function AdminProjectBidF() { 44 | return ; 45 | } 46 | 47 | class DashboardAdmin extends Component { 48 | state = { 49 | redirect: true, 50 | checked: true 51 | }; 52 | handleChange=(checked)=> { 53 | console.log("switch"); 54 | // var sidebarV = this.refs.sidebar; 55 | // var sidebarV = React.findDOMNode( this.refs.sidebar); 56 | // sidebarV.style.disply="none"; 57 | 58 | if(this.state.checked==true){ 59 | // document.getElementById("sidebar").setAttribute("style", "display:none") 60 | document.getElementById("sidebar").setAttribute("class", "display-none"); 61 | } 62 | // document.getElementById("sidebar").setAttribute("style", "display:block"); 63 | else{document.getElementById("sidebar").setAttribute("class", "display-block");} 64 | this.setState({ checked }); 65 | } 66 | 67 | render() { 68 | return ( 69 | 70 | {/* */} 71 | 72 |
73 |
74 | 75 |
76 | 77 |
78 |