├── client
    ├── src
    │   ├── pages
    │   │   ├── RaiseIssue
    │   │   │   └── styles.css
    │   │   ├── SelfService
    │   │   │   ├── Assets
    │   │   │   │   └── styles.css
    │   │   │   ├── styles.css
    │   │   │   ├── ViewPaySlip
    │   │   │   │   ├── styles.css
    │   │   │   │   └── ViewPaySlip.js
    │   │   │   ├── Cab
    │   │   │   │   └── styles.css
    │   │   │   ├── Separation
    │   │   │   │   ├── styles.css
    │   │   │   │   └── Separation.js
    │   │   │   ├── SelfService.js
    │   │   │   ├── ManageReq
    │   │   │   │   ├── styles.css
    │   │   │   │   ├── ManageReq.js
    │   │   │   │   ├── VehicleReq.js
    │   │   │   │   └── LeaveReq.js
    │   │   │   └── Transfer
    │   │   │   │   └── Transfer.js
    │   │   ├── Timesheet
    │   │   │   ├── styles.css
    │   │   │   └── Timesheet.js
    │   │   ├── LeaveReq
    │   │   │   ├── styles.css
    │   │   │   └── Leave.js
    │   │   ├── SignIn
    │   │   │   ├── styles.css
    │   │   │   └── SignIn.js
    │   │   ├── Error
    │   │   │   └── Error.js
    │   │   └── Home
    │   │   │   ├── styles.css
    │   │   │   └── Home.js
    │   ├── components
    │   │   ├── Footer
    │   │   │   ├── styles.css
    │   │   │   └── Footer.js
    │   │   ├── NavBar
    │   │   │   ├── styles.css
    │   │   │   ├── bars-solid.svg
    │   │   │   ├── Stack-logo.svg
    │   │   │   └── NavBar.js
    │   │   ├── Notifications
    │   │   │   └── NotifcationsStack.js
    │   │   ├── TextEditor
    │   │   │   └── TextEditor.js
    │   │   ├── DateToday
    │   │   │   └── DateToday.js
    │   │   └── SideBar
    │   │   │   ├── styles.css
    │   │   │   └── SideBar.js
    │   ├── routes
    │   │   └── ProtectedRoutes
    │   │   │   └── ProtectedRoute.js
    │   ├── index.js
    │   ├── index.css
    │   ├── api
    │   │   └── employee.js
    │   └── App.js
    ├── public
    │   ├── HRstackIcon.ico
    │   ├── hrstack-logo.png
    │   └── index.html
    ├── postcss.config.js
    ├── .gitignore
    ├── tailwind.config.js
    ├── package.json
    ├── employee.js
    └── README.md
├── .vscode
    └── settings.json
├── admin
    ├── public
    │   ├── HRstackIcon.ico
    │   ├── hrstack-logo.png
    │   ├── index.html.bak
    │   └── index.html
    ├── src
    │   ├── pages
    │   │   ├── Management
    │   │   │   ├── AddAssets
    │   │   │   │   ├── styles.css
    │   │   │   │   └── AssetManagement.js
    │   │   │   ├── styles.css
    │   │   │   ├── Announcements
    │   │   │   │   └── styles.css
    │   │   │   ├── ViewPaySlip
    │   │   │   │   ├── styles.css
    │   │   │   │   └── ViewPaySlip.js
    │   │   │   ├── AddEvents
    │   │   │   │   └── styles.css
    │   │   │   ├── Management.js
    │   │   │   └── ManageReq
    │   │   │   │   └── styles.css
    │   │   ├── Error
    │   │   │   └── Error.js
    │   │   └── HomeAdmin
    │   │   │   ├── styles.css
    │   │   │   └── HomeAdmin.js
    │   ├── components
    │   │   ├── Footer
    │   │   │   ├── styles.css
    │   │   │   └── Footer.js
    │   │   ├── NameCard
    │   │   │   ├── styles.css
    │   │   │   └── NameCard.js
    │   │   ├── NavBar
    │   │   │   ├── styles.css
    │   │   │   ├── bars-solid.svg
    │   │   │   ├── Stack-logo.svg
    │   │   │   └── NavBar.js
    │   │   ├── DateToday
    │   │   │   └── DateToday.js
    │   │   ├── TextEditor
    │   │   │   ├── TextEditor.js
    │   │   │   └── txtCopy.js
    │   │   └── SideBar
    │   │   │   ├── SideBar.js
    │   │   │   └── styles.css
    │   ├── index.js
    │   ├── api
    │   │   └── api.js
    │   ├── index.css
    │   └── App.js
    ├── package.json
    └── README.md
├── client-hr
    ├── public
    │   ├── HRstackIcon.ico
    │   ├── hrstack-logo.png
    │   └── index.html
    ├── src
    │   ├── pages
    │   │   └── AddEmployee
    │   │   │   ├── styles.css
    │   │   │   └── AddEmployee.js
    │   ├── components
    │   │   ├── Footer
    │   │   │   ├── styles.css
    │   │   │   └── Footer.js
    │   │   ├── NameCard
    │   │   │   ├── styles.css
    │   │   │   └── NameCard.js
    │   │   ├── SkillCard
    │   │   │   ├── styles.css
    │   │   │   └── SkillCard.js
    │   │   ├── NavBar
    │   │   │   ├── styles.css
    │   │   │   ├── bars-solid.svg
    │   │   │   ├── Stack-logo.svg
    │   │   │   └── NavBar.js
    │   │   ├── DateToday
    │   │   │   └── DateToday.js
    │   │   ├── TextEditor
    │   │   │   ├── TextEditor.js
    │   │   │   └── txtCopy.js
    │   │   └── SideBar
    │   │   │   ├── SideBar.js
    │   │   │   └── styles.css
    │   ├── index.js
    │   ├── index.css
    │   ├── api
    │   │   └── api.js
    │   └── App.js
    ├── package.json.bak
    ├── package.json
    └── README.md
├── server
    ├── contollers
    │   ├── hr.js
    │   ├── admin.js
    │   └── employee.js
    ├── routes
    │   ├── hr.js
    │   ├── admin.js
    │   └── employee.js
    ├── models
    │   └── User.js
    ├── package.json
    ├── index.js
    └── .gitignore
└── README.md


/client/src/pages/RaiseIssue/styles.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "cSpell.words": [
3 |         "timesheet"
4 |     ]
5 | }


--------------------------------------------------------------------------------
/client/src/pages/SelfService/Assets/styles.css:
--------------------------------------------------------------------------------
1 | .assetRequest {
2 |     padding: 2% 5%;
3 | }


--------------------------------------------------------------------------------
/admin/public/HRstackIcon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormdotcom/hr-management/HEAD/admin/public/HRstackIcon.ico


--------------------------------------------------------------------------------
/admin/public/hrstack-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormdotcom/hr-management/HEAD/admin/public/hrstack-logo.png


--------------------------------------------------------------------------------
/client/public/HRstackIcon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormdotcom/hr-management/HEAD/client/public/HRstackIcon.ico


--------------------------------------------------------------------------------
/client/public/hrstack-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormdotcom/hr-management/HEAD/client/public/hrstack-logo.png


--------------------------------------------------------------------------------
/client-hr/public/HRstackIcon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormdotcom/hr-management/HEAD/client-hr/public/HRstackIcon.ico


--------------------------------------------------------------------------------
/client-hr/public/hrstack-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stormdotcom/hr-management/HEAD/client-hr/public/hrstack-logo.png


--------------------------------------------------------------------------------
/client/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/server/contollers/hr.js:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose"
2 | import bcrypt from "bcrypt"
3 | 
4 | export const getAllEmployees = async((req, res)=>{
5 |     
6 | })


--------------------------------------------------------------------------------
/client/src/pages/Timesheet/styles.css:
--------------------------------------------------------------------------------
1 | 
2 | .timeSheet {
3 |     height: 100vh;
4 |     padding-top: 5%;   
5 |     padding-left: 15%;
6 |     overflow-y: scroll;
7 | }


--------------------------------------------------------------------------------
/admin/src/pages/Management/AddAssets/styles.css:
--------------------------------------------------------------------------------
1 | .assetsMange {
2 |     background-color: rgb(8, 57, 100);
3 |     padding-left: 7%;
4 |     margin-bottom: 1000px;
5 |     overflow-y: auto;
6 | }


--------------------------------------------------------------------------------
/client-hr/src/pages/AddEmployee/styles.css:
--------------------------------------------------------------------------------
1 | 
2 | .addEmployee input[type="password"]
3 | {
4 |   -webkit-text-security: disc;
5 |   padding: 3px 5px;
6 |   letter-spacing: 1px;
7 |   width: 50%;
8 |   height: 2%;
9 | }


--------------------------------------------------------------------------------
/server/routes/hr.js:
--------------------------------------------------------------------------------
 1 | import  express from 'express';
 2 | const router = express.Router();
 3 | 
 4 | /* GET home page. */
 5 | router.get('/', function(req, res, next) {
 6 |   res.send("hr");
 7 | });
 8 | 
 9 | 
10 | export default router;
11 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/styles.css:
--------------------------------------------------------------------------------
 1 | .selfService {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 | }
 7 | .selfServices {
 8 |     padding-top:20% ;
 9 |     padding-left: 10%;
10 | }


--------------------------------------------------------------------------------
/admin/src/pages/Management/styles.css:
--------------------------------------------------------------------------------
 1 | .selfService {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 | }
 7 | .selfServices {
 8 |     padding-top:20% ;
 9 |     padding-left: 10%;
10 | }


--------------------------------------------------------------------------------
/admin/src/pages/Management/Announcements/styles.css:
--------------------------------------------------------------------------------
1 | .uploadEventImage {
2 |     background-color: #e4e4e4 !important;
3 |     transition: all 100ms ease-in-out;
4 |     
5 | }
6 | 
7 | .uploadEventImage:hover {
8 |     background-color: #d4d3d3 !important;
9 | }


--------------------------------------------------------------------------------
/server/routes/admin.js:
--------------------------------------------------------------------------------
 1 | import  express from 'express';
 2 | import { createUser} from "../contollers/admin.js"
 3 | const router = express.Router();
 4 | 
 5 | /* GET home page. */
 6 | router.get('/', function(req, res) {
 7 |   res.send("admin");
 8 | });
 9 | router.post('/createUser', createUser);
10 | 
11 | export default router;
12 | 


--------------------------------------------------------------------------------
/server/routes/employee.js:
--------------------------------------------------------------------------------
 1 | import  express from 'express';
 2 | import { login} from "../contollers/employee.js"
 3 | const router = express.Router();
 4 | 
 5 | /* GET home page. */
 6 | router.get('/login', function(req, res, next) {
 7 |   res.send("employee");
 8 | });
 9 | router.post('/login', login);
10 | export default router;
11 | 


--------------------------------------------------------------------------------
/admin/src/components/Footer/styles.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |     font-weight: 500;
 3 |     text-align: center;
 4 |     width: 100%;
 5 |     height: 15px;
 6 |     background-color: #278acb;
 7 |     color: #fff;
 8 |     font-size: smaller;
 9 |     position:fixed;
10 |     bottom:0;
11 | }
12 | .footer p {
13 |     font-size: smaller;
14 | }


--------------------------------------------------------------------------------
/client-hr/src/components/Footer/styles.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |     font-weight: 500;
 3 |     text-align: center;
 4 |     width: 100%;
 5 |     height: 15px;
 6 |     background-color: #278acb;
 7 |     color: #fff;
 8 |     font-size: smaller;
 9 |     position:fixed;
10 |     bottom:0;
11 | }
12 | .footer p {
13 |     font-size: smaller;
14 | }


--------------------------------------------------------------------------------
/client/src/components/Footer/styles.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |     font-weight: 500;
 3 |     text-align: center;
 4 |     width: 100%;
 5 |     height: 15px;
 6 |     background-color: #278acb;
 7 |     color: #fff;
 8 |     font-size: smaller;
 9 |     position:fixed;
10 |     bottom:0;
11 | }
12 | .footer p {
13 |     font-size: smaller;
14 | }


--------------------------------------------------------------------------------
/client/src/pages/SelfService/ViewPaySlip/styles.css:
--------------------------------------------------------------------------------
 1 | .viewPay {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 | 
 7 | }
 8 | .SlipForm {
 9 |     background-color: #F5F5F5;
10 |     margin: auto;
11 |     margin-top: 4%;
12 |     width: 50%;
13 |     border-radius: 15px;
14 | 
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/admin/src/pages/Management/ViewPaySlip/styles.css:
--------------------------------------------------------------------------------
 1 | .viewPay {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 | 
 7 | }
 8 | .SlipForm {
 9 |     background-color: #F5F5F5;
10 |     margin: auto;
11 |     margin-top: 4%;
12 |     width: 50%;
13 |     border-radius: 15px;
14 | 
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/admin/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./styles.css";
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | function Footer() {
 5 |     return (
 6 |         <div className='footer'>
 7 |         
 8 |             <p>2021 Copyright HR Stack example Company </p>
 9 |       
10 |         </div>
11 |     )
12 | }
13 | 
14 | export default Footer
15 | 


--------------------------------------------------------------------------------
/client/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./styles.css";
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | function Footer() {
 5 |     return (
 6 |         <div className='footer'>
 7 |         
 8 |             <p>2021 Copyright HR Stack example Company </p>
 9 |       
10 |         </div>
11 |     )
12 | }
13 | 
14 | export default Footer
15 | 


--------------------------------------------------------------------------------
/client-hr/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./styles.css";
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | function Footer() {
 5 |     return (
 6 |         <div className='footer'>
 7 |         
 8 |             <p>2021 Copyright HR Stack example Company </p>
 9 |       
10 |         </div>
11 |     )
12 | }
13 | 
14 | export default Footer
15 | 


--------------------------------------------------------------------------------
/admin/src/components/NameCard/styles.css:
--------------------------------------------------------------------------------
 1 | .nameCard {
 2 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 3 |     background-color: #fdfeff;
 4 |     padding: 10px 20px;
 5 |     border-radius: 15px;
 6 |     min-width: 300px;
 7 |     margin: 20px 10px;
 8 |     transition: all 100ms ease-in-out;
 9 | }
10 | .nameCard:hover {
11 |     background-color: #f8fcff;
12 |     translate: 1px 1px;
13 | }


--------------------------------------------------------------------------------
/client-hr/src/components/NameCard/styles.css:
--------------------------------------------------------------------------------
 1 | .nameCard {
 2 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 3 |     background-color: #fdfeff;
 4 |     padding: 10px 20px;
 5 |     border-radius: 15px;
 6 |     min-width: 300px;
 7 |     margin: 20px 10px;
 8 |     transition: all 100ms ease-in-out;
 9 | }
10 | .nameCard:hover {
11 |     background-color: #f8fcff;
12 |     translate: 1px 1px;
13 | }


--------------------------------------------------------------------------------
/client-hr/src/components/SkillCard/styles.css:
--------------------------------------------------------------------------------
 1 | .skillCard {
 2 |     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 3 |     background-color: #fdfeff;
 4 |     padding: 10px 20px;
 5 |     border-radius: 15px;
 6 |     min-width: 300px;
 7 |     margin: 20px 10px;
 8 |     transition: all 100ms ease-in-out;
 9 | }
10 | .skillCard:hover {
11 |     background-color: #f8fcff;
12 |     translate: 1px 1px;
13 | }


--------------------------------------------------------------------------------
/client/.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 | 


--------------------------------------------------------------------------------
/client/src/routes/ProtectedRoutes/ProtectedRoute.js:
--------------------------------------------------------------------------------
 1 | import { Navigate, Outlet } from "react-router-dom";
 2 | import SignIn from "../../pages/SignIn/SignIn";
 3 |  const Auth =()=>{
 4 |     const user = { loggedin: true}
 5 |     return user && user.loggedin;
 6 | }
 7 | 
 8 | const ProtectedRoute = ()=>{
 9 |     const isAuth = Auth()
10 |     return isAuth ? <Outlet /> : <SignIn/>
11 | }
12 | 
13 | export default ProtectedRoute;
14 | 


--------------------------------------------------------------------------------
/client/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 { BrowserRouter } from "react-router-dom";
 6 | import Footer from "./components/Footer/Footer"
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <BrowserRouter>
10 |     <App />
11 |     <Footer />
12 |     </BrowserRouter>
13 | 
14 |   </React.StrictMode>,
15 |   document.getElementById('root')
16 | );
17 | 
18 | 
19 | 


--------------------------------------------------------------------------------
/server/contollers/admin.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose"
 2 | import bcrypt from "bcrypt"
 3 | import User from "../models/User.js"
 4 | export const HBHJBSJA = (async(req, res)=>{
 5 |     console.log(req.body)
 6 |     const {email, password, fullname} = req.body
 7 |     try {
 8 |         let hashedPassword = await bcrypt.hash(password, 8)
 9 |        let user= User.create({email, password: hashedPassword, fullname})
10 |     } catch (error) {
11 |         
12 |     }
13 | })
14 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/Cab/styles.css:
--------------------------------------------------------------------------------
 1 | .cabRequest {
 2 |     padding: 2% 5%;
 3 | }
 4 | .mainForm {
 5 |     border-radius: 15px;
 6 |     border: 0.5px solid rgb(194, 194, 194);
 7 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 8 | }
 9 | .tableView {
10 |     border-radius: 15px;
11 |     border: 0.5px solid rgb(194, 194, 194);
12 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
13 | }
14 | .mainForm input, textarea {
15 |     background-color: #F5F5F5;
16 | }


--------------------------------------------------------------------------------
/server/models/User.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose"
 2 | const userSChema = mongoose.Schema({
 3 |     fullname: String,
 4 |     email:String,
 5 |     password:String,
 6 |      status:{
 7 |          type:Boolean,
 8 |          default:false,
 9 |          required:true
10 |      },
11 |     createdAt:{
12 |         type: Date,
13 |         required: true,
14 |         default: new Date()
15 |     }
16 |    
17 | })
18 | const User = mongoose.model('User', userSChema)
19 | export default User;


--------------------------------------------------------------------------------
/admin/src/components/NavBar/styles.css:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |     margin-bottom: 1px;   
 3 |     position: absolute;
 4 |     top:0;
 5 |     width: 100%;
 6 |     display: flex;
 7 |     padding: 5px 0;
 8 |     background-color: #ffffff;
 9 |     color: #fff;
10 |     border-bottom: 1px solid rgb(184, 184, 184);
11 | }
12 | 
13 | 
14 | @media only screen and (max-width: 970px) {
15 |     .navbarCol {
16 |         margin-left: auto;
17 |         background-color: blue;
18 |     }
19 |   }
20 | 


--------------------------------------------------------------------------------
/client/src/components/NavBar/styles.css:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |     margin-bottom: 1px;   
 3 |     position: absolute;
 4 |     top:0;
 5 |     width: 100%;
 6 |     display: flex;
 7 |     padding: 5px 0;
 8 |     background-color: #ffffff;
 9 |     color: #fff;
10 |     border-bottom: 1px solid rgb(184, 184, 184);
11 | }
12 | 
13 | 
14 | @media only screen and (max-width: 970px) {
15 |     .navbarCol {
16 |         margin-left: auto;
17 |         background-color: blue;
18 |     }
19 |   }
20 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "server",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "start": "nodemon index.js"
 8 |   },
 9 |   "dependencies": {
10 |     "bcrypt": "^5.0.1",
11 |     "cookie-parser": "~1.4.4",
12 |     "cors": "^2.8.5",
13 |     "debug": "~2.6.9",
14 |     "express": "~4.16.1",
15 |     "http-errors": "~1.6.3",
16 |     "mongoose": "^6.0.13",
17 |     "morgan": "~1.9.1",
18 |     "nodemon": "^2.0.15"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/client-hr/src/components/NavBar/styles.css:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |     margin-bottom: 1px;   
 3 |     position: absolute;
 4 |     top:0;
 5 |     width: 100%;
 6 |     display: flex;
 7 |     padding: 5px 0;
 8 |     background-color: #ffffff;
 9 |     color: #fff;
10 |     border-bottom: 1px solid rgb(184, 184, 184);
11 | }
12 | 
13 | 
14 | @media only screen and (max-width: 970px) {
15 |     .navbarCol {
16 |         margin-left: auto;
17 |         background-color: blue;
18 |     }
19 |   }
20 | 


--------------------------------------------------------------------------------
/admin/src/components/NavBar/bars-solid.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>


--------------------------------------------------------------------------------
/client/src/components/NavBar/bars-solid.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>


--------------------------------------------------------------------------------
/client-hr/src/components/NavBar/bars-solid.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>


--------------------------------------------------------------------------------
/admin/public/index.html.bak:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/hrstack-logo.png" />
 6 |    
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <meta name="theme-color" content="#000000" />
 9 |     <meta
10 |       name="description"
11 |       content="Web site created using create-react-app"
12 |     />
13 |     
14 |     <title>HR Stack - Service</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/admin/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 { BrowserRouter } from "react-router-dom";
 6 | import Footer from "./components/Footer/Footer";
 7 | import store from "./redux/store";
 8 | import { Provider } from 'react-redux';
 9 | 
10 | 
11 | 
12 | ReactDOM.render(
13 |   <React.StrictMode>
14 |     <Provider store={store}>
15 | 
16 | 
17 |     <BrowserRouter>
18 |     <App />
19 |     <Footer />
20 |     
21 |     </BrowserRouter>
22 |     </Provider>
23 | 
24 |   </React.StrictMode>,
25 |   document.getElementById('root')
26 | );
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/Separation/styles.css:
--------------------------------------------------------------------------------
 1 | .separation {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 |     overflow-x: scroll;
 7 | }
 8 | .separationForm {
 9 |     background-color: #F5F5F5;
10 |     margin: auto;
11 |     margin-top: 4%;
12 |     width: 90%;
13 |     border-radius: 15px;
14 | 
15 | }
16 | a {
17 |     text-decoration: none;
18 |     color: black;
19 | }
20 | a:hover {
21 |     color: black;
22 | }
23 | .separationStatus {
24 |     background-color: #F5F5F5;
25 |     margin: auto;
26 |     margin-top: 4%;
27 |     width: 90%;
28 |     border-radius: 15px;
29 |     margin-bottom: 7%;
30 | }


--------------------------------------------------------------------------------
/client-hr/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 { BrowserRouter } from "react-router-dom";
 6 | import Footer from "./components/Footer/Footer";
 7 | import store from "./redux/store";
 8 | import { Provider } from 'react-redux';
 9 | 
10 | 
11 | 
12 | ReactDOM.render(
13 |   <React.StrictMode>
14 |     <Provider store={store}>
15 | 
16 | 
17 |     <BrowserRouter>
18 |     <App />
19 |     <Footer />
20 |     
21 |     </BrowserRouter>
22 |     </Provider>
23 | 
24 |   </React.StrictMode>,
25 |   document.getElementById('root')
26 | );
27 | 
28 | 
29 | 


--------------------------------------------------------------------------------
/admin/src/pages/Management/AddEvents/styles.css:
--------------------------------------------------------------------------------
 1 | .separation {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 |     overflow-x: scroll;
 7 | }
 8 | .separationForm {
 9 |     background-color: #F5F5F5;
10 |     margin: auto;
11 |     margin-top: 4%;
12 |     width: 90%;
13 |     border-radius: 15px;
14 | 
15 | }
16 | a {
17 |     text-decoration: none;
18 |     color: black;
19 | }
20 | a:hover {
21 |     color: black;
22 | }
23 | .separationStatus {
24 |     background-color: #F5F5F5;
25 |     margin: auto;
26 |     margin-top: 4%;
27 |     width: 90%;
28 |     border-radius: 15px;
29 |     margin-bottom: 7%;
30 | }


--------------------------------------------------------------------------------
/client/src/pages/LeaveReq/styles.css:
--------------------------------------------------------------------------------
 1 | .topSecLeave {
 2 |     display: flex;
 3 |     justify-content: space-between;
 4 |     margin-top: 3%;
 5 |     margin-bottom: 3%;
 6 |     padding-left: 2%;
 7 |     padding-right: 2%;
 8 | }
 9 | .leaveInfoCard {
10 |     padding: 3% 4%;
11 |     border-radius: 15px;
12 |     border: 0.5px solid rgb(194, 194, 194);
13 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
14 |     text-align: center;
15 | }
16 | .leaveForm {
17 |     padding: 2% 5%;
18 | }
19 | 
20 | @media only screen and (max-width: 1050px) {
21 |     .topSecLeave  {
22 |         display: flex;
23 |         flex-direction: column;
24 |         margin: 1% auto;
25 |     }
26 |     .leaveInfoCard {
27 |         margin-top: 1%;
28 |         margin-bottom: 1%;
29 |        
30 |     }
31 |   }


--------------------------------------------------------------------------------
/client/src/components/Notifications/NotifcationsStack.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import "./styles.css"
 3 | import {BsDot} from "react-icons/bs"
 4 | import moment from "moment"
 5 | function NotifcationsStack({text, time}) {
 6 | 
 7 |   return <>
 8 |   <div className='w-90 flex'>
 9 |       <div className="flex justif-center">
10 |              <BsDot className='text-fourth  text-2xl ' />
11 |       </div>
12 |     <div className='flex-col space-x-1'> 
13 |           <div> <p className='text-base font-semibold mb-0'>{text} </p> </div>
14 |           <div><p className='text-sm text-slate-400 mb-0'> 	{moment(time).fromNow()} </p>  </div>
15 |            </div>
16 |              </div>
17 |      <hr className="text-zinc-50 w-80" /> 
18 |              </>
19 | }
20 |  
21 | export default NotifcationsStack;
22 | 


--------------------------------------------------------------------------------
/admin/src/components/NavBar/Stack-logo.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true"  focusable="false" data-prefix="fas" data-icon="layer-group" class="svg-inline--fa fa-layer-group fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#278acb" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path></svg>


--------------------------------------------------------------------------------
/client-hr/src/components/NavBar/Stack-logo.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true"  focusable="false" data-prefix="fas" data-icon="layer-group" class="svg-inline--fa fa-layer-group fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#278acb" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path></svg>


