Laptop Management System

This system can be used by organizations to manage their inventory of laptops, track
assignments to employees, and schedule maintenance.

Project Features

User Roles

1. Admin: Manage laptops, assign laptops to employees, track status, and view
reports.
2. Employee: View assigned laptops, request new laptops, or report issues.

Core Features

● Laptop inventory management (add, update, delete laptops).

● Laptop assignment to employees.
● Maintenance tracking and history.
● Reporting issues (with status updates).
● Filters and search functionality (by employee, laptop status, or maintenance
status).

Frontend Tasks

1. Admin Dashboard:
○ Overview cards for:
■ Total laptops.
■ Assigned laptops.
■ Available laptops.
■ Laptops under maintenance.
○ Manage Laptops:
■ Add a new laptop with details (e.g., brand, model, serial number,
purchase date).
■ Update or delete existing laptops.
○ Employee Assignment:
■ Assign laptops to employees (search employees by name/email).
■ Reassign or unassign laptops.
■

2.Employee Portal:
 ● View assigned laptop details (brand, model, serial number, condition).
● Request a new laptop (form submission).
● Report an issue (with description and priority level).

Backend Tasks

1. APIs for Laptop Management: ○ Add a

laptop:
○ Get all laptops:
○ Update laptop details:
○ Delete a laptop:
2. APIs for Employee Management: ○
Get all employees:
○ Assign a laptop:
○ Fetch laptops assigned to an employee:
3. APIs for Maintenance and Issue Reporting:
○ Add a maintenance log:
○ View maintenance history: ○ Report an issue:
4. Database Schema:
○ Tables:
■ laptops: id, brand, model, serialNumber, status
(available/assigned/maintenance), purchaseDate.
■ employees: id, name, email, department.
■ assignments: id, laptopId, employeeId, assignedAt, returnedAt.
■ maintenance: id, laptopId, description, status, cost, loggedAt.
■ issues: id, laptopId, description, priority, status, reportedBy,
reportedAt.
5. Authentication:
○ Implement JWT-based authentication.
○ Ensure role-based access control (Admin vs. Employee).

Evaluation Criteria

● Code Quality: Clean code with proper modularity and comments.

● Functionality: All CRUD operations and role-based workflows should be
implemented.
● UI/UX: Intuitive and responsive interface.
● Backend Performance: Proper database indexing and efficient queries.
Title: Laptop Management System
Description:
The Laptop Management System is a web-based application designed to streamline the
management of laptops, employees, and assignments. It allows admins to manage laptops
(add, view, update, and delete), assign them to employees, and track their status
(assigned, available, under maintenance). The system also features an employee portal
where users can view their assigned laptop details.

Technologies Used:
• Frontend: React, HTML, CSS
• Backend: Java (Spring Boot)
• Database: MySQL
• Other Tools: Postman (for API testing)

Frontend (React) communicates with the Backend (Java Spring Boot) using
RESTful APIs. Communicates with the backend using HTTP requests (GET, POST,
PUT, DELETE).

Backend (Java Spring Boot) interacts with a MySQL database to store laptop
and employee information. Receives requests, processes business logic, and
interacts with the database. Stores laptop and employee data.

Data Flow:
• React sends requests to Spring Boot backend.
• Spring Boot processes these requests and interacts with the database.
• Responses are sent back to React, which displays them on the user interface.
Interfaces of the Application:

Admin Dashboard:

Manage Laptops:
Assign Laptop:

Employee Portal:
Backend Code

Backend (Spring Boot) Dependencies:

1. Spring Boot Starter Web:
o Provides all the required dependencies for building RESTful
web services.
2. Spring Boot Starter Data JPA:
o Simplifies database access using JPA (Java Persistence
API).
3. MySQL Connector:
o Enables the application to connect to a MySQL database.
4. Lombok:
o Reduces boilerplate code by generating getters, setters,
constructors, etc., using annotations.
5. Spring Boot Starter Test (Optional):
o Provides testing libraries like JUnit and Mockito for writing
unit and integration tests.

Controller:

AssignmentController.java

package com.laptopmanagementsystem.laptopmanagementsystem.Controller;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Assignment;
import
com.laptopmanagementsystem.laptopmanagementsystem.Repository.AssignmentRepository;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.EmployeeRepository;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.LaptopRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.time.LocalDateTime;
import java.util.List;

