again n again

components/datatable/data-table-mata-kuliah.tsx

@@ -0,0 +1,787 @@
+"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,
+  BookOpen
+} from "lucide-react";
+import UploadFileMataKuliah from "@/components/datatable/upload-file-mata-kuliah";
+import { useToast } from "@/components/ui/toast-provider";
+
+// Define the MataKuliah type
+interface MataKuliah {
+  id_mk: number;
+  kode_mk: string;
+  nama_mk: string;
+  sks: number;
+  semester: number;
+  jenis_mk: 'Wajib' | 'Pilihan Wajib' | 'Pilihan';
+  id_prasyarat: number | null;
+  nama_prasyarat: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export default function DataTableMataKuliah() {
+  const { showSuccess, showError } = useToast();
+  // State for data
+  const [mataKuliah, setMataKuliah] = useState<MataKuliah[]>([]);
+  const [filteredData, setFilteredData] = 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 [filterJenisMK, setFilterJenisMK] = useState<string>("");
+  
+  // State for pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [paginatedData, setPaginatedData] = useState<MataKuliah[]>([]);
+  
+  // State for form
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [formData, setFormData] = useState<Partial<MataKuliah>>({});
+  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);
+
+  // State for prasyarat options
+  const [prasyaratOptions, setPrasyaratOptions] = useState<MataKuliah[]>([]);
+
+  // Fetch data on component mount
+  useEffect(() => {
+    fetchMataKuliah();
+  }, []);
+
+  // Filter data when search term or filter changes
+  useEffect(() => {
+    filterData();
+  }, [searchTerm, filterSemester, filterJenisMK, mataKuliah]);
+
+  // Update paginated data when filtered data or pagination settings change
+  useEffect(() => {
+    paginateData();
+  }, [filteredData, currentPage, pageSize]);
+
+  // Fetch mata kuliah data from API
+  const fetchMataKuliah = async () => {
+    try {
+      setLoading(true);
+      let url = "/api/keloladata/data-mata-kuliah";
+      
+      // 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 (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();
+      setMataKuliah(data);
+      setFilteredData(data);
+      setPrasyaratOptions(data); // Set options for prasyarat dropdown
+      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 = [...mataKuliah];
+    
+    // Filter by search term
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (item) =>
+          (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 jenis mata kuliah
+    if (filterJenisMK && filterJenisMK !== "all") {
+      filtered = filtered.filter((item) => item.jenis_mk === filterJenisMK);
+    }
+    
+    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({
+      jenis_mk: 'Wajib' // Set default value
+    });
+  };
+
+  // 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 === "none" || value === "" ? null : (name === 'id_prasyarat' ? parseInt(value) : value)
+    }));
+  };
+
+  // Open form dialog for adding new mata kuliah
+  const handleAdd = () => {
+    setFormMode("add");
+    resetForm();
+    setIsDialogOpen(true);
+  };
+
+  // Open form dialog for editing mata kuliah
+  const handleEdit = (data: MataKuliah) => {
+    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 mata kuliah
+        const response = await fetch("/api/keloladata/data-mata-kuliah", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          showError("Gagal!", responseData.message || "Failed to add mata kuliah");
+          throw new Error(responseData.message || "Failed to add mata kuliah");
+        }
+        
+        showSuccess("Berhasil!", "Mata kuliah berhasil ditambahkan");
+      } else {
+        // Edit existing mata kuliah
+        const response = await fetch(`/api/keloladata/data-mata-kuliah?id=${formData.id_mk}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          showError("Gagal!", responseData.message || "Failed to update mata kuliah");
+          throw new Error(responseData.message || "Failed to update mata kuliah");
+        }
+        
+        showSuccess("Berhasil!", "Mata kuliah berhasil diperbarui");
+      }
+      
+      // Refresh data after successful operation
+      await fetchMataKuliah();
+      setIsDialogOpen(false);
+      resetForm();
+    } catch (err) {
+      console.error("Error submitting form:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Delete mata kuliah
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    
+    try {
+      setIsDeleting(true);
+      
+      const response = await fetch(`/api/keloladata/data-mata-kuliah?id=${deleteId}`, {
+        method: "DELETE",
+      });
+      
+      const responseData = await response.json();
+      
+      if (!response.ok) {
+        showError("Gagal!", responseData.message || "Failed to delete mata kuliah");
+        throw new Error(responseData.message || "Failed to delete mata kuliah");
+      }
+      
+      // Refresh data after successful deletion
+      await fetchMataKuliah();
+      setIsDeleteDialogOpen(false);
+      setDeleteId(null);
+      showSuccess("Berhasil!", "Mata kuliah berhasil dihapus");
+    } catch (err) {
+      console.error("Error deleting mata kuliah:", 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="cursor-pointer"
+        >
+          1
+        </PaginationLink>
+      </PaginationItem>
+    );
+    
+    // Show ellipsis if needed
+    if (currentPage > 3) {
+      items.push(
+        <PaginationItem key="ellipsis-start">
+          <PaginationEllipsis />
+        </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="cursor-pointer"
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+    
+    // Show ellipsis if needed
+    if (currentPage < totalPages - 2) {
+      items.push(
+        <PaginationItem key="ellipsis-end">
+          <PaginationEllipsis />
+        </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="cursor-pointer"
+          >
+            {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 semester
+  const getSemesterBadgeColor = (semester: number) => {
+    const colors = [
+      "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+      "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300", 
+      "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+      "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+      "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+      "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
+      "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+      "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300"
+    ];
+    return colors[(semester - 1) % colors.length] || "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300";
+  };
+
+  // Get badge color based on jenis mata kuliah
+  const getJenisMKBadgeColor = (jenis: string) => {
+    switch (jenis) {
+      case "Wajib":
+        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300";
+      case "Pilihan Wajib":
+        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300";
+      case "Pilihan":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300";
+      default:
+        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300";
+    }
+  };
+
+  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 dark:text-white">Data Mata Kuliah</h2>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <UploadFileMataKuliah onUploadSuccess={fetchMataKuliah} />
+          <Button onClick={handleAdd}>
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Tambah Mata Kuliah
+          </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 kode atau nama mata kuliah..."
+            className="pl-8 dark:text-white"
+            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={filterJenisMK}
+          onValueChange={(value) => setFilterJenisMK(value)}
+        >
+          <SelectTrigger className="w-[180px] dark:text-white">
+            <SelectValue placeholder="Jenis MK" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Semua Jenis</SelectItem>
+            <SelectItem value="Wajib">Wajib</SelectItem>
+            <SelectItem value="Pilihan Wajib">Pilihan Wajib</SelectItem>
+            <SelectItem value="Pilihan">Pilihan</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Show entries selector */}
+      <div className="flex items-center gap-2 dark:text-white">
+        <span className="text-sm">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">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 dark:border-gray-700">
+          <Table>
+            <TableHeader>
+              <TableRow className="dark:border-gray-700">
+                <TableHead className="dark:text-gray-300">Kode MK</TableHead>
+                <TableHead className="dark:text-gray-300">Nama Mata Kuliah</TableHead>
+                <TableHead className="text-center dark:text-gray-300">SKS</TableHead>
+                <TableHead className="text-center dark:text-gray-300">Semester</TableHead>
+                <TableHead className="text-center dark:text-gray-300">Jenis MK</TableHead>
+                <TableHead className="dark:text-gray-300">Prasyarat</TableHead>
+                <TableHead className="text-right dark:text-gray-300">Aksi</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedData.length === 0 ? (
+                <TableRow className="dark:border-gray-700">
+                  <TableCell colSpan={7} className="text-center py-8 dark:text-gray-400">
+                    Tidak ada data yang sesuai dengan filter
+                  </TableCell>
+                </TableRow>
+              ) : (
+                paginatedData.map((mk) => (
+                  <TableRow key={mk.id_mk} className="dark:border-gray-700">
+                    <TableCell className="font-medium dark:text-white">{mk.kode_mk}</TableCell>
+                    <TableCell className="dark:text-white">{mk.nama_mk}</TableCell>
+                    <TableCell className="text-center dark:text-white">{mk.sks}</TableCell>
+                    <TableCell className="text-center">
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${getSemesterBadgeColor(mk.semester)}`}
+                      >
+                        Semester {mk.semester}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${getJenisMKBadgeColor(mk.jenis_mk)}`}
+                      >
+                        {mk.jenis_mk}
+                      </span>
+                    </TableCell>
+                    <TableCell className="dark:text-white">
+                      {mk.nama_prasyarat || '-'}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleEdit(mk)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="text-destructive hover:bg-destructive/10"
+                          onClick={() => handleDeleteConfirm(mk.id_mk)}
+                        >
+                          <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={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                />
+              </PaginationItem>
+              
+              {renderPaginationItems()}
+              
+              <PaginationItem>
+                <PaginationNext 
+                  onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
+                  className={currentPage === getTotalPages() ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      )}
+
+      {/* Add/Edit Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[600px] dark:bg-slate-900">
+          <DialogHeader>
+            <DialogTitle className="dark:text-white">
+              {formMode === "add" ? "Tambah Mata Kuliah" : "Edit Mata Kuliah"}
+            </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="kode_mk" className="text-sm font-medium dark:text-white">
+                    Kode Mata Kuliah <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="kode_mk"
+                    name="kode_mk"
+                    value={formData.kode_mk || ""}
+                    onChange={handleInputChange}
+                    placeholder="Contoh: INF101"
+                    className="dark:text-white"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="sks" className="text-sm font-medium dark:text-white">
+                    SKS <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="sks"
+                    name="sks"
+                    type="number"
+                    min="1"
+                    max="6"
+                    value={formData.sks || ""}
+                    onChange={handleInputChange}
+                    className="dark:text-white"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="jenis_mk" className="text-sm font-medium dark:text-white">
+                    Jenis Mata Kuliah <span className="text-destructive">*</span>
+                  </label>
+                  <Select
+                    value={formData.jenis_mk || "Wajib"}
+                    onValueChange={(value) => handleSelectChange("jenis_mk", value)}
+                  >
+                    <SelectTrigger className="dark:text-white">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Wajib">Wajib</SelectItem>
+                      <SelectItem value="Pilihan Wajib">Pilihan Wajib</SelectItem>
+                      <SelectItem value="Pilihan">Pilihan</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2 sm:col-span-2">
+                  <label htmlFor="nama_mk" className="text-sm font-medium dark:text-white">
+                    Nama Mata Kuliah <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="nama_mk"
+                    name="nama_mk"
+                    value={formData.nama_mk || ""}
+                    onChange={handleInputChange}
+                    placeholder="Contoh: Pengantar Informatika"
+                    className="dark:text-white"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="semester" className="text-sm font-medium dark:text-white">
+                    Semester <span className="text-destructive">*</span>
+                  </label>
+                  <Select
+                    value={formData.semester?.toString() || ""}
+                    onValueChange={(value) => handleSelectChange("semester", value)}
+                  >
+                    <SelectTrigger className="dark:text-white">
+                      <SelectValue placeholder="Pilih Semester" />
+                    </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="id_prasyarat" className="text-sm font-medium dark:text-white">
+                    Mata Kuliah Prasyarat
+                  </label>
+                  <Select
+                    value={formData.id_prasyarat?.toString() || "none"}
+                    onValueChange={(value) => handleSelectChange("id_prasyarat", value)}
+                  >
+                    <SelectTrigger className="dark:text-white">
+                      <SelectValue placeholder="Pilih Prasyarat (Opsional)" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">Tidak Ada Prasyarat</SelectItem>
+                      {prasyaratOptions
+                        .filter(mk => mk.id_mk !== formData.id_mk) // Exclude current mata kuliah
+                        .map(mk => (
+                        <SelectItem key={mk.id_mk} value={mk.id_mk.toString()}>
+                          {mk.kode_mk} - {mk.nama_mk}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </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] dark:bg-slate-900">
+          <DialogHeader>
+            <DialogTitle className="dark:text-white">Konfirmasi Hapus</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="dark:text-white">Apakah Anda yakin ingin menghapus mata kuliah ini?</p>
+            <p className="text-sm text-muted-foreground mt-1 dark:text-gray-400">
+              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>
+  );
+}

components/datatable/data-table-nilai-mahasiswa.tsx

@@ -0,0 +1,835 @@
+"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>
+  );
+}

components/datatable/upload-file-mata-kuliah.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { Upload, FileSpreadsheet, Loader2, Download } from "lucide-react";
+import { useToast } from "@/components/ui/toast-provider";
+
+interface UploadFileMataKuliahProps {
+  onUploadSuccess: () => void;
+}
+
+export default function UploadFileMataKuliah({ onUploadSuccess }: UploadFileMataKuliahProps) {
+  const { showSuccess, showError } = useToast();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // Handle file selection
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validate file type
+      const validTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'text/csv'
+      ];
+      
+      if (!validTypes.includes(file.type)) {
+        showError("Error!", "File harus berformat Excel (.xlsx, .xls) atau CSV (.csv)");
+        return;
+      }
+      
+      setSelectedFile(file);
+    }
+  };
+
+  // Handle file upload
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      showError("Error!", "Silakan pilih file terlebih dahulu");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+      
+      const response = await fetch('/api/keloladata/upload-mata-kuliah', {
+        method: 'POST',
+        body: formData,
+      });
+      
+      const result = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(result.message || 'Upload failed');
+      }
+      
+      showSuccess("Berhasil!", `${result.successCount} mata kuliah berhasil diimport`);
+      onUploadSuccess();
+      setIsDialogOpen(false);
+      setSelectedFile(null);
+      
+      // Reset file input
+      const fileInput = document.getElementById('file-upload') as HTMLInputElement;
+      if (fileInput) {
+        fileInput.value = '';
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      showError("Gagal!", error instanceof Error ? error.message : "Terjadi kesalahan saat upload");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // Download template
+  const downloadTemplate = () => {
+    // Create CSV template
+    const csvContent = "kode_mk,nama_mk,sks,semester,jenis_mk,kode_prasyarat\nINF101,Pengantar Informatika,3,1,Wajib,\nINF102,Algoritma dan Pemrograman,4,2,Wajib,INF101\nINF301,Basis Data Lanjut,3,5,Pilihan Wajib,\nINF401,Topik Khusus,2,7,Pilihan,\n";
+    const blob = new Blob([csvContent], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'template_mata_kuliah.csv';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={() => setIsDialogOpen(true)}>
+        <Upload className="mr-2 h-4 w-4" />
+        Import Excel/CSV
+      </Button>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FileSpreadsheet className="h-5 w-5" />
+              Import Data Mata Kuliah
+            </DialogTitle>
+          </DialogHeader>
+          
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label htmlFor="file-upload" className="text-sm font-medium">
+                Pilih File Excel atau CSV
+              </label>
+              <Input
+                id="file-upload"
+                type="file"
+                accept=".xlsx,.xls,.csv"
+                onChange={handleFileChange}
+                className="cursor-pointer"
+              />
+              <p className="text-xs text-muted-foreground">
+                Format yang didukung: .xlsx, .xls, .csv (Max: 10MB)
+              </p>
+            </div>
+            
+            {selectedFile && (
+              <div className="p-3 bg-muted rounded-md">
+                <p className="text-sm font-medium">File terpilih:</p>
+                <p className="text-sm text-muted-foreground">{selectedFile.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  Ukuran: {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                </p>
+              </div>
+            )}
+            
+            <div className="border-t pt-4">
+              <h4 className="text-sm font-medium mb-2">Format File:</h4>
+              <div className="text-xs text-muted-foreground space-y-1">
+                <p>• Kolom yang diperlukan: kode_mk, nama_mk, sks, semester, jenis_mk</p>
+                <p>• Kolom opsional: kode_prasyarat (kode mata kuliah prasyarat)</p>
+                <p>• Baris pertama harus berisi header kolom</p>
+                <p>• SKS dan semester harus berupa angka positif</p>
+                <p>• jenis_mk harus salah satu: Wajib, Pilihan Wajib, Pilihan</p>
+              </div>
+              
+              <Button
+                variant="link"
+                size="sm"
+                onClick={downloadTemplate}
+                className="p-0 h-auto mt-2 text-xs"
+              >
+                <Download className="mr-1 h-3 w-3" />
+                Download Template CSV
+              </Button>
+            </div>
+          </div>
+          
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">
+                Batal
+              </Button>
+            </DialogClose>
+            <Button 
+              onClick={handleUpload} 
+              disabled={!selectedFile || isUploading}
+            >
+              {isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isUploading ? "Mengupload..." : "Upload"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

components/datatable/upload-file-nilai-mahasiswa.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { Upload, FileSpreadsheet, Loader2 } from "lucide-react";
+import { useToast } from "@/components/ui/toast-provider";
+
+interface UploadFileNilaiMahasiswaProps {
+  onUploadSuccess: () => void;
+}
+
+export default function UploadFileNilaiMahasiswa({ onUploadSuccess }: UploadFileNilaiMahasiswaProps) {
+  const { showSuccess, showError } = useToast();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // Handle file selection
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validate file type
+      const validTypes = [
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'text/csv'
+      ];
+      
+      if (!validTypes.includes(file.type)) {
+        showError("Error!", "File harus berformat Excel (.xlsx, .xls) atau CSV (.csv)");
+        return;
+      }
+      
+      setSelectedFile(file);
+    }
+  };
+
+  // Handle file upload
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      showError("Error!", "Silakan pilih file terlebih dahulu");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+      
+      const response = await fetch('/api/keloladata/data-nilai-mahasiswa/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      
+      const result = await response.json();
+      
+      if (!response.ok) {
+        let errorMessage = result.message || 'Upload failed';
+        if (result.errors && result.errors.length > 0) {
+          errorMessage += '\n\nErrors:\n' + result.errors.slice(0, 5).join('\n');
+        }
+        throw new Error(errorMessage);
+      }
+      
+      showSuccess("Berhasil!", `${result.successCount} nilai mahasiswa berhasil diimport`);
+      onUploadSuccess();
+      setIsDialogOpen(false);
+      setSelectedFile(null);
+      
+      // Reset file input
+      const fileInput = document.getElementById('file-upload-nilai') as HTMLInputElement;
+      if (fileInput) {
+        fileInput.value = '';
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      showError("Gagal!", error instanceof Error ? error.message : "Terjadi kesalahan saat upload");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={() => setIsDialogOpen(true)}>
+        <Upload className="mr-2 h-4 w-4" />
+        Import Excel/CSV
+      </Button>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FileSpreadsheet className="h-5 w-5" />
+              Import Data Nilai Mahasiswa
+            </DialogTitle>
+          </DialogHeader>
+          
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label htmlFor="file-upload-nilai" className="text-sm font-medium">
+                Pilih File Excel atau CSV
+              </label>
+              <Input
+                id="file-upload-nilai"
+                type="file"
+                accept=".xlsx,.xls,.csv"
+                onChange={handleFileChange}
+                className="cursor-pointer"
+              />
+              <p className="text-xs text-muted-foreground">
+                Format yang didukung: .xlsx, .xls, .csv (Max: 10MB)
+              </p>
+            </div>
+            
+            {selectedFile && (
+              <div className="p-3 bg-muted rounded-md">
+                <p className="text-sm font-medium">File terpilih:</p>
+                <p className="text-sm text-muted-foreground">{selectedFile.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  Ukuran: {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
+                </p>
+              </div>
+            )}
+            
+            <div className="border-t pt-4">
+              <h4 className="text-sm font-medium mb-2">Format File:</h4>
+              <div className="text-xs text-muted-foreground space-y-1">
+                <p>• <strong>Header kolom:</strong> NIM, Kode MK, Semester, Nilai Huruf, Nilai Angka</p>
+                <p>• <strong>NIM:</strong> Harus sudah terdaftar di sistem (contoh: D1041231002)</p>
+                <p>• <strong>Kode MK:</strong> Harus sesuai persis dengan database (contoh: INF-55201-101)</p>
+                <p>• <strong>Semester:</strong> Angka 1-8</p>
+                <p>• <strong>Nilai Huruf:</strong> A, B+, B, C+, C, D+, D, E</p>
+                <p>• <strong>Nilai Angka:</strong> 0-4 (bisa menggunakan koma: 3,5 atau titik: 3.5)</p>
+              </div>
+            </div>
+          </div>
+          
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">
+                Batal
+              </Button>
+            </DialogClose>
+            <Button 
+              onClick={handleUpload} 
+              disabled={!selectedFile || isUploading}
+            >
+              {isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isUploading ? "Mengupload..." : "Upload"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}