Approved Leave
{Object.keys(approvedLeaves).map((date) => (
diff --git a/src/Components/Dependentinfo/Dependentinfo.jsx b/src/Components/Dependentinfo/Dependentinfo.jsx
new file mode 100644
index 0000000..b63cda9
--- /dev/null
+++ b/src/Components/Dependentinfo/Dependentinfo.jsx
@@ -0,0 +1,87 @@
+import { BiAddToQueue } from "react-icons/bi";
+import { FiEdit } from "react-icons/fi"
+
+import React from 'react';
+
+import { useState,useContext } from "react";
+
+import Popups from "../Popups/Popups";
+
+function Dependent_info({edit}){
+
+
+ const [showPopup, setShowPopup] = useState(false);
+
+ const closePopup = () => {
+ setShowPopup(false);
+ };
+ const dependants=[
+ {
+ name:"Dhruva Doe",
+ relation:"son"
+ },
+ {
+ name:"Samua Doe",
+ relation:"son"
+ },
+ {
+ name:"Samua Doe",
+ relation:"son"
+ }
+ ]
+
+
+ return (
+ <>
+
+
Dependant Information
+
+
+
+ | Dependent's Name |
+ Relation to Employee |
+ {(edit===true)&&(
+
+
+ |
+ )}
+
+
+
+
+ {dependants.map(dependant=>(
+
+ | {dependant.name} |
+ {dependant.relation} |
+ {(edit===true)&&(
+
+
+
+
+ |
+ )}
+
+
+
+ ))}
+
+
+
+
+
+
+ {showPopup && (
+
+
{/* Popup with a close function */}
+
+ )}
+
+
+ );
+ };
+
+export default Dependent_info
\ No newline at end of file
diff --git a/src/Components/Emergancycontact_info/Emergancycontact_info.jsx b/src/Components/Emergancycontact_info/Emergancycontact_info.jsx
new file mode 100644
index 0000000..2b76f47
--- /dev/null
+++ b/src/Components/Emergancycontact_info/Emergancycontact_info.jsx
@@ -0,0 +1,73 @@
+import { BiAddToQueue } from "react-icons/bi";
+import { FiEdit } from "react-icons/fi"
+import { useState } from "react";
+import Popup2 from "../Popup2/Popup2";
+function Emergency_contact_info({edit}){
+ const [showPopup, setShowPopup] = useState(false);
+ const closePopup = () => {
+ setShowPopup(false);
+ }
+ const Emergency_info=[
+ {
+ number:"+94716843128",
+ realtion:"son"
+ },
+ {
+ number:"+9471536447",
+ realtion:"spouse"
+ },
+ {
+ number:"+9471536447",
+ realtion:"spouse"
+ },
+
+
+ ]
+ return (
+ <>
+
+
Emergency Contact Information
+
+
+
+ | Emergency Contact Number |
+ Relation to Employee |
+ {(edit===true)&&(
+
+
+ |
+ )}
+
+
+
+ {Emergency_info.map(item=>(
+
+ | {item.number} |
+ {item.realtion} |
+ {(edit===true)&&(
+
+
+ |
+ )}
+
+
+
+ ))}
+
+
+
+
+ {showPopup && (
+
+
{/* Popup with a close function */}
+
+ )}
+
+
+ );
+ }
+ export default Emergency_contact_info
\ No newline at end of file
diff --git a/src/Components/EmployeeRepo/EmployeeRepo.jsx b/src/Components/EmployeeRepo/EmployeeRepo.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Components/HRview/HRview.jsx b/src/Components/HRview/HRview.jsx
new file mode 100644
index 0000000..70bc804
--- /dev/null
+++ b/src/Components/HRview/HRview.jsx
@@ -0,0 +1,235 @@
+import { useState } from 'react';
+import Personalinfo from '../Personalinfo/Personalinfo.jsx';
+
+function HRview() {
+ const employees = [
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ },
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ },
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ },
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ },
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ },
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ },
+ {
+ name: "diadhiada",
+ jobtitle: "HR",
+ paygrade: "level02"
+ },
+ {
+ name: "fsffs",
+ jobtitle: "Employee",
+ paygrade: "level01"
+ },
+ {
+ name: "sfhgdf",
+ jobtitle: "QE",
+ paygrade: "level04"
+ },
+ {
+ name: "DSFFDSFS",
+ jobtitle: "Manager",
+ paygrade: "level05"
+ }
+ ];
+
+ const [currentPage, setCurrentPage] = useState(0);
+ const [selectedEmployee, setSelectedEmployee] = useState(null);
+ const [showPersonalInfo, setShowPersonalInfo] = useState(false);
+ const employeesPerPage = 10;
+ const totalPages = Math.ceil(employees.length / employeesPerPage);
+
+
+ const currentEmployees = employees.slice(
+ currentPage * employeesPerPage,
+ currentPage * employeesPerPage + employeesPerPage
+ );
+
+
+ const handleRowClick = (employee) => {
+ setSelectedEmployee(employee);
+ setShowPersonalInfo(true);
+ };
+
+
+ const handlePageClick = (pageIndex) => {
+ setCurrentPage(pageIndex);
+ setSelectedEmployee(null);
+ };
+ const handleAddNewEmployee = () => {
+ const newEmployee = { name: "", jobtitle: "", paygrade: "" };
+ setSelectedEmployee(newEmployee);
+ setShowPersonalInfo(true);
+ };
+ const handleBackClick = () => {
+ setShowPersonalInfo(false);
+ };
+
+ return (
+
+ < >
+
+ {showPersonalInfo ? (
+
+ ) : (
+
+
+
+
+
+ | Employee Name |
+ Job Title |
+ Paygrade |
+
+
+
+ {currentEmployees.map((employee, index) => (
+ handleRowClick(employee)}
+ style={{ cursor: 'pointer' }}
+ className='raws'
+ >
+ | {employee.name} |
+ {employee.jobtitle} |
+ {employee.paygrade} |
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: totalPages }).map((_, index) => (
+
+ ))}
+
+
+
+ )}
+
+ );
+}
+
+export default HRview;
diff --git a/src/Components/Jobroleinfo/Jobroleinfo.jsx b/src/Components/Jobroleinfo/Jobroleinfo.jsx
new file mode 100644
index 0000000..ef94d1e
--- /dev/null
+++ b/src/Components/Jobroleinfo/Jobroleinfo.jsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+function Job_role_info({edit,data,job_role_data}){
+
+
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ job_role_data({
+ ...data,
+ [name]: value,
+ });
+ };
+
+
+
+ return(
+ <>
+
+
+
+
+ );
+
+}
+export default Job_role_info
\ No newline at end of file
diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
index c61329b..b55f8a8 100644
--- a/src/Components/Navbar/Navbar.jsx
+++ b/src/Components/Navbar/Navbar.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext ,useState} from 'react';
import { Menu } from '@headlessui/react';
import { Link, useLocation } from 'react-router-dom';
import { AuthContext } from '../../context/AuthContext';
diff --git a/src/Components/PIMcss/PIM.css b/src/Components/PIMcss/PIM.css
new file mode 100644
index 0000000..dcdfc0b
--- /dev/null
+++ b/src/Components/PIMcss/PIM.css
@@ -0,0 +1,275 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
+
+h1{
+ margin-left: 10%;
+}
+body {
+ background-color: rgb(237,231,246);
+
+ font-family: 'Manrope', sans-serif;
+
+}
+
+.body_container {
+ border: 2px solid rgb(189, 193, 202);
+ background-color: rgb(237,231,246);
+ margin-left:10%;
+
+ margin-top: 10px;
+ margin-bottom: 20px;
+ padding: 2%;
+ justify-content: center;
+ align-items: center;
+
+ width: 80%;
+
+}
+
+.container {
+ display: flex;
+
+}
+
+input {
+ border: 1px solid #000;
+ height: 50px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ box-shadow: none;
+ outline: none;
+ border-color: rgb(165, 161, 161);
+ width:100%
+
+
+
+}
+
+label {
+ font-weight: bold;
+}
+
+.Job_Title, .Employment_Status, .Branch,.Department {
+ margin-right: 4%;
+}
+
+
+
+.Birthday, .Gender {
+ margin-right: 4%;
+}
+
+.Email{
+ margin-right:4%;
+ width:48%
+}
+.contactNumnber1{
+ width:48%
+}
+
+.Email input {
+ width: 100%;
+}
+
+.contactNumnber1 input{
+ width: 100%;
+}
+
+
+.Address input,.fname input ,.lname input{
+ width: 100%;
+}
+
+.Editbutton {
+ border-color: rgb(168, 96, 235);
+ border-radius: 4px;
+ padding: 15px;
+ color: rgb(168, 96, 235);
+ display: flex;
+ justify-content: center;
+ margin-bottom: 10px;
+ margin-left: 880px;
+ cursor: pointer;
+ margin-top: 10px;
+ width: 120px;
+}
+.Birthday , .Gender , .Martial_Status , .Employment_Status , .Job_Title , .Paygrade ,.Branch ,.Department , .Supervisor {
+ width: 32%;
+}
+.Birthday input, .Gender input, .Martial_Status input, .Employment_Status input, .Job_Title input, .Paygrade input,.Branch input,.Department input, .Supervisor input {
+ width:100%;
+}
+
+.headers {
+ background-color: rgb(191, 186, 196);
+}
+
+table {
+ width: 80%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+th, td {
+ padding: 10px;
+ text-align: left;
+ border: 1px solid #ddd;
+ border: none;
+}
+
+.add-btn, .edit-btn {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+}
+
+.button1 {
+ border-color: rgb(168, 96, 235);
+ border-radius: 4px;
+ padding: 10px;
+ color: rgb(168, 96, 235);
+ cursor: pointer;
+ margin-bottom: 10px;
+ width: 100px;
+ margin-left: 30px;
+}
+
+.button2 {
+ border-color: rgb(239, 18, 14);
+ border-radius: 4px;
+ padding: 10px;
+ color: rgb(239, 18, 14);
+ cursor: pointer;
+ margin-bottom: 10px;
+ width: 100px;
+ margin-left: 30px;
+}
+
+.Button {
+ margin-left: 70%;
+ display:flex
+}
+
+.raws {
+ background-color: white;
+}
+
+.icon {
+ font-size: 24px;
+ transform: scale(1.2);
+}
+
+.icon1 {
+ font-size: 28px;
+ transform: scale(1.3);
+}
+
+.popup-container {
+ border: 10px solid rgb(240, 242, 246);
+ width: 80%;
+ padding: 40px;
+ background-color: rgb(217, 217, 217);
+ backdrop-filter: blur(0px);
+}
+
+.popup-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(0px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: transparent;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ color: #333;
+}
+
+.close-btn:hover {
+ color: red;
+}
+.add-employee-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px; /* Spacing between icon and text */
+ padding: 8px 16px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #7f56d9; /* Purple text color */
+ border: 1px solid #7f56d9; /* Purple border */
+ border-radius: 4px;
+ background-color: white;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ margin-right: 0%;
+ }
+ .header-container {
+ margin-top: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between; /* Ensures items are on opposite sides */
+ margin-bottom: 16px; /* Space below the header */
+
+
+ }
+ .pagination {
+ display: flex;
+ justify-content: center; /* Centers the buttons horizontally */
+ align-items: center; /* Centers items vertically if necessary */
+ margin: 20px ; /* Adds some space above and below the pagination */
+ gap: 10px; /* Adds spacing between the buttons */
+ }
+ .pagebtn {
+ padding: 10px 16px;
+ background-color: #ad96dd; /* Background color (can be customized) */
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background-color 0.3s ease; /* Smooth transition on hover */
+ }
+
+ .pagebtn:hover {
+ background-color: #5e3bbd; /* Darker shade on hover */
+ }
+
+ .pagebtn:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px #d4bbff; /* Focus ring for accessibility */
+ }
+
+ .pagebtn:active {
+ background-color: #482b99; /* Even darker shade when pressed */
+ }
+ .table-container1{
+ margin-left: 10%;
+ margin-right: 10%;
+ justify-content: center;
+ align-items: center;
+
+ }
+ .table1 {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+ @media (max-width: 768px) {
+ .body {
+ flex-direction: column; /* Stack items vertically on smaller screens */
+ padding: 10px;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/Components/PendingLeave/PendingLeave.jsx b/src/Components/PendingLeave/PendingLeave.jsx
index e6eb581..701e95e 100644
--- a/src/Components/PendingLeave/PendingLeave.jsx
+++ b/src/Components/PendingLeave/PendingLeave.jsx
@@ -53,7 +53,7 @@ const PendingLeave = () => {
};
return (
-
+
Pending Leave
{Object.keys(pendingLeaves).map((date) => (
diff --git a/src/Components/Personalinfo/Personalinfo.jsx b/src/Components/Personalinfo/Personalinfo.jsx
new file mode 100644
index 0000000..1eda479
--- /dev/null
+++ b/src/Components/Personalinfo/Personalinfo.jsx
@@ -0,0 +1,245 @@
+import { useState, useContext } from "react";
+import Job_role_info from "../Jobroleinfo/Jobroleinfo.jsx";
+import Dependent_info from "../Dependentinfo/Dependentinfo.jsx";
+import { userContext } from "../../pages/PIMModule/Pim_module.jsx";
+import Emergency_contact_info from "../Emergancycontact_info/Emergancycontact_info.jsx";
+
+import { useNavigate } from 'react-router-dom';
+import HRview from "../HRview/HRview.jsx";
+
+function Personalinfo({employee,OnBack}) {
+
+ const role = useContext(userContext);
+ const [edit, setEdit] = useState(false);
+ const [visible, setVisible] = useState(true);
+ const [isSaved, setIsSaved] = useState(false);
+ // State for form fields
+ const [person, setPerson] = useState({
+ firstname: "Dilhara",
+ lastname: "Disnayaka",
+ gender: "Male",
+ Birthday: "2002.12.12",
+ email: "dilharadisanayaka999@gamil.com",
+ Martialstatus: "Married",
+ contactnumber1: "+94716843128",
+ contactnumber2: "+94714018657",
+ Address: "Aralugaswaththa pannalaweal lunuwaththa"
+ });
+ const [jobrole,setdata]=useState({
+ Paygrade:"erfe",
+ Department:"deedfe",
+ Branch:"Bandarawela",
+ Job_Title:"frrr",
+ Employment_Status:"dweeer"
+ });
+
+
+
+
+ // Handle form field changes
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ setPerson({
+ ...person,
+ [name]: value,
+ });
+ };
+
+ // Handle Save button click
+ const handleSave = (e) => {
+ e.preventDefault();
+ console.log("Data to be sent to the backend:",person,jobrole);
+
+
+ fetch('/api/savePersonalInfo', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(person),
+ body:JSON.stringify(jobrole),
+ })
+ .then(response => response.json())
+ .then(data => {
+
+ setEdit(false);
+ setVisible(true);
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+ setIsSaved(true);
+
+
+ setTimeout(() => setIsSaved(false), 3000);
+ };
+
+
+
+
+ return (
+
+ );
+}
+
+export default Personalinfo;
diff --git a/src/Components/Popup2/Popup2.jsx b/src/Components/Popup2/Popup2.jsx
new file mode 100644
index 0000000..45613f5
--- /dev/null
+++ b/src/Components/Popup2/Popup2.jsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+
+function Popup2({ closePopup }) {
+ const [isSaved, setIsSaved] = useState(false);
+ const handleSave = (e) => {
+
+ e.preventDefault();
+ console.log("Data to be sent to the backend:",info);
+
+
+ fetch('/api/savePersonalInfo', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(info),
+
+ })
+ .then(response => response.json())
+
+ .catch(error => {
+ console.error('Error:', error);
+ });
+ setIsSaved(true);
+
+
+ setTimeout(() => setIsSaved(false), 3000);
+
+ };
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ setinfo({
+ ...info,
+ [name]: value,
+ });
+ };
+ const [info,setinfo]=useState({
+ ContactName:"",
+ Relationship:"",
+ ContactNumber:""
+,
+ })
+ return (
+
+
+
+
+
+
+
+
+
+
+ {isSaved && (
+
+ )}
+
+
+
+ );
+ }
+
+ export default Popup2;
\ No newline at end of file
diff --git a/src/Components/Popups/Popups.jsx b/src/Components/Popups/Popups.jsx
new file mode 100644
index 0000000..d4ee754
--- /dev/null
+++ b/src/Components/Popups/Popups.jsx
@@ -0,0 +1,103 @@
+import { useState } from "react";
+
+function Popups({ closePopup }) {
+ const [isSaved, setIsSaved] = useState(false);
+ const handleSave = (e) => {
+
+ e.preventDefault();
+ console.log("Data to be sent to the backend:",datainfo);
+
+
+ fetch('/api/savePersonalInfo', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(datainfo),
+
+ })
+ .then(response => response.json())
+
+ .catch(error => {
+ console.error('Error:', error);
+ });
+ setIsSaved(true);
+
+
+ setTimeout(() => setIsSaved(false), 3000);
+
+ };
+ const [datainfo,setdata]=useState({
+ firstName:"",
+ lastName:"",
+ Relation:"",
+ Birthday:"",
+ Gender:""
+})
+const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ setdata({
+ ...datainfo,
+ [name]: value,
+ });
+};
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {isSaved && (
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default Popups;
\ No newline at end of file
diff --git a/src/pages/PIMModule/PIM.css b/src/pages/PIMModule/PIM.css
new file mode 100644
index 0000000..dcdfc0b
--- /dev/null
+++ b/src/pages/PIMModule/PIM.css
@@ -0,0 +1,275 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
+
+h1{
+ margin-left: 10%;
+}
+body {
+ background-color: rgb(237,231,246);
+
+ font-family: 'Manrope', sans-serif;
+
+}
+
+.body_container {
+ border: 2px solid rgb(189, 193, 202);
+ background-color: rgb(237,231,246);
+ margin-left:10%;
+
+ margin-top: 10px;
+ margin-bottom: 20px;
+ padding: 2%;
+ justify-content: center;
+ align-items: center;
+
+ width: 80%;
+
+}
+
+.container {
+ display: flex;
+
+}
+
+input {
+ border: 1px solid #000;
+ height: 50px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ box-shadow: none;
+ outline: none;
+ border-color: rgb(165, 161, 161);
+ width:100%
+
+
+
+}
+
+label {
+ font-weight: bold;
+}
+
+.Job_Title, .Employment_Status, .Branch,.Department {
+ margin-right: 4%;
+}
+
+
+
+.Birthday, .Gender {
+ margin-right: 4%;
+}
+
+.Email{
+ margin-right:4%;
+ width:48%
+}
+.contactNumnber1{
+ width:48%
+}
+
+.Email input {
+ width: 100%;
+}
+
+.contactNumnber1 input{
+ width: 100%;
+}
+
+
+.Address input,.fname input ,.lname input{
+ width: 100%;
+}
+
+.Editbutton {
+ border-color: rgb(168, 96, 235);
+ border-radius: 4px;
+ padding: 15px;
+ color: rgb(168, 96, 235);
+ display: flex;
+ justify-content: center;
+ margin-bottom: 10px;
+ margin-left: 880px;
+ cursor: pointer;
+ margin-top: 10px;
+ width: 120px;
+}
+.Birthday , .Gender , .Martial_Status , .Employment_Status , .Job_Title , .Paygrade ,.Branch ,.Department , .Supervisor {
+ width: 32%;
+}
+.Birthday input, .Gender input, .Martial_Status input, .Employment_Status input, .Job_Title input, .Paygrade input,.Branch input,.Department input, .Supervisor input {
+ width:100%;
+}
+
+.headers {
+ background-color: rgb(191, 186, 196);
+}
+
+table {
+ width: 80%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+th, td {
+ padding: 10px;
+ text-align: left;
+ border: 1px solid #ddd;
+ border: none;
+}
+
+.add-btn, .edit-btn {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+}
+
+.button1 {
+ border-color: rgb(168, 96, 235);
+ border-radius: 4px;
+ padding: 10px;
+ color: rgb(168, 96, 235);
+ cursor: pointer;
+ margin-bottom: 10px;
+ width: 100px;
+ margin-left: 30px;
+}
+
+.button2 {
+ border-color: rgb(239, 18, 14);
+ border-radius: 4px;
+ padding: 10px;
+ color: rgb(239, 18, 14);
+ cursor: pointer;
+ margin-bottom: 10px;
+ width: 100px;
+ margin-left: 30px;
+}
+
+.Button {
+ margin-left: 70%;
+ display:flex
+}
+
+.raws {
+ background-color: white;
+}
+
+.icon {
+ font-size: 24px;
+ transform: scale(1.2);
+}
+
+.icon1 {
+ font-size: 28px;
+ transform: scale(1.3);
+}
+
+.popup-container {
+ border: 10px solid rgb(240, 242, 246);
+ width: 80%;
+ padding: 40px;
+ background-color: rgb(217, 217, 217);
+ backdrop-filter: blur(0px);
+}
+
+.popup-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(0px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: transparent;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ color: #333;
+}
+
+.close-btn:hover {
+ color: red;
+}
+.add-employee-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px; /* Spacing between icon and text */
+ padding: 8px 16px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #7f56d9; /* Purple text color */
+ border: 1px solid #7f56d9; /* Purple border */
+ border-radius: 4px;
+ background-color: white;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ margin-right: 0%;
+ }
+ .header-container {
+ margin-top: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between; /* Ensures items are on opposite sides */
+ margin-bottom: 16px; /* Space below the header */
+
+
+ }
+ .pagination {
+ display: flex;
+ justify-content: center; /* Centers the buttons horizontally */
+ align-items: center; /* Centers items vertically if necessary */
+ margin: 20px ; /* Adds some space above and below the pagination */
+ gap: 10px; /* Adds spacing between the buttons */
+ }
+ .pagebtn {
+ padding: 10px 16px;
+ background-color: #ad96dd; /* Background color (can be customized) */
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background-color 0.3s ease; /* Smooth transition on hover */
+ }
+
+ .pagebtn:hover {
+ background-color: #5e3bbd; /* Darker shade on hover */
+ }
+
+ .pagebtn:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px #d4bbff; /* Focus ring for accessibility */
+ }
+
+ .pagebtn:active {
+ background-color: #482b99; /* Even darker shade when pressed */
+ }
+ .table-container1{
+ margin-left: 10%;
+ margin-right: 10%;
+ justify-content: center;
+ align-items: center;
+
+ }
+ .table1 {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+ @media (max-width: 768px) {
+ .body {
+ flex-direction: column; /* Stack items vertically on smaller screens */
+ padding: 10px;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/pages/PIMModule/Pim_module.jsx b/src/pages/PIMModule/Pim_module.jsx
index a5f7e0a..9883c91 100644
--- a/src/pages/PIMModule/Pim_module.jsx
+++ b/src/pages/PIMModule/Pim_module.jsx
@@ -1,9 +1,27 @@
-import React from 'react'
+import { useState } from "react";
+import { createContext } from "react";
+import Personalinfo from '../../Components/Personalinfo/Personalinfo';
+import '../../Components/PIMcss/PIM.css'
+import HRview from '../../Components/HRview/HRview.jsx';
-export const Pim_module = () => {
- return (
-
Pim_module
- )
-}
+export const userContext=createContext();
-export default Pim_module;
\ No newline at end of file
+function PIM(){
+ const role="CEO";
+ return(
+
+
+ {(role==='HR'||role=='CEO') &&
+
+ }
+ {(role !='HR' && role!='CEO' ) &&
+ < Personalinfo/>
+ }
+
+
+
+ );
+
+
+ }
+export default PIM;
\ No newline at end of file