@RestController
@RequestMapping("/api/assignments")
public class AssignmentController {

@Autowired
private AssignmentRepository assignmentRepository;

@Autowired
private LaptopRepository laptopRepository;

@Autowired
private EmployeeRepository employeeRepository;

@PostMapping
public ResponseEntity<Assignment> assignLaptop(@RequestParam Long laptopId,
@RequestParam Long employeeId) {
return laptopRepository.findById(laptopId)
.flatMap(laptop -> employeeRepository.findById(employeeId)
.map(employee -> {
Assignment assignment = new Assignment();
assignment.setLaptop(laptop);
assignment.setEmployee(employee);
assignment.setAssignedAt(LocalDateTime.now()); // Ensure this method is
available
return ResponseEntity.ok(assignmentRepository.save(assignment));
}))
.orElse(ResponseEntity.notFound().build());
}
}

EmployeeController.java

package com.laptopmanagementsystem.laptopmanagementsystem.Controller;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Employee;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.EmployeeRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/employees")
public class EmployeeController {

@Autowired
private EmployeeRepository employeeRepository;

@GetMapping
public ResponseEntity<List<Employee>> getAllEmployees() {
return ResponseEntity.ok(employeeRepository.findAll());
}

@PostMapping
public ResponseEntity<Employee> addEmployee(@RequestBody Employee employee) {
return ResponseEntity.ok(employeeRepository.save(employee));
}

@GetMapping("/{id}")
public ResponseEntity<Employee> getEmployeeById(@PathVariable Long id) {
return employeeRepository.findById(id)
.map(ResponseEntity::ok)
.orElse(ResponseEntity.notFound().build());
}

@PutMapping("/{id}")
public ResponseEntity<Employee> updateEmployee(@PathVariable Long id, @RequestBody
Employee updatedEmployee) {
return employeeRepository.findById(id)
.map(employee -> {
employee.setName(updatedEmployee.getName());
employee.setEmail(updatedEmployee.getEmail());
employee.setDepartment(updatedEmployee.getDepartment());
return ResponseEntity.ok(employeeRepository.save(employee));
}).orElse(ResponseEntity.notFound().build());
}

@DeleteMapping("/{id}")
 public ResponseEntity<Void> deleteEmployee(@PathVariable Long id) {
employeeRepository.deleteById(id);
return ResponseEntity.noContent().build();
}
}

IssueController.java

package com.laptopmanagementsystem.laptopmanagementsystem.Controller;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Issue;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.IssueRepository;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.LaptopRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.time.LocalDateTime;
import java.util.List;

@RestController
@RequestMapping("/api/issues")
public class IssueController {

@Autowired
private IssueRepository issueRepository;

@Autowired
private LaptopRepository laptopRepository;

@PostMapping
public ResponseEntity<Issue> reportIssue(@RequestParam Long laptopId, @RequestBody Issue
issue) {
return laptopRepository.findById(laptopId)
.map(laptop -> {
issue.setLaptop(laptop);
issue.setStatus(Issue.Status.OPEN);
issue.setReportedAt(LocalDateTime.now());
return ResponseEntity.ok(issueRepository.save(issue));
}).orElse(ResponseEntity.notFound().build());
}
 @GetMapping
public ResponseEntity<List<Issue>> getAllIssues() {
return ResponseEntity.ok(issueRepository.findAll());
}

@GetMapping("/laptop/{laptopId}")
public ResponseEntity<List<Issue>> getIssuesByLaptop(@PathVariable Long laptopId) {
return ResponseEntity.ok(issueRepository.findByLaptopId(laptopId));
}

@PutMapping("/{id}/status")
public ResponseEntity<Issue> updateIssueStatus(@PathVariable Long id, @RequestBody
Issue.Status status) {
return issueRepository.findById(id)
.map(issue -> {
issue.setStatus(status);
return ResponseEntity.ok(issueRepository.save(issue));
}).orElse(ResponseEntity.notFound().build());
}
}

LaptopController.java

