From 19ff23b2d6f39f7a86c44265721aff368f5a0451 Mon Sep 17 00:00:00 2001 From: marszayn Date: Mon, 10 Mar 2025 14:08:55 +0700 Subject: [PATCH] feat: Menambahkan komponen Tabel Detail dan Tabel History --- .../DetailArtikel/DetailArtikel.tsx | 2 +- .../HistoryPerusahaan/AddHistory.tsx | 227 ++++++++++++++++++ .../HistoryPerusahaan/TableHistory.tsx | 225 +++++++++++++++++ 3 files changed, 453 insertions(+), 1 deletion(-) create mode 100644 resources/js/components/HistoryPerusahaan/AddHistory.tsx create mode 100644 resources/js/components/HistoryPerusahaan/TableHistory.tsx diff --git a/resources/js/components/DetailArtikel/DetailArtikel.tsx b/resources/js/components/DetailArtikel/DetailArtikel.tsx index 8fe8ead..c8958c6 100644 --- a/resources/js/components/DetailArtikel/DetailArtikel.tsx +++ b/resources/js/components/DetailArtikel/DetailArtikel.tsx @@ -41,7 +41,7 @@ export default function DetailArtikel({ alt={article.JudulPost} className="w-full h-auto rounded-lg mb-6" /> -
diff --git a/resources/js/components/HistoryPerusahaan/AddHistory.tsx b/resources/js/components/HistoryPerusahaan/AddHistory.tsx new file mode 100644 index 0000000..29a8bda --- /dev/null +++ b/resources/js/components/HistoryPerusahaan/AddHistory.tsx @@ -0,0 +1,227 @@ +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, X } from "lucide-react"; + +interface DetailHistoryPerusahaanTableProps { + data: Perusahaan[]; + itemsPerPage?: number; +} + +export function DetailHistoryPerusahaanTable({ + data, + itemsPerPage = 20, +}: DetailHistoryPerusahaanTableProps) { + // 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 ( +
+
+ + + + + No. + + + Nomor Surat + + + Tanggal Surat + + + Kelompok Kegiatan + + + Keterangan + + + Dokumen + + + Keterangan + + + Hapus + + + + + {data.length > 0 ? ( + currentData.map((perusahaan, index) => ( + + + {startIndex + index + 1} + + + +
+ {perusahaan.NomorHistory || "-"} +
+ + + + {perusahaan.TanggalHistory || "-"} + + + + {perusahaan.HistoryKegiatan || "-"} + + + {perusahaan.KeteranganHistory || "-"} + + + {perusahaan.DokumenHistory || "-"} + + + + + + )) + ) : ( + + + Tidak ada data + + + )} + +
+
+ + {/* Pagination using shadcn/ui */} + {data.length > 0 && totalPages > 1 && ( +
+ {/*
+ Menampilkan {startIndex + 1}-{endIndex} dari{" "} + {data.length} data +
*/} + + + + + + + + {generatePaginationItems().map((page, i) => + page === null ? ( + + + + ) : ( + + setCurrentPage(page)} + > + {page} + + + ) + )} + + + + + + +
+ )} +
+ ); +} diff --git a/resources/js/components/HistoryPerusahaan/TableHistory.tsx b/resources/js/components/HistoryPerusahaan/TableHistory.tsx new file mode 100644 index 0000000..109c626 --- /dev/null +++ b/resources/js/components/HistoryPerusahaan/TableHistory.tsx @@ -0,0 +1,225 @@ +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 ( +
+
+ + + + + No. + + + Nomor Perusahaan + + + Nama Perusahaan + + + Alamat + + + Kota + + + + + {data.length > 0 ? ( + currentData.map((perusahaan, index) => ( + + + {startIndex + index + 1} + + + +
+ + + {perusahaan.NomorInduk || "-"} + +
+ + + + + + {perusahaan.NamaPerusahaan || "-"} + + + + + {perusahaan.Alamat || "-"} + + + {perusahaan.kelurahan?.kecamatan + ?.kabupaten?.NamaKabupaten || "-"} + + + )) + ) : ( + + + Tidak ada data + + + )} + +
+
+ + {/* Pagination using shadcn/ui */} + {data.length > 0 && totalPages > 1 && ( +
+ {/*
+ Menampilkan {startIndex + 1}-{endIndex} dari{" "} + {data.length} data +
*/} + + + + + + + + {generatePaginationItems().map((page, i) => + page === null ? ( + + + + ) : ( + + setCurrentPage(page)} + > + {page} + + + ) + )} + + + + + + +
+ )} +
+ ); +}