import { FileText, PlusCircle, Search, Trash2, Undo2 } from 'lucide-react'; import { toast } from 'sonner'; import { useRef, useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; import { PerPageSelector } from '@/Components/admin/PerPageSelector'; import { SortHeader } from '@/Components/admin/SortHeader'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/Components/ui/breadcrumb'; import { Button } from '@/Components/ui/button'; import { Checkbox } from '@/Components/ui/checkbox'; import { ConfirmDialog } from '@/Components/ui/confirm-dialog'; import { ExportButton } from '@/Components/ui/export-button'; import { Input } from '@/Components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import { useAdminFilters } from '@/hooks/useAdminFilters'; import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts'; import { useNavigationState } from '@/hooks/useNavigationState'; import AdminLayout from '@/Layouts/AdminLayout'; import { formatRelativeTime } from '@/lib/format'; interface BlogPostRow { id: number; title: string; slug: string; author: string | null; published_at: string | null; deleted_at: string | null; created_at: string; } interface PaginatedPosts { data: BlogPostRow[]; current_page: number; last_page: number; from: number | null; to: number | null; total: number; } interface Props { posts: PaginatedPosts; filters: { trashed: string; search: string; sort?: string; dir?: string; per_page?: number }; } export default function BlogPostsIndex({ posts, filters }: Props) { const [selectedIds, setSelectedIds] = useState>(new Set()); const [bulkConfirm, setBulkConfirm] = useState<'delete' | 'restore' | null>(null); const isNavigating = useNavigationState(); const searchInputRef = useRef(null); const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: route('admin.blog-posts.index'), filters, }); function toggleSelect(id: number) { setSelectedIds((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); } function handleBulkDelete() { router.post( route('admin.blog-posts.bulk-destroy'), { ids: [...selectedIds] }, { onSuccess: () => { setSelectedIds(new Set()); setBulkConfirm(null); }, onError: () => { toast.error('Operation failed. Try again.'); }, }, ); } function handleBulkRestore() { router.post( route('admin.blog-posts.bulk-restore'), { ids: [...selectedIds] }, { onSuccess: () => { setSelectedIds(new Set()); setBulkConfirm(null); }, onError: () => { toast.error('Operation failed. Try again.'); }, }, ); } useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus(), onNextPage: posts.current_page < posts.last_page ? () => handlePage(posts.current_page + 1) : undefined, onPrevPage: posts.current_page > 1 ? () => handlePage(posts.current_page - 1) : undefined, }); const currentPage = posts.current_page; const lastPage = posts.last_page; useAdminKeyboardShortcuts({ onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined, onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined, }); return (

Admin Blog Posts

updateFilter({ per_page: perPage })} />

{selectedIds.size > 0 && (

{selectedIds.size} selected {filters.trashed !== 'only' && ( )} {filters.trashed !== 'without' && ( )}

)} Title Slug Author {filters.trashed !== 'without' && Deleted} Actions {posts.data.map((post) => ( toggleSelect(post.id)} aria-label={`Select "${post.title}"`} /> {post.title} {post.deleted_at && ( Deleted )} {post.slug} {post.author ?? '—'} {formatRelativeTime(post.published_at)} {formatRelativeTime(post.created_at)} {filters.trashed !== 'without' && ( {post.deleted_at ? formatRelativeTime(post.deleted_at) : '—'} )}

{!post.deleted_at && ( )} {!post.deleted_at && ( Delete } title="Delete blog post?" description={`"${post.title}" will be soft-deleted and can be restored later.`} confirmLabel="Delete" variant="destructive" onConfirm={() => router.delete(route('admin.blog-posts.destroy', post.id))} /> )} {post.deleted_at && ( Restore } title="Restore blog post?" description={`"${post.title}" will be restored and visible to users.`} confirmLabel="Restore" onConfirm={() => router.post(route('admin.blog-posts.restore', post.id))} /> )}

))}

!open && setBulkConfirm(null)} title="Delete selected blog posts?" description={`${selectedIds.size} post(s) will be soft-deleted and can be restored later.`} confirmLabel="Delete" variant="destructive" onConfirm={handleBulkDelete} /> !open && setBulkConfirm(null)} title="Restore selected blog posts?" description={`${selectedIds.size} post(s) will be restored and visible to users.`} confirmLabel="Restore" onConfirm={handleBulkRestore} /> ); }