package com.laptopmanagementsystem.laptopmanagementsystem.Controller;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Laptop;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.LaptopRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/laptops")
public class LaptopController {

@Autowired
 private LaptopRepository laptopRepository;

@PostMapping
public ResponseEntity<Laptop> addLaptop(@RequestBody Laptop laptop) {
return ResponseEntity.ok(laptopRepository.save(laptop));
}

@GetMapping
public ResponseEntity<List<Laptop>> getAllLaptops() {
return ResponseEntity.ok(laptopRepository.findAll());
}

@PutMapping("/{id}")
public ResponseEntity<Laptop> updateLaptop(@PathVariable Long id, @RequestBody Laptop
updatedLaptop) {
return laptopRepository.findById(id)
.map(laptop -> {
laptop.setBrand(updatedLaptop.getBrand());
laptop.setModel(updatedLaptop.getModel());
laptop.setSerialNumber(updatedLaptop.getSerialNumber());
laptop.setStatus(updatedLaptop.getStatus());
laptop.setPurchaseDate(updatedLaptop.getPurchaseDate());
return ResponseEntity.ok(laptopRepository.save(laptop));
}).orElse(ResponseEntity.notFound().build());
}

@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteLaptop(@PathVariable Long id) {
laptopRepository.deleteById(id);
return ResponseEntity.noContent().build();
}
}

MaintanceController.java

package com.laptopmanagementsystem.laptopmanagementsystem.Controller;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Maintenance;
import com.laptopmanagementsystem.laptopmanagementsystem.Repository.LaptopRepository;
import
com.laptopmanagementsystem.laptopmanagementsystem.Repository.MaintenanceRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.time.LocalDateTime;
import java.util.List;

@RestController
@RequestMapping("/api/maintenance")
public class MaintenanceController {

@Autowired
private MaintenanceRepository maintenanceRepository;

@Autowired
private LaptopRepository laptopRepository;

// Add a new maintenance log

@PostMapping
public ResponseEntity<Maintenance> addMaintenanceLog(@RequestParam Long laptopId,
@RequestBody Maintenance maintenance) {
return laptopRepository.findById(laptopId)
.map(laptop -> {
maintenance.setLaptop(laptop);
maintenance.setLoggedAt(LocalDateTime.now());
return ResponseEntity.ok(maintenanceRepository.save(maintenance));
}).orElse(ResponseEntity.notFound().build());
}

// Get all maintenance logs for a specific laptop

@GetMapping("/laptop/{laptopId}")
public ResponseEntity<List<Maintenance>> getMaintenanceByLaptop(@PathVariable Long
laptopId) {
return ResponseEntity.ok(maintenanceRepository.findByLaptopId(laptopId));
}

// Update maintenance status

@PutMapping("/{id}/status")
public ResponseEntity<Maintenance> updateMaintenanceStatus(@PathVariable Long id,
@RequestBody Maintenance.Status status) {
return maintenanceRepository.findById(id)
.map(maintenance -> {
maintenance.setStatus(status);
 return ResponseEntity.ok(maintenanceRepository.save(maintenance));
}).orElse(ResponseEntity.notFound().build());
}
}

Entity:

Assignment.java

package com.laptopmanagementsystem.laptopmanagementsystem.Entity;

import jakarta.persistence.*;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.RequiredArgsConstructor;

import java.time.LocalDateTime;

@Data
@NoArgsConstructor
@RequiredArgsConstructor
@Entity
@Table(name = "assignments")
public class Assignment {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@ManyToOne
@JoinColumn(name = "laptop_id", nullable = false)
private Laptop laptop;

public Employee getEmployee() {

return employee;
}

public void setEmployee(Employee employee) {

this.employee = employee;
}

public Long getId() {

return id;
}

public void setId(Long id) {

this.id = id;
}

public Laptop getLaptop() {

return laptop;
}

public void setLaptop(Laptop laptop) {

this.laptop = laptop;
}

public LocalDateTime getAssignedAt() {

return assignedAt;
}

public void setAssignedAt(LocalDateTime assignedAt) {

this.assignedAt = assignedAt;
}

public LocalDateTime getReturnedAt() {

return returnedAt;
 }

public void setReturnedAt(LocalDateTime returnedAt) {

this.returnedAt = returnedAt;
}

@ManyToOne
@JoinColumn(name = "employee_id", nullable = false)
private Employee employee;

private LocalDateTime assignedAt;

private LocalDateTime returnedAt;
}

Employee.java

package com.laptopmanagementsystem.laptopmanagementsystem.Entity;

import jakarta.persistence.*;
import lombok.Data;

@Data
@Entity
@Table(name = "employees")
public class Employee {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;

private String email;
private String department;

public Long getId() {

 return id;
}

public void setId(Long id) {

this.id = id;
}

public String getName() {

return name;
}

public void setName(String name) {

this.name = name;
}

public String getEmail() {

return email;
}

public void setEmail(String email) {

this.email = email;
}

public String getDepartment() {

return department;
}

public void setDepartment(String department) {

this.department = department;
}
}