--------------------------------------------------------------------------------
/client/src/components/NavBar/Stack-logo.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true"  focusable="false" data-prefix="fas" data-icon="layer-group" class="svg-inline--fa fa-layer-group fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#278acb" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path></svg>


--------------------------------------------------------------------------------
/server/contollers/employee.js:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose"
 2 | import bcrypt from "bcrypt"
 3 | import User from "../models/User.js"
 4 | 
 5 | export const getAllEmployees = ((req, res)=>{
 6 |     
 7 | })
 8 | 
 9 | export const login = async (req, res)=>{
10 |         console.log(req.body)
11 |         const {email, password} = req.body;
12 |         try {
13 |             const userExists = await User.findOne({email})
14 |             console.log(userExists)
15 |             if(!userExists) return  res.status(404).json({ message: "user dosen't exists"})
16 |             const isPassword = await bcrypt.compare(password, userExists.password)
17 |             if(!isPassword) return  res.status(403).json({message: "invalid credentials"})
18 |             console.log(userExists)
19 |             
20 |         } catch (error) {
21 |             res.status(500).json({ message: "Something went wrong" });
22 |         }
23 | }


--------------------------------------------------------------------------------
/client/src/pages/SignIn/styles.css:
--------------------------------------------------------------------------------
 1 | .signin {
 2 |     padding: auto;
 3 | }
 4 | .signin input[type="text"], input[type="password"] {
 5 |     border: 0px solid;
 6 |     height: 20px;
 7 |     width: 160px;
 8 |     color: #3f3f3f;
 9 |     outline: none;
10 | }
11 | /* .signin input:focus {
12 |     outline: none !important;
13 | } */
14 | .form {
15 |     font-family: 'Roboto Mono', monospace;
16 |     width: 300px;
17 |     margin: 10vh auto;
18 |     padding: 3rem 2rem ;
19 |     display: flex;
20 |     flex-direction: column;
21 |     justify-content: center;
22 |     border-radius: 15px;
23 |     border: 0.5px solid rgb(194, 194, 194);
24 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
25 | }
26 | 
27 | .logoSec {
28 |     display: flex;
29 |     justify-content: center;
30 |     margin: auto;
31 |     margin-bottom: 10px;
32 | }
33 | .logoSec h5 {
34 |     font-weight: 900;
35 |     color: #278acb
36 | }
37 | .error {
38 |     color: red;
39 |     font-size: small;
40 | }


--------------------------------------------------------------------------------
/client-hr/package.json.bak:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client-hr",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.1",
 7 |     "@testing-library/react": "^12.1.2",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^17.0.2",
10 |     "react-dom": "^17.0.2",
11 |     "react-scripts": "5.0.0",
12 |     "web-vitals": "^2.1.3"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/client-hr/src/components/NameCard/NameCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {FaUserAlt} from "react-icons/fa"
 3 | import "./styles.css"
 4 | import {useNavigate} from "react-router-dom"
 5 | import Avatar from '@mui/material/Avatar';
 6 | function NameCard( {fullname, empID, desigination, selectedFile, cardID, project}) {
 7 |   const navigate = useNavigate()
 8 |   return <div className='flex space-x-2 nameCard' onClick={()=>{navigate(`/view-employees/${cardID}`)}}>
 9 |     <div className='flex justify-center items-center mx-auto my-auto p5 ml-auto'> 
10 |      {selectedFile ? <Avatar sx={{ width: 100, height: 100 }}  src={selectedFile} alt="profile-face" /> 
11 |      : <FaUserAlt  size="50px"/> }
12 | 
13 |       </div>
14 |     <div className='flex flex-col pl-4'> 
15 |         <h6 className='truncate font-bold text-base'> {fullname} </h6>
16 |         <h6 className='truncate font-semibold text-sm'> {empID}</h6>
17 |         <p className='font-semibold text-sm'> {desigination}</p>
18 |         <p className='font-light text-xs'>Project: {project}</p>
19 |     </div>
20 |   </div>;
21 | }
22 | 
23 | export default NameCard;
24 |     


--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/hrstack-logo.png" />
 6 |    
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <meta name="theme-color" content="#000000" />
 9 |     <meta name = "keywords" content = "HRMS, HR-Stack, Human Resources Management System, Timesheet Management System "/>
10 |     <meta
11 |     
12 |       name="description"
13 |       content="HR-Stack is web appliaction of Human Resources Management System (HRMS).
14 |        An HRMS increases employee engagement. Throughout this app Technical and facility related issues are requested and resolved. 
15 |        This app dealing three types of User enities Employee, HR, Web Admin[Supoort Team] Developed and Designed By Ajmal Nasumudeen
16 |        Git Repo: https://github.com/stormdotcom/hr-management"
17 |     />
18 |     
19 |     <title>HR Stack</title>
20 |   </head>
21 |   <body>
22 |     <noscript>You need to enable JavaScript to run this app.</noscript>
23 |     <div id="root"></div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/admin/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/hrstack-logo.png" />
 6 |    
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <meta name="theme-color" content="#000000" />
 9 |     <meta name = "keywords" content = "HRMS, HR-Stack, Human Resources Management System, Timesheet Management System "/>
10 |     <meta
11 |     
12 |       name="description"
13 |       content="HR-Stack is web appliaction of Human Resources Management System (HRMS).
14 |        An HRMS increases employee engagement. Throughout this app Technical and facility related issues are requested and resolved. 
15 |        This app dealing three types of User enities Employee, HR, Web Admin[Supoort Team] Developed and Designed By Ajmal Nasumudeen
16 |        Git Repo: https://github.com/stormdotcom/hr-management"
17 |     />
18 |     
19 |     <title>HR Stack - Admin</title>
20 |   </head>
21 |   <body>
22 |     <noscript>You need to enable JavaScript to run this app.</noscript>
23 |     <div id="root"></div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/client-hr/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/hrstack-logo.png" />
 6 |    
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <meta name="theme-color" content="#000000" />
 9 |     <meta name = "keywords" content = "HRMS, HR-Stack, Human Resources Management System, Timesheet Management System "/>
10 |     <meta
11 |     
12 |       name="description"
13 |       content="HR-Stack is web appliaction of Human Resources Management System (HRMS).
14 |        An HRMS increases employee engagement. Throughout this app Technical and facility related issues are requested and resolved. 
15 |        This app dealing three types of User enities Employee, HR, Web Admin[Supoort Team] Developed and Designed By Ajmal Nasumudeen
16 |        Git Repo: https://github.com/stormdotcom/hr-management"
17 |     />
18 |     
19 |     <title>HR Stack - Management</title>
20 |   </head>
21 |   <body>
22 |     <noscript>You need to enable JavaScript to run this app.</noscript>
23 |     <div id="root"></div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/client/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {  content: [    "./src/**/*.{js,jsx,ts,tsx}",  ],  theme: { 
 2 |   screens: {
 3 |     'sm': '640px',
 4 |     // => @media (min-width: 640px) { ... }
 5 | 
 6 |     'md': '768px',
 7 |     // => @media (min-width: 768px) { ... }
 8 | 
 9 |     'lg': '1024px',
10 |     // => @media (min-width: 1024px) { ... }
11 | 
12 |     'xl': '1280px',
13 |     // => @media (min-width: 1280px) { ... }
14 | 
15 |     '2xl': '1536px',
16 |     // => @media (min-width: 1536px) { ... }
17 |   } ,  
18 |   colors: {
19 |     transparent: 'transparent',
20 |     current: 'currentColor',
21 |     'white': '#ffffff',
22 |     'feild': "F5F5F5",
23 |     'primary': '#278acb',
24 |     'secondary': '#FDBA22',
25 |     'third': '#469bd4',
26 |     'fourth': '#2072bb',
27 |     'midnight': '#121063',
28 |     'metal': '#565584',
29 |     'tahiti': '#3ab7bf',
30 |     'silver': '#evebff',
31 |     'gold': '#F59E0B',
32 |     'bermuda': '#78dcca',
33 |   },
34 |   extend: {
35 | 
36 |   },  
37 | },  
38 |   plugins: [
39 | 
40 |     require('postcss-import'),
41 |     require('tailwindcss'),
42 |     require('autoprefixer'),
43 |   ],}


--------------------------------------------------------------------------------
/client-hr/src/components/DateToday/DateToday.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AccessTimeIcon from '@mui/icons-material/AccessTime';
 3 | import Clock from 'react-live-clock';
 4 | function DateToday() {
 5 |     const locale = 'en';
 6 |     const [today, setDate] = React.useState(new Date()); // Save the current date to be able to trigger an update
 7 |   
 8 |     React.useEffect(() => {
 9 |         const timer = setInterval(() => { // Creates an interval which will update the current data every minute
10 |         // This will trigger a rerender every component that uses the useDate hook.
11 |         setDate(new Date());
12 |       }, 60 * 1000);
13 |       return () => {
14 |         clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount
15 |       }
16 |     }, []);
17 |   
18 |     const day = today.toLocaleDateString(locale, { weekday: 'long' });
19 |     const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;
20 | 
21 |   
22 |     return (
23 |         <p className='lg:mt-2'> {date}  <AccessTimeIcon />  &nbsp;
24 |         <Clock format={'HH:mm:ss'} ticking={true} timezone={'IST/Asia'} />   </p>
25 |     )
26 | }
27 | 
28 | export default DateToday
29 | 


--------------------------------------------------------------------------------
/client/src/components/TextEditor/TextEditor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component} from 'react'
 2 | import { Editor } from "react-draft-wysiwyg";
 3 | import { EditorState, convertToRaw} from 'draft-js';
 4 | import draftToHtml from "draftjs-to-html"
 5 | import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 6 | 
 7 | class TextEditor extends Component {
 8 |     state= {
 9 |         editorState: EditorState.createEmpty(),
10 |     }
11 |     onEditorStateChange= (editorState)=> {
12 |         this.setState({
13 |             editorState,
14 |         });
15 |     }
16 |     render(){
17 |         const {editorState} = this.state;
18 |         console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
19 |         return (
20 |             <div>
21 |                 <Editor
22 |                 editorState={editorState}
23 |                 toolbarClassName="toolbarClassName"
24 |                 wrapperClassName="wrapperClassName"
25 |                 editorClassName="editorClassName"
26 |                 onEditorStateChange={this.onEditorStateChange}
27 |     />
28 |         <textarea  hidden value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}>
29 | 
30 |         </textarea>
31 |             </div>
32 |         )
33 |         }
34 | 
35 | }
36 | 
37 | export default TextEditor
38 | 


--------------------------------------------------------------------------------
/admin/src/components/DateToday/DateToday.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AccessTimeIcon from '@mui/icons-material/AccessTime';
 3 | import Clock from 'react-live-clock';
 4 | function DateToday() {
 5 |     const locale = 'en';
 6 |     const [today, setDate] = React.useState(new Date()); // Save the current date to be able to trigger an update
 7 |   
 8 |     React.useEffect(() => {
 9 |         const timer = setInterval(() => { // Creates an interval which will update the current data every minute
10 |         // This will trigger a rerender every component that uses the useDate hook.
11 |         setDate(new Date());
12 |       }, 60 * 1000);
13 |       return () => {
14 |         clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount
15 |       }
16 |     }, []);
17 |   
18 |     const day = today.toLocaleDateString(locale, { weekday: 'long' });
19 |     const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;
20 | 
21 |   
22 |     return (
23 |       <div className='mr-1 pr-1'><p className='lg:mt-2'> {date}  <AccessTimeIcon />  &nbsp;
24 |       <Clock format={'HH:mm:ss'} ticking={true} timezone={'IST/Asia'} />   </p> </div>
25 | 
26 |     )
27 | }
28 | 
29 | export default DateToday
30 | 


--------------------------------------------------------------------------------
/client/src/components/DateToday/DateToday.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import AccessTimeIcon from '@mui/icons-material/AccessTime';
 3 | import Clock from 'react-live-clock';
 4 | function DateToday() {
 5 |     const locale = 'en';
 6 |     const [today, setDate] = React.useState(new Date()); // Save the current date to be able to trigger an update
 7 |   
 8 |     React.useEffect(() => {
 9 |         const timer = setInterval(() => { // Creates an interval which will update the current data every minute
10 |         // This will trigger a rerender every component that uses the useDate hook.
11 |         setDate(new Date());
12 |       }, 60 * 1000);
13 |       return () => {
14 |         clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount
15 |       }
16 |     }, []);
17 |   
18 |     const day = today.toLocaleDateString(locale, { weekday: 'long' });
19 |     const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;
20 |   
21 |     return (
22 |       <div className='mr-5 pr-3'>        
23 |          <p className='lg:mt-2'> {date}  <AccessTimeIcon />  &nbsp;
24 |       <Clock format={'HH:mm:ss'} ticking={true} timezone={'IST/Asia'} />  </p> 
25 |       </div>
26 | 
27 |     )
28 | }
29 | 
30 | export default DateToday
31 | 


--------------------------------------------------------------------------------
/admin/src/components/TextEditor/TextEditor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component} from 'react'
 2 | import { Editor } from "react-draft-wysiwyg";
 3 | import { EditorState, convertToRaw} from 'draft-js';
 4 | import draftToHtml from "draftjs-to-html"
 5 | import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 6 | 
 7 | class TextEditor extends Component {
 8 |     state= {
 9 |         editorState: EditorState.createEmpty(),
10 |         textValue : ""
11 |     }
12 | 
13 |     onEditorStateChange= (editorState)=> {
14 |         this.setState({
15 |             editorState,
16 |         });
17 | 
18 |     }
19 |     handleText=(e)=>{
20 |      console.log(e.target.value)
21 |     }
22 |   
23 |     render(){
24 |         const {editorState} = this.state;
25 |         return (
26 |             <div>
27 |                 <Editor
28 |                 editorState={editorState}
29 |                 toolbarClassName="toolbarClassName"
30 |                 wrapperClassName="wrapperClassName"
31 |                 editorClassName="editorClassName"
32 |                 onEditorStateChange={this.onEditorStateChange}
33 |     />
34 |         <textarea  hidden name='value' onChange={this.handleText} value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}>
35 | 
36 |         </textarea>
37 |             </div>
38 |         )
39 |         }
40 | 
41 | }
42 | 
43 | export default TextEditor
44 | 


--------------------------------------------------------------------------------
/client-hr/src/components/TextEditor/TextEditor.js:
--------------------------------------------------------------------------------
 1 | import React, { Component} from 'react'
 2 | import { Editor } from "react-draft-wysiwyg";
 3 | import { EditorState, convertToRaw} from 'draft-js';
 4 | import draftToHtml from "draftjs-to-html"
 5 | import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 6 | 
 7 | class TextEditor extends Component {
 8 |     state= {
 9 |         editorState: EditorState.createEmpty(),
10 |         textValue : ""
11 |     }
12 | 
13 |     onEditorStateChange= (editorState)=> {
14 |         this.setState({
15 |             editorState,
16 |         });
17 | 
18 |     }
19 |     handleText=(e)=>{
20 |      console.log(e.target.value)
21 |     }
22 |   
23 |     render(){
24 |         const {editorState} = this.state;
25 |         return (
26 |             <div>
27 |                 <Editor
28 |                 editorState={editorState}
29 |                 toolbarClassName="toolbarClassName"
30 |                 wrapperClassName="wrapperClassName"
31 |                 editorClassName="editorClassName"
32 |                 onEditorStateChange={this.onEditorStateChange}
33 |     />
34 |         <textarea  hidden name='value' onChange={this.handleText} value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}>
35 | 
36 |         </textarea>
37 |             </div>
38 |         )
39 |         }
40 | 
41 | }
42 | 
43 | export default TextEditor
44 | 


--------------------------------------------------------------------------------
/admin/src/components/TextEditor/txtCopy.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import { Editor } from "react-draft-wysiwyg";
 3 | import { EditorState, convertToRaw} from 'draft-js';
 4 | import draftToHtml from "draftjs-to-html"
 5 | import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 6 | 
 7 | function TxtCopy ({value}) {
 8 | 
 9 | 
10 |     const [editorState,setEditorState]=useState(EditorState.createEmpty());
11 | 
12 |    const  onEditorStateChange= (editorState)=> {
13 |        console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
14 |        value=draftToHtml(convertToRaw(editorState.getCurrentContent()))
15 |        setEditorState(editorState)
16 | 
17 |     }
18 |     const handleText=(e)=>{
19 |         console.log(e.target.value)
20 |     }
21 |   
22 |     
23 |         return (
24 |             <div>
25 |                 <Editor
26 |                 editorState={editorState}
27 |                 toolbarClassName="toolbarClassName"
28 |                 wrapperClassName="wrapperClassName"
29 |                 editorClassName="editorClassName"
30 |                 onEditorStateChange={onEditorStateChange}
31 |     />
32 |         <textarea  hidden name='value' onChange={handleText} value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}>
33 | 
34 |         </textarea>
35 |             </div>
36 |         )
37 |         
38 | 
39 | }
40 | 
41 | export default TxtCopy
42 | 


--------------------------------------------------------------------------------
/client-hr/src/components/TextEditor/txtCopy.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react'
 2 | import { Editor } from "react-draft-wysiwyg";
 3 | import { EditorState, convertToRaw} from 'draft-js';
 4 | import draftToHtml from "draftjs-to-html"
 5 | import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 6 | 
 7 | function TxtCopy ({value}) {
 8 | 
 9 | 
10 |     const [editorState,setEditorState]=useState(EditorState.createEmpty());
11 | 
12 |    const  onEditorStateChange= (editorState)=> {
13 |        console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
14 |        value=draftToHtml(convertToRaw(editorState.getCurrentContent()))
15 |        setEditorState(editorState)
16 | 
17 |     }
18 |     const handleText=(e)=>{
19 |         console.log(e.target.value)
20 |     }
21 |   
22 |     
23 |         return (
24 |             <div>
25 |                 <Editor
26 |                 editorState={editorState}
27 |                 toolbarClassName="toolbarClassName"
28 |                 wrapperClassName="wrapperClassName"
29 |                 editorClassName="editorClassName"
30 |                 onEditorStateChange={onEditorStateChange}
31 |     />
32 |         <textarea  hidden name='value' onChange={handleText} value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}>
33 | 
34 |         </textarea>
35 |             </div>
36 |         )
37 |         
38 | 
39 | }
40 | 
41 | export default TxtCopy
42 | 


--------------------------------------------------------------------------------
/client/src/pages/Error/Error.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Link} from "react-router-dom"
 3 | import { useNavigate } from 'react-router-dom';
 4 | function Error() {
 5 |     // let location = useLocation()
 6 |     
 7 |   const navigate = useNavigate()
 8 |     return (
 9 |         <div
10 |         className="
11 |           flex
12 |           items-center
13 |           justify-center
14 |           w-screen
15 |           h-screen
16 |           bg-gradient-to-r
17 |           from-indigo-600
18 |           to-blue-400
19 |         "
20 |       >
21 |         <div className="px-40 py-20 bg-white rounded-md shadow-xl">
22 |           <div className="flex flex-col items-center">
23 |             <h1 className="font-bold text-blue-600 text-9xl primary">404</h1>
24 |       
25 |             <h6 className="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
26 |               <span className="text-red-500">Oops!</span> Page not found
27 |             </h6>
28 |       
29 |             <p className="mb-8 text-center text-gray-500 md:text-lg">
30 |               {/* The page {location} doesn’t exist. */}
31 |             </p>
32 |       
33 |             <Link
34 |               onClick={()=>{navigate('/')}}
35 |               className="px-6 no-underline py-2 text-sm font-semibold text-blue-800 bg-blue-100"
36 |               >Go home</Link>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     )
41 | }
42 | 
43 | export default Error
44 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | import createError from 'http-errors';
 2 | import express from 'express';
 3 | import cookieParser from 'cookie-parser';
 4 | import logger from 'morgan';
 5 | import cors from 'cors'
 6 | import employeeRouter from './routes/employee.js';
 7 | import hrRouter from './routes/hr.js';
 8 | import adminRouter from "./routes/admin.js"
 9 | import mongoose from "mongoose"
10 | 
11 | const app = express();
12 | const CONNECTION_URL = "mongodb://localhost:27017/hr-management";
13 | const port = 4000;
14 | 
15 | app.use(cors())
16 | app.use(logger('dev'));
17 | app.use(express.json());
18 | app.use(express.urlencoded({ extended: false }));
19 | app.use(cookieParser());
20 | 
21 | 
22 | app.use('/', employeeRouter);
23 | app.use('/hr', hrRouter);
24 | app.use('/admin', adminRouter);
25 | 
26 | // catch 404 and forward to error handler
27 | app.use(function(req, res, next) {
28 |   next(createError(404));
29 | });
30 | 
31 | // error handler
32 | app.use(function(err, req, res, next) {
33 |   // set locals, only providing error in development
34 |   res.locals.message = err.message;
35 |   res.locals.error = req.app.get('env') === 'development' ? err : {};
36 | 
37 |   // render the error page
38 |   res.status(err.status || 500);
39 |   res.json({ message: err.message});
40 | });
41 | mongoose.connect(CONNECTION_URL)
42 | .then(()=>{ console.log("DB Connected"); app.listen(port, ()=> console.log("server running on port " + port)) })
43 | .catch((err)=> console.log("Error connecting DB \n" + err.message))
44 | 
45 | 


--------------------------------------------------------------------------------
/admin/src/pages/Error/Error.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Link} from "react-router-dom"
 3 | import { useLocation } from 'react-router-dom'
 4 | function Error() {
 5 |   const location = useLocation();
 6 |     
 7 | 
 8 |     return (
 9 |         <div
10 |         className="
11 |           flex
12 |           items-center
13 |           justify-center
14 |           w-screen
15 |           h-screen
16 |           bg-gradient-to-r
17 |           from-indigo-600
18 |           to-blue-400
19 |         "
20 |       >
21 |         <div className="px-40 py-20 bg-white rounded-md shadow-xl">
22 |           <div className="flex flex-col items-center">
23 |             <h1 className="font-bold text-blue-600 text-9xl primary">404</h1>
24 |       
25 |             <h6 className="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
26 |               <span className=" font-semibold">Oops!</span> <span className="italic font-bold text-red-500"> {location.pathname}</span>  Page not found
27 |             </h6>
28 |       
29 |             <p className="mb-8 text-center text-gray-500 md:text-lg">
30 |               {/* The page {location} doesn’t exist. */}
31 |             </p>
32 |       
33 |             <Link
34 |               to="/"
35 |               className="px-6 no-underline py-2 text-sm font-semibold text-blue-800 bg-blue-100"
36 |               >Go home</Link>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     )
41 | }
42 | 
43 | export default Error
44 | 


--------------------------------------------------------------------------------
/admin/src/pages/Management/Management.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./styles.css"
 3 | import Navbar from "../../components/NavBar/NavBar"
 4 | import {BsCalendarEvent} from "react-icons/bs"
 5 | import { MdManageAccounts, MdAddToQueue} from "react-icons/md"
 6 | import {GrAnnounce} from "react-icons/gr"
 7 | import { useNavigate} from 'react-router-dom'
 8 | 
 9 | 
10 | function Management() {
11 |     const navigate = useNavigate()
12 |     return (
13 |         <div>
14 |             <div className='selfService'>
15 |                 <div className='m-auto selfServicesCard'>
16 |                 <div onClick={()=> {navigate("/management/addevents")}} className='button-4  sm:w-full xs:w-full md:w-5/12 '> <BsCalendarEvent className='mx-auto text-4xl text-fourth'/>  <p >  Manage Events </p></div>
17 |                 <div onClick={()=> {navigate("/management/announcements")}} className='button-4  sm:w-full xs:w-full md:w-5/12 '> <GrAnnounce className='mx-auto text-4xl text-fourth'/> <p >  Create Announcement </p></div>
18 |                 <div onClick={()=> {navigate("/management/assets")}} className='button-4 sm:w-full xs:w-full md:w-5/12'> <MdAddToQueue className='mx-auto text-4xl text-fourth'/><p> Manage Assets </p></div>
19 |                 <div onClick={()=> {navigate("/management/all-requests")}} className='button-4 sm:w-full xs:w-full md:w-5/12'><MdManageAccounts className='mx-auto text-4xl text-fourth'/> <p>Manage Request </p></div>
20 |                 </div>
21 |             </div>
22 |             <Navbar />
23 |         </div>
24 |     )
25 | }
26 | 
27 | export default Management
28 | 


--------------------------------------------------------------------------------
/admin/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Container, Navbar, Nav, NavDropdown} from "react-bootstrap";
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | import "./styles.css"
 5 | import DateToday from '../DateToday/DateToday';
 6 | import {Logout } from '@mui/icons-material';
 7 | import SideBar from "../SideBar/SideBar"
 8 | import { useNavigate } from 'react-router-dom'
 9 | import { useDispatch} from "react-redux"
10 | import { logout} from "../../redux/login/loginSlice"
11 | 
12 | 
13 | function NavBar() {
14 |   const dispatch = useDispatch()
15 |   const navigate = useNavigate()
16 | 
17 |   const handleLogout = ()=>{
18 |     dispatch(logout('Logged out Successfully'))
19 |     navigate("/signin")
20 | 
21 |   }
22 |   const {result} = JSON.parse(localStorage.getItem("admin"))
23 |     return (
24 |         <div>
25 |             <Navbar className='navbar' expand="lg">
26 |               <SideBar />         
27 |     <Container>    
28 |     <Navbar.Toggle aria-controls="basic-navbar-nav" className='ml-auto'   />
29 |     <Navbar.Collapse id="basic-navbar-nav" className='ml-auto'>
30 |       <Nav className="ml-auto flex items-center pr-5 mr-5">
31 |         <NavDropdown title={`${result.fullname}         `} id="basic-nav-dropdown">
32 |         <NavDropdown.Item >  <DateToday/> </NavDropdown.Item>
33 |           <NavDropdown.Item onClick={handleLogout}> <Logout />  Logout </NavDropdown.Item>
34 |         </NavDropdown>
35 |       </Nav>
36 |     </Navbar.Collapse>
37 |   </Container>  
38 | </Navbar>
39 | 
40 |         </div>
41 |     )
42 | }
43 | 
44 | export default NavBar
45 | 


