fix(frontend): migrate Gestão de Empresas to Go backend

Replace Appwrite-based empresa route with direct Go API calls.
- Remove Models.Document dependency (cause of infinite loading)
- Call /api/v1/companies with auth token from localStorage
- Map corporate_name, category, license_number to new API fields
- Rewrite EmpresaList with proper Go Company type and clean table
- Rewrite EmpresaModal with correct fields matching Go backend

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Tiago Yamamoto 2026-03-07 09:12:30 -06:00
parent a5f50321b9
commit 059d90c9bf
3 changed files with 311 additions and 309 deletions

View file

@ -1,53 +1,63 @@
"use client"; "use client";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Models } from "@/lib/appwrite";
import EmpresaList from "@/components/EmpresaList"; import EmpresaList from "@/components/EmpresaList";
import EmpresaModal from "@/components/EmpresaModal"; import EmpresaModal from "@/components/EmpresaModal";
import { API_V1_BASE_URL } from "@/lib/apiBase";
interface EmpresaFormData { export interface Company {
id: string;
cnpj: string; cnpj: string;
razaoSocial: string; corporate_name: string;
nomeFantasia: string; category: string;
license_number: string;
is_verified: boolean;
city: string;
state: string;
phone: string;
created_at: string;
updated_at: string;
} }
const emptyForm: EmpresaFormData = { export interface EmpresaFormData {
cnpj: "", cnpj: string;
razaoSocial: "", corporate_name: string;
nomeFantasia: "", category: string;
}; license_number: string;
}
const toPayload = (empresa: EmpresaFormData) => ({ const getToken = () =>
data: { typeof window !== "undefined" ? localStorage.getItem("access_token") ?? "" : "";
cnpj: empresa.cnpj.replace(/\D/g, ""),
"razao-social": empresa.razaoSocial, const authHeaders = () => ({
"nome-fantasia": empresa.nomeFantasia, "Content-Type": "application/json",
}, Authorization: `Bearer ${getToken()}`,
}); });
export default function EmpresaNovoPage() { export default function EmpresaNovoPage() {
const [empresas, setEmpresas] = useState<Models.Document[]>([]); const [empresas, setEmpresas] = useState<Company[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [empresaEditando, setEmpresaEditando] = useState<Models.Document | null>(null); const [empresaEditando, setEmpresaEditando] = useState<Company | null>(null);
const carregarEmpresas = async () => { const carregarEmpresas = async () => {
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
const response = await fetch("/api/empresas?page=1&limit=200", { const response = await fetch(`${API_V1_BASE_URL}/companies?limit=200`, {
headers: authHeaders(),
cache: "no-store", cache: "no-store",
}); });
const data = await response.json(); const data = await response.json();
if (!response.ok || !data.success) { if (!response.ok) {
throw new Error(data.error || "Erro ao carregar empresas"); throw new Error(data.message || "Erro ao carregar empresas");
} }
setEmpresas(Array.isArray(data.documents) ? data.documents : []); setEmpresas(Array.isArray(data.tenants) ? data.tenants : []);
} catch (err) { } catch (err) {
const message = err instanceof Error ? err.message : "Erro ao carregar empresas"; const message = err instanceof Error ? err.message : "Erro ao carregar empresas";
setError(message); setError(message);
@ -63,23 +73,12 @@ export default function EmpresaNovoPage() {
const empresasFiltradas = useMemo(() => { const empresasFiltradas = useMemo(() => {
const term = searchTerm.trim().toLowerCase(); const term = searchTerm.trim().toLowerCase();
if (!term) return empresas;
if (!term) { return empresas.filter((e) =>
return empresas; [e.corporate_name, e.cnpj, e.city, e.state]
}
return empresas.filter((empresa) => {
const empresaData = empresa as unknown as Record<string, string | undefined>;
const values = [
empresaData["nome-fantasia"],
empresaData["razao-social"],
empresaData.cnpj,
]
.filter(Boolean) .filter(Boolean)
.map((value) => String(value).toLowerCase()); .some((v) => v.toLowerCase().includes(term))
);
return values.some((value) => value.includes(term));
});
}, [empresas, searchTerm]); }, [empresas, searchTerm]);
const handleSave = async (formData: EmpresaFormData) => { const handleSave = async (formData: EmpresaFormData) => {
@ -87,20 +86,26 @@ export default function EmpresaNovoPage() {
setError(null); setError(null);
try { try {
const isEdicao = Boolean(empresaEditando?.$id); const isEdicao = Boolean(empresaEditando?.id);
const url = isEdicao ? `/api/empresas/${empresaEditando!.$id}` : "/api/empresas"; const url = isEdicao
? `${API_V1_BASE_URL}/companies/${empresaEditando!.id}`
: `${API_V1_BASE_URL}/companies`;
const method = isEdicao ? "PATCH" : "POST"; const method = isEdicao ? "PATCH" : "POST";
const response = await fetch(url, { const response = await fetch(url, {
method, method,
headers: { headers: authHeaders(),
"Content-Type": "application/json", body: JSON.stringify({
}, cnpj: formData.cnpj.replace(/\D/g, ""),
body: JSON.stringify(toPayload(formData)), corporate_name: formData.corporate_name,
category: formData.category || "farmacia",
license_number: formData.license_number || "PENDING",
}),
}); });
const data = await response.json().catch(() => ({})); const data = await response.json().catch(() => ({}));
if (!response.ok || !data.success) { if (!response.ok) {
throw new Error(data.error || "Erro ao salvar empresa"); throw new Error(data.message || "Erro ao salvar empresa");
} }
setModalOpen(false); setModalOpen(false);
@ -117,13 +122,14 @@ export default function EmpresaNovoPage() {
const handleDelete = async (id: string) => { const handleDelete = async (id: string) => {
try { try {
const response = await fetch(`/api/empresas/${id}`, { const response = await fetch(`${API_V1_BASE_URL}/companies/${id}`, {
method: "DELETE", method: "DELETE",
headers: authHeaders(),
}); });
const data = await response.json().catch(() => ({}));
if (!response.ok || data.success === false) { if (!response.ok && response.status !== 204) {
throw new Error(data.error || "Erro ao excluir empresa"); const data = await response.json().catch(() => ({}));
throw new Error(data.message || "Erro ao excluir empresa");
} }
await carregarEmpresas(); await carregarEmpresas();
@ -155,7 +161,7 @@ export default function EmpresaNovoPage() {
type="text" type="text"
value={searchTerm} value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)} onChange={(event) => setSearchTerm(event.target.value)}
placeholder="Buscar por nome fantasia, razão social ou CNPJ" placeholder="Buscar por razão social, CNPJ ou cidade"
className="flex-1 rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200" className="flex-1 rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200"
/> />
<button <button
@ -182,7 +188,6 @@ export default function EmpresaNovoPage() {
<EmpresaList <EmpresaList
empresas={empresasFiltradas} empresas={empresasFiltradas}
loading={loading} loading={loading}
error={error}
onEdit={(empresa) => { onEdit={(empresa) => {
setEmpresaEditando(empresa); setEmpresaEditando(empresa);
setModalOpen(true); setModalOpen(true);
@ -199,11 +204,9 @@ export default function EmpresaNovoPage() {
setEmpresaEditando(null); setEmpresaEditando(null);
}} }}
onSave={handleSave} onSave={handleSave}
empresa={empresaEditando || undefined} empresa={empresaEditando ?? undefined}
loading={loading} loading={loading}
/> />
</main> </main>
); );
} }

View file

@ -1,105 +1,92 @@
import React from 'react'; import React from "react";
import { Models } from '@/lib/appwrite'; import { Company } from "@/app/dashboard/empresa-novo/page";
import ListHeader from './ListHeader';
import DataTable, { Column } from './DataTable';
import Pagination from './Pagination';
import TableActions from './TableActions';
interface EmpresaListProps { interface EmpresaListProps {
empresas: Models.Document[]; empresas: Company[];
loading: boolean; loading: boolean;
error: string | null; onEdit: (empresa: Company) => void;
onEdit: (empresa: Models.Document) => void;
onDelete: (id: string) => Promise<boolean>; onDelete: (id: string) => Promise<boolean>;
} }
const EmpresaList: React.FC<EmpresaListProps> = ({ const EmpresaList: React.FC<EmpresaListProps> = ({ empresas, loading, onEdit, onDelete }) => {
empresas, const handleDelete = async (empresa: Company) => {
loading, const confirm_msg = `Tem certeza que deseja deletar "${empresa.corporate_name}"?\n\nEsta ação não pode ser desfeita.`;
error, if (!window.confirm(confirm_msg)) return;
onEdit, await onDelete(empresa.id);
onDelete,
}) => {
const handleDelete = async (id: string) => {
// Validar se o ID foi fornecido
if (!id) {
alert('❌ Erro: ID da empresa não encontrado.');
return;
}
// Encontrar a empresa na lista para mostrar informações no confirm
const empresa = empresas.find(emp => emp.$id === id);
if (!empresa) {
console.warn('⚠️ Empresa não encontrada na lista:', id);
alert('❌ Erro: Empresa não encontrada na lista. Pode já ter sido excluída.');
return;
}
const nomeEmpresa = (empresa as any)['nome-fantasia'] || (empresa as any)['razao-social'] || 'Empresa sem nome';
const confirmMessage = `⚠️ Tem certeza que deseja deletar a empresa "${nomeEmpresa}"?\n\nEsta ação não pode ser desfeita.`;
if (confirm(confirmMessage)) {
console.log('🗑️ Iniciando exclusão da empresa:', { id, nome: nomeEmpresa });
try {
await onDelete(id);
console.log('✅ Exclusão concluída com sucesso');
} catch (error) {
console.error('❌ Erro durante a exclusão:', error);
alert('❌ Erro ao excluir a empresa. Tente novamente.');
}
}
}; };
const columns: Column<Models.Document>[] = [ if (loading) {
{ key: 'nome-fantasia', header: 'Nome Fantasia' }, return (
{ key: 'razao-social', header: 'Razão Social' }, <div className="flex items-center justify-center py-16 text-slate-500 text-sm">
{ key: 'cnpj', header: 'CNPJ' }, Carregando empresas...
{ key: '$id', header: 'ID' }, </div>
]; );
}
const totalEmpresas = empresas.length; if (empresas.length === 0) {
return (
<div className="flex items-center justify-center py-16 text-slate-400 text-sm">
Nenhuma empresa encontrada.
</div>
);
}
return ( return (
<div className="container mx-auto px-4 py-8"> <div className="overflow-x-auto">
<ListHeader title="Lista de Empresas"> <table className="w-full text-sm">
</ListHeader> <thead>
<tr className="border-b border-slate-200 text-left text-xs font-medium uppercase tracking-wider text-slate-500">
{error && ( <th className="px-6 py-4">Razão Social</th>
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"> <th className="px-6 py-4">CNPJ</th>
{error} <th className="px-6 py-4">Categoria</th>
<th className="px-6 py-4">Cidade / UF</th>
<th className="px-6 py-4">Verificada</th>
<th className="px-6 py-4 text-right">Ações</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-100">
{empresas.map((empresa) => (
<tr key={empresa.id} className="hover:bg-slate-50 transition-colors">
<td className="px-6 py-4 font-medium text-slate-900">{empresa.corporate_name}</td>
<td className="px-6 py-4 text-slate-600">{empresa.cnpj}</td>
<td className="px-6 py-4 text-slate-600 capitalize">{empresa.category}</td>
<td className="px-6 py-4 text-slate-600">
{[empresa.city, empresa.state].filter(Boolean).join(" / ") || "—"}
</td>
<td className="px-6 py-4">
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
empresa.is_verified
? "bg-green-100 text-green-700"
: "bg-yellow-100 text-yellow-700"
}`}
>
{empresa.is_verified ? "Sim" : "Não"}
</span>
</td>
<td className="px-6 py-4 text-right">
<div className="flex justify-end gap-2">
<button
onClick={() => onEdit(empresa)}
className="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 transition"
>
Editar
</button>
<button
onClick={() => handleDelete(empresa)}
className="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 transition"
>
Excluir
</button>
</div> </div>
)} </td>
</tr>
{loading ? ( ))}
<div className="flex justify-center items-center min-h-screen"> </tbody>
<div className="text-lg">Carregando empresas...</div> </table>
<div className="border-t border-slate-100 px-6 py-3 text-xs text-slate-400">
{empresas.length} empresa{empresas.length !== 1 ? "s" : ""} encontrada{empresas.length !== 1 ? "s" : ""}
</div> </div>
) : (
<>
<DataTable
columns={columns}
data={empresas}
actions={(empresa) => (
<TableActions
onEdit={() => onEdit(empresa)}
onDelete={() => handleDelete(empresa.$id)}
/>
)}
/>
<div className="mt-4 flex justify-between items-center">
<div className="text-sm text-gray-600">
{totalEmpresas > 0 ? (
<>Mostrando 1 - {totalEmpresas} de {totalEmpresas} empresas</>
) : (
'Total de empresas: 0'
)}
</div>
<Pagination page={1} total={1} onPrev={() => {}} onNext={() => {}} />
</div>
</>
)}
</div> </div>
); );
}; };

View file

@ -1,41 +1,47 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { X, Save, RefreshCw } from 'lucide-react'; import { X, Save, RefreshCw } from "lucide-react";
import { Company, EmpresaFormData } from "@/app/dashboard/empresa-novo/page";
interface EmpresaModalProps { interface EmpresaModalProps {
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
onSave: (empresa: any) => Promise<void>; onSave: (empresa: EmpresaFormData) => Promise<void>;
empresa?: any; empresa?: Company;
loading?: boolean; loading?: boolean;
} }
const CATEGORIES = [
{ value: "farmacia", label: "Farmácia" },
{ value: "distribuidora", label: "Distribuidora" },
{ value: "platform", label: "Plataforma" },
];
const emptyForm: EmpresaFormData = {
cnpj: "",
corporate_name: "",
category: "farmacia",
license_number: "",
};
const EmpresaModal: React.FC<EmpresaModalProps> = ({ const EmpresaModal: React.FC<EmpresaModalProps> = ({
isOpen, isOpen,
onClose, onClose,
onSave, onSave,
empresa, empresa,
loading = false loading = false,
}) => { }) => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState<EmpresaFormData>(emptyForm);
cnpj: '',
razaoSocial: '',
nomeFantasia: ''
});
// Carregar dados da empresa quando for edição
useEffect(() => { useEffect(() => {
if (empresa) { if (empresa) {
setFormData({ setFormData({
cnpj: (empresa as any).cnpj || '', cnpj: empresa.cnpj ?? "",
razaoSocial: (empresa as any)['razao-social'] || '', corporate_name: empresa.corporate_name ?? "",
nomeFantasia: (empresa as any)['nome-fantasia'] || '' category: empresa.category ?? "farmacia",
license_number: empresa.license_number ?? "",
}); });
} else { } else {
setFormData({ setFormData(emptyForm);
cnpj: '',
razaoSocial: '',
nomeFantasia: ''
});
} }
}, [empresa]); }, [empresa]);
@ -44,44 +50,38 @@ const EmpresaModal: React.FC<EmpresaModalProps> = ({
await onSave(formData); await onSave(formData);
}; };
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = e.target; const { name, value } = e.target;
setFormData(prev => ({ setFormData((prev) => ({ ...prev, [name]: value }));
...prev,
[name]: value
}));
}; };
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50" <div
onClick={onClose}> className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-center justify-center z-50"
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={onClose}
onClick={(e) => e.stopPropagation()}> >
{/* Header do Modal */} <div
<div className="flex items-center justify-between p-6 border-b border-gray-200"> className="bg-white rounded-2xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"
<h2 className="text-xl font-semibold text-gray-900"> onClick={(e) => e.stopPropagation()}
{empresa ? 'Editar Empresa' : 'Nova Empresa'} >
<div className="flex items-center justify-between p-6 border-b border-slate-200">
<h2 className="text-lg font-semibold text-slate-900">
{empresa ? "Editar Empresa" : "Nova Empresa"}
</h2> </h2>
<button <button
onClick={onClose} onClick={onClose}
className="text-gray-400 hover:text-gray-600 transition-colors" className="text-slate-400 hover:text-slate-600 transition-colors"
disabled={loading} disabled={loading}
> >
<X className="w-6 h-6" /> <X className="w-5 h-5" />
</button> </button>
</div> </div>
{/* Conteúdo do Modal */}
<form onSubmit={handleSubmit} className="p-6 space-y-4"> <form onSubmit={handleSubmit} className="p-6 space-y-4">
<p className="text-gray-600 text-sm mb-6">
{empresa ? 'Atualize os dados da empresa.' : 'Cadastre uma nova empresa na plataforma.'}
</p>
{/* Campo CNPJ */}
<div> <div>
<label htmlFor="cnpj" className="block text-sm font-medium text-gray-700 mb-2"> <label htmlFor="cnpj" className="block text-sm font-medium text-slate-700 mb-1">
CNPJ * CNPJ *
</label> </label>
<input <input
@ -94,61 +94,75 @@ const EmpresaModal: React.FC<EmpresaModalProps> = ({
maxLength={18} maxLength={18}
required required
disabled={loading} disabled={loading}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors disabled:bg-gray-50 disabled:opacity-50" className="w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200 disabled:opacity-50"
/> />
</div> </div>
{/* Campo Razão Social */}
<div> <div>
<label htmlFor="razaoSocial" className="block text-sm font-medium text-gray-700 mb-2"> <label htmlFor="corporate_name" className="block text-sm font-medium text-slate-700 mb-1">
Razão Social * Razão Social *
</label> </label>
<input <input
type="text" type="text"
id="razaoSocial" id="corporate_name"
name="razaoSocial" name="corporate_name"
value={formData.razaoSocial} value={formData.corporate_name}
onChange={handleChange} onChange={handleChange}
placeholder="Razão Social da Empresa" placeholder="Razão Social da Empresa"
required required
disabled={loading} disabled={loading}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors disabled:bg-gray-50 disabled:opacity-50" className="w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200 disabled:opacity-50"
/> />
</div> </div>
{/* Campo Nome Fantasia */}
<div> <div>
<label htmlFor="nomeFantasia" className="block text-sm font-medium text-gray-700 mb-2"> <label htmlFor="category" className="block text-sm font-medium text-slate-700 mb-1">
Nome Fantasia * Categoria
</label>
<select
id="category"
name="category"
value={formData.category}
onChange={handleChange}
disabled={loading}
className="w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200 disabled:opacity-50"
>
{CATEGORIES.map((c) => (
<option key={c.value} value={c.value}>
{c.label}
</option>
))}
</select>
</div>
<div>
<label htmlFor="license_number" className="block text-sm font-medium text-slate-700 mb-1">
Número de Licença / Alvará
</label> </label>
<input <input
type="text" type="text"
id="nomeFantasia" id="license_number"
name="nomeFantasia" name="license_number"
value={formData.nomeFantasia} value={formData.license_number}
onChange={handleChange} onChange={handleChange}
placeholder="Nome Fantasia da Empresa" placeholder="Ex: CRF-SP-12345"
required
disabled={loading} disabled={loading}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors disabled:bg-gray-50 disabled:opacity-50" className="w-full rounded-xl border border-slate-300 px-3 py-2.5 text-sm text-slate-900 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200 disabled:opacity-50"
/> />
</div> </div>
{/* Botões */} <div className="flex gap-3 pt-2">
<div className="flex space-x-3 pt-4">
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="flex-1 bg-gradient-to-r from-blue-600 to-green-600 text-white py-2.5 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-green-700 disabled:opacity-50 transition-all duration-200 flex items-center justify-center gap-2" className="flex-1 rounded-xl bg-slate-900 py-2.5 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-50 transition flex items-center justify-center gap-2"
> >
{loading ? ( {loading ? (
<> <>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div> <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
Processando... Processando...
</> </>
) : ( ) : empresa ? (
<>
{empresa ? (
<> <>
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
Atualizar Atualizar
@ -159,15 +173,13 @@ const EmpresaModal: React.FC<EmpresaModalProps> = ({
Salvar Salvar
</> </>
)} )}
</>
)}
</button> </button>
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={loading} disabled={loading}
className="px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50" className="px-4 py-2.5 rounded-xl border border-slate-300 text-sm text-slate-700 hover:bg-slate-50 disabled:opacity-50 transition"
> >
Cancelar Cancelar
</button> </button>