Issue.java

package com.laptopmanagementsystem.laptopmanagementsystem.Entity;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Laptop;
import jakarta.persistence.*;
import lombok.Data;

import java.time.LocalDateTime;
@Data
@Entity
@Table(name = "issues")
public class Issue {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@ManyToOne
@JoinColumn(name = "laptop_id", nullable = false)
private Laptop laptop;

private String description;

@Enumerated(EnumType.STRING)
private Priority priority; // ENUM: LOW, MEDIUM, HIGH

@Enumerated(EnumType.STRING)
private Status status; // ENUM: OPEN, IN_PROGRESS, RESOLVED

private LocalDateTime reportedAt;

public enum Priority {

LOW, MEDIUM, HIGH
}

public enum Status {

OPEN, IN_PROGRESS, RESOLVED
}

public Long getId() {

return id;
}

public void setId(Long id) {

this.id = id;
}

public Laptop getLaptop() {

return laptop;
}

public void setLaptop(Laptop laptop) {

 this.laptop = laptop;
}

public String getDescription() {

return description;
}

public void setDescription(String description) {

this.description = description;
}

public Priority getPriority() {

return priority;
}

public void setPriority(Priority priority) {

this.priority = priority;
}

public Status getStatus() {

return status;
}

public void setStatus(Status status) {

this.status = status;
}

public LocalDateTime getReportedAt() {

return reportedAt;
}

public void setReportedAt(LocalDateTime reportedAt) {

this.reportedAt = reportedAt;
}
}

Laptop.java

package com.laptopmanagementsystem.laptopmanagementsystem.Entity;

import com.fasterxml.jackson.annotation.JsonFormat;
import jakarta.persistence.*;
import lombok.Data;
import java.time.LocalDate;

@Data
@Entity
@Table(name = "laptops")
public class Laptop {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String brand;

private String model;
private String serialNumber;

@Enumerated(EnumType.STRING)
private Status status; // ENUM: AVAILABLE, ASSIGNED, MAINTENANCE
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm a z")
private LocalDate purchaseDate;

public enum Status {

AVAILABLE, ASSIGNED, MAINTENANCE
}

public Long getId() {

return id;
}

public void setId(Long id) {

this.id = id;
}

public String getBrand() {

return brand;
}

public void setBrand(String brand) {

this.brand = brand;
}

public String getModel() {

return model;
 }

public void setModel(String model) {

this.model = model;
}

public String getSerialNumber() {

return serialNumber;
}

public void setSerialNumber(String serialNumber) {

this.serialNumber = serialNumber;
}

public Status getStatus() {

return status;
}

public void setStatus(Status status) {

this.status = status;
}

public LocalDate getPurchaseDate() {

return purchaseDate;
}

public void setPurchaseDate(LocalDate purchaseDate) {

this.purchaseDate = purchaseDate;
}
}

Maintenance.java

package com.laptopmanagementsystem.laptopmanagementsystem.Entity;

import jakarta.persistence.*;
import lombok.Data;

import java.math.BigDecimal;
import java.time.LocalDateTime;
@Data
@Entity
@Table(name = "maintenance")
public class Maintenance {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@ManyToOne
@JoinColumn(name = "laptop_id", nullable = false)
private Laptop laptop;

private String description;

@Enumerated(EnumType.STRING)
private Status status; // ENUM: PENDING, COMPLETED

private BigDecimal cost;

private LocalDateTime loggedAt;

public enum Status {

PENDING, COMPLETED
}

public Long getId() {

return id;
}

public void setId(Long id) {

this.id = id;
}

public Laptop getLaptop() {

return laptop;
}

public void setLaptop(Laptop laptop) {

this.laptop = laptop;
}

public String getDescription() {

 return description;
}

public void setDescription(String description) {

this.description = description;
}

public Status getStatus() {

return status;
}

public void setStatus(Status status) {

this.status = status;
}

public BigDecimal getCost() {

return cost;
}

public void setCost(BigDecimal cost) {

this.cost = cost;
}

public LocalDateTime getLoggedAt() {

return loggedAt;
}

public void setLoggedAt(LocalDateTime loggedAt) {

this.loggedAt = loggedAt;
}
}