--------------------------------------------------------------------------------
/client-hr/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Container, Navbar, Nav, NavDropdown} from "react-bootstrap";
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | import "./styles.css"
 5 | import DateToday from '../DateToday/DateToday';
 6 | import {Logout,} from '@mui/icons-material';
 7 | import SideBar from "../SideBar/SideBar"
 8 | import { useNavigate } from 'react-router-dom'
 9 | import {useSelector, useDispatch} from "react-redux"
10 | import { logout} from "../../redux/login/loginSlice"
11 | import { final } from '../../redux/hr/hrSlice';
12 | 
13 | 
14 | function NavBar() {
15 |   const dispatch = useDispatch()
16 |   const navigate = useNavigate()
17 | 
18 |   const handleLogout = ()=>{
19 |     dispatch(final())
20 |     dispatch(logout('Logged out Successfully'))
21 |     navigate("/signin")
22 | 
23 |   }
24 |   const {data} = useSelector(state=> state.hr)
25 | 
26 |     return (
27 |         <div>
28 |             <Navbar className='navbar' expand="lg">
29 |               <SideBar />
30 |            
31 |   <Container>    
32 |     <Navbar.Toggle aria-controls="basic-navbar-nav" className='ml-auto'   />
33 |     <Navbar.Collapse id="basic-navbar-nav" className='ml-auto'>
34 |     <Nav className="md:ml-auto flex items-end pr-5 mr-5">
35 |         <NavDropdown title={data.fullname} id="basic-nav-dropdown">
36 |         <NavDropdown.Item >  <DateToday/> </NavDropdown.Item>
37 |           <NavDropdown.Item  >   </NavDropdown.Item>
38 |           <NavDropdown.Item onClick={handleLogout}> <Logout />  Logout </NavDropdown.Item>
39 |         </NavDropdown>
40 |       </Nav>
41 |     </Navbar.Collapse>
42 |   </Container>
43 | </Navbar>
44 | 
45 |         </div>
46 |     )
47 | }
48 | 
49 | export default NavBar
50 | 


--------------------------------------------------------------------------------
/client/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Container, Navbar, Nav, NavDropdown} from "react-bootstrap";
 3 | import 'bootstrap/dist/css/bootstrap.min.css';
 4 | import "./styles.css"
 5 | import DateToday from '../DateToday/DateToday';
 6 | import {Logout,Person} from '@mui/icons-material';
 7 | import SideBar from "../SideBar/SideBar"
 8 | import { useNavigate } from 'react-router-dom'
 9 | import {useSelector, useDispatch} from "react-redux"
10 | import { logout} from "../../redux/login/loginSlice"
11 | import {final} from "../../redux/employee/employeeSlice"
12 | import Avatar from '@mui/material/Avatar';
13 | 
14 | 
15 | function NavBar() {
16 |   const dispatch = useDispatch()
17 |   const navigate = useNavigate()
18 |   const handleLogout = ()=>{
19 |     dispatch(final())
20 |     dispatch(logout('Logged out Successfully'))
21 |     navigate("/signin")
22 | 
23 |   }
24 |   const {data} = useSelector(state=> state.employee)
25 |     return (
26 |         <div>
27 |             <Navbar className='navbar' expand="lg">
28 |               <SideBar />
29 |            
30 |   <Container>    
31 |     <Navbar.Toggle aria-controls="basic-navbar-nav" className='ml-auto'   />
32 |     <Navbar.Collapse id="basic-navbar-nav" className='ml-auto'>
33 |     <Nav className="ml-auto flex items-center pr-5 mr-5">
34 |         <Nav.Link> {data?.selectedFile && <Avatar sx={{ width: 24, height: 24 }} src={data?.selectedFile} alt="profile-face" />  } </Nav.Link>
35 |         <NavDropdown title={data.fullname} id="basic-nav-dropdown">
36 |         <NavDropdown.Item >  <DateToday/> </NavDropdown.Item>
37 |           <NavDropdown.Item onClick={()=> {navigate("/profile")}} > <Person />  Profile </NavDropdown.Item>
38 |           <NavDropdown.Item onClick={handleLogout}> <Logout />  Logout </NavDropdown.Item>
39 |         </NavDropdown>
40 |       </Nav>
41 |     </Navbar.Collapse>
42 |   </Container>
43 | </Navbar>
44 | 
45 |         </div>
46 |     )
47 | }
48 | 
49 | export default NavBar
50 | 


--------------------------------------------------------------------------------
/admin/src/components/NameCard/NameCard.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import "./styles.css"
 3 | import {RiComputerFill} from "react-icons/ri";
 4 | import {FaUserAlt} from "react-icons/fa"
 5 | import { returnAsset} from "../../api/api"
 6 | import Swal from 'sweetalert2';
 7 | function NameCard( {fullname, empID, desigination, img, cardID, type,secondName,secondCode,  button, assetId }) {
 8 | 
 9 | 
10 |   const handleReturn = (assetId)=>{
11 |     Swal.fire({
12 |         text: 'Are you sure want return '+secondName+' from '+empID +'?',
13 |         showDenyButton: true,
14 |         showCancelButton: true,
15 |         confirmButtonText: 'Save',
16 |         denyButtonText: `Don't save`,
17 |       }).then((result) => {
18 |         /* Read more about isConfirmed, isDenied below */
19 |         if (result.isConfirmed) {
20 |           returnAsset(assetId).then(res=>  Swal.fire('Saved!', '', 'success'))
21 |           .catch(err=> Swal.fire('not save!', '', 'error'))
22 |           
23 |         } else if (result.isDenied) {
24 |           Swal.fire('Changes not saved', '', 'info')
25 |         }
26 |       })
27 | }
28 |   return <div className='flex justify-space nameCard' >
29 |     <div className='flex justify-center items-center mx-auto my-auto p5 ml-auto'>
30 |       {type ? <RiComputerFill className='mx-auto text-4xl text-fourth'/>  :
31 |      <FaUserAlt className='mx-auto text-4xl text-fourth'/>  }
32 |     </div>
33 |     <div className='flex flex-col pl-4 text-ellipsis'> 
34 |         <h6 className=' font-bold text-base'> {fullname} </h6>
35 |         <h6 className='font-semibold text-sm'> {empID}</h6>
36 |         <p>{secondName} </p>
37 |         <p>{secondCode} </p>
38 |         <p className='font-semibold text-sm'> {desigination}</p>
39 |         {button &&   <div className='flex justify-end'>
40 |            <div className='button-sm-1' onClick={()=>handleReturn(assetId)}>Return</div> 
41 |            </div>}
42 | 
43 |     </div>
44 |   </div>;
45 | }
46 | 
47 | export default NameCard;
48 |     


--------------------------------------------------------------------------------
/admin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "admin",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.7.1",
 7 |     "@emotion/styled": "^11.6.0",
 8 |     "@fortawesome/fontawesome-svg-core": "^1.2.36",
 9 |     "@fortawesome/free-solid-svg-icons": "^5.15.4",
10 |     "@mui/icons-material": "^5.2.5",
11 |     "@mui/material": "^5.2.7",
12 |     "@mui/styled-engine-sc": "^5.1.0",
13 |     "@reduxjs/toolkit": "^1.7.1",
14 |     "@testing-library/jest-dom": "^5.16.1",
15 |     "@testing-library/react": "^12.1.2",
16 |     "@testing-library/user-event": "^13.5.0",
17 |     "axios": "^0.24.0",
18 |     "bootstrap": "^5.1.3",
19 |     "formik": "^2.2.9",
20 |     "jwt-decode": "^3.1.2",
21 |     "moment": "^2.29.1",
22 |     "react": "^17.0.2",
23 |     "react-bootstrap": "^2.0.4",
24 |     "react-dom": "^17.0.2",
25 |     "react-icons": "^4.3.1",
26 |     "react-live-clock": "^5.6.1",
27 |     "react-pro-sidebar": "^0.7.1",
28 |     "react-redux": "^7.2.6",
29 |     "react-router-dom": "^6.2.1",
30 |     "react-scripts": "5.0.0",
31 |     "styled-components": "^5.3.3",
32 |     "sweetalert2": "^11.3.4",
33 |     "web-vitals": "^2.1.2",
34 |     "yup": "^0.32.11"
35 |   },
36 |   "scripts": {
37 |     "start": "set PORT=3002 && react-scripts start",
38 |     "build": "react-scripts build",
39 |     "test": "react-scripts test",
40 |     "eject": "react-scripts eject"
41 |   },
42 |   "eslintConfig": {
43 |     "extends": [
44 |       "react-app",
45 |       "react-app/jest"
46 |     ]
47 |   },
48 |   "browserslist": {
49 |     "production": [
50 |       ">0.2%",
51 |       "not dead",
52 |       "not op_mini all"
53 |     ],
54 |     "development": [
55 |       "last 1 chrome version",
56 |       "last 1 firefox version",
57 |       "last 1 safari version"
58 |     ]
59 |   },
60 |   "devDependencies": {
61 |     "autoprefixer": "^10.4.0",
62 |     "postcss": "^8.4.5",
63 |     "postcss-import": "^14.0.2",
64 |     "tailwindcss": "^3.0.7"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/admin/src/api/api.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | 
 4 | const API = axios.create({ baseURL: 'https://api-hr-stack.xyz' });
 5 | // const API = axios.create({ baseURL: 'http://localhost:4000' });
 6 | export const signIn = (formData) => API.post('/admin/signin', formData);
 7 | export const fetchStats =  () => API.get('/admin/fetchStats');
 8 | export const getPendingTimeSheet= ()=> API.get('/hr/getPendingTimeSheet')
 9 | export const timeSheetApprove=(data)=>API.post('/hr/timeSheetApprove', data)
10 | export const createEvent=(data)=>API.post('/hr/createEvent', data)
11 | export const blockUser=  (id) => API.get("/admin/blockUser?id="+id)
12 | export const unBlockUser = (id)=> API.get('admin/unBlockUser?id='+id)
13 | export const deleteUser = (id)=> API.get('admin/deleteUser?id='+id)
14 | export const addAsset = (data)=> API.post("/admin/addAsset", data)
15 | export const getLeaveRequest=  () => API.get("/getLeaveRequest")
16 | export const activeTickets=  () => API.get("/activeTickets")
17 | export const resolveIssue =(data)=> API.post('/admin/resolveIssue', data)
18 | export const delayIssue =(data)=> API.post('/admin/delayIssue',data)
19 | export const getAssetRequest=  () => API.get("/getAssetRequest")
20 | export const declineAssetReq = (form) => API.post('/admin/declineAssetReq', form)
21 | export const getAllAssets = () => API.get('/admin/getAllAssets')
22 | export const getAllAssetsHolding = ()=>API.get('/admin/getAllAssetsHolding')
23 | export const setAsset = (form)=>API.post('/admin/setAsset', form)
24 | export const createAnnouncement = (form)=>API.post('/hr/createAnnouncement', form)
25 | export const getAllEmployees = ()=> API.get('/admin/getAllEmployees')
26 | export const addProjectTo = (form)=>API.post('/admin/addProject', form)
27 | export const addHolidaysTo = (form)=>API.post('/admin/addHolidays', form)
28 | export const updatePassword = (form)=>API.post('/admin/updatePassword', form)
29 | export const updateAsset = (form)=>API.post('/admin/updateAsset', form)
30 | // todo
31 | export const returnAsset=  (id) => API.get("/admin/returnAsset?id="+id)
32 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/SelfService.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./styles.css"
 3 | import Navbar from "../../components/NavBar/NavBar"
 4 | import {BiTransfer} from "react-icons/bi"
 5 | import {ImExit} from "react-icons/im"
 6 | import {AiFillCar} from "react-icons/ai"
 7 | import {FaFileInvoiceDollar} from "react-icons/fa"
 8 | import {MdDevices, MdManageAccounts} from "react-icons/md"
 9 | import { useNavigate} from 'react-router-dom'
10 | 
11 | 
12 | function SelfService() {
13 |     const navigate = useNavigate()
14 |     return (
15 |         <div>
16 |             <div className='selfService'>
17 |                 <div className='m-auto selfServicesCard'>
18 |                 <div onClick={()=> {navigate("/selfservice/separation")}} className='button-4  sm:w-full xs:w-full md:w-5/12 '> <ImExit className='mx-auto text-4xl text-fourth'/>  <p >  Seperation </p></div>
19 |                 <div onClick={()=> {navigate("/selfservice/transfer")}} className='button-4  sm:w-full xs:w-full md:w-5/12 '> <BiTransfer className='mx-auto text-4xl text-fourth'/> <p >  Transfer </p></div>
20 |                 <div onClick={()=> {navigate("/selfservice/viewslip")}} className='button-4 sm:w-full xs:w-full md:w-5/12'> <FaFileInvoiceDollar className='mx-auto text-4xl text-fourth'/><p> View PaySlip </p></div>
21 |                 <div onClick={()=> {navigate("/selfservice/vehicle")}} className='button-4 sm:w-full xs:w-full md:w-5/12'><AiFillCar className='mx-auto text-4xl text-fourth'/> <p >Vehicle Requests </p></div>
22 |                 <div onClick={()=> {navigate("/selfservice/assets")}} className='button-4 sm:w-full xs:w-full md:w-5/12'> <MdDevices className='mx-auto text-4xl text-fourth'/> <p> Assets</p></div>
23 |                 <div onClick={()=> {navigate("/selfservice/all-requests")}} className='button-4 sm:w-full xs:w-full md:w-5/12'><MdManageAccounts className='mx-auto text-4xl text-fourth'/> <p>Manage Request  <small>(for managers)</small></p></div>
24 |                 </div>
25 |             </div>
26 |             <Navbar />
27 |         </div>
28 |     )
29 | }
30 | 
31 | export default SelfService
32 | 


--------------------------------------------------------------------------------
/client/src/pages/Timesheet/Timesheet.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavBar from '../../components/NavBar/NavBar'
 3 | import { Calendar, dateFnsLocalizer, Views   } from 'react-big-calendar'
 4 | import moment from 'moment'
 5 | import format from 'date-fns/format'
 6 | import parse from 'date-fns/parse'
 7 | import startOfWeek from 'date-fns/startOfWeek'
 8 | import getDay from 'date-fns/getDay'
 9 | import enIN from 'date-fns/locale/en-IN'
10 | import "./styles.css"
11 | import "./react-big-calendar.css"
12 | 
13 | 
14 | const allViews = Object.keys(Views).map(k => Views[k])
15 | const locales = {
16 |     'en-IN': enIN,
17 |   }
18 | 
19 | 
20 |   const   events= [
21 |     {
22 |       start: moment().subtract(4, 'days'),
23 |       end: moment().subtract(4, 'days'),
24 |       title: "approved"
25 |     },
26 |     {
27 |       start: moment().subtract(3, 'days'),
28 |       end: moment().subtract(3, 'days'),
29 |       title: "approved"
30 |     },
31 |     {
32 |       start: moment().subtract(2, 'days'),
33 |       end: moment().subtract(2, 'days'),
34 |       title: "approved"
35 |     },
36 |     {
37 |       start: moment().subtract(1, 'days'),
38 |       end: moment().subtract(1, 'days'),
39 |       title: "approved"
40 |     },
41 |     {
42 |       start: moment().toDate(),
43 |       end: moment().toDate(),
44 |       title: "approved",
45 |     } 
46 |     
47 |   ]
48 | 
49 |  const localizer = dateFnsLocalizer({
50 |     format,
51 |     parse,
52 |     startOfWeek,
53 |     getDay,
54 |     locales,
55 |   })
56 | function Timesheet() {
57 |     return (
58 |         <div>
59 |             <div className='timeSheet'>
60 |               <div className='px-4'>
61 | 
62 |               <Calendar
63 |        localizer={localizer}
64 |        views={allViews}
65 |         step={60}
66 |        startAccessor="start"
67 |        defaultView="month"
68 |        events={events}
69 |        defaultDate={new Date()}
70 |        endAccessor="end"
71 |       style={{ height: 500 }}
72 |     />
73 |               </div>
74 |                 </div>
75 |            
76 |             <NavBar />
77 |         </div>
78 |     )
79 | }
80 | 
81 | export default Timesheet
82 | 


--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | * {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     box-sizing: border-box;
10 |     font-family: 'Roboto', sans-serif;
11 | }
12 | body {
13 |   overflow: hidden;
14 | }
15 | .button-1 {
16 |     margin: auto;
17 |   background-color: #3B8FCC;
18 |   border-radius: 8px;
19 |   border-style: none;
20 |   box-sizing: border-box;
21 |   color: #FFFFFF;
22 |   cursor: pointer;
23 |   display: inline-block;
24 |   height: 40px;
25 |   line-height: 20px;
26 |   list-style: none;
27 |   margin: 0;
28 |   outline: none;
29 |   padding: 10px 16px;
30 |   position: relative;
31 |   text-align: center;
32 |   text-decoration: none;
33 |   transition: color 100ms;
34 |   vertical-align: baseline;
35 |   user-select: none;
36 |   -webkit-user-select: none;
37 |   touch-action: manipulation;
38 | }
39 | 
40 | .button-1:hover,
41 | .button-1:focus {
42 |   background-color: #2a77ad;
43 | }
44 | 
45 | .button-2 {
46 |   margin: auto;
47 | background-color: #FDBA22;
48 | border-radius: 8px;
49 | border-style: none;
50 | box-sizing: border-box;
51 | color: #FFFFFF;
52 | cursor: pointer;
53 | display: inline-block;
54 | font-size: 14px;
55 | font-weight: 500;
56 | height: 40px;
57 | line-height: 20px;
58 | list-style: none;
59 | margin: 0;
60 | outline: none;
61 | padding: 10px 16px;
62 | position: relative;
63 | text-align: center;
64 | text-decoration: none;
65 | transition: color 100ms;
66 | vertical-align: baseline;
67 | user-select: none;
68 | -webkit-user-select: none;
69 | touch-action: manipulation;
70 | }
71 | 
72 | .button-2:hover,
73 | .button-2:focus {
74 | background-color: #e9ad21;
75 | }
76 | 
77 | 
78 | .button-4 {
79 |   width: 40%;
80 |   margin: 2px;
81 | background-color: #F8F8F8;
82 | border-radius: 8px;
83 | color: black;
84 | cursor: pointer;
85 | display: inline-block;
86 | padding: 42px 45px;
87 | text-align: center;
88 | text-decoration: none;
89 | transition: color 100ms;
90 | touch-action: manipulation;
91 | }
92 | 
93 | .button-4:hover,
94 | .button-4:focus {
95 | background-color: #e9e7e7;
96 | }


--------------------------------------------------------------------------------
/client/src/pages/SelfService/ManageReq/styles.css:
--------------------------------------------------------------------------------
 1 | .button-groups {
 2 | 
 3 |     display: flex;
 4 |     justify-content: space-evenly;
 5 |     padding: 10px;
 6 |     margin-top: 3%;
 7 |     margin-bottom: 3%;
 8 |     width: 50%;
 9 | }
10 | @media only screen and (max-width: 1400) {
11 |     .button-groups {
12 |         width: 100%;
13 |         margin: auto;
14 |        display: flex;
15 |        flex-direction: column;
16 | 
17 |     }
18 |   }
19 |   .button-5 {
20 |   background-color: #3B8FCC;
21 |   border-radius: 8px;
22 |   border-style: none;
23 |   box-sizing: border-box;
24 |   color: #FFFFFF;
25 |   cursor: pointer;
26 |   outline: none;
27 |   padding: 7px 16px;
28 |   position: relative;
29 |   text-align: center;
30 |   text-decoration: none;
31 |   transition: color 100ms;
32 |   vertical-align: baseline;
33 |   user-select: none;
34 |   -webkit-user-select: none;
35 |   touch-action: manipulation;
36 | }
37 | 
38 | .button-5:hover,
39 | .button-5:focus {
40 |   background-color: #2a77ad;
41 | }
42 | .tableView table {
43 |   border-radius: 15px;
44 | }
45 | .tableView th, td {
46 |   border: 1px solid #cacaca;
47 | }
48 | .tableView tr:hover {
49 |   background-color: #f8f8f8;
50 | }
51 | .button-sm-1 {
52 |   background-color: #3B8FCC;
53 |   border-radius: 8px;
54 |   border-style: none;
55 |   box-sizing: border-box;
56 |   color: #FFFFFF;
57 |   cursor: pointer;
58 |   outline: none;
59 |   padding: 2px 5px;
60 |   position: relative;
61 |   text-align: center;
62 |   text-decoration: none;
63 |   transition: color 100ms;
64 |   vertical-align: baseline;
65 |   user-select: none;
66 |   -webkit-user-select: none;
67 |   touch-action: manipulation;
68 | }
69 | 
70 | .button-sm-1:hover,
71 | .button-sm-1:focus {
72 |   background-color: #2a77ad;
73 | }
74 | .button-sm-2 {
75 |   background-color: #FDBA22;
76 |   border-radius: 8px;
77 |   border-style: none;
78 |   box-sizing: border-box;
79 |   color: #FFFFFF;
80 |   cursor: pointer;
81 |   outline: none;
82 |   padding: 2px 5px;
83 |   position: relative;
84 |   text-align: center;
85 |   text-decoration: none;
86 |   transition: color 100ms;
87 |   vertical-align: baseline;
88 |   user-select: none;
89 |   -webkit-user-select: none;
90 |   touch-action: manipulation;
91 | }
92 | 
93 | .button-sm-2:hover,
94 | .button-sm-2:focus {
95 |   background-color: #e9ad21;
96 | }


--------------------------------------------------------------------------------
/client/src/pages/Home/styles.css:
--------------------------------------------------------------------------------
 1 | .home {
 2 |     height: 100vh;
 3 |     padding-top: 5%;   
 4 |     padding-left: 15%;
 5 |     overflow-y: scroll;
 6 | }
 7 | .cardTop {
 8 |     display: flex;
 9 |     justify-content: space-around;
10 |     align-items: center;
11 |     padding: 20px 50px;
12 |     margin: 0 auto;
13 |     margin-top:3%;
14 |     background-color: #ffffff;
15 |     width: 80%;
16 |     border-radius: 15px;
17 |     border: 2px solid #919191;
18 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
19 | 
20 | }
21 | .cardStarEmployees {
22 |     display: flex;
23 |     flex-direction: column;
24 |     justify-content: space-around;
25 |     align-items: center;
26 |     padding: 20px 50px;
27 |     margin: 0 auto;
28 |     margin-top:3%;
29 |     background-color: #ffffff;
30 |     width: 80%;
31 |     border-radius: 15px;
32 |     border: 2px solid #919191;
33 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
34 | }
35 | .homeCompanyEvents {
36 |     display: flex;
37 |     justify-content: center;
38 |     padding: 10px 5px;
39 |     margin: 0 auto;
40 |     margin-bottom: 100px;
41 | }
42 | .homeEvent {
43 |     display: flex;
44 |     flex-direction: column;
45 |     align-self: auto;
46 |     align-items: center;
47 |     margin: 0 auto;
48 |     margin-top:3%;
49 |     background-color: #ffffff;
50 |     width: 45%;
51 |     border-radius: 15px;
52 |     border: 2px solid #919191;
53 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
54 | }
55 | 
56 | @media only screen and (max-width: 1100px) {
57 |     .cardTop {
58 |       display: block;
59 |       width: 60%;
60 |       align-items: flex-start;
61 |     }
62 |     .cardItem {
63 |         align-items: flex-start;
64 |     }
65 |     .cardStarEmployees {
66 |         display: block;
67 |         width: 60%;
68 |     }
69 |     .starCard {
70 |         display: block;
71 |     }
72 |     .starCard img{
73 |         margin: auto;
74 |     }
75 |     .staricon svg{
76 |         margin:  auto;
77 |     }
78 |     .homeCompanyEvents {
79 |         display: block;
80 |         width: 100%;
81 |     }
82 |     .homeEvent {
83 |         width: 60%;
84 |     }
85 | 
86 |   }
87 |   @media only screen and (max-width: 600px) {
88 |     .cardTop {
89 |       display: block;
90 |       width: 80%;
91 |     }
92 |     .cardItem {
93 |         align-items: flex-start;
94 |     }
95 | 
96 |   }


--------------------------------------------------------------------------------
/client-hr/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client-hr",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@cloudinary/react": "^1.0.0-beta.14",
 7 |     "@cloudinary/url-gen": "^1.4.1",
 8 |     "@emotion/react": "^11.7.1",
 9 |     "@emotion/styled": "^11.6.0",
10 |     "@fortawesome/fontawesome-svg-core": "^1.2.36",
11 |     "@fortawesome/free-solid-svg-icons": "^5.15.4",
12 |     "@mui/icons-material": "^5.2.5",
13 |     "@mui/material": "^5.2.7",
14 |     "@mui/styled-engine-sc": "^5.1.0",
15 |     "@reduxjs/toolkit": "^1.7.1",
16 |     "@testing-library/jest-dom": "^5.16.1",
17 |     "@testing-library/react": "^12.1.2",
18 |     "@testing-library/user-event": "^13.5.0",
19 |     "axios": "^0.24.0",
20 |     "bootstrap": "^5.1.3",
21 |     "date-fns": "^2.28.0",
22 |     "draft-js": "^0.11.7",
23 |     "draftjs-to-html": "^0.9.1",
24 |     "flatpickr": "^4.6.9",
25 |     "formik": "^2.2.9",
26 |     "html-parse-stringify": "^3.0.1",
27 |     "jwt-decode": "^3.1.2",
28 |     "moment": "^2.29.1",
29 |     "react": "^17.0.2",
30 |     "react-big-calendar": "^0.38.2",
31 |     "react-bootstrap": "^2.0.4",
32 |     "react-dom": "^17.0.2",
33 |     "react-draft-wysiwyg": "^1.14.7",
34 |     "react-icons": "^4.3.1",
35 |     "react-live-clock": "^5.6.1",
36 |     "react-moment": "^1.1.1",
37 |     "react-pro-sidebar": "^0.7.1",
38 |     "react-redux": "^7.2.6",
39 |     "react-router-dom": "^6.2.1",
40 |     "react-scripts": "5.0.0",
41 |     "styled-components": "^5.3.3",
42 |     "sweetalert2": "^11.3.4",
43 |     "web-vitals": "^2.1.2",
44 |     "yup": "^0.32.11"
45 |   },
46 |   "scripts": {
47 |     "start": "set PORT=3001 && react-scripts start",
48 |     "build": "react-scripts build",
49 |     "test": "react-scripts test",
50 |     "eject": "react-scripts eject"
51 |   },
52 |   "eslintConfig": {
53 |     "extends": [
54 |       "react-app",
55 |       "react-app/jest"
56 |     ]
57 |   },
58 |   "browserslist": {
59 |     "production": [
60 |       ">0.2%",
61 |       "not dead",
62 |       "not op_mini all"
63 |     ],
64 |     "development": [
65 |       "last 1 chrome version",
66 |       "last 1 firefox version",
67 |       "last 1 safari version"
68 |     ]
69 |   },
70 |   "devDependencies": {
71 |     "autoprefixer": "^10.4.0",
72 |     "postcss": "^8.4.5",
73 |     "postcss-import": "^14.0.2",
74 |     "tailwindcss": "^3.0.7"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/admin/src/pages/Management/ManageReq/styles.css:
--------------------------------------------------------------------------------
 1 | .button-groups {
 2 | 
 3 |     display: flex;
 4 |     justify-content: space-evenly;
 5 |     padding: 10px;
 6 |     margin-top: 1%;
 7 |     margin-bottom: 1%;
 8 |     width: 80%;
 9 | }
10 | .button-groups1 {
11 | 
12 |   justify-content: start !important;
13 | }
14 | @media only screen and (max-width: 1000px) {
15 |     .button-groups {
16 |         margin: 1px auto;
17 |        display: flex;
18 |        flex-direction: column;
19 | 
20 |     }
21 |   }
22 |   .button-5 {
23 |   background-color: #3B8FCC;
24 |   border-radius: 8px;
25 |   border-style: none;
26 |   box-sizing: border-box;
27 |   color: #FFFFFF;
28 |   cursor: pointer;
29 |   outline: none;
30 |   padding: 7px 16px;
31 |   position: relative;
32 |   text-align: center;
33 |   text-decoration: none;
34 |   transition: color 100ms;
35 |   vertical-align: baseline;
36 |   user-select: none;
37 |   -webkit-user-select: none;
38 |   touch-action: manipulation;
39 | }
40 | 
41 | .button-5:hover,
42 | .button-5:focus {
43 |   background-color: #2a77ad;
44 | }
45 | .tableView table {
46 |   border-radius: 15px;
47 | }
48 | .tableView th, td {
49 |   border: 1px solid #cacaca;
50 | }
51 | .tableView tr:hover {
52 |   background-color: #f8f8f8;
53 | }
54 | .button-sm-1 {
55 |   background-color: #3B8FCC;
56 |   border-radius: 8px;
57 |   border-style: none;
58 |   box-sizing: border-box;
59 |   color: #FFFFFF;
60 |   cursor: pointer;
61 |   outline: none;
62 |   padding: 2px 5px;
63 |   position: relative;
64 |   text-align: center;
65 |   text-decoration: none;
66 |   transition: color 100ms;
67 |   vertical-align: baseline;
68 |   user-select: none;
69 |   -webkit-user-select: none;
70 |   touch-action: manipulation;
71 | }
72 | 
73 | .button-sm-1:hover,
74 | .button-sm-1:focus {
75 |   background-color: #2a77ad;
76 | }
77 | .button-sm-2 {
78 |   background-color: #FDBA22;
79 |   border-radius: 8px;
80 |   border-style: none;
81 |   box-sizing: border-box;
82 |   color: #FFFFFF;
83 |   cursor: pointer;
84 |   outline: none;
85 |   padding: 2px 5px;
86 |   position: relative;
87 |   text-align: center;
88 |   text-decoration: none;
89 |   transition: color 100ms;
90 |   vertical-align: baseline;
91 |   user-select: none;
92 |   -webkit-user-select: none;
93 |   touch-action: manipulation;
94 | }
95 | 
96 | .button-sm-2:hover,
97 | .button-sm-2:focus {
98 |   background-color: #e9ad21;
99 | }


--------------------------------------------------------------------------------
/client-hr/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
  2 | @tailwind base;
  3 | @tailwind components;
  4 | @tailwind utilities;
  5 | * {
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     box-sizing: border-box;
  9 |     font-family: 'Roboto', sans-serif;
 10 | }
 11 | body {
 12 |   overflow: hidden;
 13 | }
 14 | .button-1 {
 15 |     margin: auto;
 16 |   background-color: #3B8FCC;
 17 |   border-radius: 8px;
 18 |   border-style: none;
 19 |   box-sizing: border-box;
 20 |   color: #FFFFFF;
 21 |   cursor: pointer;
 22 |   display: inline-block;
 23 |   height: 40px;
 24 |   line-height: 20px;
 25 |   list-style: none;
 26 |   margin: 0;
 27 |   outline: none;
 28 |   padding: 10px 16px;
 29 |   position: relative;
 30 |   text-align: center;
 31 |   text-decoration: none;
 32 |   transition: color 100ms;
 33 |   vertical-align: baseline;
 34 |   user-select: none;
 35 |   -webkit-user-select: none;
 36 |   touch-action: manipulation;
 37 | }
 38 | 
 39 | .button-1:hover,
 40 | .button-1:focus {
 41 |   background-color: #2a77ad;
 42 | }
 43 | 
 44 | .button-2 {
 45 |   margin: auto;
 46 | background-color: #FDBA22;
 47 | border-radius: 8px;
 48 | border-style: none;
 49 | box-sizing: border-box;
 50 | color: #FFFFFF;
 51 | cursor: pointer;
 52 | display: inline-block;
 53 | font-size: 14px;
 54 | font-weight: 500;
 55 | height: 40px;
 56 | line-height: 20px;
 57 | list-style: none;
 58 | margin: 0;
 59 | outline: none;
 60 | padding: 10px 16px;
 61 | position: relative;
 62 | text-align: center;
 63 | text-decoration: none;
 64 | transition: color 100ms;
 65 | vertical-align: baseline;
 66 | user-select: none;
 67 | -webkit-user-select: none;
 68 | touch-action: manipulation;
 69 | }
 70 | 
 71 | .button-2:hover,
 72 | .button-2:focus {
 73 | background-color: #e9ad21;
 74 | }
 75 | 
 76 | 
 77 | .button-4 {
 78 |   width: 40%;
 79 |   margin: 2px;
 80 | background-color: #F8F8F8;
 81 | border-radius: 8px;
 82 | color: black;
 83 | cursor: pointer;
 84 | display: inline-block;
 85 | padding: 42px 45px;
 86 | text-align: center;
 87 | text-decoration: none;
 88 | transition: color 100ms;
 89 | touch-action: manipulation;
 90 | }
 91 | 
 92 | .button-4:hover,
 93 | .button-4:focus {
 94 | background-color: #e9e7e7;
 95 | }
 96 | 
 97 | @media only screen and (max-width: 1000px) {
 98 |   body {
 99 |     display: none;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | .pnpm-debug.log*
  9 | 
 10 | # Diagnostic reports (https://nodejs.org/api/report.html)
 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 12 | 
 13 | # Runtime data
 14 | pids
 15 | *.pid
 16 | *.seed
 17 | *.pid.lock
 18 | 
 19 | # Directory for instrumented libs generated by jscoverage/JSCover
 20 | lib-cov
 21 | 
 22 | # Coverage directory used by tools like istanbul
 23 | coverage
 24 | *.lcov
 25 | 
 26 | # nyc test coverage
 27 | .nyc_output
 28 | 
 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 30 | .grunt
 31 | 
 32 | # Bower dependency directory (https://bower.io/)
 33 | bower_components
 34 | 
 35 | # node-waf configuration
 36 | .lock-wscript
 37 | 
 38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 39 | build/Release
 40 | 
 41 | # Dependency directories
 42 | node_modules/
 43 | jspm_packages/
 44 | 
 45 | # Snowpack dependency directory (https://snowpack.dev/)
 46 | web_modules/
 47 | 
 48 | # TypeScript cache
 49 | *.tsbuildinfo
 50 | 
 51 | # Optional npm cache directory
 52 | .npm
 53 | 
 54 | # Optional eslint cache
 55 | .eslintcache
 56 | 
 57 | # Microbundle cache
 58 | .rpt2_cache/
 59 | .rts2_cache_cjs/
 60 | .rts2_cache_es/
 61 | .rts2_cache_umd/
 62 | 
 63 | # Optional REPL history
 64 | .node_repl_history
 65 | 
 66 | # Output of 'npm pack'
 67 | *.tgz
 68 | 
 69 | # Yarn Integrity file
 70 | .yarn-integrity
 71 | 
 72 | # dotenv environment variables file
 73 | .env
 74 | .env.test
 75 | .env.production
 76 | 
 77 | # parcel-bundler cache (https://parceljs.org/)
 78 | .cache
 79 | .parcel-cache
 80 | 
 81 | # Next.js build output
 82 | .next
 83 | out
 84 | 
 85 | # Nuxt.js build / generate output
 86 | .nuxt
 87 | dist
 88 | 
 89 | # Gatsby files
 90 | .cache/
 91 | # Comment in the public line in if your project uses Gatsby and not Next.js
 92 | # https://nextjs.org/blog/next-9-1#public-directory-support
 93 | # public
 94 | 
 95 | # vuepress build output
 96 | .vuepress/dist
 97 | 
 98 | # Serverless directories
 99 | .serverless/
100 | 
101 | # FuseBox cache
102 | .fusebox/
103 | 
104 | # DynamoDB Local files
105 | .dynamodb/
106 | 
107 | # TernJS port file
108 | .tern-port
109 | 
110 | # Stores VSCode versions used for testing VSCode extensions
111 | .vscode-test
112 | 
113 | # yarn v2
114 | .yarn/cache
115 | .yarn/unplugged
116 | .yarn/build-state.yml
117 | .yarn/install-state.gz
118 | .pnp.*


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@cloudinary/react": "^1.0.1",
 7 |     "@cloudinary/url-gen": "^1.5.1",
 8 |     "@emotion/react": "^11.7.1",
 9 |     "@emotion/styled": "^11.6.0",
10 |     "@fortawesome/fontawesome-svg-core": "^1.2.36",
11 |     "@fortawesome/free-solid-svg-icons": "^5.15.4",
12 |     "@mui/icons-material": "^5.2.5",
13 |     "@mui/material": "^5.2.7",
14 |     "@mui/styled-engine-sc": "^5.1.0",
15 |     "@reduxjs/toolkit": "^1.7.1",
16 |     "@testing-library/jest-dom": "^5.16.1",
17 |     "@testing-library/react": "^12.1.2",
18 |     "@testing-library/user-event": "^13.5.0",
19 |     "axios": "^0.24.0",
20 |     "bootstrap": "^5.1.3",
21 |     "date-fns": "^2.28.0",
22 |     "draft-js": "^0.11.7",
23 |     "draftjs-to-html": "^0.9.1",
24 |     "formik": "^2.2.9",
25 |     "html-parse-stringify": "^3.0.1",
26 |     "html2canvas": "^1.4.1",
27 |     "jspdf": "^2.5.1",
28 |     "jwt-decode": "^3.1.2",
29 |     "moment": "^2.29.1",
30 |     "npm": "^8.4.1",
31 |     "react": "^17.0.2",
32 |     "react-big-calendar": "^0.38.9",
33 |     "react-bootstrap": "^2.1.0",
34 |     "react-cropper": "^2.1.8",
35 |     "react-dom": "^17.0.2",
36 |     "react-draft-wysiwyg": "^1.14.7",
37 |     "react-icons": "^4.3.1",
38 |     "react-live-clock": "^5.6.1",
39 |     "react-pro-sidebar": "^0.7.1",
40 |     "react-redux": "^7.2.6",
41 |     "react-router-dom": "^6.2.1",
42 |     "react-scripts": "5.0.0",
43 |     "react-youtube": "^7.14.0",
44 |     "styled-components": "^5.3.3",
45 |     "sweetalert2": "^11.3.4",
46 |     "web-vitals": "^2.1.2",
47 |     "weekday": "^3.0.1",
48 |     "yup": "^0.32.11"
49 |   },
50 |   "scripts": {
51 |     "start": "react-scripts start",
52 |     "build": "react-scripts build",
53 |     "test": "react-scripts test",
54 |     "eject": "react-scripts eject"
55 |   },
56 |   "eslintConfig": {
57 |     "extends": [
58 |       "react-app",
59 |       "react-app/jest"
60 |     ]
61 |   },
62 |   "browserslist": {
63 |     "production": [
64 |       ">0.2%",
65 |       "not dead",
66 |       "not op_mini all"
67 |     ],
68 |     "development": [
69 |       "last 1 chrome version",
70 |       "last 1 firefox version",
71 |       "last 1 safari version"
72 |     ]
73 |   },
74 |   "devDependencies": {
75 |     "autoprefixer": "^10.4.0",
76 |     "postcss": "^8.4.5",
77 |     "postcss-import": "^14.0.2",
78 |     "tailwindcss": "^3.0.7"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/admin/src/components/SideBar/SideBar.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import {
 4 |   ProSidebar,
 5 |   Menu,
 6 |   MenuItem,
 7 |   SidebarHeader,
 8 |   SidebarContent,
 9 | } from "react-pro-sidebar";
10 | 
11 | //import icons from react icons
12 | import { FaUsers, FaHandPointer } from "react-icons/fa";
13 | import { FiHome, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
14 | 
15 | import { MdAddToQueue } from "react-icons/md";
16 | import Stack from "../NavBar/Stack-logo.svg"
17 | import "react-pro-sidebar/dist/css/styles.css";
18 | import "./styles.css";
19 | import { useNavigate } from 'react-router-dom'
20 | 
21 | 
22 | const SideBar = () => {
23 |     const navigate = useNavigate()
24 |     
25 |     const [menuCollapse, setMenuCollapse] = useState(false)
26 | 
27 | 
28 |     //create a custom function that will change menucollapse state from false to true and true to false
29 |   const menuIconClick = () => {
30 |     //condition checking to change state from true to false and vice versa
31 |     
32 |     menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
33 | 
34 |   };
35 | 
36 |   return (
37 |     <>
38 |       <div id="header">
39 |           {/* collapsed props to change menu size using menucollapse state */}
40 |         <ProSidebar collapsed={menuCollapse}>
41 |           <SidebarHeader>
42 |           <div className="logoSection">
43 |              <div className="logoTopSec">
44 |                  {!menuCollapse ? <h5> HR Stack</h5> 
45 |                  : <> <h5> HR </h5> <img className="logoImage" src={Stack} height="20px" width="20px" alt="logo" /> </>}
46 | 
47 |              </div>
48 |              
49 |             </div>
50 |             <div className="closemenu" onClick={menuIconClick}>
51 |                 {/* changing menu collapse icon on click */}
52 |               {menuCollapse ? (
53 |                 <FiArrowRightCircle/>
54 |               ) : (
55 |                 <FiArrowLeftCircle/>
56 |               )}
57 |               
58 |             </div>
59 |           </SidebarHeader>
60 |           <SidebarContent>
61 |             <Menu iconShape="">
62 |             
63 |              <MenuItem  className="sideBarItem"  onClick={()=> {navigate("/")}} icon={<FiHome />}>  <p>Home</p> </MenuItem> 
64 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/management")}} icon={<FaHandPointer />}>  <p>Managements </p> </MenuItem>
65 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/manage-assets")}} icon={<MdAddToQueue />}>  <p>Assets  </p> </MenuItem>
66 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/manage-users")}} icon={<FaUsers />}>  <p>Employees </p> </MenuItem>
67 |               
68 |             </Menu>
69 |           </SidebarContent>
70 |         </ProSidebar>
71 |       </div>
72 |     </>
73 |   );
74 | };
75 | 
76 | export default SideBar;


--------------------------------------------------------------------------------
/client/src/components/SideBar/styles.css:
--------------------------------------------------------------------------------
  1 | .sideBarItem:hover {
  2 |     background-color: #156da8;
  3 | }
  4 | .sideBarItem p {
  5 |     margin-top: 15px;
  6 |     color: #fff;
  7 | }
  8 | .iconGroup {
  9 |     display: flex;
 10 |     justify-content: center;
 11 | }
 12 | .logoSection {
 13 |     margin: 0.1px auto;
 14 |     display: flex;
 15 |     padding: 10px 20px;
 16 |     align-items: center;
 17 |     justify-content: center;
 18 | }
 19 | .logoTopSec {
 20 |     display: flex;
 21 | }
 22 | .logoTopSec h5 {
 23 |     font-weight: 900;
 24 |     color: #278acb
 25 | }
 26 | .logo {
 27 |     color:#278acb;
 28 |     font-size: medium;
 29 |     font-weight: 900;
 30 | }
 31 | .logoImage {
 32 |     fill: #278acb;
 33 | }
 34 | #header {
 35 |     margin-right: 100px;
 36 |     position: absolute;
 37 |     top:0;
 38 |     width: 220px;
 39 |   }
 40 |   #header .pro-sidebar {
 41 |     height: 100vh;
 42 |   }
 43 |   #header .closemenu {
 44 |     color: #4b4848;
 45 |     position: absolute;
 46 |     right: 5px;
 47 |     z-index: 9999;
 48 |     line-height: 20px;
 49 |     border-radius: 50%;
 50 |     font-weight: bold;
 51 |     font-size: 22px;
 52 |     top: 40px;
 53 |     cursor: pointer;
 54 |   }
 55 |   #header .pro-sidebar {
 56 |     width: 100%;
 57 |     min-width: 100%;
 58 |   }
 59 |   #header .pro-sidebar.collapsed {
 60 |     width: 80px;
 61 |     min-width: 80px;
 62 |   }
 63 |   #header .pro-sidebar-inner {
 64 |     background-color: white;
 65 |     box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
 66 |   }
 67 |   #header .pro-sidebar-inner .pro-sidebar-layout {
 68 |     overflow-y: hidden;
 69 |   }
 70 |   #header .pro-sidebar-inner .pro-sidebar-layout .logotext  {
 71 |     font-size: 20px;
 72 |     padding: 0 20px;
 73 |     color: #000;
 74 |     font-weight: bold;
 75 |   }
 76 |   #header .pro-sidebar-inner .pro-sidebar-layout ul {
 77 |     padding: 0 5px;
 78 |   }
 79 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
 80 |     background-color: #278acb;
 81 |     margin: 1px 0px;
 82 |     font-weight: bold;
 83 |   }
 84 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
 85 |     background-color: #278acb;
 86 |     height:20px;
 87 |     color: rgb(255, 255, 255);
 88 |     border-radius: 3px;
 89 |   }
 90 |  .pro-inner-item:hover .pro-icon-wrapper:hover {
 91 |     background-color: #e9ad21;
 92 |     height:20px;
 93 |     color: rgb(255, 255, 255);
 94 |     border-radius: 3px;
 95 |   }
 96 |   
 97 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
 98 |    
 99 |     color: rgb(255, 255, 255);
