286 lines
13 KiB
TypeScript
Executable File
286 lines
13 KiB
TypeScript
Executable File
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { BookOpen, Plus, Pencil, Trash2, Upload, Download, X, Save, Search } from 'lucide-react';
|
|
|
|
interface Subject {
|
|
id: number;
|
|
name: string;
|
|
}
|
|
|
|
interface ManageSubjectsProps {
|
|
onClose?: () => void;
|
|
}
|
|
|
|
const ManageSubjects: React.FC<ManageSubjectsProps> = ({ onClose }) => {
|
|
const [subjects, setSubjects] = useState<Subject[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingSubject, setEditingSubject] = useState<Subject | null>(null);
|
|
const [formData, setFormData] = useState({ name: '' });
|
|
const [saving, setSaving] = useState(false);
|
|
const [importResult, setImportResult] = useState<string | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const API_URL = import.meta.env.VITE_API_URL || '/api';
|
|
|
|
useEffect(() => {
|
|
fetchSubjects();
|
|
}, []);
|
|
|
|
const fetchSubjects = async () => {
|
|
try {
|
|
const response = await fetch(`${API_URL}/subjects`);
|
|
const result = await response.json();
|
|
if (result.status === 'success') {
|
|
setSubjects(result.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching subjects:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
|
|
try {
|
|
const url = editingSubject
|
|
? `${API_URL}/subjects/${editingSubject.id}`
|
|
: `${API_URL}/subjects`;
|
|
|
|
const response = await fetch(url, {
|
|
method: editingSubject ? 'PUT' : 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.status === 'success') {
|
|
alert(result.message);
|
|
fetchSubjects();
|
|
setShowForm(false);
|
|
setEditingSubject(null);
|
|
setFormData({ name: '' });
|
|
} else {
|
|
alert(result.message);
|
|
}
|
|
} catch (error) {
|
|
alert('Gagal menyimpan data');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
if (!confirm('Yakin ingin menghapus mata pelajaran ini?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/subjects/${id}`, { method: 'DELETE' });
|
|
const result = await response.json();
|
|
if (result.status === 'success') {
|
|
fetchSubjects();
|
|
}
|
|
} catch (error) {
|
|
alert('Gagal menghapus data');
|
|
}
|
|
};
|
|
|
|
const handleEdit = (subject: Subject) => {
|
|
setEditingSubject(subject);
|
|
setFormData({ name: subject.name });
|
|
setShowForm(true);
|
|
};
|
|
|
|
const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
try {
|
|
const response = await fetch(`${API_URL}/subjects/import`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const result = await response.json();
|
|
setImportResult(result.message);
|
|
fetchSubjects();
|
|
} catch (error) {
|
|
setImportResult('Gagal import data');
|
|
}
|
|
|
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
|
};
|
|
|
|
const downloadTemplate = () => {
|
|
window.open(`${API_URL}/subjects/template`, '_blank');
|
|
};
|
|
|
|
const filteredSubjects = subjects.filter(s =>
|
|
s.name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<div className="bg-white rounded-2xl shadow-lg border border-slate-100 overflow-hidden">
|
|
<div className="bg-school-900 p-6 text-white flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<BookOpen size={24} className="text-accent-yellow" />
|
|
<div>
|
|
<h2 className="font-heading text-xl font-bold">Kelola Mata Pelajaran</h2>
|
|
<p className="text-blue-200 text-sm">Tambah, edit, hapus, atau import dari Excel</p>
|
|
</div>
|
|
</div>
|
|
{onClose && (
|
|
<button onClick={onClose} className="text-white/70 hover:text-white">
|
|
<X size={24} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6 space-y-4">
|
|
{/* Actions Bar */}
|
|
<div className="flex flex-wrap gap-3 items-center justify-between">
|
|
<div className="relative flex-1 min-w-[200px]">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
|
|
<input
|
|
type="text"
|
|
placeholder="Cari mata pelajaran..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 rounded-xl border border-slate-200 focus:border-school-800 outline-none"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={downloadTemplate}
|
|
className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-xl hover:bg-slate-200 transition font-medium"
|
|
>
|
|
<Download size={18} /> Template
|
|
</button>
|
|
<label className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition font-medium cursor-pointer">
|
|
<Upload size={18} /> Import Excel
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".xlsx,.xls"
|
|
onChange={handleImport}
|
|
className="hidden"
|
|
/>
|
|
</label>
|
|
<button
|
|
onClick={() => { setShowForm(true); setEditingSubject(null); setFormData({ name: '' }); }}
|
|
className="flex items-center gap-2 px-4 py-2 bg-school-900 text-white rounded-xl hover:bg-school-800 transition font-medium"
|
|
>
|
|
<Plus size={18} /> Tambah Mapel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Import Result */}
|
|
{importResult && (
|
|
<div className="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-xl flex justify-between items-center">
|
|
<span>{importResult}</span>
|
|
<button onClick={() => setImportResult(null)}><X size={18} /></button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form Modal */}
|
|
{showForm && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl p-6 w-full max-w-md">
|
|
<h3 className="text-lg font-bold mb-4">{editingSubject ? 'Edit Mata Pelajaran' : 'Tambah Mata Pelajaran Baru'}</h3>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-600 mb-1">Nama Mata Pelajaran *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full px-4 py-2 rounded-xl border border-slate-200 focus:border-school-800 outline-none"
|
|
placeholder="Contoh: Matematika"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowForm(false)}
|
|
className="flex-1 px-4 py-2 bg-slate-100 text-slate-700 rounded-xl hover:bg-slate-200 transition font-medium"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-school-900 text-white rounded-xl hover:bg-school-800 transition font-medium disabled:opacity-50"
|
|
>
|
|
<Save size={18} /> {saving ? 'Menyimpan...' : 'Simpan'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<div className="text-center py-8 text-slate-400">Memuat data...</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-slate-50 border-b border-slate-200">
|
|
<th className="text-left px-4 py-3 font-semibold text-slate-600 w-16">No</th>
|
|
<th className="text-left px-4 py-3 font-semibold text-slate-600">Mata Pelajaran</th>
|
|
<th className="text-center px-4 py-3 font-semibold text-slate-600 w-32">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredSubjects.map((subject, index) => (
|
|
<tr key={subject.id} className="border-b border-slate-100 hover:bg-slate-50">
|
|
<td className="px-4 py-3 text-slate-500">{index + 1}</td>
|
|
<td className="px-4 py-3 font-medium">{subject.name}</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex justify-center gap-2">
|
|
<button
|
|
onClick={() => handleEdit(subject)}
|
|
className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition"
|
|
>
|
|
<Pencil size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(subject.id)}
|
|
className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{filteredSubjects.length === 0 && (
|
|
<tr>
|
|
<td colSpan={3} className="px-4 py-8 text-center text-slate-400">
|
|
Tidak ada data mata pelajaran
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-sm text-slate-500 pt-2">
|
|
Total: {filteredSubjects.length} mata pelajaran
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ManageSubjects;
|