Repository:

AssignmentRepository.java

package com.laptopmanagementsystem.laptopmanagementsystem.Repository;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Assignment;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface AssignmentRepository extends JpaRepository<Assignment, Long> {

List<Assignment> findByEmployeeId(Long employeeId);
}

EmployeeRepository.java

package com.laptopmanagementsystem.laptopmanagementsystem.Repository;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Employee;
import org.springframework.data.jpa.repository.JpaRepository;

public interface EmployeeRepository extends JpaRepository<Employee, Long> {

}

IssueRepository.java

package com.laptopmanagementsystem.laptopmanagementsystem.Repository;

import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Issue;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface IssueRepository extends JpaRepository<Issue, Long> {

List<Issue> findByLaptopId(Long laptopId);
}

LaptopRepository.java

package com.laptopmanagementsystem.laptopmanagementsystem.Repository;
import com.laptopmanagementsystem.laptopmanagementsystem.Entity.Laptop;
import org.springframework.data.jpa.repository.JpaRepository;

public interface LaptopRepository extends JpaRepository<Laptop, Long> {

}

LaptopManagenmentSystemApplication.java

package com.laptopmanagementsystem.laptopmanagementsystem;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class LaptopmanagementsystemApplication {

public static void main(String[] args) {

SpringApplication.run(LaptopmanagementsystemApplication.class, args);
}

}
Frontend Code:

AssignLaptops.jsx

import React, { useState, useEffect } from "react";

import "../styles/AssignLaptops.css";

const AssignLaptops = () => {

const [employees, setEmployees] = useState([]);
const [selectedEmployee, setSelectedEmployee] = useState("");
const [laptopId, setLaptopId] = useState("");

useEffect(() => {
const loadEmployees = async () => {
try {
const response = await fetch("http://localhost:8080/api/employees");
if (!response.ok) {
throw new Error("Failed to fetch employees");
}
 const data = await response.json();
setEmployees(data);
} catch (error) {
console.error("Error fetching employees:", error);
}
};

loadEmployees();
}, []);

const handleAssignLaptop = async () => {

try {
const response = await fetch("http://localhost:8080/api/assignments", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ employeeId: selectedEmployee, laptopId }),
});

if (!response.ok) {
throw new Error("Failed to assign laptop");
}

alert("Laptop assigned successfully!");

} catch (error) {
console.error("Error assigning laptop:", error);
}
};

return (
<div className="assign-laptops">
<h1>Assign Laptop</h1>
<select onChange={(e) => setSelectedEmployee(e.target.value)}>
<option value="">Select Employee</option>
{employees.map((employee) => (
<option key={employee.id} value={employee.id}>
{employee.name}
</option>
))}
</select>
<input
type="text"
placeholder="Laptop ID"
onChange={(e) => setLaptopId(e.target.value)}
 />
<button onClick={handleAssignLaptop}>Assign</button>
</div>
);
};

export default AssignLaptops;

Dashboard.jsx

import React, { useEffect, useState } from "react";

import "../styles/Dashboard.css";

const Dashboard = () => {

const [overview, setOverview] = useState({
total: 0,
assigned: 0,
available: 0,
maintenance: 0,
});

useEffect(() => {
const loadOverview = async () => {
try {
const response = await fetch("http://localhost:8080/api/overview");
if (!response.ok) {
throw new Error("Failed to fetch overview data");
}
const data = await response.json();
setOverview(data);
} catch (error) {
console.error("Error fetching overview:", error);
}
};

loadOverview();
}, []);

return (
<div className="dashboard">
 <h1>Admin Dashboard</h1>
<div className="cards">
<div className="card">Total Laptops: {overview.total}</div>
<div className="card">Assigned Laptops: {overview.assigned}</div>
<div className="card">Available Laptops: {overview.available}</div>
<div className="card">Under Maintenance: {overview.maintenance}</div>
</div>
</div>
);
};

export default Dashboard;

EmployeePortal.jsx

import React, { useEffect, useState } from "react";

import "../styles/EmployeePortal.css";

