836 lines
28 KiB
TypeScript
836 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
DialogClose
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from "@/components/ui/select";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination";
|
|
import {
|
|
PlusCircle,
|
|
Pencil,
|
|
Trash2,
|
|
Search,
|
|
X,
|
|
Loader2,
|
|
GraduationCap
|
|
} from "lucide-react";
|
|
import { useToast } from "@/components/ui/toast-provider";
|
|
import UploadFileNilaiMahasiswa from "./upload-file-nilai-mahasiswa";
|
|
|
|
// Define the NilaiMahasiswa type
|
|
interface NilaiMahasiswa {
|
|
id_nilai: number;
|
|
id_mahasiswa: number;
|
|
id_mk: number;
|
|
nim: string;
|
|
nama: string;
|
|
kode_mk: string;
|
|
nama_mk: string;
|
|
nilai_huruf: "A" | "B+" | "B" | "C+" | "C" | "D+" | "D" | "E";
|
|
nilai_angka: number;
|
|
semester: number;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
// Define MataKuliah type for dropdown
|
|
interface MataKuliah {
|
|
id_mk: number;
|
|
kode_mk: string;
|
|
nama_mk: string;
|
|
}
|
|
|
|
export default function DataTableNilaiMahasiswa() {
|
|
const { showSuccess, showError } = useToast();
|
|
// State for data
|
|
const [nilaiMahasiswa, setNilaiMahasiswa] = useState<NilaiMahasiswa[]>([]);
|
|
const [filteredData, setFilteredData] = useState<NilaiMahasiswa[]>([]);
|
|
const [mataKuliahList, setMataKuliahList] = useState<MataKuliah[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// State for filtering
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [filterSemester, setFilterSemester] = useState<string>("");
|
|
const [filterNilaiHuruf, setFilterNilaiHuruf] = useState<string>("");
|
|
|
|
// State for pagination
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(10);
|
|
const [paginatedData, setPaginatedData] = useState<NilaiMahasiswa[]>([]);
|
|
|
|
// State for form
|
|
const [formMode, setFormMode] = useState<"add" | "edit">("add");
|
|
const [formData, setFormData] = useState<Partial<NilaiMahasiswa>>({
|
|
nilai_huruf: "A",
|
|
nilai_angka: 4.0,
|
|
semester: 1
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
|
|
// State for delete confirmation
|
|
const [deleteId, setDeleteId] = useState<number | null>(null);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
|
|
|
|
|
// Fetch data on component mount
|
|
useEffect(() => {
|
|
fetchNilaiMahasiswa();
|
|
fetchMataKuliah();
|
|
}, []);
|
|
|
|
// Filter data when search term or filter changes
|
|
useEffect(() => {
|
|
filterData();
|
|
}, [searchTerm, filterSemester, filterNilaiHuruf, nilaiMahasiswa]);
|
|
|
|
// Update paginated data when filtered data or pagination settings change
|
|
useEffect(() => {
|
|
paginateData();
|
|
}, [filteredData, currentPage, pageSize]);
|
|
|
|
// Fetch mata kuliah for dropdown
|
|
const fetchMataKuliah = async () => {
|
|
try {
|
|
const response = await fetch("/api/keloladata/data-mata-kuliah");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setMataKuliahList(data);
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching mata kuliah:", err);
|
|
}
|
|
};
|
|
|
|
// Fetch nilai mahasiswa data from API
|
|
const fetchNilaiMahasiswa = async () => {
|
|
try {
|
|
setLoading(true);
|
|
let url = "/api/keloladata/data-nilai-mahasiswa";
|
|
|
|
// Add filters to URL if they exist
|
|
const params = new URLSearchParams();
|
|
if (searchTerm) {
|
|
params.append("search", searchTerm);
|
|
}
|
|
if (filterSemester && filterSemester !== "all") {
|
|
params.append("semester", filterSemester);
|
|
}
|
|
if (filterNilaiHuruf && filterNilaiHuruf !== "all") {
|
|
params.append("nilai_huruf", filterNilaiHuruf);
|
|
}
|
|
|
|
if (params.toString()) {
|
|
url += `?${params.toString()}`;
|
|
}
|
|
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch data");
|
|
}
|
|
|
|
const data = await response.json();
|
|
setNilaiMahasiswa(data);
|
|
setFilteredData(data);
|
|
setError(null);
|
|
} catch (err) {
|
|
setError("Error fetching data. Please try again later.");
|
|
console.error("Error fetching data:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Filter data based on search term and filters
|
|
const filterData = () => {
|
|
let filtered = [...nilaiMahasiswa];
|
|
|
|
// Filter by search term
|
|
if (searchTerm) {
|
|
filtered = filtered.filter(
|
|
(item) =>
|
|
(item.nim && item.nim.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(item.nama && item.nama.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(item.kode_mk && item.kode_mk.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(item.nama_mk && item.nama_mk.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
);
|
|
}
|
|
|
|
// Filter by semester
|
|
if (filterSemester && filterSemester !== "all") {
|
|
filtered = filtered.filter((item) => item.semester === parseInt(filterSemester));
|
|
}
|
|
|
|
// Filter by nilai huruf
|
|
if (filterNilaiHuruf && filterNilaiHuruf !== "all") {
|
|
filtered = filtered.filter((item) => item.nilai_huruf === filterNilaiHuruf);
|
|
}
|
|
|
|
setFilteredData(filtered);
|
|
// Reset to first page when filters change
|
|
setCurrentPage(1);
|
|
};
|
|
|
|
// Paginate data
|
|
const paginateData = () => {
|
|
const startIndex = (currentPage - 1) * pageSize;
|
|
const endIndex = startIndex + pageSize;
|
|
setPaginatedData(filteredData.slice(startIndex, endIndex));
|
|
};
|
|
|
|
// Get total number of pages
|
|
const getTotalPages = () => {
|
|
return Math.ceil(filteredData.length / pageSize);
|
|
};
|
|
|
|
// Handle page change
|
|
const handlePageChange = (page: number) => {
|
|
setCurrentPage(page);
|
|
};
|
|
|
|
// Handle page size change
|
|
const handlePageSizeChange = (size: string) => {
|
|
setPageSize(Number(size));
|
|
setCurrentPage(1); // Reset to first page when changing page size
|
|
};
|
|
|
|
// Reset form data
|
|
const resetForm = () => {
|
|
setFormData({
|
|
nilai_huruf: "A",
|
|
nilai_angka: 4.0,
|
|
semester: 1
|
|
});
|
|
};
|
|
|
|
// Handle form input changes
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
// Handle select input changes
|
|
const handleSelectChange = (name: string, value: string) => {
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
|
|
// Auto-update nilai_angka based on nilai_huruf
|
|
if (name === "nilai_huruf") {
|
|
const nilaiAngkaMap: Record<string, number> = {
|
|
"A": 4.0,
|
|
"B+": 3.5,
|
|
"B": 3.0,
|
|
"C+": 2.5,
|
|
"C": 2.0,
|
|
"D+": 1.5,
|
|
"D": 1.0,
|
|
"E": 0.0
|
|
};
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value as NilaiMahasiswa["nilai_huruf"],
|
|
nilai_angka: nilaiAngkaMap[value] || 0
|
|
}));
|
|
}
|
|
};
|
|
|
|
// Open form dialog for adding new nilai
|
|
const handleAdd = () => {
|
|
setFormMode("add");
|
|
resetForm();
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
// Open form dialog for editing nilai
|
|
const handleEdit = (data: NilaiMahasiswa) => {
|
|
setFormMode("edit");
|
|
setFormData(data);
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
// Open delete confirmation dialog
|
|
const handleDeleteConfirm = (id: number) => {
|
|
setDeleteId(id);
|
|
setIsDeleteDialogOpen(true);
|
|
};
|
|
|
|
// Submit form for add/edit
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
try {
|
|
setIsSubmitting(true);
|
|
|
|
if (formMode === "add") {
|
|
// Add new nilai
|
|
const response = await fetch("/api/keloladata/data-nilai-mahasiswa", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
const responseData = await response.json();
|
|
|
|
if (!response.ok) {
|
|
// Handle specific NIM not found error
|
|
if (response.status === 404 && responseData.message.includes("tidak terdaftar")) {
|
|
showError("Gagal!", `NIM ${formData.nim} tidak terdaftar`);
|
|
throw new Error(`NIM ${formData.nim} tidak terdaftar dalam database. Silakan cek kembali NIM yang dimasukkan.`);
|
|
}
|
|
showError("Gagal!", responseData.message || "Failed to add nilai");
|
|
throw new Error(responseData.message || "Failed to add nilai");
|
|
}
|
|
|
|
// Show success message with student info
|
|
showSuccess("Berhasil!", "Nilai mahasiswa berhasil ditambahkan");
|
|
} else {
|
|
// Edit existing nilai
|
|
const response = await fetch(`/api/keloladata/data-nilai-mahasiswa?id=${formData.id_nilai}`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
const responseData = await response.json();
|
|
|
|
if (!response.ok) {
|
|
// Handle specific NIM not found error
|
|
if (response.status === 404 && responseData.message.includes("tidak terdaftar")) {
|
|
showError("Gagal!", `NIM ${formData.nim} tidak terdaftar`);
|
|
throw new Error(`NIM ${formData.nim} tidak terdaftar dalam database. Silakan cek kembali NIM yang dimasukkan.`);
|
|
}
|
|
showError("Gagal!", responseData.message || "Failed to update nilai");
|
|
throw new Error(responseData.message || "Failed to update nilai");
|
|
}
|
|
|
|
showSuccess("Berhasil!", "Nilai mahasiswa berhasil diperbarui");
|
|
}
|
|
|
|
// Refresh data after successful operation
|
|
await fetchNilaiMahasiswa();
|
|
setIsDialogOpen(false);
|
|
resetForm();
|
|
} catch (err) {
|
|
console.error("Error submitting form:", err);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Delete nilai
|
|
const handleDelete = async () => {
|
|
if (!deleteId) return;
|
|
|
|
try {
|
|
setIsDeleting(true);
|
|
|
|
const response = await fetch(`/api/keloladata/data-nilai-mahasiswa?id=${deleteId}`, {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
showError("Gagal!", errorData.message || "Failed to delete nilai");
|
|
throw new Error(errorData.message || "Failed to delete nilai");
|
|
}
|
|
|
|
// Refresh data after successful deletion
|
|
await fetchNilaiMahasiswa();
|
|
setIsDeleteDialogOpen(false);
|
|
setDeleteId(null);
|
|
showSuccess("Berhasil!", "Nilai mahasiswa berhasil dihapus");
|
|
} catch (err) {
|
|
console.error("Error deleting nilai:", err);
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
|
|
// Generate pagination items
|
|
const renderPaginationItems = () => {
|
|
const totalPages = getTotalPages();
|
|
const items = [];
|
|
|
|
// Always show first page
|
|
items.push(
|
|
<PaginationItem key="first">
|
|
<PaginationLink
|
|
isActive={currentPage === 1}
|
|
onClick={() => handlePageChange(1)}
|
|
className="dark:text-white"
|
|
>
|
|
1
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
);
|
|
|
|
// Show ellipsis if needed
|
|
if (currentPage > 3) {
|
|
items.push(
|
|
<PaginationItem key="ellipsis-start">
|
|
<PaginationEllipsis className="dark:text-white" />
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
|
|
// Show pages around current page
|
|
for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
|
|
if (i === 1 || i === totalPages) continue; // Skip first and last pages as they're always shown
|
|
items.push(
|
|
<PaginationItem key={i}>
|
|
<PaginationLink
|
|
isActive={currentPage === i}
|
|
onClick={() => handlePageChange(i)}
|
|
className="dark:text-white"
|
|
>
|
|
{i}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
|
|
// Show ellipsis if needed
|
|
if (currentPage < totalPages - 2) {
|
|
items.push(
|
|
<PaginationItem key="ellipsis-end">
|
|
<PaginationEllipsis className="dark:text-white" />
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
|
|
// Always show last page if there's more than one page
|
|
if (totalPages > 1) {
|
|
items.push(
|
|
<PaginationItem key="last">
|
|
<PaginationLink
|
|
isActive={currentPage === totalPages}
|
|
onClick={() => handlePageChange(totalPages)}
|
|
className="dark:text-white"
|
|
>
|
|
{totalPages}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
|
|
return items;
|
|
};
|
|
|
|
// Calculate the range of entries being displayed
|
|
const getDisplayRange = () => {
|
|
if (filteredData.length === 0) return { start: 0, end: 0 };
|
|
|
|
const start = (currentPage - 1) * pageSize + 1;
|
|
const end = Math.min(currentPage * pageSize, filteredData.length);
|
|
|
|
return { start, end };
|
|
};
|
|
|
|
// Get badge color based on nilai huruf
|
|
const getNilaiBadgeColor = (nilai: string) => {
|
|
switch (nilai) {
|
|
case "A":
|
|
return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200";
|
|
case "B+":
|
|
return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200";
|
|
case "B":
|
|
return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200";
|
|
case "C+":
|
|
return "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200";
|
|
case "C":
|
|
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
|
|
case "D+":
|
|
return "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200";
|
|
case "D":
|
|
return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200";
|
|
case "E":
|
|
return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200";
|
|
default:
|
|
return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<h2 className="text-2xl font-bold">Data Nilai Mahasiswa</h2>
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|
<UploadFileNilaiMahasiswa onUploadSuccess={fetchNilaiMahasiswa} />
|
|
<Button onClick={handleAdd}>
|
|
<PlusCircle className="mr-2 h-4 w-4" />
|
|
Tambah Nilai
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Cari berdasarkan NIM, nama, kode MK, nama MK..."
|
|
className="pl-8"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
{searchTerm && (
|
|
<X
|
|
className="absolute right-2.5 top-2.5 h-4 w-4 text-muted-foreground cursor-pointer"
|
|
onClick={() => setSearchTerm("")}
|
|
/>
|
|
)}
|
|
</div>
|
|
<Select
|
|
value={filterSemester}
|
|
onValueChange={(value) => setFilterSemester(value)}
|
|
>
|
|
<SelectTrigger className="w-[180px] dark:text-white">
|
|
<SelectValue placeholder="Semester" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Semua Semester</SelectItem>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8].map(sem => (
|
|
<SelectItem key={sem} value={sem.toString()}>Semester {sem}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select
|
|
value={filterNilaiHuruf}
|
|
onValueChange={(value) => setFilterNilaiHuruf(value)}
|
|
>
|
|
<SelectTrigger className="w-[180px] dark:text-white">
|
|
<SelectValue placeholder="Nilai" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Semua Nilai</SelectItem>
|
|
<SelectItem value="A">A</SelectItem>
|
|
<SelectItem value="B+">B+</SelectItem>
|
|
<SelectItem value="B">B</SelectItem>
|
|
<SelectItem value="C+">C+</SelectItem>
|
|
<SelectItem value="C">C</SelectItem>
|
|
<SelectItem value="D+">D+</SelectItem>
|
|
<SelectItem value="D">D</SelectItem>
|
|
<SelectItem value="E">E</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Show entries selector */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm dark:text-white">Show</span>
|
|
<Select
|
|
value={pageSize.toString()}
|
|
onValueChange={handlePageSizeChange}
|
|
>
|
|
<SelectTrigger className="w-[80px] dark:text-white">
|
|
<SelectValue placeholder={pageSize.toString()} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="5">5</SelectItem>
|
|
<SelectItem value="10">10</SelectItem>
|
|
<SelectItem value="25">25</SelectItem>
|
|
<SelectItem value="50">50</SelectItem>
|
|
<SelectItem value="100">100</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<span className="text-sm dark:text-white">entries</span>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<div className="flex justify-center items-center py-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
</div>
|
|
) : error ? (
|
|
<div className="bg-destructive/10 p-4 rounded-md text-destructive text-center">
|
|
{error}
|
|
</div>
|
|
) : (
|
|
<div className="border rounded-md">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[100px]">NIM</TableHead>
|
|
<TableHead>Nama Mahasiswa</TableHead>
|
|
<TableHead>Kode MK</TableHead>
|
|
<TableHead>Nama Mata Kuliah</TableHead>
|
|
<TableHead>Semester</TableHead>
|
|
<TableHead>Nilai Huruf</TableHead>
|
|
<TableHead>Nilai Angka</TableHead>
|
|
<TableHead className="text-right">Aksi</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{paginatedData.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={8} className="text-center py-8">
|
|
Tidak ada data yang sesuai dengan filter
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
paginatedData.map((nilai) => (
|
|
<TableRow key={nilai.id_nilai}>
|
|
<TableCell className="font-medium">{nilai.nim}</TableCell>
|
|
<TableCell>{nilai.nama}</TableCell>
|
|
<TableCell className="font-mono">{nilai.kode_mk}</TableCell>
|
|
<TableCell>{nilai.nama_mk}</TableCell>
|
|
<TableCell>
|
|
<span className="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
|
Semester {nilai.semester}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span
|
|
className={`px-2 py-1 rounded-full text-xs font-medium ${getNilaiBadgeColor(nilai.nilai_huruf)}`}
|
|
>
|
|
{nilai.nilai_huruf}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="font-medium">{nilai.nilai_angka.toFixed(2)}</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => handleEdit(nilai)}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-destructive hover:bg-destructive/10"
|
|
onClick={() => handleDeleteConfirm(nilai.id_nilai)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination info and controls */}
|
|
{!loading && !error && filteredData.length > 0 && (
|
|
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<div className="text-sm text-muted-foreground dark:text-white">
|
|
Showing {getDisplayRange().start} to {getDisplayRange().end} of {filteredData.length} entries
|
|
</div>
|
|
<Pagination>
|
|
<PaginationContent className="dark:text-white">
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
|
|
className={`dark:text-white ${currentPage === 1 ? "pointer-events-none opacity-50" : ""}`}
|
|
/>
|
|
</PaginationItem>
|
|
|
|
{renderPaginationItems()}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
|
|
className={`dark:text-white ${currentPage === getTotalPages() ? "pointer-events-none opacity-50" : ""}`}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add/Edit Dialog */}
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogContent className="sm:max-w-[600px]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{formMode === "add" ? "Tambah Nilai" : "Edit Nilai"}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="nim" className="text-sm font-medium">
|
|
NIM <span className="text-destructive">*</span>
|
|
</label>
|
|
<Input
|
|
id="nim"
|
|
name="nim"
|
|
value={formData.nim || ""}
|
|
onChange={handleInputChange}
|
|
placeholder="Masukkan NIM mahasiswa"
|
|
required
|
|
maxLength={11}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="id_mk" className="text-sm font-medium">
|
|
Mata Kuliah <span className="text-destructive">*</span>
|
|
</label>
|
|
<Select
|
|
value={formData.id_mk?.toString() || ""}
|
|
onValueChange={(value) => handleSelectChange("id_mk", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Pilih mata kuliah" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{mataKuliahList.map((mk) => (
|
|
<SelectItem key={mk.id_mk} value={mk.id_mk.toString()}>
|
|
{mk.kode_mk} - {mk.nama_mk}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="semester" className="text-sm font-medium">
|
|
Semester <span className="text-destructive">*</span>
|
|
</label>
|
|
<Select
|
|
value={formData.semester?.toString() || "1"}
|
|
onValueChange={(value) => handleSelectChange("semester", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8].map(sem => (
|
|
<SelectItem key={sem} value={sem.toString()}>
|
|
Semester {sem}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="nilai_huruf" className="text-sm font-medium">
|
|
Nilai Huruf <span className="text-destructive">*</span>
|
|
</label>
|
|
<Select
|
|
value={formData.nilai_huruf || "A"}
|
|
onValueChange={(value) => handleSelectChange("nilai_huruf", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="A">A (4.0)</SelectItem>
|
|
<SelectItem value="B+">B+ (3.5)</SelectItem>
|
|
<SelectItem value="B">B (3.0)</SelectItem>
|
|
<SelectItem value="C+">C+ (2.5)</SelectItem>
|
|
<SelectItem value="C">C (2.0)</SelectItem>
|
|
<SelectItem value="D+">D+ (1.5)</SelectItem>
|
|
<SelectItem value="D">D (1.0)</SelectItem>
|
|
<SelectItem value="E">E (0.0)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="nilai_angka" className="text-sm font-medium">
|
|
Nilai Angka <span className="text-destructive">*</span>
|
|
</label>
|
|
<Input
|
|
id="nilai_angka"
|
|
name="nilai_angka"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
max="4"
|
|
value={formData.nilai_angka || ""}
|
|
onChange={handleInputChange}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<DialogClose asChild>
|
|
<Button type="button" variant="outline">
|
|
Batal
|
|
</Button>
|
|
</DialogClose>
|
|
<Button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{formMode === "add" ? "Tambah" : "Simpan"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Delete Confirmation Dialog */}
|
|
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
|
<DialogContent className="sm:max-w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Konfirmasi Hapus</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="py-4">
|
|
<p>Apakah Anda yakin ingin menghapus data nilai ini?</p>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Tindakan ini tidak dapat dibatalkan.
|
|
</p>
|
|
</div>
|
|
<DialogFooter>
|
|
<DialogClose asChild>
|
|
<Button type="button" variant="outline">
|
|
Batal
|
|
</Button>
|
|
</DialogClose>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
>
|
|
{isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Hapus
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
</div>
|
|
);
|
|
}
|