100 |   }
101 |   #header .pro-sidebar-inner .pro-sidebar-layout .active {
102 |     background-image: #FDBA22
103 |   }
104 |   #header .logo {
105 |     padding: 20px;
106 |   }
107 |   
108 |   @media only screen and (max-width: 720px) {
109 |     html {
110 |       overflow: hidden;
111 |     }
112 |   }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HR Management System and Timesheet
 2 | :purple_square: [Employee Portal](https://hr-stack.xyz)
 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/c215a0b7-64ca-49d6-862b-3633c953dad9/deploy-status)](https://app.netlify.com/sites/hr-stack/deploys)
 4 | 
 5 | ## The backend server is turned off because huge amount billing
 6 | 
 7 | :yellow_circle: Employee credentials
 8 | 
 9 | username:ajmaln73@gmail.com
10 | 
11 | password: password
12 | 
13 | 
14 | :purple_square: [Management Portal](https://management.hr-stack.xyz) 
15 | [![Netlify Status](https://api.netlify.com/api/v1/badges/33f2d74e-3878-4660-9c95-48a695b78a44/deploy-status)](https://app.netlify.com/sites/management-hr-stack/deploys)  (Desktop Version only)
16 | 
17 | :yellow_circle: HR credentials
18 | 
19 | username:ajmaln73@gmail.com
20 | 
21 | password: password
22 | 
23 | :purple_square: [Admin Portal](https://admin.hr-stack.xyz) 
24 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3709b5ce-41cf-439d-901a-2bece9aac00a/deploy-status)](https://app.netlify.com/sites/admin-hr-stack/deploys) (Desktop Version only)
25 | 
26 | ## This is a showcase repo for this project, For the security reason orignal repo in private, For viewing whole project send me a mail to : ajmaln73@gmail.com
27 | 
28 | - This is a  minimal version of Human Resources Management System (HRMS) Which is an integral part of ERP. The importance of employee management is crucial for any company. A HRMS increases employee engagement. Throughout this app Technical and facility related issues are  requested and resolved.
29 | This app dealing three types of User enities Employee, HR, Web Admin[Supoort Team]
30 | 
31 | # HR 
32 | - This module is for create Employee and  process onboarding. This web app takes care of employee attendance, assets distribution, travel. App takes care of overall development of the employee through sharing development of resources, learning and performance management.
33 | 
34 | # Helpdesk /Web admin
35 | - This is module is for resolving a Technical glitch encounter by employee which is in a prespective of Technical support.
36 | Can address any kind of Tech issues. 
37 | 
38 | 
39 | 
40 | ### Employee profile View
41 | ![image](https://user-images.githubusercontent.com/84835379/150962266-5960ae73-e19b-412d-80ff-54fbd23df3a8.png)
42 | 
43 | ### Employee Home View
44 | ![image](https://user-images.githubusercontent.com/84835379/150962376-e5e4c7e0-6be8-4d34-aa10-d46b91998ed6.png)
45 | 
46 | ### Employee Login
47 | ![image](https://user-images.githubusercontent.com/84835379/150962481-d0318951-8783-42b2-858d-7944ec04a444.png)
48 | 
49 | ### Employee TimeSheet
50 | ![image](https://user-images.githubusercontent.com/84835379/150962650-352b997f-e82d-41b1-9faa-ebe77b18785a.png)
51 | 
52 | ### Employee Self Sercices
53 | ![image](https://user-images.githubusercontent.com/84835379/150962749-39235b03-69aa-49c6-b3ed-211173aecd69.png)
54 | 
55 | ### Employee Performance insights
56 | ![image](https://user-images.githubusercontent.com/84835379/150962887-40d7730d-5923-4378-8ee4-07fa07fa495d.png)
57 | 
58 | 


--------------------------------------------------------------------------------
/admin/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
  2 | @tailwind base;
  3 | @tailwind components;
  4 | @tailwind utilities;
  5 | * {
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     box-sizing: border-box;
  9 |     font-family: 'Roboto', sans-serif;
 10 | }
 11 | body {
 12 |   overflow: hidden;
 13 | }
 14 | .button-1 {
 15 |     margin: auto;
 16 |   background-color: #3B8FCC;
 17 |   border-radius: 8px;
 18 |   border-style: none;
 19 |   box-sizing: border-box;
 20 |   color: #FFFFFF;
 21 |   cursor: pointer;
 22 |   display: inline-block;
 23 |   height: 40px;
 24 |   line-height: 20px;
 25 |   list-style: none;
 26 |   margin: 0;
 27 |   outline: none;
 28 |   padding: 10px 16px;
 29 |   position: relative;
 30 |   text-align: center;
 31 |   text-decoration: none;
 32 |   transition: color 100ms;
 33 |   vertical-align: baseline;
 34 |   user-select: none;
 35 |   -webkit-user-select: none;
 36 |   touch-action: manipulation;
 37 | }
 38 | 
 39 | .button-1:hover,
 40 | .button-1:focus {
 41 |   background-color: #2a77ad;
 42 | }
 43 | 
 44 | .button-2 {
 45 |   margin: auto;
 46 | background-color: #FDBA22;
 47 | border-radius: 8px;
 48 | border-style: none;
 49 | box-sizing: border-box;
 50 | color: #FFFFFF;
 51 | cursor: pointer;
 52 | display: inline-block;
 53 | font-size: 14px;
 54 | font-weight: 500;
 55 | height: 40px;
 56 | line-height: 20px;
 57 | list-style: none;
 58 | margin: 0;
 59 | outline: none;
 60 | padding: 10px 16px;
 61 | position: relative;
 62 | text-align: center;
 63 | text-decoration: none;
 64 | transition: color 100ms;
 65 | vertical-align: baseline;
 66 | user-select: none;
 67 | -webkit-user-select: none;
 68 | touch-action: manipulation;
 69 | }
 70 | 
 71 | .button-2:hover,
 72 | .button-2:focus {
 73 | background-color: #e9ad21;
 74 | }
 75 | 
 76 | 
 77 | .button-4 {
 78 |   width: 40%;
 79 |   margin: 2px;
 80 | background-color: #F8F8F8;
 81 | border-radius: 8px;
 82 | color: black;
 83 | cursor: pointer;
 84 | display: inline-block;
 85 | padding: 42px 45px;
 86 | text-align: center;
 87 | text-decoration: none;
 88 | transition: color 100ms;
 89 | touch-action: manipulation;
 90 | }
 91 | 
 92 | .button-4:hover,
 93 | .button-4:focus {
 94 | background-color: #e9e7e7;
 95 | }
 96 | 
 97 | .button-sm-4 {
 98 |   background-color: #ce3737;
 99 |   border-radius: 8px;
100 |   border-style: none;
101 |   box-sizing: border-box;
102 |   color: #FFFFFF;
103 |   cursor: pointer;
104 |   outline: none;
105 |   padding: 2px 5px;
106 |   position: relative;
107 |   text-align: center;
108 |   text-decoration: none;
109 |   transition: color 100ms;
110 |   vertical-align: baseline;
111 |   user-select: none;
112 |   -webkit-user-select: none;
113 |   touch-action: manipulation;
114 | }
115 | 
116 | .button-sm-4:hover,
117 | .button-sm-4:focus {
118 |   background-color: #bd3131;
119 | }
120 | @media only screen and (max-width: 1000px) {
121 |   body {
122 |     display: none;
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/admin/src/pages/HomeAdmin/styles.css:
--------------------------------------------------------------------------------
  1 | .home {
  2 |     height: 100vh;
  3 |     padding-top: 5%;   
  4 |     padding-left: 15%;
  5 |     overflow-y: scroll;
  6 | }
  7 | .cardTopAdmin {
  8 |     display: flex;
  9 |     justify-content: space-around;
 10 |     flex-wrap: wrap;
 11 |     align-items: center;
 12 |     padding: 20px 50px;
 13 |     margin: 0 auto;
 14 |     margin-top:1%;
 15 |     background-color: #ffffff;
 16 |     width: 80%;
 17 |     border-radius: 15px;
 18 |     border: 1px solid #919191;
 19 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 20 | }
 21 | .cardItem {
 22 |     margin: 3% 5%;
 23 | }
 24 | .hrCards {
 25 |     display: flex;
 26 |     justify-content: space-around;
 27 |     align-items: center;
 28 |     padding: 20px 50px;
 29 |     margin-top:3%;
 30 |     background-color: #ffffff;
 31 |     border-radius: 15px;
 32 |     border: 1px solid #919191;
 33 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 34 |     transition: all 200ms ease-in;
 35 | }
 36 | .hrCards:hover  {
 37 |     translate: 2px ;
 38 |     background-color: #f3f3f3;
 39 | }
 40 | .cardStarEmployees {
 41 |     display: flex;
 42 |     flex-direction: column;
 43 |     justify-content: space-around;
 44 |     align-items: center;
 45 |     padding: 20px 50px;
 46 |     margin: 0 auto;
 47 |     margin-top:3%;
 48 |     background-color: #ffffff;
 49 |     width: 80%;
 50 |     border-radius: 15px;
 51 |     border: 2px solid #919191;
 52 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 53 | }
 54 | .homeCompanyEvents {
 55 |     display: flex;
 56 |     justify-content: center;
 57 |     padding: 10px 5px;
 58 |     margin: 0 auto;
 59 |     margin-bottom: 100px;
 60 | }
 61 | .homeEvent {
 62 |     display: flex;
 63 |     flex-direction: column;
 64 |     align-self: auto;
 65 |     align-items: center;
 66 |     margin: 0 auto;
 67 |     margin-top:3%;
 68 |     background-color: #ffffff;
 69 |     width: 45%;
 70 |     border-radius: 15px;
 71 |     border: 2px solid #919191;
 72 |     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 73 | }
 74 | 
 75 | @media only screen and (max-width: 1100px) {
 76 |     .cardTopHR {
 77 |       display: block;
 78 |       width: 60%;
 79 |       align-items: flex-start;
 80 |     }
 81 |     .cardItem {
 82 |         align-items: flex-start;
 83 |     }
 84 |     .cardStarEmployees {
 85 |         display: block;
 86 |         width: 60%;
 87 |     }
 88 |     .starCard {
 89 |         display: block;
 90 |     }
 91 |     .starCard img{
 92 |         margin: auto;
 93 |     }
 94 |     .staricon svg{
 95 |         margin:  auto;
 96 |     }
 97 |     .homeCompanyEvents {
 98 |         display: block;
 99 |         width: 100%;
100 |     }
101 |     .homeEvent {
102 |         width: 60%;
103 |     }
104 | 
105 |   }
106 |   @media only screen and (max-width: 600px) {
107 |     .cardTopHR {
108 |       display: block;
109 |       width: 80%;
110 |     }
111 |     .cardItem {
112 |         align-items: flex-start;
113 |     }
114 | 
115 |   }


--------------------------------------------------------------------------------
/client/employee.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const API = axios.create({ baseURL: 'http://localhost:4000' });
 4 | 
 5 | 
 6 | export const signIn = (formData) => API.post('/signin', formData);
 7 | export const fetchEmployeeData = (id) => API.get('/fetchEmployeeData?id='+id);
 8 | export const getTimeSheet = (id)=> API.get("/get-timesheet?id="+id)
 9 | export const timeIn = (id)=> API.post("/timeIn", id)
10 | export const timeOut = (id)=> API.post("/timeOut",id)
11 | export const timeInStats =(id)=> API.get("/timeInStats?id="+id)
12 | export const timeOutStats =(id)=> API.get("/timeOutStats?id="+id)
13 | export const getEvents = ()=> API.get('/getEvents')
14 | export const leaveApprove = (formData)=> API.post('/leaveApprove', formData)
15 | export const leaveDecline = (data)=> API.post('/leaveDecline',data)
16 | export const submitLeave = (form)=> API.post('/submitLeave',form)
17 | export const getLeaveRequest=()=> API.get('/getLeaveRequest')
18 | export const submitTicket = (form)=> API.post('/submitTicket', form)
19 | export const activeTickets = ()=> API.get('/activeTickets')
20 | export const myTickets = (id)=> API.get('/myTickets?userID='+id)
21 | export const setPriority = (form)=>API.post('/setPriority', form)
22 | export const submitLearningRequest = (form) => API.post('/submitLearningRequest', form)
23 | export const getMyLearnings = (id)=> API.get('/getMyLearnings?id='+id)
24 | export const submitAddress = (form)=> API.patch('/submitAddress', form)
25 | export const submitPersonalInfo =(form)=> API.patch('/submitPersonalInfo', form)
26 | export const submitSkills = (form)=> API.post('/submitSkills', form)
27 | export const getMyskills = (id) => API.get('/getMyskills?id='+id)
28 | export const getAnnouncements = ()=> API.get('/getAnnouncements')
29 | export const getLearningRequest = ()=>API.get('/hr/getLearningRequest')
30 | export const submitProfilePhoto =(form)=>API.patch('/submitProfilePhoto', form)
31 | export const submitAssetReq =(form)=>API.post('/submitAssetReq', form)
32 | export const getMyassets = (id) => API.get('/getMyassets?id='+id)
33 | export const getAssetRequest = ()=>API.get('/getAssetRequest')
34 | export const getCabRequest = ()=>API.get('/hr/getCabRequest')
35 | export const checkLeaveStatus = (id)=> API.get('/checkLeaveStatus?id='+id)
36 | export const submitCabRequest = (form)=> API.post('/submitCabRequest', form)
37 | export const checkCabStatus = (id)=> API.get('/checkCabStatus?id='+id)
38 | export const myCabs = (id)=> API.get('/myCabs?id='+id)
39 | export const submitSeperation= (form) => API.post('/submitSeperation', form)
40 | export const getSeperationInfo = (id)=> API.get('/getSeperationInfo?id='+id)
41 | export const submitTransfer= (form) => API.post('/submitTransfer', form)
42 | export const getTransferInfo = (id)=> API.get('/getTransferInfo?id='+id)
43 | export const getPerformer = ()=> API.get('/getPerformer')
44 | export const getMonths = ()=> API.get('/getMonths')
45 | 
46 | // todo
47 | export const getHoliday = ()=> API.get('/getHoliday')
48 | export const setAssetReqPriority = (form)=>API.post('/setAssetReqPriority', form)
49 | 
50 | 
51 | 
52 | 


--------------------------------------------------------------------------------
/admin/src/components/SideBar/styles.css:
--------------------------------------------------------------------------------
  1 | .sideBarItem:hover {
  2 |     background-color: #278acb;
  3 | }
  4 | .sideBarItem p {
  5 |     margin-top: 15px;
  6 |     color: #fff;
  7 | }
  8 | .iconGroup {
  9 |     display: flex;
 10 |     justify-content: center;
 11 | }
 12 | .logoSection {
 13 |     margin: 0.1px auto;
 14 |     display: flex;
 15 |     padding: 10px 20px;
 16 |     align-items: center;
 17 |     justify-content: center;
 18 | }
 19 | .logoTopSec {
 20 |     display: flex;
 21 |     align-items: center;
 22 |     justify-content: center;
 23 |     transition: all 100ms ease-in-out;
 24 | }
 25 | .logoTopSec h5 {
 26 |     font-weight: 900;
 27 |     color: #278acb
 28 | }
 29 | .logo {
 30 |     color:#278acb;
 31 |     font-size: medium;
 32 |     font-weight: 900;
 33 |     transition: all 100ms ease-in-out;
 34 | }
 35 | .logoImage {
 36 |     fill: #278acb;
 37 |     margin-bottom: 2%;
 38 | }
 39 | #header {
 40 |     margin-right: 100px;
 41 |     position: absolute;
 42 |     top:0;
 43 |     width: 220px;
 44 |   }
 45 |   #header .pro-sidebar {
 46 |     height: 100vh;
 47 |   }
 48 |   #header .closemenu {
 49 |     color: #4b4848;
 50 |     position: absolute;
 51 |     right: 5px;
 52 |     z-index: 9999;
 53 |     line-height: 20px;
 54 |     border-radius: 50%;
 55 |     font-weight: bold;
 56 |     font-size: 22px;
 57 |     top: 40px;
 58 |     cursor: pointer;
 59 |   }
 60 |   #header .pro-sidebar {
 61 |     width: 100%;
 62 |     min-width: 100%;
 63 |   }
 64 |   #header .pro-sidebar.collapsed {
 65 |     width: 80px;
 66 |     min-width: 80px;
 67 |   }
 68 |   #header .pro-sidebar-inner {
 69 |     background-color: white;
 70 |     box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
 71 |   }
 72 |   #header .pro-sidebar-inner .pro-sidebar-layout {
 73 |     overflow-y: hidden;
 74 |   }
 75 |   #header .pro-sidebar-inner .pro-sidebar-layout .logotext  {
 76 |     font-size: 20px;
 77 |     padding: 0 20px;
 78 |     color: #000;
 79 |     font-weight: bold;
 80 |   }
 81 |   #header .pro-sidebar-inner .pro-sidebar-layout ul {
 82 |     padding: 0 5px;
 83 |   }
 84 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
 85 |     background-color: #278acb;
 86 |     margin: 1px 0px;
 87 |     font-weight: bold;
 88 |   }
 89 |   .pro-inner-item:hover, .pro-inner-item:hover span{
 90 |     background-color: #FDBA22 !important;
 91 |   }
 92 | 
 93 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
 94 |     background-color: #278acb;
 95 |     height:20px;
 96 |     color: rgb(255, 255, 255);
 97 |     border-radius: 3px;
 98 |   }
 99 | 
100 |   
101 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
102 |    
103 |     color: rgb(255, 255, 255);
104 |   }
105 |   #header .pro-sidebar-inner .pro-sidebar-layout .active {
106 |     background-image: #FDBA22
107 |   }
108 |   #header .logo {
109 |     padding: 20px;
110 |   }
111 |   
112 |   @media only screen and (max-width: 720px) {
113 |     html {
114 |       overflow: hidden;
115 |     }
116 |   }


