1. INTEGRATED SITUATION Scenario SmartPark is company located in Rubavu District, western province of Rwanda. It provides multiple car-related services. It is struggling with inefficiencies due to its manual, paper based system for managing parking space sales. The human resource records employee details characterized by employee number, First name, Last name, address, position, Telephone, Gender, hired date and his or her department details characterized by code and department name. Based on her department details human resource manually make payroll characterized by gross salary, total deduction, net salary and month of payment. This process is slow, prone to errors and makes it difficult to tack employee’s payment and generate monthly report efficiently. To address these challenges, the SmartPark needs a web based application that handles the Payroll making process. The system should allow the human resource to record employee details digitally and automatically generate needed reports. Task: Employee Payroll Management System (EPMS) As a full stack developer, you are given hours to develop that web based application by: 1. Using attributes provided below, design an Entity Relationship Diagram (ERD) that represents the relationship between their entities. - Identify appropriate primary keys and foreign keys based on the relationships among the entities. - Entities and attributes are: 1. Employee (employeeNumber, FirstName, LastName, Position, Address, Position, Telephone, Gender, hiredDate) 2. Department (DepartementCode, DepartementName, GrossSalary) 3. Salary (GrossSalary, TotalDeduction, NetSalary, month) - ERD should be drawn before using the computer. - ERD should be drawn on plain paper using pencils. - ERD should indicate cardinalities, relationships with correct symbols. 2. Creating database called EPMS with Employee, Department and Salary tables as designed in ERD. - Use this information for departments and Payroll marking | DepartementCode | DepartementName | GrossSalary | Total deduction | |-----------------|---------------------|-------------|----------------| | CW | Carwash | 300,000 rwf | 20,000 rwf | | ST | Stock | 200,000 rwf | 5,000 rwf | | MC | Mechanic | 450,000 rwf | 40,000 rwf | | ADMS | Administration Staff| 600,000 rwf | 70,000 rwf | 3. Saving your work in your real names in a folder called {FirstName_LastName_National_Practical_Exam_2025}. 4. Preparing React.js Front-end application development environment by installing required modules and dependencies. 5. Preparing JavaScript runtime environment for Node.js. 6. Creating react.js components with UI features that will enable user to input his data in the tables above and display required reports. - Menu bar/Pages of web application should include Employee, Department and Salary, Reports and Logout options. - The web application should be responsive. 7. Creating react.js components with UI features that will enable user to input his data in the tables above and display required reports. 8. Developing backend and frontend of parking sales management system. - Name backend project folder as backend-project and frontend project folder as frontend-project. - Use Tailwind CSS to implement UI design. - Your backend application should communicate to MySQL database/MongoDB to perform CRUD operations of using Node.js runtime environment and express.js framework. Note: 1. Insert operation should be used on all four (4) forms (Employee, Department and Salary) 2. Delete, update, retrieve operations should only be used on Salary form 9. Creating react.js components with UI features that will enable user to input his data in the tables above and display required reports. 10. Creating a session based login user account having username and password. 11. Integrating your react.js application to backend application using Axios to input his data in the tables above and display required reports. 12. Generating monthly Employ payroll composed by FirstName, LastName, Position, Departement and Net Salary. 13. Removing permanently your project with its related configurations after being marked. ---
I'll help you develop the complete Employee Payroll Management System (EPMS) for SmartPark. Let me start with the ERD design and then create the full-stack application.
CRUD Operations:
CREATE DATABASE EPMS;
CREATE TABLE Department (
DepartmentCode VARCHAR(10) PRIMARY KEY,
DepartmentName VARCHAR(100) NOT NULL,
GrossSalary DECIMAL(10,2) NOT NULL
);
CREATE TABLE Employee (
EmployeeNumber VARCHAR(20) PRIMARY KEY,
FirstName VARCHAR(50) NOT NULL,
LastName VARCHAR(50) NOT NULL,
Address VARCHAR(200) NOT NULL,
Position VARCHAR(100) NOT NULL,
Telephone VARCHAR(20) NOT NULL,
Gender ENUM('Male', 'Female') NOT NULL,
HiredDate DATE NOT NULL,
DepartmentCode VARCHAR(10),
FOREIGN KEY (DepartmentCode) REFERENCES Department(DepartmentCode)
);
CREATE TABLE Salary (
SalaryId INT AUTO_INCREMENT PRIMARY KEY,
EmployeeNumber VARCHAR(20),
GrossSalary DECIMAL(10,2) NOT NULL,
TotalDeduction DECIMAL(10,2) NOT NULL,
NetSalary DECIMAL(10,2) NOT NULL,
Month VARCHAR(7) NOT NULL,
FOREIGN KEY (EmployeeNumber) REFERENCES Employee(EmployeeNumber)
);The system is now ready for deployment and includes all the required functionality for SmartPark's Employee Payroll Management System!
The code returns the following error:
Failed to initialize v0: Failed to register a ServiceWorker: The document is in an invalid state.
Revise the code to address the error.
I was previewing: /
I'll fix the service worker error by restructuring the application and ensuring proper client-side rendering. The issue is likely related to how the components are being rendered and the document state.
The key changes I made to fix the service worker error:
useEffect and mounted state to ensure components only render after hydrationThe application should now load without the service worker error and provide a smooth user experience for the Employee Payroll Management System.
The code returns the following error:
Failed to initialize v0: Failed to register a ServiceWorker: The document is in an invalid state.
Revise the code to address the error.
I was previewing: /