97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { format } from 'date-fns'
|
|
|
|
interface Attendance {
|
|
id: string
|
|
clientId: string
|
|
checkInTime: string
|
|
checkOutTime?: string
|
|
type: string
|
|
notes?: string
|
|
}
|
|
|
|
export default function AttendancePage() {
|
|
const [attendance, setAttendance] = useState<Attendance[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const fetchAttendance = async () => {
|
|
try {
|
|
const res = await fetch('/api/admin/attendance')
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setAttendance(data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching attendance:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchAttendance()
|
|
}, [])
|
|
|
|
if (loading) {
|
|
return <div className="p-8">Loading...</div>
|
|
}
|
|
|
|
return (
|
|
<div className="p-8">
|
|
<h1 className="text-2xl font-bold mb-6">Attendance Monitoring</h1>
|
|
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Client ID
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Type
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Check In
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Check Out
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{attendance.map((record) => (
|
|
<tr key={record.id}>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{record.clientId}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">
|
|
{record.type}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{format(new Date(record.checkInTime), 'PP p')}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{record.checkOutTime ? format(new Date(record.checkOutTime), 'PP p') : '-'}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${record.checkOutTime
|
|
? 'bg-gray-100 text-gray-800'
|
|
: 'bg-green-100 text-green-800'
|
|
}`}>
|
|
{record.checkOutTime ? 'Completed' : 'Active'}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|