103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useAttendance } from "@/hooks/use-api";
|
|
import { PageHeader } from "@/components/ui/PageHeader";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
export default function AttendancePage() {
|
|
const { data: attendance = [], isLoading } = useAttendance();
|
|
|
|
if (isLoading) {
|
|
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="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.userName || 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.checkInTime).toLocaleString()}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-muted-foreground">
|
|
{record.checkOutTime
|
|
? new Date(record.checkOutTime).toLocaleString()
|
|
: "-"}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<Badge variant={record.checkOutTime ? "gray" : "success"}>
|
|
{record.checkOutTime ? "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>
|
|
);
|
|
}
|