again n again
This commit is contained in:
Randa Firman Putra
378
components/chartstable/tabelasaldaerahmahasiswa.tsx
Normal file
378
components/chartstable/tabelasaldaerahmahasiswa.tsx
Normal file
@@ -0,0 +1,378 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import { Loader2, MapPin } from "lucide-react";
|
||||
|
||||
interface MahasiswaAsalDaerah {
|
||||
nim: string;
|
||||
nama: string;
|
||||
tahun_angkatan: number;
|
||||
kabupaten: string;
|
||||
}
|
||||
|
||||
interface TabelAsalDaerahMahasiswaProps {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function TabelAsalDaerahMahasiswa({ selectedYear }: TabelAsalDaerahMahasiswaProps) {
|
||||
const [mahasiswaData, setMahasiswaData] = useState<MahasiswaAsalDaerah[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<MahasiswaAsalDaerah[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = selectedYear === 'all'
|
||||
? '/api/tabeldetail/asal-daerah'
|
||||
: `/api/tabeldetail/asal-daerah?tahun_angkatan=${selectedYear}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch mahasiswa asal daerah data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setMahasiswaData(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear]);
|
||||
|
||||
// Update paginated data when data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [mahasiswaData, currentPage, pageSize]);
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(mahasiswaData.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
|
||||
};
|
||||
|
||||
// Hitung statistik berdasarkan kabupaten
|
||||
const kabupatenStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const kabupaten = mahasiswa.kabupaten;
|
||||
acc[kabupaten] = (acc[kabupaten] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Hitung statistik tahun angkatan
|
||||
const tahunAngkatanStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const tahun = mahasiswa.tahun_angkatan;
|
||||
acc[tahun] = (acc[tahun] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
const stats = {
|
||||
total: mahasiswaData.length,
|
||||
total_kabupaten: Object.keys(kabupatenStats).length,
|
||||
total_tahun_angkatan: Object.keys(tahunAngkatanStats).length
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
|
||||
<MapPin className="h-5 w-5" />
|
||||
Tabel Asal Daerah Mahasiswa {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
|
||||
</CardTitle>
|
||||
{/* Tampilkan ringkasan statistik */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
|
||||
<div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400">Total Mahasiswa</div>
|
||||
<div className="font-bold text-blue-800 dark:text-blue-300">{stats.total}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-green-50 dark:bg-green-900/20">
|
||||
<div className="text-xs text-green-600 dark:text-green-400">Total Kabupaten</div>
|
||||
<div className="font-bold text-green-800 dark:text-green-300">{stats.total_kabupaten}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20">
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400">Total Tahun Angkatan</div>
|
||||
<div className="font-bold text-purple-800 dark:text-purple-300">{stats.total_tahun_angkatan}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tampilkan ringkasan kabupaten terbanyak */}
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{Object.entries(kabupatenStats)
|
||||
.sort(([,a], [,b]) => b - a) // Urutkan berdasarkan jumlah mahasiswa terbanyak
|
||||
.slice(0, 5) // Ambil 5 kabupaten teratas
|
||||
.map(([kabupaten, count]) => (
|
||||
<span
|
||||
key={kabupaten}
|
||||
className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
||||
>
|
||||
{kabupaten}: {count}
|
||||
</span>
|
||||
))}
|
||||
{Object.keys(kabupatenStats).length > 5 && (
|
||||
<span className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
|
||||
+{Object.keys(kabupatenStats).length - 5} lainnya
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Show entries selector */}
|
||||
<div className="flex items-center gap-2 mb-4 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>
|
||||
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 dark:bg-slate-800">
|
||||
<TableHead className="font-semibold text-center">No</TableHead>
|
||||
<TableHead className="font-semibold">NIM</TableHead>
|
||||
<TableHead className="font-semibold">Nama Mahasiswa</TableHead>
|
||||
<TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
|
||||
<TableHead className="font-semibold">Asal Kabupaten</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
||||
Tidak ada data yang tersedia
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((mahasiswa, index) => (
|
||||
<TableRow
|
||||
key={`${mahasiswa.nim}-${index}`}
|
||||
className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
|
||||
>
|
||||
<TableCell className="text-center font-medium dark:text-white">
|
||||
{(currentPage - 1) * pageSize + index + 1}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{mahasiswa.nim}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.tahun_angkatan}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.kabupaten}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination info and controls */}
|
||||
{!loading && !error && mahasiswaData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
|
||||
<div className="text-sm text-muted-foreground dark:text-white">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
function getDisplayRange() {
|
||||
if (mahasiswaData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, mahasiswaData.length);
|
||||
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
// Generate pagination items
|
||||
function 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;
|
||||
}
|
||||
}
|
||||
372
components/chartstable/tabelasalprovinsi mahasiswa.tsx
Normal file
372
components/chartstable/tabelasalprovinsi mahasiswa.tsx
Normal file
@@ -0,0 +1,372 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import { Loader2, MapPin } from "lucide-react";
|
||||
|
||||
interface MahasiswaAsalProvinsi {
|
||||
nim: string;
|
||||
nama: string;
|
||||
tahun_angkatan: number;
|
||||
provinsi: string;
|
||||
}
|
||||
|
||||
interface TabelAsalProvinsiMahasiswaProps {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function TabelAsalProvinsiMahasiswa({ selectedYear }: TabelAsalProvinsiMahasiswaProps) {
|
||||
const [mahasiswaData, setMahasiswaData] = useState<MahasiswaAsalProvinsi[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<MahasiswaAsalProvinsi[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = selectedYear === 'all'
|
||||
? '/api/tabeldetail/asal-provinsi'
|
||||
: `/api/tabeldetail/asal-provinsi?tahun_angkatan=${selectedYear}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch mahasiswa asal provinsi data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setMahasiswaData(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear]);
|
||||
|
||||
// Update paginated data when data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [mahasiswaData, currentPage, pageSize]);
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(mahasiswaData.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
|
||||
};
|
||||
|
||||
// Hitung statistik provinsi
|
||||
const provinsiStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const provinsi = mahasiswa.provinsi;
|
||||
acc[provinsi] = (acc[provinsi] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Hitung statistik tahun angkatan
|
||||
const tahunAngkatanStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const tahun = mahasiswa.tahun_angkatan;
|
||||
acc[tahun] = (acc[tahun] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
const stats = {
|
||||
total: mahasiswaData.length,
|
||||
total_provinsi: Object.keys(provinsiStats).length,
|
||||
total_tahun_angkatan: Object.keys(tahunAngkatanStats).length
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
|
||||
<MapPin className="h-5 w-5" />
|
||||
Tabel Asal Provinsi Mahasiswa {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
|
||||
</CardTitle>
|
||||
{/* Tampilkan ringkasan statistik */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
|
||||
<div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400">Total Mahasiswa</div>
|
||||
<div className="font-bold text-blue-800 dark:text-blue-300">{stats.total}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20">
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400">Total Provinsi</div>
|
||||
<div className="font-bold text-purple-800 dark:text-purple-300">{stats.total_provinsi}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-green-50 dark:bg-green-900/20">
|
||||
<div className="text-xs text-green-600 dark:text-green-400">Total Tahun Angkatan</div>
|
||||
<div className="font-bold text-green-800 dark:text-green-300">{stats.total_tahun_angkatan}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tampilkan ringkasan provinsi */}
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{Object.entries(provinsiStats)
|
||||
.sort(([,a], [,b]) => b - a) // Urutkan berdasarkan jumlah mahasiswa terbanyak
|
||||
.map(([provinsi, count]) => (
|
||||
<span
|
||||
key={provinsi}
|
||||
className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
||||
>
|
||||
{provinsi}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Show entries selector */}
|
||||
<div className="flex items-center gap-2 mb-4 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>
|
||||
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 dark:bg-slate-800">
|
||||
<TableHead className="font-semibold text-center">No</TableHead>
|
||||
<TableHead className="font-semibold">NIM</TableHead>
|
||||
<TableHead className="font-semibold">Nama Mahasiswa</TableHead>
|
||||
<TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
|
||||
<TableHead className="font-semibold text-center">Provinsi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
||||
Tidak ada data yang tersedia
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((mahasiswa, index) => (
|
||||
<TableRow
|
||||
key={`${mahasiswa.nim}-${index}`}
|
||||
className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
|
||||
>
|
||||
<TableCell className="text-center font-medium dark:text-white">
|
||||
{(currentPage - 1) * pageSize + index + 1}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{mahasiswa.nim}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.tahun_angkatan}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.provinsi}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination info and controls */}
|
||||
{!loading && !error && mahasiswaData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
|
||||
<div className="text-sm text-muted-foreground dark:text-white">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
function getDisplayRange() {
|
||||
if (mahasiswaData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, mahasiswaData.length);
|
||||
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
// Generate pagination items
|
||||
function 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;
|
||||
}
|
||||
}
|
||||
417
components/chartstable/tabelbimbingandosenmahasiswa.tsx
Normal file
417
components/chartstable/tabelbimbingandosenmahasiswa.tsx
Normal file
@@ -0,0 +1,417 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import { Loader2, Users } from "lucide-react";
|
||||
|
||||
interface MahasiswaBimbinganDosen {
|
||||
nim: string;
|
||||
nama: string;
|
||||
tahun_angkatan: number;
|
||||
nama_pembimbing_1: string | null;
|
||||
nama_pembimbing_2: string | null;
|
||||
status_bimbingan: string;
|
||||
}
|
||||
|
||||
interface TabelBimbinganDosenMahasiswaProps {
|
||||
selectedYear: string;
|
||||
selectedDosen: string;
|
||||
}
|
||||
|
||||
export default function TabelBimbinganDosenMahasiswa({ selectedYear, selectedDosen }: TabelBimbinganDosenMahasiswaProps) {
|
||||
const [mahasiswaData, setMahasiswaData] = useState<MahasiswaBimbinganDosen[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<MahasiswaBimbinganDosen[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
let url = '/api/tabeldetail/bimbingan-dosen?';
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (selectedYear !== 'all') {
|
||||
params.append('tahun_angkatan', selectedYear);
|
||||
}
|
||||
|
||||
if (selectedDosen !== 'all') {
|
||||
params.append('nama_dosen', selectedDosen);
|
||||
}
|
||||
|
||||
url += params.toString();
|
||||
|
||||
const response = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch mahasiswa bimbingan dosen data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setMahasiswaData(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear, selectedDosen]);
|
||||
|
||||
// Update paginated data when data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [mahasiswaData, currentPage, pageSize]);
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(mahasiswaData.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
|
||||
};
|
||||
|
||||
// Fungsi untuk mendapatkan styling berdasarkan status bimbingan
|
||||
const getStatusBimbinganStyle = (status: string) => {
|
||||
switch (status) {
|
||||
case "Selesai":
|
||||
return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300";
|
||||
case "Belum Selesai":
|
||||
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300";
|
||||
}
|
||||
};
|
||||
|
||||
// Hitung statistik berdasarkan status bimbingan
|
||||
const statusStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const status = mahasiswa.status_bimbingan;
|
||||
acc[status] = (acc[status] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Hitung statistik tahun angkatan
|
||||
const tahunAngkatanStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const tahun = mahasiswa.tahun_angkatan;
|
||||
acc[tahun] = (acc[tahun] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
// Hitung statistik dosen pembimbing
|
||||
const dosenStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
if (mahasiswa.nama_pembimbing_1) {
|
||||
acc[mahasiswa.nama_pembimbing_1] = (acc[mahasiswa.nama_pembimbing_1] || 0) + 1;
|
||||
}
|
||||
if (mahasiswa.nama_pembimbing_2) {
|
||||
acc[mahasiswa.nama_pembimbing_2] = (acc[mahasiswa.nama_pembimbing_2] || 0) + 1;
|
||||
}
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
const stats = {
|
||||
total: mahasiswaData.length,
|
||||
total_status: Object.keys(statusStats).length,
|
||||
total_tahun_angkatan: Object.keys(tahunAngkatanStats).length,
|
||||
total_dosen: Object.keys(dosenStats).length
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
Tabel Bimbingan Dosen Mahasiswa {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
|
||||
{selectedDosen !== 'all' && ` - ${selectedDosen}`}
|
||||
</CardTitle>
|
||||
{/* Tampilkan ringkasan statistik */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-2">
|
||||
<div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400">Total Mahasiswa</div>
|
||||
<div className="font-bold text-blue-800 dark:text-blue-300">{stats.total}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20">
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400">Total Tahun Angkatan</div>
|
||||
<div className="font-bold text-purple-800 dark:text-purple-300">{stats.total_tahun_angkatan}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tampilkan ringkasan status bimbingan */}
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{Object.entries(statusStats)
|
||||
.sort(([,a], [,b]) => b - a) // Urutkan berdasarkan jumlah mahasiswa terbanyak
|
||||
.map(([status, count]) => (
|
||||
<span
|
||||
key={status}
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusBimbinganStyle(status)}`}
|
||||
>
|
||||
{status}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Show entries selector */}
|
||||
<div className="flex items-center gap-2 mb-4 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>
|
||||
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 dark:bg-slate-800">
|
||||
<TableHead className="font-semibold text-center">No</TableHead>
|
||||
<TableHead className="font-semibold">NIM</TableHead>
|
||||
<TableHead className="font-semibold">Nama Mahasiswa</TableHead>
|
||||
<TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
|
||||
<TableHead className="font-semibold">Pembimbing 1</TableHead>
|
||||
<TableHead className="font-semibold">Pembimbing 2</TableHead>
|
||||
<TableHead className="font-semibold text-center">Status Bimbingan</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
|
||||
Tidak ada data yang tersedia
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((mahasiswa, index) => (
|
||||
<TableRow
|
||||
key={`${mahasiswa.nim}-${index}`}
|
||||
className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
|
||||
>
|
||||
<TableCell className="text-center font-medium dark:text-white">
|
||||
{(currentPage - 1) * pageSize + index + 1}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{mahasiswa.nim}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.tahun_angkatan}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama_pembimbing_1 || '-'}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama_pembimbing_2 || '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusBimbinganStyle(mahasiswa.status_bimbingan)}`}
|
||||
>
|
||||
{mahasiswa.status_bimbingan}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination info and controls */}
|
||||
{!loading && !error && mahasiswaData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
|
||||
<div className="text-sm text-muted-foreground dark:text-white">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
function getDisplayRange() {
|
||||
if (mahasiswaData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, mahasiswaData.length);
|
||||
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
// Generate pagination items
|
||||
function 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;
|
||||
}
|
||||
}
|
||||
372
components/chartstable/tabelnamabeasiswamahasiswa.tsx
Normal file
372
components/chartstable/tabelnamabeasiswamahasiswa.tsx
Normal file
@@ -0,0 +1,372 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import { Loader2, Award } from "lucide-react";
|
||||
|
||||
interface MahasiswaNamaBeasiswa {
|
||||
nim: string;
|
||||
nama: string;
|
||||
tahun_angkatan: number;
|
||||
nama_beasiswa: string;
|
||||
}
|
||||
|
||||
interface TabelNamaBeasiswaMahasiswaProps {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function TabelNamaBeasiswaMahasiswa({ selectedYear }: TabelNamaBeasiswaMahasiswaProps) {
|
||||
const [mahasiswaData, setMahasiswaData] = useState<MahasiswaNamaBeasiswa[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<MahasiswaNamaBeasiswa[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = selectedYear === 'all'
|
||||
? '/api/tabeldetail/nama-beasiswa'
|
||||
: `/api/tabeldetail/nama-beasiswa?tahun_angkatan=${selectedYear}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch mahasiswa nama beasiswa data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setMahasiswaData(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear]);
|
||||
|
||||
// Update paginated data when data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [mahasiswaData, currentPage, pageSize]);
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(mahasiswaData.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
|
||||
};
|
||||
|
||||
// Hitung statistik beasiswa
|
||||
const beasiswaStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const beasiswa = mahasiswa.nama_beasiswa;
|
||||
acc[beasiswa] = (acc[beasiswa] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Hitung statistik tahun angkatan
|
||||
const tahunAngkatanStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const tahun = mahasiswa.tahun_angkatan;
|
||||
acc[tahun] = (acc[tahun] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
const stats = {
|
||||
total: mahasiswaData.length,
|
||||
total_beasiswa: Object.keys(beasiswaStats).length,
|
||||
total_tahun_angkatan: Object.keys(tahunAngkatanStats).length
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
|
||||
<Award className="h-5 w-5" />
|
||||
Tabel Nama Beasiswa Mahasiswa {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
|
||||
</CardTitle>
|
||||
{/* Tampilkan ringkasan statistik */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
|
||||
<div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400">Total Mahasiswa</div>
|
||||
<div className="font-bold text-blue-800 dark:text-blue-300">{stats.total}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20">
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400">Total Jenis Beasiswa</div>
|
||||
<div className="font-bold text-purple-800 dark:text-purple-300">{stats.total_beasiswa}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-green-50 dark:bg-green-900/20">
|
||||
<div className="text-xs text-green-600 dark:text-green-400">Total Tahun Angkatan</div>
|
||||
<div className="font-bold text-green-800 dark:text-green-300">{stats.total_tahun_angkatan}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tampilkan ringkasan beasiswa */}
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{Object.entries(beasiswaStats)
|
||||
.sort(([,a], [,b]) => b - a) // Urutkan berdasarkan jumlah mahasiswa terbanyak
|
||||
.map(([beasiswa, count]) => (
|
||||
<span
|
||||
key={beasiswa}
|
||||
className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
|
||||
>
|
||||
{beasiswa}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Show entries selector */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-sm">Show</span>
|
||||
<Select
|
||||
value={pageSize.toString()}
|
||||
onValueChange={handlePageSizeChange}
|
||||
>
|
||||
<SelectTrigger className="w-[80px]">
|
||||
<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>
|
||||
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 dark:bg-slate-800">
|
||||
<TableHead className="font-semibold text-center">No</TableHead>
|
||||
<TableHead className="font-semibold">NIM</TableHead>
|
||||
<TableHead className="font-semibold">Nama Mahasiswa</TableHead>
|
||||
<TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
|
||||
<TableHead className="font-semibold text-center">Nama Beasiswa</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
||||
Tidak ada data yang tersedia
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((mahasiswa, index) => (
|
||||
<TableRow
|
||||
key={`${mahasiswa.nim}-${mahasiswa.nama_beasiswa}`}
|
||||
className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
|
||||
>
|
||||
<TableCell className="text-center font-medium dark:text-white">
|
||||
{(currentPage - 1) * pageSize + index + 1}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{mahasiswa.nim}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.tahun_angkatan}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.nama_beasiswa}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination info and controls */}
|
||||
{!loading && !error && mahasiswaData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.length} entries
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
function getDisplayRange() {
|
||||
if (mahasiswaData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, mahasiswaData.length);
|
||||
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
// Generate pagination items
|
||||
function 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;
|
||||
}
|
||||
}
|
||||
397
components/chartstable/tabeltingkatprestasimahasiswa.tsx
Normal file
397
components/chartstable/tabeltingkatprestasimahasiswa.tsx
Normal file
@@ -0,0 +1,397 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import { Loader2, Trophy } from "lucide-react";
|
||||
|
||||
interface MahasiswaTingkatPrestasi {
|
||||
nim: string;
|
||||
nama: string;
|
||||
tahun_angkatan: number;
|
||||
tingkat_prestasi: string;
|
||||
nama_prestasi: string;
|
||||
}
|
||||
|
||||
interface TabelTingkatPrestasiMahasiswaProps {
|
||||
selectedYear: string;
|
||||
}
|
||||
|
||||
export default function TabelTingkatPrestasiMahasiswa({ selectedYear }: TabelTingkatPrestasiMahasiswaProps) {
|
||||
const [mahasiswaData, setMahasiswaData] = useState<MahasiswaTingkatPrestasi[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<MahasiswaTingkatPrestasi[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const url = selectedYear === 'all'
|
||||
? '/api/tabeldetail/tingkat-prestasi'
|
||||
: `/api/tabeldetail/tingkat-prestasi?tahun_angkatan=${selectedYear}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch mahasiswa tingkat prestasi data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setMahasiswaData(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
|
||||
console.error('Error fetching data:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [selectedYear]);
|
||||
|
||||
// Update paginated data when data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [mahasiswaData, currentPage, pageSize]);
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(mahasiswaData.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
|
||||
};
|
||||
|
||||
// Fungsi untuk mendapatkan styling berdasarkan tingkat prestasi
|
||||
const getTingkatPrestasiStyle = (tingkat: string) => {
|
||||
switch (tingkat) {
|
||||
case "Internasional":
|
||||
return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300";
|
||||
case "Nasional":
|
||||
return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300";
|
||||
case "Provinsi":
|
||||
return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300";
|
||||
case "Kabupaten":
|
||||
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300";
|
||||
}
|
||||
};
|
||||
|
||||
// Hitung statistik berdasarkan tingkat prestasi
|
||||
const tingkatStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const tingkat = mahasiswa.tingkat_prestasi;
|
||||
acc[tingkat] = (acc[tingkat] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
// Hitung statistik tahun angkatan
|
||||
const tahunAngkatanStats = mahasiswaData.reduce((acc, mahasiswa) => {
|
||||
const tahun = mahasiswa.tahun_angkatan;
|
||||
acc[tahun] = (acc[tahun] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<number, number>);
|
||||
|
||||
const stats = {
|
||||
total: mahasiswaData.length,
|
||||
total_tingkat: Object.keys(tingkatStats).length,
|
||||
total_tahun_angkatan: Object.keys(tahunAngkatanStats).length
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
|
||||
<Trophy className="h-5 w-5" />
|
||||
Tabel Tingkat Prestasi Mahasiswa {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
|
||||
</CardTitle>
|
||||
{/* Tampilkan ringkasan statistik */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
|
||||
<div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
|
||||
<div className="text-xs text-blue-600 dark:text-blue-400">Total Mahasiswa</div>
|
||||
<div className="font-bold text-blue-800 dark:text-blue-300">{stats.total}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-purple-50 dark:bg-purple-900/20">
|
||||
<div className="text-xs text-purple-600 dark:text-purple-400">Total Tingkat Prestasi</div>
|
||||
<div className="font-bold text-purple-800 dark:text-purple-300">{stats.total_tingkat}</div>
|
||||
</div>
|
||||
<div className="px-3 py-2 rounded-lg bg-green-50 dark:bg-green-900/20">
|
||||
<div className="text-xs text-green-600 dark:text-green-400">Total Tahun Angkatan</div>
|
||||
<div className="font-bold text-green-800 dark:text-green-300">{stats.total_tahun_angkatan}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Tampilkan ringkasan tingkat prestasi */}
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{Object.entries(tingkatStats)
|
||||
.sort(([,a], [,b]) => b - a) // Urutkan berdasarkan jumlah mahasiswa terbanyak
|
||||
.map(([tingkat, count]) => (
|
||||
<span
|
||||
key={tingkat}
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getTingkatPrestasiStyle(tingkat)}`}
|
||||
>
|
||||
{tingkat}: {count}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Show entries selector */}
|
||||
<div className="flex items-center gap-2 mb-4 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>
|
||||
|
||||
<div className="border rounded-md overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 dark:bg-slate-800">
|
||||
<TableHead className="font-semibold text-center">No</TableHead>
|
||||
<TableHead className="font-semibold">NIM</TableHead>
|
||||
<TableHead className="font-semibold">Nama Mahasiswa</TableHead>
|
||||
<TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
|
||||
<TableHead className="font-semibold">Nama Prestasi</TableHead>
|
||||
<TableHead className="font-semibold text-center">Tingkat Prestasi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
|
||||
Tidak ada data yang tersedia
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((mahasiswa, index) => (
|
||||
<TableRow
|
||||
key={`${mahasiswa.nim}-${mahasiswa.tingkat_prestasi}-${index}`}
|
||||
className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
|
||||
>
|
||||
<TableCell className="text-center font-medium dark:text-white">
|
||||
{(currentPage - 1) * pageSize + index + 1}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{mahasiswa.nim}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama}
|
||||
</TableCell>
|
||||
<TableCell className="text-center dark:text-white">
|
||||
{mahasiswa.tahun_angkatan}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{mahasiswa.nama_prestasi}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${getTingkatPrestasiStyle(mahasiswa.tingkat_prestasi)}`}
|
||||
>
|
||||
{mahasiswa.tingkat_prestasi}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination info and controls */}
|
||||
{!loading && !error && mahasiswaData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
|
||||
<div className="text-sm text-muted-foreground dark:text-white">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
function getDisplayRange() {
|
||||
if (mahasiswaData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, mahasiswaData.length);
|
||||
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
// Generate pagination items
|
||||
function 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user