Janindu4

package.json

@@ -13,13 +13,16 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
+    "json2csv": "^6.0.0-alpha.2",
+    "jspdf": "^2.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.4.12",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -44,5 +47,20 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "babel-loader": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   }
 }

src/App.test.js

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import './pages/PIMModule/PIM.css'
 
 test('renders learn react link', () => {
   render(<App />);

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 (
+        <>
+        <div class="table-container">
+        <h1 className="h2 font-manrope font-bold mt-2 text-2xl mb-3">Dependant Information</h1>    
+        <table>
+            <thead>
+                <tr className="headers">
+                    <th>Dependent's Name</th>
+                    <th>Relation to Employee</th>
+                {(edit===true)&&(    
+                    <th>
+                        <button  type="button" class="add-btn" onClick={()=>setShowPopup(true)}>
+                            < BiAddToQueue className="icon1"/>
+                        </button>
+                    </th>
+                  )}      
+                </tr>
+
+            </thead>
+            <tbody  className="raws">
+                {dependants.map(dependant=>(
+                    <tr>
+                    <td>{dependant.name}</td>
+                    <td>{dependant.relation}</td>
+                    {(edit===true)&&( 
+                    <td>
+
+                    <button type="button" class="edit-btn" onClick={()=>setShowPopup(true)}>
+                            < FiEdit className="icon"/>
+                        </button>
+
+                    </td>
+                    )}
+
+                </tr>
+
+                ))}
+
+            </tbody>
+        </table>
+
+    </div>
+
+    {showPopup && (
+        <div>
+          <Popups closePopup={closePopup} /> {/* Popup with a close function */}
+        </div>
+     )}
+
+        </>
+      );
+ };
+
+export default Dependent_info

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 (
+    <>
+    <div class="table-container">
+    <h1 className="h2 font-manrope font-bold mt-2 text-2xl mb-3">Emergency Contact Information</h1>    
+    <table>
+        <thead>
+            <tr className="headers">
+                <th>Emergency Contact Number</th>
+                <th>Relation to Employee</th>
+                {(edit===true)&&( 
+                <th>
+                    <button type="button" class="add-btn" onClick={()=>setShowPopup(true)}>
+                        < BiAddToQueue className="icon1"/>
+                    </button>
+                </th>
+                )}
+            </tr>
+        </thead>
+        <tbody  className="raws">
+            {Emergency_info.map(item=>(
+                <tr>
+                <td>{item.number}</td>
+                <td>{item.realtion}</td>
+                {(edit===true)&&( 
+                <td>
+                    <button type="button" class="edit-btn" onClick={()=>setShowPopup(true)}>
+                        < FiEdit className="icon"/>
+                    </button>
+                </td>
+                )}
+            </tr>
+
+
+            ))}
+
+        </tbody>
+    </table>
+    </div>
+    {showPopup && (
+        <div>
+          <Popup2 closePopup={closePopup} /> {/* Popup with a close function */}
+        </div>
+     )}
+
+    </>
+    );
+ }   
+ export default Emergency_contact_info

src/Components/HRview/HRview.jsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import Personalinfo from './personalinfo/personalinfo.jsx';
+
+function HRview() {
+  const Finance = [
+    {
+      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 IT = [
+    {
+      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 departments = [
+    {
+      name: "Finance Department",
+      data: Finance
+    },
+    {
+      name: "IT Department",
+      data: IT
+    }
+  ];
+
+  const [selectedRow, setSelectedRow] = useState(null); // State to hold selected employee
+  const handleRowClick = (employee) => {
+    setSelectedRow(employee); // Set the selected employee when a row is clicked
+    console.log("Selected Employee:", employee);
+  };
+
+  return (
+    <>
+      {/* If no employee is selected, show the table */}
+      {!selectedRow ? (
+        departments.map((department, deptIndex) => (
+          <div className="table-container" key={deptIndex}>
+            <h1 className="h2">{department.name}</h1>
+            <table>
+              <thead>
+                <tr className="headers">
+                  <th>Employee Name</th>
+                  <th>Job Title</th>
+                  <th>Paygrade</th>
+                </tr>
+              </thead>
+              <tbody className="raws">
+                {department.data.map((employee, empIndex) => (
+                  <tr
+                    key={empIndex}
+                    onClick={() => handleRowClick(employee)}
+                    style={{
+                      cursor: 'pointer',
+                      backgroundColor: selectedRow === employee ? '#e0e0e0' : 'white'
+                    }}
+                  >
+                    <td>{employee.name}</td>
+                    <td>{employee.jobtitle}</td>
+                    <td>{employee.paygrade}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ))
+      ) : (
+        // If an employee is selected, show only the Personalinfo component
+        <Personalinfo employee={selectedRow} /> // Pass the selected employee as a prop
+      )}
+    </>
+  );
+}
+
+export default HRview;

src/Components/Jobroleinfo/Jobroleinfo.jsx

@@ -0,0 +1,55 @@
+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(
+         <>
+          <div className="edd">
+
+            <div className="container">
+               <div className="Employment_Status">
+               <label for="Employment Status">Employment Status</label><br/>
+               <input type="text" id="Employment_Status" name="Employment_Status" onChange={handleInputChange} value ={data.Employment_Status} readOnly={!edit}/><br/>
+               </div>
+               <div className="Job_Title">
+               <label for="Job Title">Job Title</label><br/>
+               <input type="text" id="Job Title" name="Job_Title" onChange={handleInputChange} placeholder={data.Job_Title} readOnly={!edit}/>
+
+               </div>
+               <div className="Paygrade">
+               <label for="Paygrade">Paygrade</label><br/>
+               <input type="text" id="Paygrade" name="Paygrade" onChange={handleInputChange} value={data.Paygrade} readOnly={!edit}/>
+
+               </div>
+
+
+             </div>
+             <div className="container">
+               <div className="Branch">
+               <label for="Branch">Branch</label><br/>
+               <input type="text" id="Branch" name="Branch" onChange={handleInputChange} value={data.Department} readOnly={!edit}/><br/>
+               </div>
+               <div className="Department">
+               <label for="Department">Department</label><br/>
+               <input type="text" id="Department" name="Department" onChange={handleInputChange} value={data.Branch} readOnly={!edit}/>
+               </div>
+             </div>
+         </div>    
+             </>
+
+
+         );
+
+} 
+export default Job_role_info