fix(erp): enable erp pages and menu items

front-end-agency/components/documentos/DocumentList.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { Document } from '@/lib/api-docs';
+import {
+    DocumentTextIcon,
+    PencilSquareIcon,
+    TrashIcon,
+    CalendarIcon
+} from "@heroicons/react/24/outline";
+import { format, parseISO } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { Card } from "@/components/ui";
+
+interface DocumentListProps {
+    documents: Document[];
+    onEdit: (doc: Document) => void;
+    onDelete: (id: string) => void;
+}
+
+export default function DocumentList({ documents, onEdit, onDelete }: DocumentListProps) {
+    if (documents.length === 0) {
+        return (
+            <div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-12 text-center">
+                <DocumentTextIcon className="w-12 h-12 text-zinc-300 mx-auto mb-4" />
+                <h3 className="text-lg font-bold text-zinc-900 dark:text-white">Nenhum documento ainda</h3>
+                <p className="text-zinc-500 max-w-xs mx-auto mt-2">
+                    Comece criando seu primeiro documento de texto para sua agência.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {documents.map((doc) => (
+                <Card
+                    key={doc.id}
+                    className="group hover:shadow-xl transition-all border-2 border-transparent hover:border-brand-500/20"
+                >
+                    <div className="flex flex-col h-full">
+                        <div className="flex justify-between items-start mb-4">
+                            <div className="p-3 bg-brand-50 dark:bg-brand-500/10 rounded-xl">
+                                <DocumentTextIcon className="w-6 h-6 text-brand-600 dark:text-brand-400" />
+                            </div>
+                            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-all">
+                                <button
+                                    onClick={() => onEdit(doc)}
+                                    className="p-2 text-zinc-400 hover:text-brand-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                                >
+                                    <PencilSquareIcon className="w-4 h-4" />
+                                </button>
+                                <button
+                                    onClick={() => onDelete(doc.id)}
+                                    className="p-2 text-zinc-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-colors"
+                                >
+                                    <TrashIcon className="w-4 h-4" />
+                                </button>
+                            </div>
+                        </div>
+
+                        <h3 className="text-base font-bold text-zinc-900 dark:text-white mb-2 line-clamp-1">
+                            {doc.title || 'Documento sem título'}
+                        </h3>
+
+                        <p className="text-sm text-zinc-500 line-clamp-3 mb-6 flex-1">
+                            {doc.content ? doc.content.replace(/<[^>]*>/g, '').substring(0, 150) : 'Sem conteúdo...'}
+                        </p>
+
+                        <div className="flex items-center gap-2 pt-4 border-t border-zinc-100 dark:border-zinc-800">
+                            <CalendarIcon className="w-3.5 h-3.5 text-zinc-400" />
+                            <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">
+                                {format(parseISO(doc.updated_at), "dd 'de' MMMM", { locale: ptBR })}
+                            </span>
+                            {doc.status === 'draft' && (
+                                <span className="ml-auto text-[10px] font-black uppercase tracking-widest text-amber-500 bg-amber-50 dark:bg-amber-500/10 px-2 py-0.5 rounded-full">
+                                    Rascunho
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </Card>
+            ))}
+        </div>
+    );
+}