feat: adicionar pesquisa e filtros por categoria, status e data no painel de projetos

frontend/src/app/admin/projetos/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import Link from 'next/link';
 import { useToast } from '@/contexts/ToastContext';
 import { useConfirm } from '@/contexts/ConfirmContext';
@@ -29,6 +29,11 @@ const STATUS_STYLES: Record<string, string> = {
 export default function ProjectsList() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterCategory, setFilterCategory] = useState<string>('');
+  const [filterStatus, setFilterStatus] = useState<string>('');
+  const [filterDateFrom, setFilterDateFrom] = useState<string>('');
+  const [filterDateTo, setFilterDateTo] = useState<string>('');
   const { success, error } = useToast();
   const { confirm } = useConfirm();
 
@@ -54,6 +59,70 @@ export default function ProjectsList() {
     }
   };
 
+  // Extrair categorias e status únicos
+  const categories = useMemo(() => {
+    const cats = new Set<string>();
+    projects.forEach((p) => {
+      if (p.category) cats.add(p.category);
+    });
+    return Array.from(cats).sort();
+  }, [projects]);
+
+  const statuses = useMemo(() => {
+    const stats = new Set<string>();
+    projects.forEach((p) => {
+      if (p.status) stats.add(p.status);
+    });
+    return Array.from(stats);
+  }, [projects]);
+
+  // Filtrar projetos
+  const filteredProjects = useMemo(() => {
+    return projects.filter((project) => {
+      // Filtro de pesquisa
+      const matchesSearch = !searchTerm ||
+        project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.client?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.category?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        project.description?.toLowerCase().includes(searchTerm.toLowerCase());
+
+      // Filtro de categoria
+      const matchesCategory = !filterCategory || project.category === filterCategory;
+
+      // Filtro de status
+      const matchesStatus = !filterStatus || project.status === filterStatus;
+
+      // Filtro de data (criação)
+      let matchesDateFrom = true;
+      let matchesDateTo = true;
+      
+      if (filterDateFrom) {
+        const projectDate = new Date(project.createdAt);
+        const fromDate = new Date(filterDateFrom);
+        matchesDateFrom = projectDate >= fromDate;
+      }
+      
+      if (filterDateTo) {
+        const projectDate = new Date(project.createdAt);
+        const toDate = new Date(filterDateTo);
+        toDate.setHours(23, 59, 59, 999);
+        matchesDateTo = projectDate <= toDate;
+      }
+
+      return matchesSearch && matchesCategory && matchesStatus && matchesDateFrom && matchesDateTo;
+    });
+  }, [projects, searchTerm, filterCategory, filterStatus, filterDateFrom, filterDateTo]);
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setFilterCategory('');
+    setFilterStatus('');
+    setFilterDateFrom('');
+    setFilterDateTo('');
+  };
+
+  const hasActiveFilters = searchTerm || filterCategory || filterStatus || filterDateFrom || filterDateTo;
+
   const handleDelete = async (id: string) => {
     const confirmed = await confirm({
       title: 'Excluir projeto',
@@ -116,15 +185,126 @@ export default function ProjectsList() {
         </Link>
       </div>
 
+      {/* Filters Section */}
+      <div className="bg-white dark:bg-secondary rounded-xl border border-gray-200 dark:border-white/10 shadow-sm p-4 mb-6">
+        <div className="flex flex-col lg:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1">
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Pesquisar projetos..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-4 py-2.5 pl-10 rounded-lg border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 text-secondary dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+              />
+              <i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+              {searchTerm && (
+                <button
+                  onClick={() => setSearchTerm('')}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-white transition-colors"
+                >
+                  <i className="ri-close-line"></i>
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Category Filter */}
+          <div className="w-full lg:w-48">
+            <select
+              value={filterCategory}
+              onChange={(e) => setFilterCategory(e.target.value)}
+              className="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 text-secondary dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all appearance-none cursor-pointer"
+            >
+              <option value="">Todas categorias</option>
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Status Filter */}
+          <div className="w-full lg:w-40">
+            <select
+              value={filterStatus}
+              onChange={(e) => setFilterStatus(e.target.value)}
+              className="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 text-secondary dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all appearance-none cursor-pointer"
+            >
+              <option value="">Todos status</option>
+              {statuses.map((status) => (
+                <option key={status} value={status}>{status}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Date From Filter */}
+          <div className="w-full lg:w-40">
+            <input
+              type="date"
+              value={filterDateFrom}
+              onChange={(e) => setFilterDateFrom(e.target.value)}
+              className="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 text-secondary dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all cursor-pointer"
+              title="Data inicial"
+            />
+          </div>
+
+          {/* Date To Filter */}
+          <div className="w-full lg:w-40">
+            <input
+              type="date"
+              value={filterDateTo}
+              onChange={(e) => setFilterDateTo(e.target.value)}
+              className="w-full px-4 py-2.5 rounded-lg border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 text-secondary dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all cursor-pointer"
+              title="Data final"
+            />
+          </div>
+
+          {/* Clear Filters */}
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="px-4 py-2.5 text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400 font-medium transition-colors flex items-center gap-1 whitespace-nowrap"
+            >
+              <i className="ri-filter-off-line"></i>
+              Limpar
+            </button>
+          )}
+        </div>
+
+        {/* Results count */}
+        {!loading && (
+          <div className="mt-3 pt-3 border-t border-gray-100 dark:border-white/5 text-sm text-gray-500 dark:text-gray-400">
+            {hasActiveFilters ? (
+              <span>Exibindo {filteredProjects.length} de {projects.length} projetos</span>
+            ) : (
+              <span>{projects.length} projeto{projects.length !== 1 ? 's' : ''} cadastrado{projects.length !== 1 ? 's' : ''}</span>
+            )}
+          </div>
+        )}
+      </div>
+
       <div className="bg-white dark:bg-secondary rounded-xl border border-gray-200 dark:border-white/10 shadow-sm overflow-hidden">
         {loading ? (
           <div className="flex items-center justify-center py-16">
             <i className="ri-loader-4-line animate-spin text-3xl text-primary"></i>
           </div>
-        ) : projects.length === 0 ? (
+        ) : filteredProjects.length === 0 ? (
           <div className="py-16 text-center text-gray-500 dark:text-gray-400 flex flex-col items-center gap-3">
             <i className="ri-briefcase-line text-4xl"></i>
-            Nenhum projeto cadastrado ainda.
+            {hasActiveFilters ? (
+              <>
+                Nenhum projeto encontrado com os filtros aplicados.
+                <button
+                  onClick={clearFilters}
+                  className="mt-2 px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors"
+                >
+                  Limpar filtros
+                </button>
+              </>
+            ) : (
+              'Nenhum projeto cadastrado ainda.'
+            )}
           </div>
         ) : (
           <div className="overflow-x-auto">
@@ -134,13 +314,14 @@ export default function ProjectsList() {
                   <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Projeto</th>
                   <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Categoria</th>
                   <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Cliente</th>
+                  <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Inserção</th>
                   <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Conclusão</th>
                   <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Status</th>
                   <th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider text-right">Ações</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-100 dark:divide-white/5">
-                {projects.map((project) => (
+                {filteredProjects.map((project) => (
                   <tr key={project.id} className="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
                     <td className="p-4">
                       <div className="flex items-center gap-3">
@@ -160,12 +341,19 @@ export default function ProjectsList() {
                               <span className="text-[10px] uppercase tracking-wider bg-primary/10 text-primary px-2 py-0.5 rounded-full font-bold">Destaque</span>
                             )}
                           </p>
-                          <p className="text-xs text-gray-500 dark:text-gray-400">Criado em {formatDate(project.createdAt)}</p>
                         </div>
                       </div>
                     </td>
                     <td className="p-4 text-gray-600 dark:text-gray-400">{project.category}</td>
                     <td className="p-4 text-gray-600 dark:text-gray-400">{project.client || '—'}</td>
+                    <td className="p-4 text-gray-600 dark:text-gray-400">
+                      <div className="flex flex-col">
+                        <span>{formatDate(project.createdAt)}</span>
+                        <span className="text-xs text-gray-400 dark:text-gray-500">
+                          {new Date(project.createdAt).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
+                        </span>
+                      </div>
+                    </td>
                     <td className="p-4 text-gray-600 dark:text-gray-400">{formatDate(project.completionDate)}</td>
                     <td className="p-4">{renderStatus(project.status)}</td>
                     <td className="p-4 text-right">