import { useState, useMemo, useEffect } from "react"; import AppLayout from "@/Layouts/AppLayout"; import { Head, Link, router, usePage } from "@inertiajs/react"; import { toast } from "sonner"; import { Plus, Pencil, Trash2, Search, ChevronLeft, ChevronRight, FileText, Layers, Link2, } from "lucide-react"; import PageHeader from "@/Components/PageHeader"; import { Settings } from "lucide-react"; import { Button } from "@/Components/ui/button"; import { Badge } from "@/Components/ui/badge"; 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 SortableHead from "@/Components/ui/sortable-head"; import useTableSort from "@/hooks/useTableSort"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/Components/ui/alert-dialog"; const ITEMS_PER_PAGE = 10; const STATUS_VARIANT = { active: "default", inactive: "secondary", blocked: "outline", }; export default function Index({ templates, tabs, statuses }) { const { flash } = usePage().props; const [search, setSearch] = useState(""); useEffect(() => { if (flash?.success) toast.success(flash.success); if (flash?.error) toast.error(flash.error); }, [flash?.success, flash?.error]); const [tabFilter, setTabFilter] = useState("all"); const [statusFilter, setStatusFilter] = useState("all"); const [page, setPage] = useState(1); const filtered = useMemo(() => { setPage(1); return templates.filter((t) => { const matchSearch = t.name .toLowerCase() .includes(search.toLowerCase()); const matchTab = tabFilter === "all" || t.tab === tabFilter; const matchStatus = statusFilter === "all" || t.status === statusFilter; return matchSearch && matchTab && matchStatus; }); }, [templates, search, tabFilter, statusFilter]); const { sortedData, sortField, sortDir, handleSort } = useTableSort(filtered, { accessors: { tab: "tab_label", status: "status_label", blocks: "enabled_blocks_count", usage: "usage_count", }, }); const totalPages = Math.max( 1, Math.ceil(sortedData.length / ITEMS_PER_PAGE) ); const currentPage = Math.min(page, totalPages); const paginated = sortedData.slice( (currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE ); function handleDelete(id) { router.delete(route("templates.destroy", id), { preserveScroll: true, }); } return (
{/* Filters */}
setSearch(e.target.value)} className="pl-9 w-full sm:w-56" />
{/* Table */}
Nome Aba Status Blocos Uso {paginated.length === 0 ? (
{templates.length === 0 ? "Nenhum template cadastrado." : "Nenhum template encontrado para os filtros aplicados."}
) : ( paginated.map((template) => (
{template.name} {template.is_default && ( Padrão )}
{template.tab_label} {template.status_label} {template.enabled_blocks_count} /{" "} {template.total_blocks_count} {template.usage_count > 0 ? ( {template.usage_count} projeto{template.usage_count !== 1 ? "s" : ""} ) : ( - )}
{!template.is_default && ( template.usage_count > 0 ? ( ) : ( Excluir template? O template " {template.name} " será excluído permanentemente. Cancelar handleDelete( template.id ) } > Excluir ) )}
)) )}
{/* Pagination */} {totalPages > 1 && (

{filtered.length} template {filtered.length !== 1 ? "s" : ""}

{currentPage} / {totalPages}
{Array.from({ length: totalPages }, (_, i) => ( ))}
)}
); }