const EmployeePortal = () => {

const [laptop, setLaptop] = useState(null);
const [issue, setIssue] = useState({ description: "", priority: "Low" });

useEffect(() => {
const loadLaptop = async () => {
try {
const response = await fetch("http://localhost:8080/api/employee/laptop");
if (!response.ok) {
throw new Error("Failed to fetch assigned laptop");
}
const data = await response.json();
setLaptop(data);
} catch (error) {
console.error("Error fetching laptop:", error);
}
};

loadLaptop();
}, []);

const handleReportIssue = async () => {

try {
const response = await fetch("http://localhost:8080/api/issues", {
 method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(issue),
});

if (!response.ok) {
throw new Error("Failed to report issue");
}

alert("Issue reported successfully!");

} catch (error) {
console.error("Error reporting issue:", error);
}
};

return (
<div className="employee-portal">
<h1>Employee Portal</h1>
<h2>Your Assigned Laptop</h2>
{laptop ? (
<div>
<p>Brand: {laptop.brand}</p>
<p>Model: {laptop.model}</p>
<p>Condition: {laptop.status}</p>
</div>
):(
<p>No laptop assigned yet.</p>
)}
<h2>Report Issue</h2>
<textarea
placeholder="Describe the issue"
onChange={(e) => setIssue({ ...issue, description: e.target.value })}
/>
<select onChange={(e) => setIssue({ ...issue, priority: e.target.value })}>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
<button onClick={handleReportIssue}>Submit</button>
</div>
);
};
export default EmployeePortal;

ManageLaptops.jsx

import React, { useState, useEffect } from "react";

import "../styles/ManageLaptops.css";

const ManageLaptops = () => {

const [laptops, setLaptops] = useState([]);
const [newLaptop, setNewLaptop] = useState({
brand: "",
model: "",
serialNumber: "",
purchaseDate: "",
});

// Function to load laptops from the backend

const loadLaptops = async () => {
try {
const response = await fetch("http://localhost:8080/api/laptops");
if (!response.ok) {
throw new Error("Failed to fetch laptops");
}
const data = await response.json();
setLaptops(data);
} catch (error) {
console.error("Error fetching laptops:", error);
}
};

useEffect(() => {
loadLaptops();
}, []);

// Function to handle adding a new laptop

const handleAddLaptop = async () => {
try {
const response = await fetch("http://localhost:8080/api/laptops", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(newLaptop),
});
 if (!response.ok) {
throw new Error("Failed to add laptop");
}

setNewLaptop({ brand: "", model: "", serialNumber: "", purchaseDate: "" });
alert("Laptop added successfully!");
loadLaptops(); // Reload the laptops list
} catch (error) {
console.error("Error adding laptop:", error);
}
};

return (
<div className="manage-laptops">
<h1>Manage Laptops</h1>
<div className="add-laptop-form">
<h2>Add New Laptop</h2>
<input
type="text"
placeholder="Brand"
value={newLaptop.brand}
onChange={(e) => setNewLaptop({ ...newLaptop, brand: e.target.value })}
/>
<input
type="text"
placeholder="Model"
value={newLaptop.model}
onChange={(e) => setNewLaptop({ ...newLaptop, model: e.target.value })}
/>
<input
type="text"
placeholder="Serial Number"
value={newLaptop.serialNumber}
onChange={(e) =>
setNewLaptop({ ...newLaptop, serialNumber: e.target.value })
}
/>
<input
type="date"
value={newLaptop.purchaseDate}
onChange={(e) =>
setNewLaptop({ ...newLaptop, purchaseDate: e.target.value })
 }
/>
<button onClick={handleAddLaptop}>Add Laptop</button>
</div>
</div>
);
};

export default ManageLaptops;

App.js

import React from "react";

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Dashboard from "./components/Dashboard";
import ManageLaptops from "./components/ManageLaptops";
import AssignLaptops from "./components/AssignLaptops";
import EmployeePortal from "./components/EmployeePortal";

function App() {
return (
<Router>
<div className="app-container">
<header className="app-header">
<h1>Laptop Management System</h1>
<nav className="app-nav">
<Link to="/">Dashboard</Link>
<Link to="/manage-laptops">Manage Laptops</Link>
<Link to="/assign-laptops">Assign Laptops</Link>
<Link to="/employee-portal">Employee Portal</Link>
 </nav>
</header>
<main className="app-main">
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/manage-laptops" element={<ManageLaptops />} />
<Route path="/assign-laptops" element={<AssignLaptops />} />
<Route path="/employee-portal" element={<EmployeePortal />} />
</Routes>
</main>
<footer className="app-footer">
<p>&copy; 2024 Laptop Management System</p>
</footer>
</div>
</Router>
);
}

export default App;