68 lines
3.1 KiB
JavaScript
68 lines
3.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
const WorkSchedule = () => {
|
|
const [schedule, setSchedule] = useState([]);
|
|
const [error, setError] = useState(false); // State to track if there's an error
|
|
|
|
useEffect(() => {
|
|
const fetchSchedule = async () => {
|
|
try {
|
|
const response = await axios.get('http://localhost:5000/api/schedules');
|
|
setSchedule(response.data);
|
|
setError(false); // Reset error state if the fetch succeeds
|
|
} catch (error) {
|
|
console.error('Error fetching the schedule data:', error);
|
|
setError(true); // Set error to true if the fetch fails
|
|
}
|
|
};
|
|
|
|
fetchSchedule();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-nav-black">
|
|
<div className="w-full max-w-6xl p-8 bg-darkGray shadow-lg rounded-2xl">
|
|
<h2 className="text-3xl font-bold text-center text-highlightRed mb-6">Employee Work Schedule</h2>
|
|
<table className="min-w-full table-auto text-left border-collapse">
|
|
<thead>
|
|
<tr className="bg-gray-800 text-gray-100">
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">First Name</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Last Name</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Email</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Phone</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Hours Today</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Hours This Week</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Hourly Rate</th>
|
|
<th className="px-6 py-4 border-b-2 border-gray-300">Estimated Weekly Earnings</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{error ? (
|
|
// Display this row if fetching data fails
|
|
<tr>
|
|
<td colSpan="8" className="text-center px-6 py-4 text-red-600">Failed to fetch data.</td>
|
|
</tr>
|
|
) : (
|
|
// Display table rows if data fetching is successful
|
|
schedule.map((person, index) => (
|
|
<tr key={person.id} className={`hover:bg-gray-100 ${index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`}>
|
|
<td className="px-6 py-4 border-b">{person.first_name}</td>
|
|
<td className="px-6 py-4 border-b">{person.last_name}</td>
|
|
<td className="px-6 py-4 border-b">{person.email}</td>
|
|
<td className="px-6 py-4 border-b">{person.phone}</td>
|
|
<td className="px-6 py-4 border-b">{person.hours_worked_today}</td>
|
|
<td className="px-6 py-4 border-b">{person.hours_worked_week}</td>
|
|
<td className="px-6 py-4 border-b">${person.hourly_rate.toFixed(2)}</td>
|
|
<td className="px-6 py-4 border-b">${person.estimated_weekly_earnings.toFixed(2)}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WorkSchedule;
|