import { useTranslation } from '@/hooks/use-translation'; import React, { useEffect, useState } from 'react'; import AppLayout from '@/layouts/app-layout'; import { Head, Link } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Search, Plus, Eye, Edit, Trash2 } from 'lucide-react'; import { BreadcrumbItem } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Subjects', href: '/admin/school/subjects' }, ]; function fetchJson(url: string, opts: any = {}) { const tokenMeta = document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null; const token = tokenMeta?.content; const headers = Object.assign({ 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, opts.headers || {}); if (token) headers['X-CSRF-TOKEN'] = token; return fetch(url, Object.assign({ credentials: 'same-origin', headers }, opts)).then((r) => r.ok ? r.json() : Promise.reject(r)); } export default function SubjectsPage() { const { t } = useTranslation(); const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [search, setSearch] = useState(new URLSearchParams(window.location.search).get('search') || ''); const [page, setPage] = useState(Number(new URLSearchParams(window.location.search).get('page')) || 1); const [perPage] = useState(25); const [total, setTotal] = useState(0); const [from, setFrom] = useState(0); const [to, setTo] = useState(0); const [lastPage, setLastPage] = useState(1); function load(p: number = 1, s: string = '') { setLoading(true); const params = new URLSearchParams(); params.set('page', String(p)); params.set('per_page', String(perPage)); if (s) params.set('q', s); fetchJson(`/api/admin/subjects?${params.toString()}`) .then((json) => { const list = Array.isArray(json.data) ? json.data : (json.data ?? []); setData(list); setTotal(Number(json.total ?? 0)); setFrom(Number(json.from ?? 0)); setTo(Number(json.to ?? 0)); setLastPage(Number(json.last_page ?? 1)); setPage(Number(json.current_page ?? p)); }) .catch(() => { setData([]); setTotal(0); setFrom(0); setTo(0); setLastPage(1); }) .finally(() => setLoading(false)); } useEffect(() => { load(page, search); }, []); function handleSearch(e: React.FormEvent) { e.preventDefault(); load(1, search); } function handleDelete(id: number, name: string) { if (!confirm(`Are you sure you want to delete ${name}?`)) return; fetchJson(`/api/admin/subjects/${id}`, { method: 'DELETE' }) .then(() => load(page, search)) .catch((err) => alert('Failed to delete subject')); } return (

{t('Subjects')}

{t('Manage curriculum subjects')}

{t('Total Subjects')}

{total}

Showing {from || (data.length?1:0)} to {to || data.length} of {total} subjects

{data.length > 0 ? ( data.map((it) => ( )) ) : ( )}

{t('Name')}	{t('Class')}	{t('Teacher')}	{t('Actions')}
{it.name}	{it.class_name ?? it.class_id}	{it.teacher_name ?? it.teacher_id}
{t('No subjects found.')}

{lastPage > 1 && (

{page > 1 && } {page < lastPage && }

Page {page} of {lastPage}

)}

); }