sampe

import React, { useState, useEffect } from "react";
import axios from "axios";
import SeatDetails from "./SeatDetails";

const SeatLayout = () => {
const [seats, setSeats] = useState([]);
const [selectedSeat, setSelectedSeat] = useState(null);

// Fetch all seats when the component mounts
useEffect(() => {
axios
.get("http://localhost:8080/api/seats")
.then((response) => setSeats(response.data))
.catch((error) => console.error("Error fetching seat data:", error));
}, []);

// Handle clicking a cubicle
const handleSeatClick = (cubicleNo) => {
axios
.get(http://localhost:8080/api/seats/${cubicleNo})
.then((response) => setSelectedSeat(response.data))
.catch((error) => console.error("Error fetching seat details:", error));
};

return (

<div> <h1>Office Seat Layout</h1> <div style={styles.grid}> {seats.map((seat) => ( <div key={seat.cubicleNo} style={{ ...styles.seat, backgroundColor: seat.occupied ? "#ff7f7f" : "#7fff7f", }} onClick={() => handleSeatClick(seat.cubicleNo)} > {seat.cubicleNo} </div> ))} </div> {selectedSeat && ( <SeatDetails seat={selectedSeat} onClose={() => setSelectedSeat(null)} /> )} </div> ); };

const styles = {
grid: {
display: "grid",
gridTemplateColumns: "repeat(5, 1fr)",
gap: "10px",
marginTop: "20px",
},
seat: {
width: "100px",
height: "100px",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "1px solid black",
cursor: "pointer",
},
};

export default SeatLayout;

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

const SeatDetails = ({ seat, onClose }) => {
const [employee, setEmployee] = useState({
name: "",
email: "",
department: "",
});

const handleAssignEmployee = () => {
axios
.post("http://localhost:8080/api/seats/assign", {
cubicleNo: seat.cubicleNo,
employee: employee,
})
.then(() => {
alert("Employee assigned successfully!");
onClose(); // Close the details popup after assignment
})
.catch((error) => console.error("Error assigning employee:", error));
};

return (

<div style={styles.overlay}> <div style={styles.modal}> <h2>Seat Details: {seat.cubicleNo}</h2> <p> <strong>Occupied:</strong> {seat.occupied ? "Yes" : "No"} </p> {seat.occupied && seat.employee ? ( <div> <p> <strong>Name:</strong> {seat.employee.name} </p> <p> <strong>Email:</strong> {seat.employee.email} </p> <p> <strong>Department:</strong> {seat.employee.department} </p> </div> ) : ( <div> <h3>Assign Employee</h3> <input type="text" placeholder="Name" value={employee.name} onChange={(e) => setEmployee({ ...employee, name: e.target.value })} style={styles.input} /> <input type="email" placeholder="Email" value={employee.email} onChange={(e) => setEmployee({ ...employee, email: e.target.value })} style={styles.input} /> <input type="text" placeholder="Department" value={employee.department} onChange={(e) => setEmployee({ ...employee, department: e.target.value }) } style={styles.input} /> <button onClick={handleAssignEmployee} style={styles.button}> Assign </button> </div> )} <button onClick={onClose} style={styles.closeButton}> Close </button> </div> </div> ); };

const styles = {
overlay: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
modal: {
backgroundColor: "#fff",
padding: "20px",
borderRadius: "5px",
width: "400px",
textAlign: "center",
},
input: {
display: "block",
margin: "10px auto",
padding: "10px",
width: "90%",
},
button: {
padding: "10px 20px",
marginTop: "10px",
},
closeButton: {
marginTop: "20px",
padding: "5px 10px",
backgroundColor: "red",
color: "white",
border: "none",
borderRadius: "3px",
cursor: "pointer",
},
};

export default SeatDetails;