Making UI

EmployeeManagementBackend/server.js

@@ -1,3 +1,6 @@
+/**
+ * API to fetch data 
+ */
 const express = require('express')
 const mysql = require('mysql2')
 const cors = require('cors')
@@ -6,6 +9,9 @@ const app= express()
 app.use(cors())
 app.use(express.json())
 
+/**
+ * connecting to db 
+ */
 const db = mysql.createConnection({
     host: "localhost",
     user : "root",
@@ -46,7 +52,7 @@ app.listen(8081, ()=>{
 })
 
 /**
- * Add
+ * Add an Employee
  */
 
 app.post('/Employee', (req, res) => {
@@ -86,7 +92,9 @@ app.post('/Employee', (req, res) => {
         return res.status(201).json({ message: 'Employee created successfully!', data: result });
     });
 });
-
+/**
+ * Get employees
+ */
 app.get('/Employee', (req, res)=> {
     const sql = "SELECT* FROM Employee";
     db.query(sql, (err, data)=>{
@@ -96,7 +104,7 @@ app.get('/Employee', (req, res)=> {
 })
 
 /**
- * get training
+ * get trainings data 
  */
 app.get('/training', (req, res)=> {
     const sql = "SELECT* FROM TRAINING";
@@ -194,7 +202,7 @@ app.get('/attendance', (req, res) => {
         res.status(200).json(result[0]);
     });
 });
-// assign project
+// assign project to an employee
 app.post('/assignProject', (req, res) => {
     const { FirstName, LastName, ProjectName, AssignedDate } = req.body;
 
@@ -223,7 +231,7 @@ app.post('/assignProject', (req, res) => {
 });
 
 
-// get all project
+// get all projects available
 app.get('/projects', (req, res) => {
     const query = `
         SELECT 
@@ -246,7 +254,7 @@ app.get('/projects', (req, res) => {
         res.status(200).json(results);
     })
 })
-// assign a project 
+
 
 //get all  assined projects
 app.get('/Assigned_Project', (req, res) => {
@@ -268,7 +276,9 @@ app.get('/Assigned_Project', (req, res) => {
 });
 
 
-//get all the employees assinged to a particualr project 
+/*
+get all the employees assinged to a particualr project 
+*/
 app.get('/employeesForProject/:projectName', (req, res) => {
     const projectName = req.params.projectName;
 
@@ -299,7 +309,9 @@ app.get('/employeesForProject/:projectName', (req, res) => {
     });
 });
 
-//assign Training to certain employees 
+/**
+ * Assign training to certain employees
+ */
 app.post('/assign-training', (req, res) => {
     const { FirstName, LastName, Name, Title, Status } = req.body;
 
@@ -329,7 +341,9 @@ app.post('/assign-training', (req, res) => {
 });
 
 
-
+/**
+ * get list of assigned training 
+ */
 app.get('/assignedTraining', (req, res) => {
     const sql = `
         SELECT 
@@ -356,7 +370,7 @@ app.get('/assignedTraining', (req, res) => {
 
 
 /**
- * leave request
+ * get a list of leave requests with count per employee 
  */
 app.get('/leave-requests', (req, res) => {
     const query = `
@@ -380,6 +394,9 @@ app.get('/leave-requests', (req, res) => {
   });
 });
 
+/**
+ * get each leave request details 
+ */
 
 app.get('/leave-requestslist', (req, res) => {
     const query = `
@@ -401,7 +418,8 @@ app.get('/leave-requestslist', (req, res) => {
   });
 });
 /**
- * get project and nubmer of emplyees for a particualr project 
+ * get Department information and project by department, 
+ * and number of employees in the depatment 
  */
 app.get('/departments', (req, res) => {
     const query = `

EmployeeManagementSystem/src/App.jsx

@@ -1,3 +1,7 @@
+/**
+ * 
+ * Main page contains navigations to each page
+ */
 import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import ProjectList from './projectcomponent';
@@ -9,15 +13,6 @@ import AssignTrainingForm from './assigntrainingform'
 import AssignedTrainingTable from './trainingdata'
 import LeavesRequestList from './sortedleaves.jsx'
 function App() {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    fetch('http://localhost:8081/Email')
-      .then((res) => res.json())
-      .then((data) => setData(data))
-      .catch((err) => console.error('Error fetching data:', err));
-  }, []);
-
   return (
     <Router>
       <div>
@@ -77,7 +72,7 @@ function App() {
           </button>
         </div>
 
-        {/* Define routes for different pages */}
+        {/* Routes for different pages */}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/employees" element={<Employees data={data} />} />
@@ -173,7 +168,11 @@ function Employees({ data }) {
     </div>
     );
 }
-
+/**
+ * 
+ * @param {data} param0 
+ * @returns the content of the update info tab
+ */
 function UpdateInfo({ data }) {
   return (
     <div>
@@ -182,14 +181,23 @@ function UpdateInfo({ data }) {
   );
 }
 
+/**
+ * 
+ * @param {data} param0 
+ * @returns attendance data  
+ */
 function AttendanceStatus({ data }) {
   return (
     <div>
       <h2>Attendance</h2>
     </div>
   );
 }
-
+/**
+ * this tab allows users to assign a project and see a list of project and  see a list of assignedproject 
+ * along with the emplyees working on that project
+ * @returns content of project tab
+ */
 function Projects() {
   const [showModal, setShowModal] = useState(false);
 
@@ -207,7 +215,7 @@ function Projects() {
         <div className="modal-overlay" onClick={closeModal}>
           <div className="modal-content" onClick={(e) => e.stopPropagation()}>
             <button className="close-button" onClick={closeModal}>X</button>
-            {<AssignProjectForm />}
+            {<AssignProjectForm />} {/** form component to assign a project*/}
           </div>
         </div>
       )}
@@ -254,9 +262,6 @@ function Projects() {
   );
 }
 
-//export default Projects;
-
-
 function Leaves() {
   return (
     <div>
@@ -276,6 +281,10 @@ function Leaves() {
   );
 }
 
+/**
+ * shows enployees who has submitted leaverequests and pending 
+ * @returns pendingLeaveRequest
+ */
 function LeaveRequests() {
   return (
     <div>
@@ -285,7 +294,10 @@ function LeaveRequests() {
     </div>
   );
 }
-
+/**
+ * shows employees who are on leave 
+ * @returns ApprovedLeaverequestcomponent
+ */
 function OnLeave() {
   return (
     <div>
@@ -294,7 +306,10 @@ function OnLeave() {
     </div>
   );
 }
-
+/**
+ * In this tab user will be able to add 
+ * @returns trainingcomponent
+ */
 function Training() {
   const [showModal, setShowModal] = useState(false);
 
@@ -306,13 +321,13 @@ function Training() {
     <div>
       <h2>Projects</h2>
       <button onClick={openModal}>Add Training</button>
-      {<AssignedTrainingTable />}
+      {<AssignedTrainingTable />} {/*assigned trainging table*/}
 
       {showModal && (
         <div className="modal-overlay" onClick={closeModal}>
           <div className="modal-content" onClick={(e) => e.stopPropagation()}>
             <button className="close-button" onClick={closeModal}>X</button>
-            {<AssignTrainingForm />}
+            {<AssignTrainingForm />} {/** form to assign table */}
           </div>
         </div>
       )}
@@ -357,15 +372,20 @@ function Training() {
   );
 }
 
+/**
+ * retuns the number of leave request each employee made
+ * @returns LeavesRequestList component 
+ */
 function Analysis() {
   return (
     <div>
       <h2>Analysis</h2>
-      {<LeavesRequestList/>}
+      {<LeavesRequestList/>}  
     </div>
   );
 }
 
+/
 function Roles() {
   return (
     <div>
@@ -391,4 +411,4 @@ function EmployeeBenefits() {
 }
 
 
-export default App
+export default App;

EmployeeManagementSystem/src/Assingedprojects.jsx

@@ -1,3 +1,8 @@
+/**
+ * Assignedproject component . shows a list of project assigned to people and 
+ * when clicked shows the emplyees the project is assigned to 
+ */
+
 import { useState, useEffect } from 'react';
 
 function AssignedProject() {

EmployeeManagementSystem/src/analysis.css

@@ -1,3 +1,7 @@
+/**
+* CSS for the aalysis tab
+**/
+
 .container {
     padding: 2rem;
 }
@@ -11,11 +15,11 @@
 .leave-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 1.25rem; /* Larger font size */
+    font-size: 1.25rem;
 }
 
 .leave-table th, .leave-table td {
-    padding: 1rem 2rem; /* Add spacing inside cells */
+    padding: 1rem 2rem; 
     text-align: left;
     border-bottom: 1px solid #ddd;
 }
@@ -30,7 +34,7 @@
 }
 
 .leave-table td:not(:last-child) {
-    padding-right: 4rem; /* Add gap between columns */
+    padding-right: 4rem; 
 }
 
 .leave-table tr:hover {

EmployeeManagementSystem/src/assignprojectform.jsx

@@ -9,7 +9,7 @@ function AssignProjectForm() {
   const [assignedDate, setAssignedDate] = useState('');
   const [message, setMessage] = useState('');
 
-  // Fetch projects and employees
+  // Fetch projects and employees data
   useEffect(() => {
     fetch('http://localhost:8081/projects')
       .then((response) => response.json())
@@ -42,7 +42,7 @@ function AssignProjectForm() {
     .then(response => response.json())
     .then(data => {
       if (data.message) {
-        setMessage(data.message);  // Set success message from the server
+        setMessage(data.message);  
         alert(data.message);  // Show success message as an alert
         // Reset form fields after success
         setSelectedProjectName('');

EmployeeManagementSystem/src/assigntrainingform.jsx

@@ -1,3 +1,6 @@
+/**
+ * Form to assign training
+ */
 import { useState, useEffect } from 'react';
 
 function AssignTrainingForm() {
@@ -11,7 +14,9 @@ function AssignTrainingForm() {
     Title: '',
     Status: 'ongoing'
   });
-
+/**
+ * fetch Employee, project and training data 
+ */
   useEffect(() => {
     fetch('http://localhost:8081/Employee')
       .then(res => res.json())
@@ -67,7 +72,7 @@ function AssignTrainingForm() {
 
       <label>Project:</label>
       <select name="Name" onChange={handleChange} required>
-        <option value="">Select Project</option>
+        <option value="">Select Project</option> {/** dropdown to select from*/}
         {projects.map(proj => (
           <option key={proj.ProjectID} value={proj.ProjectName}>{proj.ProjectName}</option>
         ))}

EmployeeManagementSystem/src/form.css

@@ -1,3 +1,7 @@
+/**
+* form css
+*/
+
 form {
     display: flex;
     flex-direction: column;