import React, { useEffect, useState } from "react"; import { Link, useForm } from "@inertiajs/react"; import { PageProps } from "@/types"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, } from "@/components/ui/table"; import { useToast } from "@/hooks/use-toast"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Search, Plus, Pencil, Trash2, ChevronLeft, ChevronRight, } from "lucide-react"; import AuthenticatedLayout from "@/layouts/authenticated-layout"; import { Head } from "@inertiajs/react"; import { Toaster } from "@/components/ui/toaster"; interface SubKategori { SubKategoriId: number; NamaSubKategori: string; } interface Kategori { KategoriId: number; NamaKategori: string; } interface Posting { PostId: number | null; JudulPost: string; SubKategoriId: number | null; IsPublish: boolean; kategori?: Kategori; subkategori?: SubKategori; } const ITEMS_PER_PAGE = 5; export default function PostIndex({ posts = [], }: PageProps<{ posts: Posting[] }>) { const { toast } = useToast(); const [currentPage, setCurrentPage] = useState(1); const { delete: destroy } = useForm({}); const [search, setSearch] = useState(""); const [filteredPosting, setFilteredPosting] = useState(posts); useEffect(() => { let filtered = posts; if (search) { filtered = filtered.filter((posting) => posting.JudulPost.toLowerCase().includes(search.toLowerCase()) ); } setFilteredPosting(filtered); setCurrentPage(1); }, [posts, search]); const totalPages = Math.ceil(filteredPosting.length / ITEMS_PER_PAGE); const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = startIndex + ITEMS_PER_PAGE; const currentItems = filteredPosting.slice(startIndex, endIndex); const handleSearch = (e: React.ChangeEvent) => { setSearch(e.target.value); }; const handlePageChange = (page: number) => { setCurrentPage(page); }; const handleDelete = (PostId: number) => { if (confirm("Apakah Anda yakin ingin menghapus postingan ini?")) { destroy(`/admin/post/${PostId}`, { onSuccess: () => toast({ title: "Berhasil", description: "Post berhasil dihapus", variant: "default", }), onError: () => toast({ title: "Gagal", description: "Terjadi kesalahan saat menghapus Post", variant: "destructive", }), }); } }; return (

No Judul Kategori Status Aksi {currentItems.length > 0 ? ( currentItems.map((posting, index) => ( {startIndex + index + 1} {posting.JudulPost} {posting.kategori?.NamaKategori}{" "} |{" "} { posting.subkategori ?.NamaSubKategori } {posting.IsPublish ? "Published" : "Draft"} )) ) : ( Tidak ada data )}

Showing {startIndex + 1} to{" "} {Math.min(endIndex, filteredPosting.length)} of{" "} {filteredPosting.length} entries

{Array.from( { length: totalPages }, (_, i) => i + 1 ).map((page) => ( ))}

); }