60155bdf56
Backend: - Implementa rota e serviço de importação em lote (`/api/import/fot`). - Adiciona suporte a "Upsert" para atualizar registros existentes sem duplicar. - Corrige e migra schema do banco: ajuste na precisão de valores monetários e correções de sintaxe. Frontend: - Cria página de Importação de Dados com visualização de log e tratamento de erros. - Implementa melhorias de UX nas tabelas (Importação e Gestão de FOT): - Contadores de total de registros. - Funcionalidade "Drag-to-Scroll" (arrastar para rolar). - Barra de rolagem superior sincronizada na tabela de gestão. - Corrige bug de "tela branca" ao filtrar dados vazios na gestão.
92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { SimpleCrud } from "./SimpleCrud";
|
|
import { PriceTableEditor } from "./PriceTableEditor";
|
|
import { ImportData } from "../../pages/ImportData";
|
|
import { Building2, GraduationCap, Calendar, DollarSign, Database, Briefcase, Upload } from "lucide-react";
|
|
|
|
export const SystemSettings: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<"empresas" | "cursos" | "tipos_evento" | "anos_formatura" | "precos" | "funcoes" | "importacao">("empresas");
|
|
|
|
const tabs = [
|
|
{ id: "empresas", label: "Empresas", icon: Building2 },
|
|
{ id: "cursos", label: "Cursos", icon: GraduationCap },
|
|
{ id: "tipos_evento", label: "Tipos de Evento", icon: Calendar },
|
|
{ id: "anos_formatura", label: "Anos de Formatura", icon: Database },
|
|
{ id: "funcoes", label: "Funções", icon: Briefcase },
|
|
{ id: "precos", label: "Tabela de Preços", icon: DollarSign },
|
|
{ id: "importacao", label: "Importação", icon: Upload },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2 overflow-x-auto">
|
|
<nav className="flex space-x-2">
|
|
{tabs.map(tab => {
|
|
const Icon = tab.icon;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as any)}
|
|
className={`
|
|
flex items-center px-4 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap
|
|
${activeTab === tab.id
|
|
? "bg-brand-gold text-white"
|
|
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}
|
|
`}
|
|
>
|
|
<Icon size={18} className="mr-2" />
|
|
{tab.label}
|
|
</button>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="animate-in fade-in duration-300 slide-in-from-bottom-2">
|
|
{activeTab === "empresas" && (
|
|
<SimpleCrud
|
|
title="Gerenciar Empresas"
|
|
endpoint="/api/empresas"
|
|
columns={[{ key: "nome", label: "Nome da Empresa" }]}
|
|
/>
|
|
)}
|
|
{activeTab === "cursos" && (
|
|
<SimpleCrud
|
|
title="Gerenciar Cursos"
|
|
endpoint="/api/cursos"
|
|
columns={[{ key: "nome", label: "Nome do Curso" }]}
|
|
/>
|
|
)}
|
|
{activeTab === "tipos_evento" && (
|
|
<SimpleCrud
|
|
title="Tipos de Evento"
|
|
endpoint="/api/tipos-eventos"
|
|
columns={[{ key: "nome", label: "Tipo de Evento" }]}
|
|
/>
|
|
)}
|
|
{activeTab === "anos_formatura" && (
|
|
<SimpleCrud
|
|
title="Anos de Formatura"
|
|
endpoint="/api/anos-formaturas"
|
|
columns={[{ key: "ano_semestre", label: "Ano/Semestre (Ex: 2024.1)" }]}
|
|
/>
|
|
)}
|
|
{activeTab === "funcoes" && (
|
|
<SimpleCrud
|
|
title="Gerenciar Funções Profissionais"
|
|
endpoint="/api/funcoes"
|
|
columns={[{ key: "nome", label: "Nome da Função" }]}
|
|
/>
|
|
)}
|
|
{activeTab === "precos" && (
|
|
<PriceTableEditor />
|
|
)}
|
|
{activeTab === "importacao" && (
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<ImportData />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|