Branch dil

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/ApprovedLeave/ApprovedLeave.jsx

@@ -53,7 +53,7 @@ const ApprovedLeave = () => {
   };
 
   return (
-    <div className="container mx-auto px-7 py-4 bg-customblue">
+    <div className="container mx-auto px-7 py-4 bg-customblue flex flex-col px-7 py-4 bg-ligreen">
       <h2 className="text-[32px] font-normal font-lexend mb-4">Approved Leave</h2>
 
       {Object.keys(approvedLeaves).map((date) => (

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 ml-0">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 ml-0">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