import React, { useState, useEffect } from 'react'; import { Head, usePage } from '@inertiajs/react'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '@/Components/features/common/headerSlice'; import ModalInput from '@/Components/ModalInput'; import DeleteButton from '@/Components/DeleteButton'; import { UserGroupIcon } from '@heroicons/react/24/outline'; export default function IndexSantri({ santri, fields, options }) { const [selectedSantri, setSelectedSantri] = useState(null); const [isDeleteOpen, setDeleteOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [filteredSantri, setFilteredSantri] = useState([]); const dispatch = useDispatch(); const { flash } = usePage().props; const openDeleteModal = (item) => { setSelectedSantri(item); setDeleteOpen(true); }; useEffect(() => { dispatch(setPageTitle("Data Santri")); }, [dispatch]); useEffect(() => { if (santri?.data) { const filtered = santri.data.filter(item => item.nama.toLowerCase().includes(searchTerm.toLowerCase()) || item.nis.toString().includes(searchTerm) ); setFilteredSantri(filtered); } }, [searchTerm, santri]); const handleSearch = (e) => { setSearchTerm(e.target.value); }; return (

Data Santri

Overview
setSelectedSantri(null)} />
{filteredSantri.length > 0 ? ( filteredSantri.map((item, i) => ( )) ) : ( )}
Name NIS Status Alamat Action
Avatar
{item.nama}
{item.level === 1 ? 'Admin' : 'User'}
 {item.nis}
{item.status_santri || "Open"}
{item.alamat || "-"}
Tidak ada data santri.
{santri.current_page > 1 && ( )} {Array.from({ length: santri.last_page }, (_, i) => i + 1) .filter((page) => page === 1 || page === santri.last_page || Math.abs(page - santri.current_page) <= 2 ) .map((page, index, array) => { const prevPage = array[index - 1]; const showEllipsis = prevPage && page - prevPage > 1; return ( {showEllipsis && ( ... )} ); })} {/* Tombol terakhir */} {santri.current_page < santri.last_page && ( )}
setDeleteOpen(false)} item={selectedSantri} tableName="users" />
); }