--------------------------------------------------------------------------------
/client-hr/src/components/SideBar/SideBar.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import {
 4 |   ProSidebar,
 5 |   Menu,
 6 |   MenuItem,
 7 |   SidebarHeader,
 8 |   SidebarContent,
 9 | } from "react-pro-sidebar";
10 | 
11 | //import icons from react icons
12 | import {  FaHandPointer } from "react-icons/fa";
13 | import { FiHome, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
14 | import { BsFillCalendarWeekFill,BsViewList } from "react-icons/bs";
15 | import { MdOutlineAttachMoney } from "react-icons/md";
16 | import Stack from "../NavBar/Stack-logo.svg"
17 | import "react-pro-sidebar/dist/css/styles.css";
18 | import "./styles.css";
19 | 
20 | import { useNavigate } from 'react-router-dom'
21 | 
22 | 
23 | const SideBar = () => {
24 |     const navigate = useNavigate()
25 |     
26 |     const [menuCollapse, setMenuCollapse] = useState(false)
27 | 
28 | 
29 |     //create a custom function that will change menucollapse state from false to true and true to false
30 |   const menuIconClick = () => {
31 |     //condition checking to change state from true to false and vice versa
32 |     
33 |     menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
34 | 
35 |   };
36 | 
37 |   return (
38 |     <>
39 |       <div id="header">
40 |           {/* collapsed props to change menu size using menucollapse state */}
41 |         <ProSidebar collapsed={menuCollapse}>
42 |           <SidebarHeader>
43 |           <div className="logoSection">
44 |              <div className="logoTopSec">
45 |                  {!menuCollapse ? <h5> HR Stack</h5> 
46 |                  : <> <h5> HR </h5> <img className="logoImage" src={Stack} height="20px" width="20px" alt="logo" /> </>}
47 | 
48 |              </div>
49 |              
50 |             </div>
51 |             <div className="closemenu" onClick={menuIconClick}>
52 |                 {/* changing menu collapse icon on click */}
53 |               {menuCollapse ? (
54 |                 <FiArrowRightCircle/>
55 |               ) : (
56 |                 <FiArrowLeftCircle/>
57 |               )}
58 |               
59 |             </div>
60 |           </SidebarHeader>
61 |           <SidebarContent>
62 |             <Menu iconShape="">
63 |             
64 |              <MenuItem  className="sideBarItem"  onClick={()=> {navigate("/")}} icon={<FiHome />}>  <p>Home</p> </MenuItem> 
65 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/management")}} icon={<FaHandPointer />}>  <p>Managements </p> </MenuItem>
66 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/timesheet")}} icon={<BsFillCalendarWeekFill />}> <p> Time Sheet </p></MenuItem>
67 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/view-employees")}} icon={<BsViewList />}> <p>  Employees </p></MenuItem>
68 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/transactions")}} icon={<MdOutlineAttachMoney />}> <p>  Transactions </p></MenuItem>
69 |             
70 |             </Menu>
71 |           </SidebarContent>
72 |         </ProSidebar>
73 |       </div>
74 |     </>
75 |   );
76 | };
77 | 
78 | export default SideBar


--------------------------------------------------------------------------------
/client/src/api/employee.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | 
 4 | const API = axios.create({ baseURL: 'https://api-hr-stack.xyz' });
 5 | 
 6 | // const API = axios.create({ baseURL: 'http://localhost:4000' });
 7 | export const signIn = (formData) => API.post('/signin', formData);
 8 | export const fetchEmployeeData = (id) => API.get('/fetchEmployeeData?id='+id);
 9 | export const getTimeSheet = (id)=> API.get("/get-timesheet?id="+id)
10 | export const timeIn = (id)=> API.post("/timeIn", id)
11 | export const timeOut = (id)=> API.post("/timeOut",id)
12 | export const timeInStats =(id)=> API.get("/timeInStats?id="+id)
13 | export const timeOutStats =(id)=> API.get("/timeOutStats?id="+id)
14 | export const getEvents = ()=> API.get('/getEvents')
15 | export const leaveApprove = (formData)=> API.post('/leaveApprove', formData)
16 | export const leaveDecline = (data)=> API.post('/leaveDecline',data)
17 | export const submitLeave = (form)=> API.post('/submitLeave',form)
18 | export const getLeaveRequest=()=> API.get('/getLeaveRequest')
19 | export const submitTicket = (form)=> API.post('/submitTicket', form)
20 | export const activeTickets = ()=> API.get('/activeTickets')
21 | export const myTickets = (id)=> API.get('/myTickets?userID='+id)
22 | export const setPriority = (form)=>API.post('/setPriority', form)
23 | export const submitLearningRequest = (form) => API.post('/submitLearningRequest', form)
24 | export const getMyLearnings = (id)=> API.get('/getMyLearnings?id='+id)
25 | export const submitAddress = (form)=> API.patch('/submitAddress', form)
26 | export const submitPersonalInfo =(form)=> API.patch('/submitPersonalInfo', form)
27 | export const submitSkills = (form)=> API.post('/submitSkills', form)
28 | export const getMyskills = (id) => API.get('/getMyskills?id='+id)
29 | export const getAnnouncements = ()=> API.get('/getAnnouncements')
30 | export const getLearningRequest = ()=>API.get('/hr/getLearningRequest')
31 | export const submitProfilePhoto =(form)=>API.patch('/submitProfilePhoto', form)
32 | export const submitAssetReq =(form)=>API.post('/submitAssetReq', form)
33 | export const getMyassets = (id) => API.get('/getMyassets?id='+id)
34 | export const getAssetRequest = ()=>API.get('/getAssetRequest')
35 | export const getCabRequest = ()=>API.get('/hr/getCabRequest')
36 | export const checkLeaveStatus = (id)=> API.get('/checkLeaveStatus?id='+id)
37 | export const submitCabRequest = (form)=> API.post('/submitCabRequest', form)
38 | export const checkCabStatus = (id)=> API.get('/checkCabStatus?id='+id)
39 | export const myCabs = (id)=> API.get('/myCabs?id='+id)
40 | export const submitSeperation= (form) => API.post('/submitSeperation', form)
41 | export const getSeperationInfo = (id)=> API.get('/getSeperationInfo?id='+id)
42 | export const submitTransfer= (form) => API.post('/submitTransfer', form)
43 | export const getTransferInfo = (id)=> API.get('/getTransferInfo?id='+id)
44 | export const getPerformer = ()=> API.get('/getPerformer')
45 | export const getMonths = ()=> API.get('/getMonths')
46 | export const getNotification = (id) => API.get('/getNotification?id='+id)
47 | export const getHoliday = ()=> API.get('/getHoliday')
48 | // todo
49 | 
50 | export const setAssetReqPriority = (form)=>API.post('/setAssetReqPriority', form)
51 | 
52 | 
53 | 


--------------------------------------------------------------------------------
/client-hr/src/components/SideBar/styles.css:
--------------------------------------------------------------------------------
  1 | .sideBarItem:hover {
  2 |     background-color: #278acb;
  3 | }
  4 | .sideBarItem p {
  5 |     margin-top: 15px;
  6 |     color: #fff;
  7 | }
  8 | .iconGroup {
  9 |     display: flex;
 10 |     justify-content: center;
 11 | }
 12 | .logoSection {
 13 |     margin: 0.1px auto;
 14 |     display: flex;
 15 |     padding: 10px 20px;
 16 |     align-items: center;
 17 |     justify-content: center;
 18 | }
 19 | .logoTopSec {
 20 |     display: flex;
 21 |     align-items: center;
 22 |     justify-content: center;
 23 |     transition: all 100ms ease-in-out;
 24 | }
 25 | .logoTopSec h5 {
 26 |     font-weight: 900;
 27 |     color: #278acb;
 28 |     transition: all 100ms ease-in-out;
 29 | }
 30 | .logo {
 31 |     color:#278acb;
 32 |     font-size: medium;
 33 |     font-weight: 900;
 34 |     transition: all 100ms ease-in-out;
 35 | }
 36 | .logoImage {
 37 |     fill: #278acb;
 38 |     margin-bottom: 2%;
 39 |     transition: all 100ms ease-in-out;
 40 | }
 41 | #header {
 42 |     margin-right: 100px;
 43 |     position: absolute;
 44 |     top:0;
 45 |     width: 220px;
 46 |   }
 47 |   #header .pro-sidebar {
 48 |     height: 100vh;
 49 |   }
 50 |   #header .closemenu {
 51 |     color: #4b4848;
 52 |     position: absolute;
 53 |     right: 5px;
 54 |     z-index: 9999;
 55 |     line-height: 20px;
 56 |     border-radius: 50%;
 57 |     font-weight: bold;
 58 |     font-size: 22px;
 59 |     top: 40px;
 60 |     cursor: pointer;
 61 |   }
 62 |   #header .pro-sidebar {
 63 |     width: 100%;
 64 |     min-width: 100%;
 65 |   }
 66 |   #header .pro-sidebar.collapsed {
 67 |     width: 80px;
 68 |     min-width: 80px;
 69 |   }
 70 |   #header .pro-sidebar-inner {
 71 |     background-color: white;
 72 |     box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
 73 |   }
 74 |   #header .pro-sidebar-inner .pro-sidebar-layout {
 75 |     overflow-y: hidden;
 76 |   }
 77 |   #header .pro-sidebar-inner .pro-sidebar-layout .logotext  {
 78 |     font-size: 20px;
 79 |     padding: 0 20px;
 80 |     color: #000;
 81 |     font-weight: bold;
 82 |   }
 83 |   #header .pro-sidebar-inner .pro-sidebar-layout ul {
 84 |     padding: 0 5px;
 85 |   }
 86 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
 87 |     background-color: #278acb;
 88 |     margin: 1px 0px;
 89 |     font-weight: bold;
 90 |   }
 91 |   .pro-inner-item:hover, .pro-inner-item:hover span{
 92 |     background-color: #FDBA22 !important;
 93 |   }
 94 | 
 95 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
 96 |     background-color: #278acb;
 97 |     height:20px;
 98 |     color: rgb(255, 255, 255);
 99 |     border-radius: 3px;
100 |   }
101 | 
102 |   
103 |   #header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper .pro-item-content {
104 |    
105 |     color: rgb(255, 255, 255);
106 |   }
107 |   #header .pro-sidebar-inner .pro-sidebar-layout .active {
108 |     background-image: #FDBA22
109 |   }
110 |   #header .logo {
111 |     padding: 20px;
112 |   }
113 |   
114 |   @media only screen and (max-width: 720px) {
115 |     html {
116 |       overflow: hidden;
117 |     }
118 |   }


--------------------------------------------------------------------------------
/client/src/pages/SignIn/SignIn.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./styles.css"
 3 | import {FaUserAlt} from "react-icons/fa";
 4 | import {RiLockPasswordFill} from "react-icons/ri"
 5 | import Stack from "../../components/NavBar/Stack-logo.svg";
 6 | import {Link } from "react-router-dom"
 7 | import { useFormik } from 'formik';
 8 | function SignIn() {
 9 |   const formik = useFormik({
10 |     initialValues:{
11 |       username:"",
12 |       password:""
13 |     },
14 |     onSubmit: values=> {
15 |       console.log(values)
16 | 
17 |     },
18 |     validate: values=>{
19 |       let error={}
20 |       if(!values.username) {
21 |         error.username="*Username Required"
22 |       }
23 |       if(!values.password) {
24 |         error.password="* Password Required"
25 |       }
26 |       return error
27 |     }
28 |    
29 | 
30 |   })
31 |     return (
32 |       <div className='signin'>
33 |         <form onSubmit={formik.handleSubmit}>
34 |         <div className="form bg-white align-middle rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
35 |         <small className='font-thin metal m-auto '>Human Resouce Stack</small>           
36 |          <div className='logoSec mt-2'>
37 |                 
38 |             <h5> HR </h5>
39 |                 <img  alt="logo"  height="20px" src={Stack} /> 
40 |             </div>
41 |             <div className='mb-4'>
42 |             <div className=" shadow appearance-none border rounded w-full py-2 pl-1 flex">
43 |               <FaUserAlt className='mx-2' />
44 |             <input
45 |               className=""
46 |               onChange={formik.handleChange}
47 |               value={formik.values.username}
48 |               onBlur={formik.handleBlur}
49 |               id="username"
50 |               name="username"
51 |               type="text"
52 |               placeholder="Username"
53 |             />
54 |            
55 |           </div>
56 |           {formik.touched.username && formik.errors.username  ? <small className='ml-1 error'> {formik.errors.username} </small> : null}
57 |             </div>
58 |         
59 |           <div className="mb-6">
60 |           <div className="shadow appearance-none border rounded w-full py-2 pl-1 flex">
61 |           <RiLockPasswordFill className='mx-2' />
62 |             <input
63 |               className=""
64 |               onChange={formik.handleChange}
65 |               value={formik.values.password}
66 |               onBlur={formik.handleBlur}
67 |               name="password"
68 |               id="password"
69 |               type="password"
70 |               placeholder="Password"
71 |             />
72 |           </div>
73 |           {formik.touched.password && formik.errors.password ? <small className='error'> {formik.errors.password} </small> : null}
74 |            
75 |           </div>
76 |           <div className=" items-center justify-center">
77 |             <button type='submit' className="button-1 w-full my-2">
78 |               Sign In
79 |             </button>
80 |             <Link className="inline-block  align-baseline font-light text-sm text-blue hover:text-blue-darker" to="/forget-password"
81 |             >
82 |               Forgot Password?
83 |             </Link>
84 |           </div>
85 |         </div>
86 |         </form>
87 |        
88 |       </div>
89 |     );
90 | }
91 | 
92 | export default SignIn
93 | 


--------------------------------------------------------------------------------
/admin/src/App.js:
--------------------------------------------------------------------------------
 1 | // Components
 2 | import {useEffect} from "react"
 3 | import HomeAdmin from "./pages/HomeAdmin/HomeAdmin"
 4 | import SignIn from "./pages/SignIn/SignIn"
 5 | import ErrorPage from "./pages/Error/Error"
 6 | import Management from "./pages/Management/Management"
 7 | import AddEvents from "./pages/Management/AddEvents/AddEvents"
 8 | import ManageReq from "./pages/Management/ManageReq/ManageReq"
 9 | import AssetsReq from "./pages/Management/ManageReq/AssetsReq"
