253 lines
11 KiB
TypeScript
253 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { SolutionGuard } from '@/components/auth/SolutionGuard';
|
|
import { PageHeader, DataTable, Card, Badge } from '@/components/ui';
|
|
import {
|
|
PlusIcon,
|
|
MagnifyingGlassIcon,
|
|
DocumentTextIcon,
|
|
PencilSquareIcon,
|
|
TrashIcon,
|
|
ArrowPathIcon,
|
|
EyeIcon,
|
|
ClockIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import { docApi, Document } from '@/lib/api-docs';
|
|
import { toast } from 'react-hot-toast';
|
|
import DocumentEditor from '@/components/documentos/DocumentEditor';
|
|
import { format, parseISO } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
|
|
export default function DocumentosPage() {
|
|
const [documents, setDocuments] = useState<Document[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [currentDoc, setCurrentDoc] = useState<Partial<Document> | null>(null);
|
|
|
|
// Pagination
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const itemsPerPage = 8;
|
|
|
|
useEffect(() => {
|
|
fetchDocuments();
|
|
}, []);
|
|
|
|
const fetchDocuments = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await docApi.getDocuments();
|
|
setDocuments(data || []);
|
|
} catch (error) {
|
|
toast.error('Erro ao carregar documentos');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCreate = async () => {
|
|
try {
|
|
const newDoc = await docApi.createDocument({
|
|
title: 'Novo Documento',
|
|
content: '{"type":"doc","content":[{"type":"paragraph"}]}',
|
|
status: 'published',
|
|
parent_id: null
|
|
});
|
|
setCurrentDoc(newDoc);
|
|
setIsEditing(true);
|
|
fetchDocuments();
|
|
} catch (error) {
|
|
toast.error('Erro ao iniciar novo documento');
|
|
}
|
|
};
|
|
|
|
const handleEdit = (doc: Document) => {
|
|
setCurrentDoc(doc);
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const handleSave = async (docData: Partial<Document>) => {
|
|
try {
|
|
if (docData.id) {
|
|
await docApi.updateDocument(docData.id, docData);
|
|
// toast.success('Documento atualizado!'); // Auto-save já acontece
|
|
} else {
|
|
await docApi.createDocument(docData);
|
|
toast.success('Documento criado!');
|
|
}
|
|
setIsEditing(false);
|
|
fetchDocuments();
|
|
} catch (error) {
|
|
toast.error('Erro ao salvar documento');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Tem certeza que deseja excluir este documento e todas as suas subpáginas?')) return;
|
|
try {
|
|
await docApi.deleteDocument(id);
|
|
toast.success('Documento excluído!');
|
|
fetchDocuments();
|
|
} catch (error) {
|
|
toast.error('Erro ao excluir documento');
|
|
}
|
|
};
|
|
|
|
const filteredDocuments = useMemo(() => {
|
|
return documents.filter(doc =>
|
|
(doc.title || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
(doc.content || '').toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
}, [documents, searchTerm]);
|
|
|
|
const paginatedDocuments = useMemo(() => {
|
|
const start = (currentPage - 1) * itemsPerPage;
|
|
return filteredDocuments.slice(start, start + itemsPerPage);
|
|
}, [filteredDocuments, currentPage]);
|
|
|
|
const columns = [
|
|
{
|
|
header: 'Documento',
|
|
accessor: (doc: Document) => (
|
|
<div className="flex items-center gap-3 py-1">
|
|
<div className="p-2.5 bg-zinc-50 dark:bg-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-700 shadow-sm">
|
|
<DocumentTextIcon className="w-5 h-5 text-zinc-500" />
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-zinc-900 dark:text-white group-hover:text-brand-500 transition-colors uppercase tracking-tight text-sm">
|
|
{doc.title || 'Sem título'}
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
<Badge variant="info" className="text-[8px] px-1.5 font-black">v{doc.version || 1}</Badge>
|
|
<span className="text-[10px] text-zinc-400 font-medium">#{doc.id.substring(0, 8)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
header: 'Última Modificação',
|
|
accessor: (doc: Document) => (
|
|
<div className="flex items-center gap-3">
|
|
<ClockIcon className="w-4 h-4 text-zinc-300" />
|
|
<div className="flex flex-col">
|
|
<span className="text-xs font-bold text-zinc-600 dark:text-zinc-400">
|
|
{format(parseISO(doc.updated_at), "dd 'de' MMM", { locale: ptBR })}
|
|
</span>
|
|
<span className="text-[9px] text-zinc-400 uppercase font-black tracking-tighter">
|
|
às {format(parseISO(doc.updated_at), "HH:mm")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
header: 'Ações',
|
|
align: 'right' as const,
|
|
accessor: (doc: Document) => (
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button
|
|
onClick={() => handleEdit(doc)}
|
|
className="flex items-center gap-2 px-4 py-2 text-xs font-black uppercase tracking-widest text-zinc-600 dark:text-zinc-400 hover:text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-xl transition-all"
|
|
>
|
|
<PencilSquareIcon className="w-4 h-4" />
|
|
Abrir
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(doc.id)}
|
|
className="p-2 text-zinc-300 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-xl transition-all"
|
|
title="Excluir"
|
|
>
|
|
<TrashIcon className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<SolutionGuard requiredSolution="documentos">
|
|
<div className="p-6 max-w-[1600px] mx-auto space-y-8 animate-in fade-in duration-700">
|
|
<PageHeader
|
|
title="Wiki & Base de Conhecimento"
|
|
description="Organize processos, manuais e documentação técnica da agência."
|
|
primaryAction={{
|
|
label: "Criar Novo",
|
|
icon: <PlusIcon className="w-5 h-5" />,
|
|
onClick: handleCreate
|
|
}}
|
|
/>
|
|
|
|
<div className="flex flex-col md:flex-row gap-4 items-center justify-between bg-white dark:bg-zinc-900/50 p-4 rounded-[28px] border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
|
<div className="w-full md:w-96 relative">
|
|
<MagnifyingGlassIcon className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-300" />
|
|
<input
|
|
type="text"
|
|
placeholder="Pesquisar wiki..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-100 dark:border-zinc-800 rounded-2xl pl-12 pr-4 py-3 text-sm outline-none focus:ring-2 ring-brand-500/20 transition-all font-semibold placeholder:text-zinc-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={fetchDocuments}
|
|
className="p-3 text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors"
|
|
>
|
|
<ArrowPathIcon className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
|
|
</button>
|
|
<div className="h-6 w-px bg-zinc-200 dark:border-zinc-800" />
|
|
<div className="flex items-center gap-2 px-5 py-2.5 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-zinc-200 dark:shadow-none">
|
|
{filteredDocuments.length} Documentos
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Card noPadding allowOverflow className="border-none shadow-2xl shadow-black/5 overflow-hidden rounded-[32px]">
|
|
<DataTable
|
|
columns={columns}
|
|
data={paginatedDocuments}
|
|
isLoading={loading}
|
|
/>
|
|
|
|
{/* Pagination */}
|
|
<div className="p-6 border-t border-zinc-50 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/50 dark:bg-zinc-900/50">
|
|
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">
|
|
{filteredDocuments.length} itens no total
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<button
|
|
disabled={currentPage === 1}
|
|
onClick={() => setCurrentPage(p => p - 1)}
|
|
className="px-6 py-2.5 text-[10px] font-black uppercase tracking-widest bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl disabled:opacity-30 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-all shadow-sm"
|
|
>
|
|
Anterior
|
|
</button>
|
|
<button
|
|
disabled={currentPage * itemsPerPage >= filteredDocuments.length}
|
|
onClick={() => setCurrentPage(p => p + 1)}
|
|
className="px-6 py-2.5 text-[10px] font-black uppercase tracking-widest bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-xl disabled:opacity-30 hover:bg-black dark:hover:bg-white transition-all shadow-lg active:scale-95"
|
|
>
|
|
Próximo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{isEditing && (
|
|
<DocumentEditor
|
|
initialDocument={currentDoc}
|
|
onSave={handleSave}
|
|
onCancel={() => {
|
|
setIsEditing(false);
|
|
fetchDocuments();
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</SolutionGuard>
|
|
);
|
|
}
|