feat: implement initial categories crud for human-in-the-loop norm builder

2026-06-23 18:02:01 +00:00
parent c0b3d5c68d
commit 9ef50d9dc0
4 changed files with 262 additions and 3 deletions
@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+
+export interface Category {
+  id: string;
+  name: string;
+  description: string;
+}
+
+export const AdminCategories: React.FC = () => {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isEditing, setIsEditing] = useState<Category | null>(null);
+  const [formData, setFormData] = useState({ name: '', description: '' });
+
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  const fetchCategories = async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch('/api/categories');
+      const data = await res.json();
+      setCategories(data);
+    } catch (e) {
+      console.error('Error fetching categories:', e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.name) return;
+    
+    const method = isEditing ? 'PUT' : 'POST';
+    const body = isEditing ? { ...formData, id: isEditing.id } : formData;
+
+    try {
+      await fetch('/api/categories', {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+      setIsEditing(null);
+      setFormData({ name: '', description: '' });
+      fetchCategories();
+    } catch (e) {
+      console.error('Error saving category:', e);
+    }
+  };
+
+  const handleEdit = (cat: Category) => {
+    setIsEditing(cat);
+    setFormData({ name: cat.name, description: cat.description });
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Tem certeza que deseja excluir esta categoria?')) return;
+    try {
+      await fetch(`/api/categories?id=${id}`, { method: 'DELETE' });
+      fetchCategories();
+    } catch (e) {
+      console.error('Error deleting category:', e);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(null);
+    setFormData({ name: '', description: '' });
+  };
+
+  if (isLoading) {
+    return <div className="p-8 text-center text-slate-500">Carregando categorias...</div>;
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 animate-fade-in">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-slate-800 dark:text-white mb-2">Gerenciar Categorias de Materiais</h2>
+        <p className="text-slate-500 dark:text-slate-400">Cadastre os tipos de laudos (Ex: Aços, Parafusos, Tintas) que serão suportados pelo sistema de Normas e IA.</p>
+      </div>
+
+      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5 mb-8">
+        <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-4">
+          {isEditing ? 'Editar Categoria' : 'Nova Categoria'}
+        </h3>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Nome da Categoria</label>
+            <input 
+              type="text" 
+              required
+              value={formData.name}
+              onChange={e => setFormData({ ...formData, name: e.target.value })}
+              placeholder="Ex: Aços Estruturais, Fixadores, Tintas Industriais"
+              className="w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-4 py-2 text-slate-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Descrição / Instruções para IA</label>
+            <textarea 
+              value={formData.description}
+              onChange={e => setFormData({ ...formData, description: e.target.value })}
+              placeholder="Descreva brevemente o que compõe este material para ajudar a IA na classificação."
+              rows={3}
+              className="w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-4 py-2 text-slate-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 outline-none resize-none"
+            />
+          </div>
+          <div className="flex gap-3 justify-end mt-2">
+            {isEditing && (
+              <button 
+                type="button" 
+                onClick={handleCancel}
+                className="px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
+              >
+                Cancelar
+              </button>
+            )}
+            <button 
+              type="submit" 
+              className="px-5 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+            >
+              {isEditing ? 'Salvar Alterações' : 'Cadastrar Categoria'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="bg-slate-50 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+              <th className="px-6 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider">Nome</th>
+              <th className="px-6 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider">Descrição</th>
+              <th className="px-6 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider text-right">Ações</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
+            {categories.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="px-6 py-8 text-center text-sm text-slate-500">
+                  Nenhuma categoria cadastrada ainda.
+                </td>
+              </tr>
+            ) : (
+              categories.map(cat => (
+                <tr key={cat.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/50">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-slate-800 dark:text-slate-200">{cat.name}</td>
+                  <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-400">{cat.description}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button 
+                      onClick={() => handleEdit(cat)} 
+                      className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-4"
+                    >
+                      Editar
+                    </button>
+                    <button 
+                      onClick={() => handleDelete(cat.id)} 
+                      className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
+                    >
+                      Excluir
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
@@ -6,11 +6,13 @@ import type { AIProvider } from '../types/providers';
 interface HeaderProps {
  onReset: () => void;
  onClearKey: () => void;
+  onToggleAdmin: () => void;
+  isAdminView: boolean;
  hasKey: boolean;
  provider?: AIProvider;
 }

-export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, provider }) => {
+export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, onToggleAdmin, isAdminView, hasKey, provider }) => {
  const { theme, toggleTheme } = useTheme();

  const providerColors: Record<AIProvider, string> = {
@@ -64,7 +66,21 @@ export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, pro
              title="Iniciar nova análise de certificado"
            >
              <RefreshIcon className="w-4 h-4" />
-              <span>Nova Análise</span>
+              <span className="hidden sm:inline">Nova Análise</span>
+            </button>
+          )}
+
+          {hasKey && (
+            <button
+              onClick={onToggleAdmin}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border ${isAdminView ? 'text-indigo-600 bg-indigo-50 border-indigo-200 dark:text-indigo-300 dark:bg-indigo-900/30 dark:border-indigo-800' : 'text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 dark:text-slate-300 dark:hover:bg-slate-800 border-transparent hover:border-indigo-200 dark:hover:border-indigo-900'}`}
+              title="Gerenciar Categorias e Normas"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              <span className="hidden sm:inline">Admin</span>
            </button>
          )}