10 | import ProtectedRoute from "./routes/ProtectedRoutes/ProtectedRoute"
11 | import RaisedIssue from "./pages/Management/ManageReq/RaisedIssue"
12 | import AddAssets from "./pages/Management/AddAssets/AddAssets"
13 | import AssetManagement from "./pages/Management/AddAssets/AssetManagement"
14 | import Announcements  from "./pages/Management/Announcements/Announcements"
15 | import ManageUsers from "./pages/ManageUsers/ManageUsers"
16 | // APIs
17 | import {  fetchStats as fetchAllStats } from './api/api';
18 | import { Routes, Route, useNavigate } from "react-router-dom";
19 | import {Navigate} from "react-router-dom"
20 | import {  logout} from "./redux/login/loginSlice"
21 | import { initial,  errorfetching, fetchStats} from "./redux/admin/adminSlice"
22 | import {  useDispatch} from "react-redux"
23 | import jwtDecode from "jwt-decode"
24 | 
25 | 
26 | function App() {
27 |   const user = JSON.parse(localStorage.getItem("admin"))
28 |   const dispatch = useDispatch()
29 |   const navigate = useNavigate()
30 | 
31 | 
32 |   useEffect(() => {
33 |     if (user?.token) {
34 |         const decodedToken = jwtDecode(user.token)
35 |         if (decodedToken.exp * 1000 < new Date().getTime()) {
36 |           dispatch(logout("Session Timed Out"))
37 |           navigate("/signin")
38 |         }
39 |         dispatch(initial())
40 |         fetchAllStats()
41 |         .then((res)=>  {
42 |           dispatch(fetchStats(res.data))
43 |         }) 
44 |         .catch(err=> dispatch(errorfetching(err.message)))
45 | 
46 |       }
47 |     
48 | }, [navigate, dispatch, user])
49 | 
50 |   return (
51 |     <>
52 |     <Routes>
53 |       <Route exact path="/*" element={<ErrorPage />} />
54 |       {/* <Route exact path="/signin" element={<SignIn />} /> */}
55 |       <Route exact path="/signin" element={ user ? <Navigate to="/" /> :<SignIn />} />
56 |       
57 |       {/* Protected routes */}
58 |       <Route  element= {<ProtectedRoute />}>
59 |        <Route exact path="/" element={ <HomeAdmin /> } />
60 |        <Route exact path="/management" element={<Management />} />
61 |        <Route exact path="/management/addevents" element={<AddEvents />} />
62 |        <Route exact path="/assets" element={<AddAssets />} />
63 |        <Route exact path="/add-assets" element={<AddAssets />} />
64 |        <Route exact path="/management/assets" element={<AddAssets />} />
65 |        <Route exact path="/management/announcements" element={<Announcements />} />
66 |        <Route exact path="/management/all-requests" element={<ManageReq />} />
67 |        <Route exact path="/management/all-requests/assets" element={<AssetsReq />} />
68 |        <Route exact path="/manage-assets" element={<AssetManagement />} />   
69 |        <Route exact path="/management/all-requests/tickets" element={<RaisedIssue />} />
70 |        <Route exact path="/manage-users" element={<ManageUsers />} />
71 |       </Route>
72 |     </Routes>
73 |     </>
74 |   );
75 | }
76 | 
77 | export default App;
78 | 
79 | 


--------------------------------------------------------------------------------
/client/src/components/SideBar/SideBar.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import {
 4 |   ProSidebar,
 5 |   Menu,
 6 |   MenuItem,
 7 |   SidebarHeader,
 8 |   SidebarContent,
 9 | } from "react-pro-sidebar";
