import { useTranslation } from '@/hooks/use-translation'; import React, { useState, useEffect } from 'react'; import AppLayout from '@/layouts/app-layout'; import { Head, Link } from '@inertiajs/react'; import { BreadcrumbItem } from '@/types'; import { Button } from '@/components/ui/button'; import { Plus, Search } from 'lucide-react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'School Management', href: '/admin/school' }, { title: 'Attendance', href: '/admin/school/attendance' }, ]; interface Attendance { id: number; student: { id: number; first_name: string; last_name: string; }; class_definition?: { id: number; name: string; }; attendance_date: string; status: 'present' | 'absent' | 'tardy' | 'excused'; notes?: string; } export default function AttendanceIndex() { const { t } = useTranslation(); const [attendances, setAttendances] = useState([]); const [loading, setLoading] = useState(true); const [searchDate, setSearchDate] = useState(new Date().toISOString().split('T')[0]); const [filterStatus, setFilterStatus] = useState(''); const [currentPage, setCurrentPage] = useState(1); const [lastPage, setLastPage] = useState(1); const fetchAttendances = async (page = 1) => { setLoading(true); try { const params = new URLSearchParams({ page: String(page) }); if (searchDate) params.append('date', searchDate); if (filterStatus) params.append('status', filterStatus); const response = await fetch(`/api/admin/attendances?${params}`); const data = await response.json(); setAttendances(data.data); setCurrentPage(data.current_page); setLastPage(data.last_page); } catch (error) { console.error('Failed to fetch attendances:', error); } finally { setLoading(false); } }; useEffect(() => { fetchAttendances(); }, [searchDate, filterStatus]); const getStatusBadgeClass = (status: string) => { const baseClasses = 'px-2 py-1 rounded text-xs font-medium'; switch (status) { case 'present': return `${baseClasses} bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`; case 'absent': return `${baseClasses} bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`; case 'tardy': return `${baseClasses} bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`; case 'excused': return `${baseClasses} bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`; default: return `${baseClasses} bg-gray-100 text-gray-800`; } }; return (

{t('Student Attendance')}

setSearchDate(e.target.value)} className="w-full rounded border p-2" />
{loading ? (

{t('Loading...')}

) : ( <>
{attendances.length === 0 ? ( ) : ( attendances.map((attendance) => ( )) )}
{t('Date')} {t('Student')} {t('Class')} {t('Status')} {t('Notes')}
{t('No attendance records found')}
{new Date(attendance.attendance_date).toLocaleDateString()} {attendance.student.first_name} {attendance.student.last_name} {attendance.class_definition?.name || '—'} {attendance.status.toUpperCase()} {attendance.notes || '—'}
{lastPage > 1 && (
Page {currentPage} of {lastPage}
)} )}
); }