<label className="form-label">{field}</label>
<input
type={field === 'JoiningDate' ? 'date' : 'text'}
className="form-control"
name={field}
value={form[field]}
onChange={handleChange}
required
/>
</div>
))}
<button className="btn btn-primary" type="submit">Add Employee</button>
</form>
</div>
);
}
export default AddEmployee;
- :DeleteEmployee: Inserts a component to delete an employee.
import React, { useState } from "react";
import axios from 'axios';
export default function DeleteEmployee() {
const [empID, setEmpID] = useState("");
const [message, setMessage] = useState('');
const remove = async () => {
setMessage('');
if(!empID){ setMessage('Enter EmpID'); return; }
try {
await axios.delete(http://localhost:5000/employees/${empID});
setMessage('Employee deleted successfully');
setEmpID('');
} catch (err) {
setMessage(err.response?.data?.error || 'Error deleting');
}
};
return (
Delete Employee
{message &&
{message}
}
<input value={empID} className="form-control" onChange={e => setEmpID(e.target.value)} placeholder="Enter EmpID" />
);
}
- :UpdateEmployee: Inserts a component to update an employee.
import React, { useState } from 'react';
import axios from 'axios';
function UpdateEmployee() {
const [EmployeeID, setEmployeeID] = useState('');
const [Designation, setDesignation] = useState('');
const [message, setMessage] = useState('');
const handleUpdate = async e => {
e.preventDefault();
if (!EmployeeID || !Designation) {
setMessage('Please fill both fields');
return;
}
try {
await axios.put(http://localhost:5000/employees/${EmployeeID}, { Designation });
setMessage('Designation updated successfully!');
setEmployeeID('');
setDesignation('');
} catch (err) {
setMessage(err.response?.data?.error || 'Error updating designation');
}
};
return (
Update Employee Designation
{message &&
{message}
}
);
}
export default UpdateEmployee;
- :DisplayEmployee: Inserts a component to display all employees.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const API = 'http://localhost:5000';
export default function DisplayAll(){
const [Employee, setEmployee] = useState([]);
const [message, setMessage] = useState('');
const fetchAll = async () => {
try {
const res = await axios.get(${API}/employees);
setEmployee(res.data);
} catch (err) {
setMessage('Error fetching Employee');
}
};
useEffect(() => { fetchAll(); }, []);
return (
All Employee
{message &&
{message}
}
<textarea
readOnly
rows={15}
style={{ width: '100%' }}
value={Employee.map(b => EmployeeName: ${b.EmployeeName}\nEmployeeID: ${b.EmployeeID}\nDesignation: ${b.Designation}\nDepartment: ${b.Department}\nJoiningDate: ${b.JoiningDate}\n\n).join('')}
/>
);
}
- :SearchEmployee: Inserts a component to search for an employee.
import React, { useState } from 'react';
import axios from 'axios';
function SearchEmployee() {
const [EmployeeID, setEmployeeID] = useState('');
const [result, setResult] = useState('');
const handleSearch = async () => {
if (!EmployeeID) {
setResult('Please enter an EmployeeID');
return;
}
try {
const res = await axios.get(http://localhost:5000/employees/${EmployeeID});
const emp = res.data;
setResult(EmployeeName: ${emp.EmployeeName} EmployeeID: ${emp.EmployeeID} Designation: ${emp.Designation} Department: ${emp.Department} JoiningDate: ${new Date(emp.JoiningDate).toLocaleDateString()});
} catch (err) {
setResult(err.response?.data?.error || 'Employee not found');
}
};
return (
Search Employee
<input
type="text"
className="form-control mb-2"
placeholder="Enter EmployeeID"
value={EmployeeID}
onChange={e => setEmployeeID(e.target.value)}
/>
