import { Link, router, usePage, Head } from '@inertiajs/react'; import { useState, useEffect } from 'react'; import { Search, Users, RefreshCw, User, Calendar, MapPin } from 'lucide-react'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import { formatDate } from '@/lib/utils'; import type { PageProps } from '@/types'; interface Teacher { id: number; api_teacher_id: number; nip: string | null; nik: string | null; nuptk: string | null; full_name: string; gender: 'L' | 'P' | null; birth_place: string | null; birth_date: string | null; phone: string | null; address: string | null; position: string | null; display_position: string | null; type: string | null; status: string | null; image_url: string | null; last_synced_at: string | null; } interface Props extends PageProps { teachers: { data: Teacher[]; links: Array<{ url: string | null; label: string; active: boolean }>; current_page: number; last_page: number; per_page: number; total: number; }; filters: { search?: string; }; } export default function TeacherIndex() { const { teachers, filters } = usePage().props; const [searchVal, setSearchVal] = useState(filters.search || ''); useEffect(() => { setSearchVal(filters.search || ''); }, [filters]); function performSearch(params: { search?: string }) { router.get('/teachers', params, { preserveState: true, replace: true, }); } function handleSearchSubmit(e: React.FormEvent) { e.preventDefault(); performSearch({ search: searchVal }); } function handleReset() { setSearchVal(''); router.get('/teachers', {}, { replace: true }); } return ( <>

{/* Header */}

Total terdaftar: {teachers.total} guru (lokal)

Sync Data

{/* Filters */}

{/* Teachers Table */}

{teachers.data.length > 0 ? ( teachers.data.map((teacher, index) => ( )) ) : ( )}

No.	Nama Lengkap	NIP / NUPTK	Jabatan	JK	TTL
{(teachers.current_page - 1) * teachers.per_page + index + 1}	{teacher.image_url ? ( ${teacher.full_name}$ ) : ( )} {teacher.full_name}	NIP: {teacher.nip ?? '-'} NUPTK: {teacher.nuptk ?? '-'}	{teacher.display_position \|\| teacher.position \|\| '-'}	{teacher.gender === 'L' ? ( Laki-laki ) : teacher.gender === 'P' ? ( Perempuan ) : ( '-' )}	{teacher.birth_place && ( {teacher.birth_place} )} {teacher.birth_date && ( {formatDate( teacher.birth_date, )} )} {!teacher.birth_place && !teacher.birth_date && '-'}
Tidak ada guru ditemukan Coba sesuaikan kata kunci pencarian.

{/* Pagination */} {teachers.last_page > 1 && (

{teachers.links.map((link, i) => ( ))}

)}

); } TeacherIndex.layout = (page: any) => {page};