skl/resources/js/components/HistoryPerusahaan/TableHistory.tsx

import React, { useState } from "react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { Perusahaan } from "@/types/perusahaan";
import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from "@/components/ui/pagination";
import { Link } from "@inertiajs/react";
import { Edit } from "lucide-react";

interface HistoryPerusahaanTableProps {
    data: Perusahaan[];
    itemsPerPage?: number;
}

export function HistoryPerusahaanTable({
    data,
    itemsPerPage = 20,
}: HistoryPerusahaanTableProps) {
    // Pagination state
    const [currentPage, setCurrentPage] = useState(1);
    const totalPages = Math.ceil(data.length / itemsPerPage);

    // Calculate displayed items based on current page
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, data.length);
    const currentData = data.slice(startIndex, endIndex);

    // Navigation functions
    const nextPage = () => {
        if (currentPage < totalPages) {
            setCurrentPage(currentPage + 1);
        }
    };

    const prevPage = () => {
        if (currentPage > 1) {
            setCurrentPage(currentPage - 1);
        }
    };

    // Generate page numbers array for pagination
    const generatePaginationItems = () => {
        let pages = [];
        const maxVisiblePages = 5;

        if (totalPages <= maxVisiblePages) {
            // Show all pages if total pages is less than max visible pages
            for (let i = 1; i <= totalPages; i++) {
                pages.push(i);
            }
        } else {
            // Always show first page
            pages.push(1);

            // Calculate start and end of middle pages
            let startPage = Math.max(2, currentPage - 1);
            let endPage = Math.min(totalPages - 1, currentPage + 1);

            // Adjust to show 3 middle pages
            if (startPage > 2) {
                pages.push(null); // ellipsis
            }

            for (let i = startPage; i <= endPage; i++) {
                pages.push(i);
            }

            if (endPage < totalPages - 1) {
                pages.push(null); // ellipsis
            }

            // Always show last page
            pages.push(totalPages);
        }

        return pages;
    };

    return (
        <div>
            <div className="w-full overflow-x-auto">
                <Table className="min-w-[1000px] border-collapse">
                    <TableHeader>
                        <TableRow className="border-b border-t bg-green-800">
                            <TableHead className="w-[100px] border-r border-l text-center text-white">
                                No.
                            </TableHead>
                            <TableHead className="border-r text-center text-white">
                                Nomor Perusahaan
                            </TableHead>
                            <TableHead className="border-r text-center text-white">
                                Nama Perusahaan
                            </TableHead>
                            <TableHead className="border-r text-center text-white">
                                Alamat
                            </TableHead>
                            <TableHead className="border-r text-center text-white">
                                Kota
                            </TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody className="border-b">
                        {data.length > 0 ? (
                            currentData.map((perusahaan, index) => (
                                <TableRow
                                    key={perusahaan.PerusahaanId || index}
                                    className="border-b"
                                >
                                    <TableCell className="font-medium text-center border-r border-l">
                                        {startIndex + index + 1}
                                    </TableCell>

                                    <TableCell className="items-center justify-center border-r border-l">
                                        <div className="flex justify-center">
                                            <Link
                                                href={`/admin/history_perusahaan/detail/${perusahaan.PerusahaanId}`}
                                                className="px-2 py-1 bg-blue-100 h-auto font-normal hover:underline text-center flex items-center gap-1 rounded-md"
                                            >
                                                <Edit className="h-3 w-3 text-blue-500" />
                                                {perusahaan.NomorInduk || "-"}
                                            </Link>
                                        </div>
                                    </TableCell>

                                    <TableCell className="flex items-center justify-center">
                                        <Link
                                            href={`/admin/history_perusahaan/detail/${perusahaan.PerusahaanId}`}
                                            className="px-2 py-1 bg-blue-100 h-auto font-normal hover:underline text-center flex items-center gap-1 rounded-md"
                                        >
                                            <Edit className="h-3 w-3 text-blue-500" />
                                            {perusahaan.NamaPerusahaan || "-"}
                                        </Link>
                                    </TableCell>

                                    <TableCell className="text-center border-r border-l">
                                        {perusahaan.Alamat || "-"}
                                    </TableCell>
                                    <TableCell className="text-center border-r border-l">
                                        {perusahaan.kelurahan?.kecamatan
                                            ?.kabupaten?.NamaKabupaten || "-"}
                                    </TableCell>
                                </TableRow>
                            ))
                        ) : (
                            <TableRow>
                                <TableCell
                                    colSpan={5}
                                    className="h-24 text-center"
                                >
                                    Tidak ada data
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>

            {/* Pagination using shadcn/ui */}
            {data.length > 0 && totalPages > 1 && (
                <div className="mt-4 flex flex-col md:flex-row items-center justify-between">
                    {/* <div className="text-sm text-gray-500">
                        Menampilkan {startIndex + 1}-{endIndex} dari{" "}
                        {data.length} data
                    </div> */}

                    <Pagination>
                        <PaginationContent>
                            <PaginationItem>
                                <PaginationPrevious
                                    onClick={prevPage}
                                    className={
                                        currentPage === 1
                                            ? "pointer-events-none opacity-50"
                                            : "cursor-pointer"
                                    }
                                />
                            </PaginationItem>

                            {generatePaginationItems().map((page, i) =>
                                page === null ? (
                                    <PaginationItem key={`ellipsis-${i}`}>
                                        <PaginationEllipsis />
                                    </PaginationItem>
                                ) : (
                                    <PaginationItem key={`page-${page}`}>
                                        <PaginationLink
                                            isActive={page === currentPage}
                                            onClick={() => setCurrentPage(page)}
                                        >
                                            {page}
                                        </PaginationLink>
                                    </PaginationItem>
                                )
                            )}

                            <PaginationItem>
                                <PaginationNext
                                    onClick={nextPage}
                                    className={
                                        currentPage === totalPages
                                            ? "pointer-events-none opacity-50"
                                            : "cursor-pointer"
                                    }
                                />
                            </PaginationItem>
                        </PaginationContent>
                    </Pagination>
                </div>
            )}
        </div>
    );
}