10 | 
11 | //import icons from react icons
12 | import { FaUserGraduate, FaHandPointer } from "react-icons/fa";
13 | import { FiHome, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
14 | import {AiTwotoneEdit} from "react-icons/ai";
15 | import {  RiCustomerService2Fill } from "react-icons/ri";
16 | import {  GiSkills } from "react-icons/gi";
17 | import { BsFillCalendarWeekFill } from "react-icons/bs";
18 | import { MdOutlineSpeed } from "react-icons/md";
19 | import Stack from "../NavBar/Stack-logo.svg"
20 | import "react-pro-sidebar/dist/css/styles.css";
21 | import "./styles.css";
22 | import { useNavigate } from 'react-router-dom'
23 | 
24 | 
25 | const SideBar = () => {
26 |     const navigate = useNavigate()
27 |     
28 |     const [menuCollapse, setMenuCollapse] = useState(false)
29 | 
30 |     //create a custom function that will change menucollapse state from false to true and true to false
31 |   const menuIconClick = () => {
32 |     //condition checking to change state from true to false and vice versa
33 |     menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
34 |   };
35 | 
36 |   return (
37 |     <>
38 |       <div id="header">
39 |           {/* collapsed props to change menu size using menucollapse state */}
40 |         <ProSidebar collapsed={menuCollapse}>
41 |           <SidebarHeader>
42 |           <div className="logoSection">
43 |              <div className="logoTopSec">
44 |                  {!menuCollapse &&  <h5> HR </h5>}
45 |              <img className="logoImage" src={Stack} height="20px" width="20px" alt="logo" />
46 |              </div>
47 |              
48 |             </div>
49 |             <div className="closemenu" onClick={menuIconClick}>
50 |                 {/* changing menu collapse icon on click */}
51 |               {menuCollapse ? (
52 |                 <FiArrowRightCircle/>
53 |               ) : (
54 |                 <FiArrowLeftCircle/>
55 |               )}
56 |               
57 |             </div>
58 |           </SidebarHeader>
59 |           <SidebarContent>
60 |             <Menu iconShape="">
61 |             
62 |              <MenuItem  className="sideBarItem" active={true} onClick={()=> {navigate("/")}} icon={<FiHome />}>  <p>Home</p> </MenuItem> 
63 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/selfservice")}} icon={<FaHandPointer />}>  <p> Self Services </p> </MenuItem>
64 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/timesheet")}} icon={<BsFillCalendarWeekFill />}> <p> Time Sheet </p></MenuItem>
65 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/leave")}} icon={<AiTwotoneEdit />}> <p> Leave </p></MenuItem>
66 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/tickets")}} icon={<RiCustomerService2Fill />}> <p> Tickets </p></MenuItem>
67 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/learnings")}} icon={<FaUserGraduate />}> <p> Learnings </p></MenuItem>
68 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/skillsets")}} icon={<GiSkills />}> <p> Skill Sets </p> </MenuItem>
69 |               <MenuItem className="sideBarItem" onClick={()=> {navigate("/performance")}} icon={<MdOutlineSpeed />}><p> Perfomance </p> </MenuItem>
70 |             </Menu>
71 |           </SidebarContent>
72 |         </ProSidebar>
73 |       </div>
74 |     </>
75 |   );
76 | };
77 | 
78 | export default SideBar;


--------------------------------------------------------------------------------
/admin/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/client-hr/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/client-hr/src/api/api.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | 
 4 | const API = axios.create({ baseURL: 'https://api-hr-stack.xyz' });
 5 | 
 6 | // const API = axios.create({ baseURL: 'http://localhost:4000' });
 7 | 
 8 | 
 9 | export const signIn = (formData) => API.post('/hr/signin', formData);
10 | export const fetchEmployeeData = (id) => API.get('/hr/fetchEmployeeData?id='+id);
11 | export const fetchStats =  () => API.get('/hr/fetchStats');
12 | export const getPendingTimeSheet= ()=> API.get('/hr/getPendingTimeSheet')
13 | export const timeSheetApprove=(data)=>API.post('/hr/timeSheetApprove', data)
14 | export const createEvent=(data)=>API.post('/hr/createEvent', data)
15 | export const addEmployee=  (data) => API.post("/hr/add-employee", data)
16 | export const submitTicket = (form)=> API.post('/submitTicket', form)
17 | export const myTickets = (id)=> API.get('/myTickets?userID='+id)
18 | export const leaveApprove = (formData)=> API.post('/leaveApprove', formData)
19 | export const leaveDecline = (data)=> API.post('/leaveDecline',data)
20 | export const activeTickets = ()=> API.get('/activeTickets')
21 | export const approveLearning = (form)=> API.post('/hr/approveLearning', form)
22 | export const declineLearning = (form)=> API.post('/hr/declineLearning', form)
23 | export const getLeaveRequest=()=> API.get('/hr/getAllLeaveRequest')
24 | export const getAllEmployees=()=> API.get('/hr/getAllEmployees')
25 | export const getLearningRequest = ()=> API.get('/hr/getLearningRequest')
26 | export const fetchCompanyInfo = ()=> API.get('/hr/fetchCompanyInfo')
27 | export const saveProfile = (data)=> API.patch('/hr/saveProfile',data)
28 | export const getSkillsRequest = ()=> API.get('/hr/getSkillsRequest')
29 | export const skillreject = (form)=> API.post('/hr/skillreject', form)
30 | export const skillApprove = (form)=> API.post('/hr/skillApprove', form)
31 | export const createAnnouncement = (form) => API.post('/hr/createAnnouncement', form)
32 | export const getCabRequest = ()=>API.get('/hr/getCabRequest')
33 | export const cabDecline = (form) => API.post('/hr/cabDecline', form)
34 | export const cabApprove = (id)=> API.get('/hr/cabApprove?id='+id)
35 | export const getSperationRequest = ()=>API.get("/hr/getSperationRequest")
36 | export const getTransferRequest = ()=>API.get("/hr/getTransferRequest")
37 | export const approveSeperation = (data)=> API.patch('/hr/approveSeperation',data)
38 | export const declineSeperation = (data)=> API.patch('/hr/declineSeperation',data)
39 | export const approveTransfer = (data)=> API.patch('/hr/approveTransfer',data)
40 | export const declineTransfer = (data)=> API.patch('/hr/declineTransfer',data)
41 | export const getAllEmployeesBySkills=()=> API.get('/hr/getAllEmployeesBySkills')
42 | export const submitAward = (form) => API.post('/hr/submitAward', form)
43 | export const getAllManagers=()=> API.get('/hr/getAllManagers')
44 | export const getPerformer = ()=>API.get("/hr/getPerformer")
45 | export const unsetPerformer = (form) => API.post('/hr/unsetPerformer', form)
46 | export const getAllEmployeesName=()=> API.get('/hr/getAllEmployeesName')
47 | export const getFullData=(id)=> API.get('/hr/getFullData?id='+id)
48 | export const getMonth=()=> API.get('/hr/getMonth')
49 | export const getCurrentMonthTmeSheet = (form) => API.post('/hr/getCurrentMonthTmeSheet', form)
50 | export const submitPayment = (form) => API.post('/hr/submitPayment', form)
51 | export const addDesiginationTo = (form) => API.post('/hr/addDesigination', form)
52 | export const submitProject = (form) => API.post('/hr/submitProject', form)
53 | export const changePostion = (form) => API.post('/hr/changePostion', form)
54 | export const changeProject = (form) => API.post('/hr/changeProject', form)
55 | 
56 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/Transfer/Transfer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavBar from '../../../components/NavBar/NavBar'
 3 | import TextEditor from '../../../components/TextEditor/TextEditor';
 4 | function Transfer() {
 5 |     return (
 6 |         <>        <div className='separation'>
 7 |             <div>
 8 | 
 9 |             </div>
10 |             <div className='separationForm bg-feild p-4 '>
11 |                 <h5 className='mt-4 mb-2 text-center font-semibold'>Employee Transfer Request</h5>
12 |                 <TextEditor />
13 |                 <div className='flex justify-end'>
14 |                 <button className='button-1'> Request </button>
15 |                 </div>
16 |                 
17 |             </div>
18 | 
19 |             <div className='separationStatus'>
20 |             <h5 className='mt-4 mb-2 text-center pt-4 font-semibold'>Transfer Status</h5>
21 |             <div class="flex flex-col">
22 |   <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
23 |     <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
24 |       <div class="overflow-hidden">
25 |         <table class="min-w-full">
26 |           <thead class="border-b">
27 |             <tr>
28 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
29 |                 Date Requested
30 |               </th>
31 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
32 |                 Project
33 |               </th>
34 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
35 |               Transfer Date E
36 |               </th>
37 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
38 |                 Approved Status
39 |               </th>
40 |             </tr>
41 |           </thead>
42 |           <tbody>
43 |             <tr class="border-b font-medium">
44 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">     12-2-2021</td>
45 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
46 |               Dvelopement & Services
47 |               </td>
48 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
49 |               Mathew
50 |               </td>
51 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
52 |               Jacob
53 |               </td>
54 |             </tr>
55 |             <tr class="bg-white border-b">
56 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
57 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
58 |               Pending
59 |               </td>
60 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
61 |                 Pending
62 |               </td>
63 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
64 |                 @fat
65 |               </td>
66 |             </tr>
67 |             <tr class="bg-white border-b">
68 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
69 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
70 |                 Larry
71 |               </td>
72 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
73 |                 Wild
74 |               </td>
75 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
76 |                 @twitter
77 |               </td>
78 |             </tr>
79 |           </tbody>
80 |         </table>
81 |       </div>
82 |     </div>
83 |   </div>
84 | </div>
85 |             </div>
86 |             
87 |         </div>
88 |         <NavBar />
89 |         </>
90 | 
91 |     )
92 | }
93 | 
94 | export default Transfer
95 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/Separation/Separation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavBar from '../../../components/NavBar/NavBar'
 3 | import "./styles.css"
 4 | import TextEditor from '../../../components/TextEditor/TextEditor';
 5 | function Seperation() {
 6 |     return (
 7 |         <>        <div className='separation'>
 8 |             <div>
 9 | 
10 |             </div>
11 |             <div className='separationForm bg-feild p-4 '>
12 |                 <h5 className='mt-4 mb-2 text-center font-semibold'>Employee Seperation Request</h5>
13 |                 <TextEditor />
14 |                 <div className='flex justify-end'>
15 |                 <button className='button-1'> Request </button>
16 |                 </div>
17 |                 
18 |             </div>
19 | 
20 |             <div className='separationStatus'>
21 |             <h5 className='mt-4 mb-2 text-center pt-4 font-semibold'>Seperation Status</h5>
22 |             <div class="flex flex-col">
23 |   <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
24 |     <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
25 |       <div class="overflow-hidden">
26 |         <table class="min-w-full">
27 |           <thead class="border-b">
28 |             <tr>
29 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
30 |                 Date Requested
31 |               </th>
32 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
33 |                 Project
34 |               </th>
35 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
36 |                 Leaving Date
37 |               </th>
38 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
39 |                 Approved Status
40 |               </th>
41 |             </tr>
42 |           </thead>
43 |           <tbody>
44 |             <tr class="border-b font-medium">
45 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">     12-2-2021</td>
46 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
47 |               Dvelopement & Services
48 |               </td>
49 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
50 |               Mathew
51 |               </td>
52 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
53 |               Jacob
54 |               </td>
55 |             </tr>
56 |             <tr class="bg-white border-b">
57 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
58 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
59 |               Pending
60 |               </td>
61 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
62 |                 Pending
63 |               </td>
64 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
65 |                 @fat
66 |               </td>
67 |             </tr>
68 |             <tr class="bg-white border-b">
69 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
70 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
71 |                 Larry
72 |               </td>
73 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
74 |                 Wild
75 |               </td>
76 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
77 |                 @twitter
78 |               </td>
79 |             </tr>
80 |           </tbody>
81 |         </table>
82 |       </div>
83 |     </div>
84 |   </div>
85 | </div>
86 |             </div>
87 |             
88 |         </div>
89 |         <NavBar />
90 |         </>
91 | 
92 |     )
93 | }
94 | 
95 | export default Seperation
96 | 


--------------------------------------------------------------------------------
/client/src/pages/LeaveReq/Leave.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import NavBar from '../../components/NavBar/NavBar'
  3 | import "./styles.css"
  4 | function Leave() {
  5 |     return (
  6 |         <>
  7 |         <div className="viewPay">
  8 |             <div className='leaveForm'>
  9 |                 <div className='topSecLeave'>
 10 |                     <div className='leaveInfoCard'> <h5 className='font-bold'>Causal Leave Balance</h5> <p>1 </p> </div>
 11 |                     <div className='leaveInfoCard'> <h5 className='font-bold'>Holidays this Year</h5> <p>3 </p>  </div>
 12 |                     <div className='leaveInfoCard'> <h5 className='font-bold'>Sick Leave Balance</h5> <p>1 </p>  </div>
 13 | 
 14 |                 </div>
 15 |                 <div className="container mx-auto mb-8 mainForm">
 16 | 			<div className="flex justify-center px-6 my-12">
 17 | 			
 18 | 				<div className="w-full  flex">
 19 | 					
 20 | 					<div className="w-full p-1 rounded-lg lg:rounded-l-none">
 21 | 						<form className="px-2 pt-1 pb-4 mb-2">
 22 | 							<div className="mb-4 md:flex md:justify-between">
 23 | 								<div className="mb-4 md:mr-2 md:mb-0">
 24 | 									<label className="block mb-2 text-sm font-medium text-gray-700" >
 25 | 										Leave Type
 26 | 									</label>
 27 | 									<input
 28 | 										className="w-full px-5 py-2 text-sm leading-tight  bg-gray-200 border rounded   focus:outline-none focus:shadow-outline"
 29 | 										id="firstName"
 30 | 										type="text"
 31 | 										name="pickuppoint"
 32 | 									/>
 33 | 								</div>
 34 |                                 <div className="mb-4 md:mr-2 md:mb-0">
 35 | 									<label className="block mb-2 text-sm font-medium text-gray-700" >
 36 |                                             From Date
 37 | 									</label>
 38 | 									<input
 39 | 										className="w-full px-5 py-2 text-sm leading-tight  bg-gray-200 border rounded   focus:outline-none focus:shadow-outline"
 40 | 										id="firstName"
 41 | 										type="date"
 42 | 										name="dropPoint"
 43 | 									/>
 44 | 								</div>
 45 |                                 <div className="mb-4 md:mr-2 md:mb-0">
 46 | 									<label className="block mb-2 text-sm font-medium text-gray-700" >
 47 | 										To Date
 48 | 									</label>
 49 | 									<input
 50 | 										className="w-full px-5 py-2 text-sm leading-tight  bg-gray-200 border rounded   focus:outline-none focus:shadow-outline"
 51 | 										id="firstName"
 52 | 										type="date"
 53 | 										name="time"
 54 | 									/>
 55 | 								</div>
 56 | 							
 57 | 							</div>
 58 | 
 59 |                             <div className="mb-4 md:flex md:justify-between">
 60 | 								<div className="mb-4 md:mr-2 md:mb-0">
 61 | 									<label className="block mb-2 text-sm font-medium text-gray-700" >
 62 | 										Manager
 63 | 									</label>
 64 | 									<input
 65 | 										className="w-full px-5 py-2 text-sm leading-tight  bg-gray-200 border rounded   focus:outline-none focus:shadow-outline"
 66 | 										
 67 | 										type="text"
 68 | 										name="employeeName"
 69 | 									/>
 70 | 								</div>
 71 |                
 72 |                                 <div className="mb-4 md:mr-2 md:mb-0">
 73 | 									<label className="block mb-2 text-sm font-medium text-gray-700" >
 74 | 										Reason
 75 | 									</label>
 76 | 									<textarea
 77 | 										className="w-full px-5 py-2 text-sm leading-tight  bg-gray-200 border rounded   focus:outline-none focus:shadow-outline"
 78 | 										id="remarks"
 79 | 										name="remarks"
 80 |                                         rows="3" cols="84"
 81 | 									></textarea>
 82 | 								</div>
 83 | 
 84 | 							
 85 | 							</div>
 86 | 				
 87 | 							<div className="mb-2 text-center flex justify-end">
 88 | 								<button
 89 | 									className="button-1"
 90 | 									type="button"
 91 | 								>
 92 | 									Submit
 93 | 								</button>
 94 | 							</div>
 95 | 						
 96 | 						</form>
 97 | 					</div>
 98 |                     
 99 | 				</div>
100 | 			</div>
101 |             
102 | 		</div>
103 |             </div>
104 |             
105 |         </div>
106 |         <NavBar />
107 |         </>
108 | 
109 |     )
110 | }
111 | 
112 | export default Leave
113 | 


--------------------------------------------------------------------------------
/admin/src/pages/Management/AddAssets/AssetManagement.js:
--------------------------------------------------------------------------------
  1 | import React, {useEffect, useState} from 'react';
  2 | import NavBar from "../../../components/NavBar/NavBar"
  3 | import NameCard from '../../../components/NameCard/NameCard';
  4 | import {getAllAssetsHolding, getAllAssets} from "../../../api/api"
  5 | import {Alert} from "@mui/material"
  6 | import { useNavigate } from 'react-router-dom';
  7 | import { useDispatch } from 'react-redux'
  8 | import { useSelector } from 'react-redux';
  9 | import {  fetchAllAssets } from '../../../redux/requests/requestSlice';
 10 | import EditAssets from "../../Management/AddAssets/EditAssets"
 11 | import Dialog from '@mui/material/Dialog';
 12 | import DialogActions from '@mui/material/DialogActions';
 13 | import DialogContent from '@mui/material/DialogContent';
 14 | import Button from '@mui/material/Button';
 15 | import "./styles.css"
 16 | function AssetManagement() {
 17 |     const navigate = useNavigate
 18 |     const dispatch = useDispatch()
 19 |     const [holdingAssets, setholdingAssets] = useState([])
 20 |     const [err, seterr] = useState(null)
 21 |     const [CurrentAsset, setCurrentAsset]= useState(null)
 22 |     const {allAssets} = useSelector(state=> state.requests)
 23 | 
 24 |     useEffect(() => {
 25 |         getAllAssetsHolding().then(res=> setholdingAssets(res.data))
 26 |         .catch(err=> seterr(err.message))  
 27 |         
 28 |         getAllAssets().then((res)=>dispatch(fetchAllAssets(res.data)))
 29 |         .catch((err)=>{console.log(err.message)})
 30 | 
 31 |         return () => {
 32 |           dispatch(fetchAllAssets([]))
 33 |       };   
 34 |         
 35 |       }, [navigate, dispatch]);
 36 |       const [open, setOpen] = React.useState(false);
 37 | 
 38 |       const handleClickOpen = (data) => {
 39 |         setOpen(true);
 40 |         setCurrentAsset(data)
 41 |       };
 42 |     
 43 |       const handleClose = () => {
 44 |         setOpen(false);
 45 |         setCurrentAsset(null)
 46 |       };
 47 | 
 48 |   return <>
 49 |         <div className='separation '>
 50 |             <div className=' mx-auto'> 
 51 |             {err &&  <div className='flex'><Alert severity="error"></Alert> </div>}
 52 |            
 53 |             <h6 className='font-semibold mt-3  text-center'> Available Assets</h6> 
 54 |             {allAssets.length ? 
 55 |             <div className='flex px-10 py-3 justify-center flex-wrap'>
 56 |                {allAssets.map((ele, i)=>{
 57 |                    return (
 58 |                        <div onClick={()=>handleClickOpen(ele)}>
 59 |                     <NameCard 
 60 |                     secondName={ele.assetName}
 61 |                     desigination={ele?.assetCategory} 
 62 |                     secondCode={ele.assetCode}
 63 |                     key={i} 
 64 |                     cardID={ele.userID} 
 65 |                     type={true}/>
 66 |                     </div>
 67 |                    )
 68 |                })}
 69 |                 
 70 |                </div> : <div> <p>No Assets Available</p> </div>  }
 71 | 
 72 |                <h6 className='font-semibold mt-3 text-center'> Allocated Assets</h6> 
 73 |                {holdingAssets.length ? 
 74 |             <div className='flex px-10 py-3 justify-center flex-wrap mb-5'>
 75 |                {holdingAssets.map((ele, i)=>{
 76 |                    return (<div className=' '> 
 77 |                     <NameCard 
 78 |                     fullname={`Allocted to: ${ele?.allocated?.fullname}`} 
 79 |                     empID={ele.allocated?.empID} 
 80 |                     secondName={ele.assetName}
 81 |                     desigination={ele?.assetCategory} 
 82 |                     secondCode={ele.assetCode}
 83 |                     key={i} 
 84 |                     cardID={ele.userID} 
 85 |                     type={true}
 86 |                     button={true}
 87 |                     assetId={ele._id}/>
 88 |                     </div>
 89 |                    )
 90 |                })}
 91 |                </div>
 92 |                : <div className='flex justify-center'> <p>No Assets</p> </div> }
 93 |             </div>
 94 |          
 95 |         </div>
 96 |         <Dialog open={open} onClose={handleClose}>
 97 |         <DialogContent>
 98 |                <EditAssets data={CurrentAsset} setOpen={setOpen} fetchAllAssets={fetchAllAssets} />
 99 |         </DialogContent>
100 |         <DialogActions>
101 |           <Button onClick={handleClose}>Cancel</Button>
102 |         </DialogActions>
103 |       </Dialog>
104 | 
105 |       <NavBar />
106 |   </>;
107 | }
108 | 
109 | export default AssetManagement;


--------------------------------------------------------------------------------
/client/src/pages/SelfService/ManageReq/ManageReq.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavBar from '../../../components/NavBar/NavBar'
 3 | import { useNavigate} from 'react-router-dom'
 4 | import {AiFillCaretRight} from "react-icons/ai"
 5 | import "./styles.css"
 6 | function ManageReq() {
 7 |     const navigate = useNavigate()
 8 |     return (
 9 |         <>
10 |         <div className='viewPay'>
11 |         <div className="container my-5 tableView py-4 overflow-x-auto">
12 |             <div className='button-groups'> 
13 |             <div className='button-5 font-semibold text-sm'  onClick={()=>{navigate('/selfservice/all-requests')}} style={{backgroundColor:"#3283bd"}}> All Requests</div>
14 |                 <div className='button-5 font-semibold text-sm'  onClick={()=>{navigate('/selfservice/all-requests/leave')}}> Leave Requests</div>
15 |                 <div className='button-5 font-semibold text-sm' onClick={()=>{navigate('/selfservice/all-requests/vehicle')}}> Vehicle Requests</div>
16 |                 <div className='button-5 font-semibold text-sm' onClick={()=>{navigate('/selfservice/all-requests/assets')}}> Assets Requests</div>
17 |              </div>
18 |              <h6 className='font-bold ml-2 my-2 flex'>  All Requests <AiFillCaretRight className='mx-2' />  </h6>
19 |                         <table className="table-auto border-collapse  w-100 text-center rounded-lg border border-gray-400">
20 |                             <thead className="bg-gray-50">
21 |                                 <tr>
22 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
23 |                                         Employee Name 
24 |                                     </th>
25 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
26 |                                         Employee ID 
27 |                                     </th>
28 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
29 |                                         Project
30 |                                     </th>
31 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
32 |                                         Request Type
33 |                                     </th>
34 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
35 |                                         Approved Status
36 |                                     </th>
37 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
38 |                                         Comments
39 |                                     </th>
40 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
41 |                                         Actions
42 |                                     </th>
43 |                                 </tr>
44 |                             </thead>
45 |                             <tbody className="bg-white ">
46 |                                 <tr className="whitespace-nowrap">
47 |                                     <td className="px-6 py-4 text-sm text-gray-500">
48 |                                     ₹ 45000.00
49 |                                     </td>
50 |                                     <td className="px-6 py-4">
51 |                                         <div className="text-sm text-gray-900">
52 |                                         ₹1020.00
53 |                                         </div>
54 |                                     </td>
55 |                                     <td className="px-6 py-4">
56 |                                         <div className="text-sm text-gray-500">    ₹2020.00</div>
57 |                                     </td>
58 |                                     <td className="px-6 py-4 text-sm text-gray-500">
59 |                                     %10
60 |                                     </td>
61 |                                     <td className="text-sm px-6 py-4">
62 |                                     ₹500020.00
63 |                                     </td>
64 |                                     <td className="text-sm px-6 py-4">
65 |                                     <div className='button-sm-1'>View</div>
66 |                                     </td>
67 |                                     <td className="text-sm px-6 py-4">
68 |                                     ₹500020.00
69 |                                     </td>
70 |                     
71 |                                 </tr>
72 |                         
73 |     
74 |                         
75 |                             </tbody>
76 |                         </table>
77 |                     </div>
78 |         </div>
79 |         <NavBar />
80 |         </>
81 |     )
82 | }
83 | 
84 | export default ManageReq
85 | 


--------------------------------------------------------------------------------
/client-hr/src/components/SkillCard/SkillCard.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import {FaUserAlt} from "react-icons/fa"
  3 | import "./styles.css"
  4 | import {} from "react-router-dom"
  5 | import Avatar from '@mui/material/Avatar';
  6 | import Swal from "sweetalert2"
  7 | import {submitAward} from "../../api/api"
  8 | function SkillCard( {fullname, empID, desigination, selectedFile, userID, skills }) {
  9 |     const latestSkill = skills.slice(Math.max(skills.length - 4, 0))
 10 |     console.log()
 11 |     const {score} = latestSkill.reduce((acc, curr)=> ({score: acc.score + curr.score}))
 12 |     const skill = latestSkill.map((ele)=> Math.floor(ele.score+ele.selfRating /110))
 13 |     const skillSet = []
 14 |     let obj={}
 15 |     for(let i=0; i<latestSkill.length; i++ ){
 16 |       skillSet.push({...latestSkill[i], skill:skill[i] })
 17 | 
 18 |     }
 19 |     const handleAward = (userID)=>{
 20 |           Swal.fire({
 21 |             text: 'Do you want send an Award?',
 22 |             showCancelButton: true,
 23 |             confirmButtonText: 'Award',
 24 |           }).then(async(result) => {
 25 |             if (result.isConfirmed) {
 26 |                 const { value: awardType } = await Swal.fire({
 27 |                     title: 'Select Award for',
 28 |                     input: 'select',
 29 |                     inputOptions: {
 30 |                       'Award Type': { Excellence: 'For Excellence', Performance : 'For Best Performance of month', Contribution: 'For Contributing to Organisation'},
 31 |                     },
 32 |                     inputPlaceholder: 'Select a Category',
 33 |                     showCancelButton: true,
 34 |                     inputValidator: (value) => {
 35 |                         if (!value) {
 36 |                             return 'You need to Select a Category!'
 37 |                           }
 38 |                     }     
 39 |                     
 40 |                   })
 41 |                   const { value: Description } = await Swal.fire({
 42 |                     input: 'textarea',
 43 |                     inputLabel: 'Description for ' +awardType,
 44 |                     inputPlaceholder: 'Enter the Description',
 45 |                     inputValidator: (value) => {
 46 |                         if (!value) {
 47 |                           return 'You need to Enter the Description!'
 48 |                         }
 49 |                     }  
 50 |                   
 51 |                 })
 52 |                 let form = {userID, score, awardType, Description}
 53 |                 submitAward(form).then(()=>Swal.fire('Saved!', '', 'success'))
 54 |                 .catch((err)=> Swal.fire('Error!', '', 'info'))
 55 | 
 56 |             } 
 57 |           })
 58 |           
 59 |    
 60 |     }
 61 | 
 62 |   return <div className='flex space-x-2' >
 63 | 
 64 |       <div className='flex skillCard flex-col pl-4'> 
 65 |       <div className='flex justify-center items-center mx-auto my-auto p5 ml-auto'> 
 66 |      {selectedFile ? <Avatar sx={{ width: 100, height: 100 }}  src={selectedFile} alt="profile-face" /> 
 67 |      : <FaUserAlt  size="50px"/> }
 68 | 
 69 |       </div>
 70 |       <div>        
 71 |            <h6 className='truncate font-bold text-base'> {fullname} </h6>
 72 |         <h6 className='truncate font-semibold text-sm'> {empID}</h6>
 73 |         <p className='font-semibold text-sm'> {desigination}</p> </div>
 74 |         <h6 className='truncate font-bold text-right text-base'> Overall Score : {score} </h6>
 75 |         <hr />
 76 |       <div className='flex flex-col'>
 77 |       <div className='flex justify-start ms-3'>     
 78 |              <div className='flex mx-2 w-2/5 '>
 79 |             <p className='font-semibold text-md text-left'> Skills </p> 
 80 |             </div>
 81 |             
 82 |             <div className='flex mx-2 w-2/5 flex-end'>
 83 |             <p className='font-semibold text-md  text-center'> Rating</p> 
 84 |             </div>
 85 |              </div>
 86 |              {skillSet.map((ele, i)=>{
 87 |           return (
 88 |             <div key={i} className='flex justify-start ms-3'>     
 89 |             <div className='flex mx-2 w-2/5 '>
 90 |            <p className='font-semibold text-sm text-left'>  {ele?.technology}</p> 
 91 |            </div>
 92 |            <div className='flex flex-end mx-2 w-2/5'>
 93 |            <p className='font-semibold text-sm text-center'> {ele?.skill} </p> 
 94 |            </div>
 95 |             </div>
 96 |           )
 97 |         })}
 98 |       </div>
 99 | 
100 | 
101 |              <div className='flex justify-center items-center space-x-2'>
102 |                  <div className='button-sm-1 text-sm p-2' onClick={()=>handleAward(userID)}> Send Award</div>
103 |              </div>
104 |     </div>
105 | 
106 |     
107 | 
108 |   </div>;
109 | }
110 | 
111 | export default SkillCard;
112 |     


--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
  1 | // Components
  2 | import {useEffect} from "react"
  3 | import SignIn from "./pages/SignIn/SignIn"
  4 | import Home from "./pages/Home/Home"
  5 | import Timesheet from "./pages/Timesheet/Timesheet"
  6 | import ErrorPage from "./pages/Error/Error"
  7 | import SelfService from "./pages/SelfService/SelfService"
  8 | import Seperation from "./pages/SelfService/Separation/Separation"
  9 | import Transfer from "./pages/SelfService/Transfer/Transfer"
 10 | import Cab from "./pages/SelfService/Cab/Cab"
 11 | import ManageReq from "./pages/SelfService/ManageReq/ManageReq"
 12 | import LeaveReq from "./pages/SelfService/ManageReq/LeaveReq"
 13 | import VehicleReq from "./pages/SelfService/ManageReq/VehicleReq"
 14 | import AssetsReq from "./pages/SelfService/ManageReq/AssetsReq"
 15 | import ViewPaySlip from "./pages/SelfService/ViewPaySlip/ViewPaySlip"
 16 | import Assets from "./pages/SelfService/Assets/Assets"
 17 | import Leave from "./pages/LeaveReq/Leave"
 18 | import RaiseIssue from "./pages/RaiseIssue/RaiseIssue"
 19 | import ProtectedRoute from "./routes/ProtectedRoutes/ProtectedRoute"
 20 | import FunctionRoute from "./routes/FunctionRoute/FunctionRoute"
 21 | import Learnings from "./pages/Learnings/Learnings"
 22 | import SkillSets from "./pages/SkillSets/SkillSets"
 23 | import Performance from "./pages/Performance/Performance"
 24 | import LearningsReq from "./pages/SelfService/ManageReq/LearningsReq"
 25 | import RaisedIssue from "./pages/SelfService/ManageReq/RaisedIssue"
 26 | import Profile from "./pages/Profile/Profile"
 27 | 
 28 | // APIs
 29 | 
 30 | import { fetchEmployeeData, getNotification } from './api/employee';
 31 | import { Routes, Route, useNavigate } from "react-router-dom";
 32 | import {Navigate} from "react-router-dom"
 33 | import { logout} from "./redux/login/loginSlice"
 34 | import { initial, fetchProfile, errorfetching, final} from "./redux/employee/employeeSlice"
 35 | import { fetchNotification } from "./redux/notifications/notificationSlice"
 36 | import {  useDispatch} from "react-redux"
 37 | import jwtDecode from "jwt-decode"
 38 | import ManagerRoute from "./routes/ManagerRoute/ManagerRoute"
 39 | 
 40 | 
 41 | function App() {
 42 |   let user = JSON.parse(localStorage.getItem('employee'))
 43 |   const dispatch = useDispatch()
 44 |   const navigate = useNavigate()
 45 |   useEffect(() => {
 46 |     if (user?.token) {
 47 |         const decodedToken = jwtDecode(user.token)
 48 |         if (decodedToken.exp * 1000 < new Date().getTime()) {
 49 |           dispatch(final())
 50 |           dispatch(logout("Session Time Out"))
 51 |           navigate("/signin")
 52 |         }
 53 |           dispatch(initial())
 54 |         fetchEmployeeData(user.result._id)
 55 |         .then((res)=> dispatch(fetchProfile(res.data)))
 56 |         .catch(err=> dispatch(errorfetching(err.message)))
 57 | 
 58 |         getNotification(user.result._id)
 59 |         .then((res)=> dispatch(fetchNotification(res.data)))
 60 |         .catch(err=> dispatch(errorfetching(err.message)))
 61 | 
 62 |  
 63 |     } 
 64 | 
 65 | }, [navigate])
 66 | 
 67 |   return (
 68 |     <>
 69 |     <Routes>
 70 |       <Route exact path="/*" element={<ErrorPage />} />
 71 |       <Route exact path="/signin" element={ user ? <Navigate to="/" /> :<SignIn />} />
 72 | 
 73 | 
 74 |       {/* Protected routes */}
 75 |       <Route  element= {<ProtectedRoute />}>
 76 |        <Route exact path="/" element={ <Home /> } />
 77 |        <Route exact path="/profile" element={ <Profile /> } />
 78 |        <Route element={<FunctionRoute/>} >
 79 |        <Route exact path="/selfservice" element={<SelfService />} />
 80 |        <Route exact path="/selfservice/separation" element={<Seperation />} />
 81 |        <Route exact path="/selfservice/transfer" element={<Transfer />} />
 82 |        <Route exact path="/selfservice/viewslip" element={<ViewPaySlip />} />
 83 |        <Route exact path="/selfservice/vehicle" element={<Cab />} />
 84 |        <Route exact path="/selfservice/assets" element={<Assets />} />
 85 |       <Route element ={<ManagerRoute />}>
 86 |       <Route exact path="/selfservice/all-requests" element={<ManageReq />} />
 87 |        <Route exact path="/selfservice/all-requests/leave" element={<LeaveReq />} />
 88 |        <Route exact path="/selfservice/all-requests/vehicle" element={<VehicleReq />} />
 89 |        <Route exact path="/selfservice/all-requests/assets" element={<AssetsReq />} />
 90 |        <Route exact path="/selfservice/all-requests/learnings" element={<LearningsReq />} />
 91 |        <Route exact path="/selfservice/all-requests/tickets" element={<RaisedIssue />} />
 92 |       </Route>
 93 |        <Route exact path="/timesheet" element={<Timesheet />} />
 94 |        <Route exact path="/leave" element={<Leave />} />
 95 |        <Route exact path="/tickets" element={<RaiseIssue />} />
 96 |        <Route exact path="/learnings" element={<Learnings />} />
 97 |        <Route exact path="/skillsets" element={<SkillSets />} />
 98 |        <Route exact path="/performance" element={<Performance />} />
 99 | 
100 |        </Route>
101 | 
102 |       </Route>
103 |     </Routes>
104 |     </>
105 |   );
106 | }
107 | 
108 | export default App;
109 | 
110 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/ViewPaySlip/ViewPaySlip.js:
--------------------------------------------------------------------------------
  1 | import React, {useState} from 'react'
  2 | import NavBar from '../../../components/NavBar/NavBar'
  3 | import "./styles.css"
  4 | import ViewSlip from './viewSlip'
  5 | 
  6 | function ViewPaySlip() {
  7 |   const [viewed, setViewed] = useState(false)
  8 |   const handleView = ()=>{
  9 |     setViewed((prev) => !prev)
 10 | 
 11 |   }
 12 |   const handleClose = (value)=> {
 13 |     setViewed(value)
 14 | }
 15 |     return (
 16 |         <>
 17 |         <div className='viewPay'>
 18 |           {viewed ? <div  className="overflow-x-auto"> <ViewSlip handleClose={handleClose} /> </div> :
 19 |         <div className='separationStatus'>
 20 |             <h5 className='mt-4 mb-2 text-center pt-4 font-semibold'>Payment Information</h5>
 21 |      <div class="flex flex-col">
 22 |   <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
 23 |     <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
 24 |       <div class="overflow-hidden">
 25 |         <table class="min-w-full">
 26 |           <thead class="border-b">
 27 |             <tr>
 28 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 29 |                 #
 30 |               </th>
 31 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 32 |                 Month
 33 |               </th>
 34 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 35 |               Working Days
 36 |               </th>
 37 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 38 |               Days Payable
 39 |               </th>
 40 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 41 |               Total Amount
 42 |               </th>
 43 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 44 |               Deductions
 45 |               </th>
 46 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 47 |               Net Pay
 48 |               </th>
 49 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 50 |               View / Download
 51 |               </th>
 52 |               
 53 |             </tr>
 54 |           </thead>
 55 |           <tbody>
 56 |             <tr class="border-b font-medium">
 57 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">     1 </td>
 58 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 59 |               Sep
 60 |               </td>
 61 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 62 |             30
 63 |               </td>
 64 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 65 |               30
 66 |               </td>
 67 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 68 |               1,000,000.00
 69 |               </td>
 70 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 71 |                 30,000.00
 72 |               </td>
 73 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 74 |                 70,000.00
 75 |               </td>
 76 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap flex justify-around border-none">
 77 |                   <button className='button-1' onClick={handleView}>View Slip </button>
 78 |                   <button className='button-2' >Download Slip </button>
 79 | 
 80 |               </td>
 81 |             </tr>
 82 | {/*  */}
 83 | <tr class="border-b font-medium">
 84 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">     1 </td>
 85 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 86 |               Oct
 87 |               </td>
 88 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 89 |             30
 90 |               </td>
 91 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 92 |               30
 93 |               </td>
 94 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 95 |               1,000,000.00
 96 |               </td>
 97 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 98 |                 30,000.00
 99 |               </td>
100 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
101 |                 70,000.00
102 |               </td>
103 |               <td class="text-sm text-gray-900 font-semibold px-6 py-4  flex justify-around border-none">
104 |               <button className='button-1'>View Slip </button>
105 |                   <button className='button-2'>Download Slip </button>
106 |               </td>
107 |             </tr>
108 |            
109 |           </tbody>
110 |         </table>
111 |       </div>
112 |     </div>
113 |   </div>
114 | </div>
115 | 
116 |             </div>
117 |             }
118 |                 <div className='SlipForm'>
119 | 
120 |                 </div>
121 |             
122 |         </div>
123 |         <NavBar />
124 |         </>
125 |     )
126 | }
127 | 
128 | export default ViewPaySlip
129 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/ManageReq/VehicleReq.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavBar from '../../../components/NavBar/NavBar'
 3 | import { useNavigate} from 'react-router-dom'
 4 | import {AiFillCaretRight} from "react-icons/ai"
 5 | import "./styles.css"
 6 | function VehicleReq() {
 7 |     const navigate = useNavigate()
 8 |     return (
 9 |         <>
10 |         <div className='viewPay'>
11 |         <div className="container my-5 tableView py-4 overflow-x-auto">
12 |             <div className='button-groups'> 
13 |             <div className='button-5 font-semibold text-sm'  onClick={()=>{navigate('/selfservice/all-requests')}} > All Requests</div>
14 |                 <div className='button-5 font-semibold text-sm'  onClick={()=>{navigate('/selfservice/all-requests/leave')}}> Leave Requests</div>
15 |                 <div className='button-5 font-semibold text-sm' style={{backgroundColor:"#3283bd"}} onClick={()=>{navigate('/selfservice/all-requests/vehicle')}}> Vehicle Requests</div>
16 |                 <div className='button-5 font-semibold text-sm' onClick={()=>{navigate('/selfservice/all-requests/assets')}}> Assets Requests</div>
17 |              </div>
18 |              <h6 className='font-bold ml-2 my-2 flex'>  All Requests <AiFillCaretRight className='mx-2' /> Vehicle Requests </h6>
19 |                         <table className="table-auto border-collapse  w-100 text-center rounded-2xl border border-gray-400">
20 |                             <thead className="bg-gray-50">
21 |                                 <tr>
22 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
23 |                                         Employee Name 
24 |                                     </th>
25 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
26 |                                         Employee ID 
27 |                                     </th>
28 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
29 |                                         Contact Number
30 |                                     </th>
31 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
32 |                                         Pick-Up Location
33 |                                     </th>
34 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
35 |                                         Drop Location 
36 |                                     </th>
37 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
38 |                                         Requested Date
39 |                                     </th>
40 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
41 |                                         Approved Status
42 |                                     </th>
43 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
44 |                                         Comments
45 |                                     </th>
46 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
47 |                                         Actions
48 |                                     </th>
49 |                                 </tr>
50 |                             </thead>
51 |                             <tbody className="bg-white ">
52 |                                 <tr className="whitespace-nowrap">
53 |                                     <td className="px-6 py-4 text-sm text-gray-500">
54 |                                     ₹ 45000.00
55 |                                     </td>
56 |                                     <td className="px-6 py-4">
57 |                                         <div className="text-sm text-gray-900">
58 |                                         ₹1020.00
59 |                                         </div>
60 |                                     </td>
61 |                                     <td className="px-6 py-4">
62 |                                         <div className="text-sm text-gray-500">    ₹2020.00</div>
63 |                                     </td>
64 |                                     <td className="px-6 py-4 text-sm text-gray-500">
65 |                                     %10
66 |                                     </td>
67 |                                     <td className="text-sm px-6 py-4">
68 |                                     ₹500020.00
69 |                                     </td>
70 |                                     <td className="text-sm px-6 py-4">
71 |                                     ₹500020.00
72 |                                     </td>
73 |                                     <td className="text-sm px-6 py-4">
74 |                                     ₹500020.00
75 |                                     </td>
76 |                                     <td className="text-sm px-6 py-4">
77 |                                     ₹500020.00
78 |                                     </td>
79 |                                     <td className="text-sm px-6 py-4">
80 |                                     <div className='button-sm-1 text-sm my-1'>Approve</div>
81 |                                     <div className='button-sm-2 text-sm my-1'>Deline</div>
82 |                                     </td>
83 |                     
84 |                                 </tr>
85 |                         
86 |     
87 |                         
88 |                             </tbody>
89 |                         </table>
90 |                     </div>
91 |         </div>
92 |         <NavBar />
93 |         </>
94 |     )
95 | }
96 | 
97 | export default VehicleReq
98 | 


--------------------------------------------------------------------------------
/client/src/pages/SelfService/ManageReq/LeaveReq.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NavBar from '../../../components/NavBar/NavBar'
 3 | import { useNavigate} from 'react-router-dom'
 4 | import {AiFillCaretRight} from "react-icons/ai"
 5 | import "./styles.css"
 6 | function LeaveReq() {
 7 |     const navigate = useNavigate()
 8 |     return (
 9 |         <>
10 |         <div className='viewPay'>
11 |         <div className="container my-5 tableView py-4 overflow-x-auto">
12 |             <div className='button-groups'> 
13 |             <div className='button-5 font-semibold text-sm'  onClick={()=>{navigate('/selfservice/all-requests')}} > All Requests</div>
14 |                 <div className='button-5 font-semibold text-sm' style={{backgroundColor:"#3283bd"}} onClick={()=>{navigate('/selfservice/all-requests/')}}> Leave Requests</div>
15 |                 <div className='button-5 font-semibold text-sm' onClick={()=>{navigate('/selfservice/all-requests/vehicle')}}> Vehicle Requests</div>
16 |                 <div className='button-5 font-semibold text-sm' onClick={()=>{navigate('/selfservice/all-requests/assets')}}> Assets Requests</div>
17 |              </div>
18 |              <h6 className='font-bold ml-2 my-2 flex'>  All Requests <AiFillCaretRight className='mx-2' /> Leave Requests </h6>
19 |                         <table className="table-auto border-collapse  w-100 text-center rounded-2xl border border-gray-400">
20 |                             <thead className="bg-gray-50">
21 |                                 <tr>
22 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
23 |                                         Employee Name 
24 |                                     </th>
25 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
26 |                                         Employee ID 
27 |                                     </th>
28 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
29 |                                         Project
30 |                                     </th>
31 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
32 |                                         Team
33 |                                     </th>
34 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
35 |                                         Leave Type
36 |                                     </th>
37 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
38 |                                         Requested Date
39 |                                     </th>
40 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
41 |                                         Approved Status
42 |                                     </th>
43 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
44 |                                         Comments
45 |                                     </th>
46 |                                     <th className="px-4 py-2 text-xs text-gray-500 ">
47 |                                         Actions
48 |                                     </th>
49 |                                 </tr>
50 |                             </thead>
51 |                             <tbody className="bg-white ">
52 |                                 <tr className="whitespace-nowrap">
53 |                                     <td className="px-6 py-4 text-sm text-gray-500">
54 |                                     ₹ 45000.00
55 |                                     </td>
56 |                                     <td className="px-6 py-4">
57 |                                         <div className="text-sm text-gray-900">
58 |                                         ₹1020.00
59 |                                         </div>
60 |                                     </td>
61 |                                     <td className="px-6 py-4">
62 |                                         <div className="text-sm text-gray-500">    ₹2020.00</div>
63 |                                     </td>
64 |                                     <td className="px-6 py-4 text-sm text-gray-500">
65 |                                     %10
66 |                                     </td>
67 |                                     <td className="text-sm px-6 py-4">
68 |                                     ₹500020.00
69 |                                     </td>
70 |                                     <td className="text-sm px-6 py-4">
71 |                                     ₹500020.00
72 |                                     </td>
73 |                                     <td className="text-sm px-6 py-4">
74 |                                     ₹500020.00
75 |                                     </td>
76 |                                     <td className="text-sm px-6 py-4">
77 |                                     ₹500020.00
78 |                                     </td>
79 |                                     <td className="text-sm px-6 py-4 flex-col ">
80 |                                     <div className='button-sm-1 text-sm my-1'>Approve</div>
81 |                                     <div className='button-sm-2 text-sm my-1'>Deline</div>
82 |                                     </td>
83 |                                    
84 |                     
85 |                                 </tr>
86 |                         
87 |     
88 |                         
89 |                             </tbody>
90 |                         </table>
91 |                     </div>
92 |         </div>
93 |         <NavBar />
94 |         </>
95 |     )
96 | }
97 | 
98 | export default LeaveReq
99 | 


--------------------------------------------------------------------------------
/client-hr/src/App.js:
--------------------------------------------------------------------------------
  1 | // Components
  2 | import {useEffect} from "react"
  3 | import HomeHR from "./pages/HomeHR/HomeHR"
  4 | import SignIn from "./pages/SignIn/SignIn"
  5 | import Timesheet from "./pages/Timesheet/Timesheet"
  6 | import ErrorPage from "./pages/Error/Error"
  7 | import Management from "./pages/Management/Management"
  8 | import AddEvents from "./pages/Management/AddEvents/AddEvents"
  9 | import Announcements from "./pages/Management/Announcements/Announcements"
 10 | import ManageReq from "./pages/Management/ManageReq/ManageReq"
 11 | import LeaveReq from "./pages/Management/ManageReq/LeaveReq"
 12 | import VehicleReq from "./pages/Management/ManageReq/VehicleReq"
 13 | import AssetsReq from "./pages/Management/ManageReq/AssetsReq"
 14 | import ViewPaySlip from "./pages/Management/ViewPaySlip/ViewPaySlip"
 15 | import LearningsReq from "./pages/Management/ManageReq/LearningsReq"
 16 | import ProtectedRoute from "./routes/ProtectedRoutes/ProtectedRoute"
 17 | import AddEmployee from "./pages/AddEmployee/AddEmployee"
 18 | import ViewEmployees from "./pages/ViewEmployees/ViewEmployees"
 19 | import ViewBySkills from "./pages/ViewEmployees/ViewBySkills"
 20 | import ViewManagers from "./pages/ViewEmployees/ViewManagers"
 21 | import ViewPerfomer from "./pages/ViewEmployees/ViewPerfomer"
 22 | import Profile from "./pages/Profile/Profile"
 23 | import EditProfile from "./pages/EditProfile/EditProfile"
 24 | import SkillsReq from "./pages/Management/ManageReq/SkillsReq"
 25 | import Seperation from "./pages/Management/ManageReq/Seperation"
 26 | import Transfer from "./pages/Management/ManageReq/Transfer"
 27 | import Transcations from "./pages/Transcations/Transcations"
 28 | import ChangePostion from "./pages/ViewEmployees/ChangePostion"
 29 | // APIs
 30 | import { fetchEmployeeData, fetchStats as fetchAllStats } from './api/api';
 31 | import { Routes, Route, useNavigate } from "react-router-dom";
 32 | import {Navigate} from "react-router-dom"
 33 | import { logout} from "./redux/login/loginSlice"
 34 | import { initial, fetchProfile, errorfetching, fetchStats, final} from "./redux/hr/hrSlice"
 35 | import {  useDispatch} from "react-redux"
 36 | import jwtDecode from "jwt-decode"
 37 | import ChangeProject from "./pages/ViewEmployees/ChangeProject"
 38 | 
 39 | 
 40 | 
 41 | function App() {
 42 |   let user = JSON.parse(localStorage.getItem('hr'))
 43 |   const dispatch = useDispatch()
 44 |   const navigate = useNavigate()
 45 |   useEffect(() => {
 46 | 
 47 |     if (user?.token) {
 48 |        dispatch(initial())
 49 |         const decodedToken = jwtDecode(user.token)
 50 |         if (decodedToken.exp * 1000 < new Date().getTime()) {
 51 |           dispatch(logout("Session Time Out"))
 52 |           navigate("/signin")
 53 |         };
 54 | 
 55 |         fetchEmployeeData(user.result._id)
 56 |         .then((res)=> dispatch(fetchProfile(res.data)))
 57 |         .catch(err=> dispatch(errorfetching(err.message)))
 58 | 
 59 |         fetchAllStats()
 60 |         .then((res)=> dispatch(fetchStats(res.data))) 
 61 |         .catch(err=> dispatch(errorfetching(err.message)))
 62 |     } 
 63 |     if(!user) {
 64 |       dispatch(final())
 65 |       dispatch(logout("Please Login again"))
 66 |       navigate("/signin")
 67 |     }
 68 | }, [ navigate, dispatch, user])
 69 | 
 70 |   return (
 71 |     <>
 72 |     <Routes>
 73 |       <Route exact path="/*" element={<ErrorPage />} />
 74 |       {/* <Route exact path="/signin" element={<SignIn />} /> */}
 75 |       <Route exact path="/signin" element={ user ? <Navigate to="/" /> :<SignIn />} />
 76 | 
 77 | 
 78 |       {/* Protected routes */}
 79 |       <Route  element= {<ProtectedRoute />}>
 80 |        <Route exact path="/" element={ <HomeHR /> } />
 81 |        <Route exact path="/management" element={<Management />} />
 82 |        <Route exact path="/management/addevents" element={<AddEvents />} />
 83 |        <Route exact path="/management/announcements" element={<Announcements />} />
 84 |        <Route exact path="/management/payment" element={<ViewPaySlip />} />
 85 |        <Route exact path="/management/all-requests" element={<ManageReq />} />
 86 |        <Route exact path="/management/all-requests/leave" element={<LeaveReq />} />
 87 |        <Route exact path="/management/all-requests/vehicle" element={<VehicleReq />} />
 88 |        <Route exact path="/management/all-requests/assets" element={<AssetsReq />} />
 89 |        <Route exact path="/management/all-requests/learnings" element={<LearningsReq />} />
 90 |        <Route exact path="/management/all-requests/skills" element={<SkillsReq />} />  
 91 |        <Route exact path="/management/all-requests/seperation" element={<Seperation />} />  
 92 |        <Route exact path="/management/all-requests/transfer" element={<Transfer />} />  
 93 |        <Route exact path="/view-employees" element={<ViewEmployees />} />
 94 |        <Route exact path="/view-employees/view-skills" element={<ViewBySkills />} />
 95 |        <Route exact path="/view-employees/managers" element={<ViewManagers />} />
 96 |        <Route exact path="/view-employees/performer" element={<ViewPerfomer />} />
 97 |        <Route exact path="/view-employees/:id" element={<Profile />} />
 98 |        <Route exact path="/edit-employees/:id" element={<EditProfile />} />
 99 |        <Route exact path="/change-position/:id" element={<ChangePostion />} />
100 |        <Route exact path="/change-project/:id" element={<ChangeProject />} />
101 |        <Route exact path="/transactions" element={<Transcations />} />
102 |        <Route exact path="/timesheet" element={<Timesheet />} />
103 |        <Route exact path="/add-employee" element={<AddEmployee />} />
104 |       </Route>
105 |     </Routes>
106 |     </>
107 |   );
108 | }
109 | 
110 | export default App;
111 | 
112 | 


--------------------------------------------------------------------------------
/admin/src/pages/Management/ViewPaySlip/ViewPaySlip.js:
--------------------------------------------------------------------------------
  1 | import React, {useState} from 'react'
  2 | import NavBar from '../../../components/NavBar/NavBar'
  3 | import "./styles.css"
  4 | import ViewSlip from './viewSlip'
  5 | import { Link } from 'react-router-dom'
  6 | 
  7 | function ViewPaySlip() {
  8 |   const [viewed, setViewed] = useState(false)
  9 |   const handleView = ()=>{
 10 |     setViewed((prev) => !prev)
 11 | 
 12 |   }
 13 |   const handleClose = (value)=> {
 14 |     setViewed(value)
 15 | }
 16 |     return (
 17 |         <>
 18 |         <div className='viewPay'>
 19 |         <nav class="rounded-md w-full">
 20 |   <ol class="list-reset flex">
 21 |     <li> <Link to="/selfservice">Self Service </Link></li>
 22 |     <li><span class="text-gray-500 mx-2">/</span></li>
 23 |     <li class="text-gray-500">View Pay-Slip</li>
 24 |   </ol>
 25 | </nav>
 26 |           {viewed ? <div  className="overflow-x-auto"> <ViewSlip handleClose={handleClose} /> </div> :
 27 |         <div className='separationStatus'>
 28 |             <h5 className='mt-4 mb-2 text-center pt-4 font-semibold'>Payment Information</h5>
 29 |      <div class="flex flex-col">
 30 |   <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
 31 |     <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
 32 |       <div class="overflow-hidden">
 33 |         <table class="min-w-full">
 34 |           <thead class="border-b">
 35 |             <tr>
 36 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 37 |                 #
 38 |               </th>
 39 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 40 |                 Month
 41 |               </th>
 42 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 43 |               Working Days
 44 |               </th>
 45 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 46 |               Days Payable
 47 |               </th>
 48 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 49 |               Total Amount
 50 |               </th>
 51 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 52 |               Deductions
 53 |               </th>
 54 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 55 |               Net Pay
 56 |               </th>
 57 |               <th scope="col" class="text-sm font-semibold text-gray-900 px-6 py-4 text-left">
 58 |               View / Download
 59 |               </th>
 60 |               
 61 |             </tr>
 62 |           </thead>
 63 |           <tbody>
 64 |             <tr class="border-b font-medium">
 65 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">     1 </td>
 66 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 67 |               Sep
 68 |               </td>
 69 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 70 |             30
 71 |               </td>
 72 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 73 |               30
 74 |               </td>
 75 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 76 |               1,000,000.00
 77 |               </td>
 78 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 79 |                 30,000.00
 80 |               </td>
 81 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 82 |                 70,000.00
 83 |               </td>
 84 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap flex justify-around border-none">
 85 |                   <button className='button-1' onClick={handleView}>View Slip </button>
 86 |                   <button className='button-2' >Download Slip </button>
 87 | 
 88 |               </td>
 89 |             </tr>
 90 | {/*  */}
 91 | <tr class="border-b font-medium">
 92 |               <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">     1 </td>
 93 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 94 |               Oct
 95 |               </td>
 96 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
 97 |             30
 98 |               </td>
 99 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
100 |               30
101 |               </td>
102 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
103 |               1,000,000.00
104 |               </td>
105 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
106 |                 30,000.00
107 |               </td>
108 |               <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
109 |                 70,000.00
110 |               </td>
111 |               <td class="text-sm text-gray-900 font-semibold px-6 py-4  flex justify-around border-none">
112 |               <button className='button-1'>View Slip </button>
113 |                   <button className='button-2'>Download Slip </button>
114 |               </td>
115 |             </tr>
116 |            
117 |           </tbody>
118 |         </table>
119 |       </div>
120 |     </div>
121 |   </div>
122 | </div>
123 | 
124 |             </div>
125 |             }
126 |                 <div className='SlipForm'>
127 | 
128 |                 </div>
129 |             
130 |         </div>
131 |         <NavBar />
132 |         </>
133 |     )
134 | }
135 | 
136 | export default ViewPaySlip
137 | 


--------------------------------------------------------------------------------
/admin/src/pages/HomeAdmin/HomeAdmin.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import NavBar from '../../components/NavBar/NavBar'
  3 | import {RiComputerFill} from "react-icons/ri"
  4 | import {IoIosPeople} from "react-icons/io"
  5 | import {MdPendingActions, MdImportantDevices, MdMoreTime} from "react-icons/md"
  6 | import { FcHighPriority } from "react-icons/fc"
  7 | import Swal from "sweetalert2"
  8 | import "./styles.css"
  9 | import { useNavigate } from "react-router-dom"
 10 | import { useSelector } from 'react-redux'
 11 | import { CircularProgress, Alert } from '@mui/material'
 12 | import {addProjectTo, addHolidaysTo} from "../../api/api"
 13 | function HomeHR() {
 14 |     const navigate= useNavigate()
 15 |     const {stats, isloading, error} = useSelector(state => state.admin)
 16 |     const addProject = async()=>{
 17 |       const { value: data } = await Swal.fire({
 18 |         title: 'Add Project',
 19 |         input: 'text',
 20 |         inputLabel: 'Project',
 21 |         showCancelButton: true,
 22 |         inputValidator: (value) => {
 23 |           if (!value) {
 24 |             return 'You need to write Desigination Title'
 25 |           }
 26 |         }
 27 |       })
 28 |       if(data) {
 29 |       let formData= {text:data}
 30 |       addProjectTo(formData).then(()=> Swal.fire('Done'))
 31 |       .catch(()=>Swal.fire('Error adding Desigination') )
 32 |       }
 33 |     }
 34 |     const addHolidays = async()=>{
 35 |       const { value: data } = await Swal.fire({
 36 |         title: 'Add Holidays',
 37 |         input: 'text',
 38 |         inputLabel: 'Holidays',
 39 |         showCancelButton: true,
 40 |         inputValidator: (value) => {
 41 |           if (!value) {
 42 |             return 'You need to write Holidays Title'
 43 |           }
 44 |         }
 45 |       })
 46 |       if(data) {
 47 |       let formData= {text:data}
 48 |       addHolidaysTo(formData).then(()=> Swal.fire('Done'))
 49 |       .catch(()=>Swal.fire('Error adding Holidays') )
 50 |       }
 51 |     }
 52 |     
 53 |     return (
 54 |         <div>
 55 |             <div className='separation'>
 56 |             {error && <div className='flex justify-center'> <Alert severity='warning'> {error}</Alert> </div>}
 57 |               {isloading? <CircularProgress/> : 
 58 |                 <div className='cardTopAdmin'> 
 59 |                
 60 |                 <div className='flex justify-center cardItem'>
 61 |                    <div className="homeTopIcon"> 
 62 |                  <MdPendingActions className="text-fourth text-4xl" />
 63 |                </div>
 64 |             <div className='text-left'>
 65 |             <h5 className=' pl-1 font-semibold'> {stats?.pendingTickets}</h5>
 66 |               <h6 className='pl-1 text-secondary'> Tickets Pending </h6>
 67 |             </div>
 68 |           </div>
 69 |           <div className='flex justify-center cardItem'>
 70 |                    <div className="homeTopIcon"> 
 71 |                  <FcHighPriority className="text-fourth text-4xl" />
 72 |                </div>
 73 |             <div className='text-left'>
 74 |             <h5 className=' pl-1 font-semibold'> {stats?.highPriorityTickets}</h5>
 75 |               <h6 className='pl-1 text-secondary'> High Priority Tickets  </h6>
 76 |             </div>
 77 |           </div>
 78 |           <div className='flex justify-center cardItem'>
 79 |             <div className="homeTopIcon">            
 80 |             <MdMoreTime className="text-fourth text-4xl" />
 81 |             </div>
 82 |             <div className='text-left'>
 83 |             <h5 className=' pl-1 font-semibold'>{stats?.onDelayTickets}</h5>
 84 |               <h6 className='pl-1 text-secondary'> Ticket On Progress</h6>
 85 |             </div>
 86 |           </div>
 87 |           <div className='flex justify-center cardItem'>
 88 |             <div className="homeTopIcon">            
 89 |             <RiComputerFill className="text-fourth text-4xl" />
 90 |             </div>
 91 |             <div className='text-left'>
 92 |             <h5 className=' pl-1 font-semibold'>{stats?.totalAssets}</h5>
 93 |               <h6 className='pl-1 text-secondary'>Total Assets</h6>
 94 |             </div>
 95 |           </div>
 96 | 
 97 | 
 98 |           <div className='flex justify-center cardItem'>
 99 |             <div className="homeTopIcon">            
100 |             <MdImportantDevices className="text-fourth text-4xl" />
101 |             </div>
102 |             <div className='text-left'>
103 |             <h5 className=' pl-1 font-semibold'>{stats?.availbleAssets}</h5>
104 |               <h6 className='pl-1 text-secondary'>Available Assets</h6>
105 |             </div>
106 |           </div>
107 |           <div className='flex justify-center cardItem'>
108 |             <div className="homeTopIcon">            
109 |             <IoIosPeople className="text-fourth text-4xl" />
110 |             </div>
111 |             <div className='text-left'>
112 |             <h5 className=' pl-1 font-semibold'>{stats?.employeeCount}</h5>
113 |               <h6 className='pl-1 text-secondary'>Total Employees</h6>
114 |             </div>
115 |           </div>
116 | 
117 |                 </div>
118 |                 }
119 | 
120 |                 <div className='mainChart mt-3'>
121 |                 </div>
122 |                 <div className='flex justify-around align-center mt-1 mb-5'> 
123 |                 <div className="hrCards"onClick={()=>{navigate("/add-assets")}} >  Add Assets</div>
124 |                     <div className="hrCards" onClick={()=>{addProject()}}> Add Project</div>
125 |                     <div className="hrCards" onClick={()=>{addHolidays()}}>Add Company Holidays </div>
126 |                 </div>
127 |             </div>
128 |             
129 |             <NavBar />
130 |         </div>
131 |     )
132 | }
133 | 
134 | export default HomeHR
135 | 


--------------------------------------------------------------------------------
/client-hr/src/pages/AddEmployee/AddEmployee.js:
--------------------------------------------------------------------------------
  1 | import React, {useState} from 'react'
  2 | import "./styles.css"
  3 | import {Link, useNavigate } from "react-router-dom"
  4 | import { useFormik } from 'formik';
  5 | import { LinearProgress  } from '@mui/material';
  6 | import Alert from '@mui/material/Alert';
  7 | import { addEmployee } from '../../api/api';
  8 | import NavBar from '../../components/NavBar/NavBar';
  9 | import * as yup from "yup";
 10 | import Swal from 'sweetalert2'
 11 | function AddEmployee() {
 12 | 
 13 |   const navigate = useNavigate()
 14 |   const [error, setError] = useState(false)
 15 |   const [loading, setLoading] = useState(false)
 16 |   const handleSubmit =async (values)=>{
 17 |     try { 
 18 |         setLoading(true)
 19 |       addEmployee(values).then((res)=> {
 20 |         setLoading(false)
 21 |         setError(false)
 22 |         Swal.fire({
 23 |             title: 'Success!',
 24 |             text: 'Created  Successfully',
 25 |             icon: 'success',
 26 |             confirmButtonText: 'OK'
 27 |           })
 28 |         
 29 |       }).catch(error=> setError(error.response.data.message))
 30 | 
 31 |     } catch (error) { 
 32 |         setError(error.response.data.message)
 33 |       
 34 |     }
 35 |   }
 36 |   const schema = yup.object({
 37 |     password: yup
 38 |       .string()
 39 |       .required('Please Enter your password')
 40 |       .matches(
 41 |         "^(?=.*[A-Za-z])(?=.*d)(?=.*[@$!%*#?&])[A-Za-zd@$!%*#?&]{5,}$",
 42 |         "*Must Contain 5 Characters \n, *One Uppercase, \n *One Lowercase, \n *One Number and one special case Character"
 43 |       ),
 44 |     repassword: yup
 45 |       .string()
 46 |       .required()
 47 |       .oneOf([yup.ref("password"), null], "Passwords must match")
 48 |   });
 49 |   const formik = useFormik({
 50 |     initialValues:{
 51 |       email:"",
 52 |       fullname:"",
 53 |       password:"",
 54 |       repassword:""
 55 |     },
 56 |     onSubmit: (values, {  resetForm } )=> { 
 57 |       console.log(values)
 58 |       handleSubmit(values)
 59 |       resetForm()
 60 | 
 61 |     },
 62 |     // validationSchema:(schema),
 63 |     validate: values=>{
 64 |       let error={}
 65 |       if(!values.email) {
 66 |         error.email="*Email Required"
 67 |       }
 68 |       if(!values.fullname) {
 69 |         error.fullname="*Fullname Required"
 70 |       }
 71 |       if(!values.password) {
 72 |         error.password="*Password Required"
 73 |       }
 74 |       if(!values.repassword) {
 75 |         error.repassword="*Required"
 76 |       }
 77 |       return error
 78 |     }
 79 |   })
 80 |     return (
 81 |         <div>
 82 |       <div className='separation'>
 83 |           <div className='separationStatus'>
 84 |         <form onSubmit={formik.handleSubmit}>
 85 |         <div className=" bg-grey align-middle rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
 86 |         <h5 className='font-semibold metal m-auto pb-2'>Add Employee</h5>           
 87 |             <div className='mb-4'>
 88 |               {error &&    <div className='flex justify-center'> <Alert severity="error">{error}!</Alert></div> }
 89 |             <div className="py-2 pl-1 flex ">
 90 |             <input
 91 |               className="w-full px-1 py-2"
 92 |               onChange={formik.handleChange}
 93 |               value={formik.values.email}
 94 |               onBlur={formik.handleBlur}
 95 |               id="email"
 96 |               name="email"
 97 |               type="email"
 98 |               placeholder="Email"
 99 |             />
100 |            
101 |           </div>
102 | 
103 |           {formik.touched.email && formik.errors.email  ? <small className='ml-1 error'> {formik.errors.email} </small> : null}
104 |             </div>
105 |             <div className='mb-4'>
106 |             <div className="py-2 pl-1 flex">
107 |             <input
108 |               className="w-full px-1 py-2"
109 |               onChange={formik.handleChange}
110 |               value={formik.values.fullname}
111 |               onBlur={formik.handleBlur}
112 |               id="fullname"
113 |               name="fullname"
114 |               type="text"
115 |               placeholder="Full Name"
116 |             />
117 |            
118 |           </div>
119 | 
120 |           {formik.touched.fullname && formik.errors.fullname  ? <small className='ml-1 error'> {formik.errors.fullname} </small> : null}
121 |             </div>
122 |         <div className='flex justify-between'> 
123 | 
124 |           <div className="mb-6  w-2/5">
125 |           <div className="w-full py-2 pl-1 flex flex-col addEmployee">
126 |             <input
127 |               className="w-full px-1 py-2"
128 |               onChange={formik.handleChange}
129 |               value={formik.values.password}
130 |               onBlur={formik.handleBlur}
131 |               name="password"
132 |               id="password"
133 |               type="password"
134 |               placeholder="Password"
135 |             />
136 |              {formik.touched.password && formik.errors.password ? <small className='error'> {formik.errors.password} </small> : null}
137 |           </div>
138 |            
139 |           </div>
140 |           <div className="mb-6 w-2/5">
141 |           <div className="w-full py-2 pl-1 flex flex-col">
142 |             <input
143 |               className="w-full px-1 py-2"
144 |               onChange={formik.handleChange}
145 |               value={formik.values.repassword}
146 |               onBlur={formik.handleBlur}
147 |               name="repassword"
148 |               id="repassword"
149 |               type="repassword"
150 |               placeholder="ReType Password"
151 |             />
152 |                  {formik.touched.repassword && formik.errors.repassword ? <small className='error'> {formik.errors.repassword} </small> : null}
153 |           </div>
154 |          
155 |            
156 |           </div>
157 |           </div>
158 |           <div className=" items-center justify-center">
159 |           {!error && loading && <div className='flex flex-col justify-center items-center'><LinearProgress  color="info"   /> <small className='px-1'>Creating...</small> </div> }
160 |             <button type='submit' className="button-1 w-full my-2"> 
161 |               Create
162 |             </button>
163 |           </div>
164 |         </div>
165 |         </form>
166 |         </div>
167 |        
168 |       </div>
169 |       <NavBar />
170 |       </div>
171 |     );
172 | }
173 | 
174 | export default AddEmployee
175 | 


--------------------------------------------------------------------------------
/client/src/pages/Home/Home.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import Navbar from "../../components/NavBar/NavBar";
  3 | import "./styles.css"
  4 | import {MdBusinessCenter} from "react-icons/md"
  5 | import {VscProject} from "react-icons/vsc"
  6 | import {FaRegCalendarTimes} from 'react-icons/fa'
  7 | import {AiFillStar} from "react-icons/ai"
  8 | function Home() {
  9 |     return (
 10 |       <>
 11 |       <div className="home">
 12 |           <div className="cardTop">
 13 |           <div className='flex justify-center cardItem'>
 14 |             <div className="homeTopIcon"> 
 15 |             <MdBusinessCenter className="text-fourth text-4xl" />
 16 |             </div>
 17 |             <div className='text-left'>
 18 |             <h5 className=' pl-1 font-semibold'>Project Example</h5>
 19 |               <h6 className='pl-1 text-secondary'>Current Project</h6>
 20 |             </div>
 21 |             
 22 |           </div>
 23 |           <div className='flex justify-center cardItem'>
 24 |             <div className="homeTopIcon"> 
 25 |             <VscProject className="text-fourth text-4xl" />
 26 |             </div>
 27 |             <div className='text-left'>
 28 |             <h5 className=' pl-1 font-semibold'>1</h5>
 29 |               <h6 className='pl-1 text-secondary'>Allocated Project</h6>
 30 |             </div>
 31 |             
 32 |           </div>
 33 | 
 34 |       <div className='flex justify-center cardItem'>
 35 |             <div className="homeTopIcon"> 
 36 |             <FaRegCalendarTimes className="text-fourth text-4xl" />
 37 |             </div>
 38 |             <div className='text-left'>
 39 |             <h5 className=' pl-1 font-semibold'>1</h5>
 40 |               <h6 className='pl-1 text-secondary'>Timesheet Pending</h6>
 41 |             </div>
 42 |             
 43 |           </div>
 44 |           </div>
 45 | 
 46 |           <div className="cardStarEmployees">
 47 | 
 48 |             <h5 className='mt-2 mx-auto font-bold text-center'>Stars of this Quater</h5>
 49 |               <div className='p-1  flex sm:mx-auto md:mx-auto'> <AiFillStar className="text-gold" /> <AiFillStar className="text-gold" />  <AiFillStar className="text-gold" />  <AiFillStar  className="text-gold"/>  <AiFillStar  className="text-gold"/> </div>
 50 |            
 51 |             <div className='flex justify-around my-2 mx-auto starCard'>
 52 |                 <div className='p-1 mx-4'>
 53 |                   <img alt="employee" height="100px" width="150px" src="https://fj-employer-blog.s3.amazonaws.com/employer-blog/wp-content/uploads/2015/11/5-Ways-to-Analyze-Employee-Performance-1024x508.jpg" />
 54 |                   <div className='text-center mt-2 mb-3'>
 55 |                     <h6 className='font-semibold'>
 56 |                       Employee 1
 57 |                     </h6>
 58 |                     <p className='text-sm'> Team | Project</p>
 59 |                   </div>
 60 |                 </div>
 61 |                 
 62 |                 <div className='p-1 mx-4'>
 63 |                   <img alt="employee" height="100px" width="150px" src="https://fj-employer-blog.s3.amazonaws.com/employer-blog/wp-content/uploads/2015/11/5-Ways-to-Analyze-Employee-Performance-1024x508.jpg" />
 64 |                   <div className='text-center mt-2 mb-3'>
 65 |                     <h6 className='font-semibold'>
 66 |                       Employee 2
 67 |                     </h6>
 68 |                     <p className='text-sm'> Team | Project</p>
 69 |                   </div>
 70 |                 </div>
 71 | 
 72 |                 <div className='p-1 mx-4'>
 73 |                   <img alt="employee" height="100px" width="150px" src="https://fj-employer-blog.s3.amazonaws.com/employer-blog/wp-content/uploads/2015/11/5-Ways-to-Analyze-Employee-Performance-1024x508.jpg" />
 74 |                   <div className='text-center mt-2 mb-3'>
 75 |                     <h6 className='font-semibold'>
 76 |                       Employee 3
 77 |                     </h6>
 78 |                     <p className='text-sm'> Team | Project</p>
 79 |                   </div>
 80 |                 </div>
 81 |                 
 82 |             </div>
 83 | 
 84 |           </div>
 85 | 
 86 |           <div className='homeCompanyEvents'>
 87 |             <div className='homeEvent'>
 88 |                 <h6 className='mt-4 text text-center font-bold '>Events </h6>
 89 |                 <img height="150px" style={{width: "100%"}} src='https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80'  alt="eventsWallpaper"/>
 90 |                 <div className='px-5 py-2'>
 91 |                   <h6 className='font-semibold my-2'>Company Anniversary </h6>
 92 |                   <p className='text-sm'> Contrary to popular belief, Lorem Ipsum is not simply random text. 
 93 |                     It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
 94 |                      Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the 
 95 |                      more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of 
 96 |                      the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 
 97 |                      1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, 
 98 |                      written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>
 99 |                 </div>
100 |             </div>
101 |             <div className='homeEvent'>
102 |             <h6 className='mt-4 text text-center font-bold '>Events </h6>
103 |                 <img height="150px" style={{width: "100%"}} src='https://image.shutterstock.com/image-vector/creative-design-coronavirus-vaccine-banner-260nw-1894336930.jpg'  alt="eventsWallpaper"/>
104 |                 <div className='px-5 py-2'>
105 |                   <h6 className='font-semibold my-2'>Vaccination Drive </h6>
106 |                   <p className='text-sm'> Contrary to popular belief, Lorem Ipsum is not simply random text. 
107 |                     It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
108 |                      Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the 
109 |                      more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of 
110 |                      the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 
111 |                      1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, 
112 |                      written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>
113 |                 </div>
114 | 
115 |           </div>
116 | 
117 | 
118 |           </div>
119 |         
120 |       </div>
121 |       <Navbar />
122 |       </>
123 |         
124 |     )
125 | }
126 | 
127 | export default Home
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 


--------------------------------------------------------------------------------