admin ui enhacement
This commit is contained in:
dimitar committed
1 parent
02c9681aca
commit
0abb41f573
16 files changed
+988
-435
No files matched your search
@@ -1,96 +1,102 @@
|
||||
'use client'
|
||||
"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
|
||||
}
|
||||
import { useAttendance } from "@/hooks/use-api";
|
||||
import { PageHeader } from "@/components/ui/PageHeader";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
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>
|
||||
}
|
||||
const { data: attendance = [], isLoading } = useAttendance();
|
||||
|
||||
if (isLoading) {
|
||||
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 className="space-y-8">
|
||||
<PageHeader
|
||||
title="Attendance"
|
||||
description="Monitor gym check-ins and check-outs"
|
||||
breadcrumbs={[{ label: "Attendance" }]}
|
||||
/>
|
||||
<div className="card-modern">
|
||||
<div className="animate-pulse space-y-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-12 bg-muted rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<PageHeader
|
||||
title="Attendance"
|
||||
description="Monitor gym check-ins and check-outs"
|
||||
breadcrumbs={[{ label: "Attendance" }]}
|
||||
/>
|
||||
|
||||
<div className="card-modern">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
|
||||
Client
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
|
||||
Type
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
|
||||
Check In
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
|
||||
Check Out
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{attendance.map((record) => (
|
||||
<tr
|
||||
key={record.id}
|
||||
className="border-b border-border/50 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<td className="py-3 px-4 text-sm">
|
||||
{record.userId.substring(0, 8)}...
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm capitalize text-muted-foreground">
|
||||
{record.type}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-muted-foreground">
|
||||
{new Date(record.checkIn).toLocaleString()}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-muted-foreground">
|
||||
{record.checkOut
|
||||
? new Date(record.checkOut).toLocaleString()
|
||||
: "-"}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant={record.checkOut ? "gray" : "success"}>
|
||||
{record.checkOut ? "Completed" : "Active"}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{attendance.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={5}
|
||||
className="py-8 text-center text-muted-foreground"
|
||||
>
|
||||
No attendance records found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user