import React, { useState, useEffect, useRef } from 'react';
import {
BarChart3,
Building2,
FileText,
ClipboardList,
PieChart,
Settings,
LogOut,
Bell,
Search,
Plus,
FileCheck,
AlertCircle,
Clock,
CheckCircle,
AlertTriangle,
XCircle,
ChevronRight,
Calendar,
User,
Home,
MessageSquare,
X,
Send,
Minimize2,
Maximize2,
Bot,
RefreshCw,
HelpCircle
} from 'lucide-react';
const AlvaraControlSystem = () => {
// Estado para armazenar dados do dashboard
const [activeTab, setActiveTab] = useState('visao-geral');
const [notifications, setNotifications] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
const [currentPage, setCurrentPage] = useState('dashboard');
// Estados para o chatbot
const [isChatOpen, setIsChatOpen] = useState(false);
const [chatMessages, setChatMessages] = useState([]);
const [userInput, setUserInput] = useState('');
const [isTyping, setIsTyping] = useState(false);
const [unreadMessages, setUnreadMessages] = useState(0);
const chatEndRef = useRef(null);
// Dados simulados
const dashboardData = {
totalEmpresas: 128,
crescimentoEmpresas: '+3 no último mês',
alvarasValidos: 342,
percentualValidos: '87% do total',
alvarasVencer: 28,
diasVencimento: 'Próximos 30 dias',
alvarasVencidos: 12,
statusVencidos: 'Requer atenção imediata'
};
const processosRecentes = [
{
id: 1,
empresa: 'Empresa ABC Ltda',
tipo: 'Alvará de Funcionamento',
data: '12/03/2025',
status: 'Em análise'
},
{
id: 2,
empresa: 'Comércio XYZ',
tipo: 'Alvará Sanitário',
data: '28/02/2025',
status: 'Documentação pendente'
},
{
id: 3,
empresa: 'Indústria 123',
tipo: 'Alvará dos Bombeiros',
data: '15/02/2025',
status: 'Aguardando vistoria'
},
{
id: 4,
empresa: 'Consultoria & Cia',
tipo: 'Alvará Ambiental',
data: '05/02/2025',
status: 'Concluído'
}
];
const distribuicaoAlvaras = [
{
tipo: 'Alvará de Funcionamento',
total: 156,
validos: 142,
aVencer: 10,
vencidos: 4
},
{
tipo: 'Alvará Sanitário',
total: 98,
validos: 82,
aVencer: 11,
vencidos: 5
},
{
tipo: 'Alvará dos Bombeiros',
total: 112,
validos: 105,
aVencer: 5,
vencidos: 2
},
{
tipo: 'Alvará Ambiental',
total: 26,
validos: 23,
aVencer: 2,
vencidos: 1
}
];
// Dados de empresas para a página de empresas
const empresasData = [
{
id: 1,
nome: 'Farmácia Saúde Total',
razaoSocial: 'Saúde Total Farmacêutica Ltda',
cnpj: '12.345.678/0001-90',
status: 'A vencer',
alvaras: [
{ tipo: 'Funcionamento', status: 'Válido', vencimento: '15/05/2025' },
{ tipo: 'Sanitário', status: 'A vencer', vencimento: '10/06/2023' },
{ tipo: 'Bombeiros', status: 'Válido', vencimento: '22/09/2024' },
{ tipo: 'Ambiental', status: 'Válido', vencimento: '30/11/2024' }
]
},
{
id: 2,
nome: 'Laboratório Análises Clínicas',
razaoSocial: 'Laboratório de Análises Clínicas Silva Ltda',
cnpj: '23.456.789/0001-01',
status: 'Vencido',
alvaras: [
{ tipo: 'Funcionamento', status: 'Válido', vencimento: '05/08/2024' },
{ tipo: 'Sanitário', status: 'Válido', vencimento: '12/10/2024' },
{ tipo: 'Bombeiros', status: 'Vencido', vencimento: '08/05/2023' },
{ tipo: 'Ambiental', status: 'Válido', vencimento: '15/07/2024' }
]
},
{
id: 3,
nome: 'Auto Escola Silva',
razaoSocial: 'Silva Formação de Condutores Ltda',
cnpj: '34.567.890/0001-12',
status: 'Em dia',
alvaras: [
{ tipo: 'Funcionamento', status: 'Válido', vencimento: '20/12/2024' },
{ tipo: 'Bombeiros', status: 'Válido', vencimento: '18/11/2024' }
]
},
{
id: 4,
nome: 'Mercado Central',
razaoSocial: 'Mercado Central de Alimentos Ltda',
cnpj: '45.678.901/0001-23',
status: 'Em processo',
alvaras: [
{ tipo: 'Funcionamento', status: 'Em processo', vencimento: '25/07/2023' },
{ tipo: 'Sanitário', status: 'Válido', vencimento: '30/09/2024' },
{ tipo: 'Bombeiros', status: 'Válido', vencimento: '15/08/2024' },
{ tipo: 'Ambiental', status: 'Válido', vencimento: '10/10/2024' }
]
},
{
id: 5,
nome: 'Clínica Bem Estar',
razaoSocial: 'Clínica Médica Bem Estar Ltda',
cnpj: '56.789.012/0001-34',
status: 'Em dia',
alvaras: [
{ tipo: 'Funcionamento', status: 'Válido', vencimento: '12/11/2024' },
{ tipo: 'Sanitário', status: 'Válido', vencimento: '05/12/2024' },
{ tipo: 'Bombeiros', status: 'Válido', vencimento: '20/10/2024' },
{ tipo: 'Ambiental', status: 'Válido', vencimento: '15/09/2024' }
]
}
];
// Dados de alvarás para a página de alvarás
const alvarasData = [
{
id: 1,
empresa: 'Farmácia Saúde Total',
tipo: 'Alvará Sanitário',
numero: 'SAN-2023-1234',
emissao: '10/06/2022',
vencimento: '10/06/2023',
status: 'A vencer',
diasRestantes: 15
},
{
id: 2,
empresa: 'Laboratório Análises Clínicas',
tipo: 'Alvará dos Bombeiros',
numero: 'BOM-2022-5678',
emissao: '08/05/2022',
vencimento: '08/05/2023',
status: 'Vencido',
diasRestantes: -5
},
{
id: 3,
empresa: 'Mercado Central',
tipo: 'Alvará de Funcionamento',
numero: 'FUN-2023-9012',
emissao: '25/07/2022',
vencimento: '25/07/2023',
status: 'Em processo',
diasRestantes: 60
},
{
id: 4,
empresa: 'Auto Escola Silva',
tipo: 'Alvará de Funcionamento',
numero: 'FUN-2023-3456',
emissao: '20/12/2022',
vencimento: '20/12/2024',
status: 'Válido',
diasRestantes: 540
},
{
id: 5,
empresa: 'Clínica Bem Estar',
tipo: 'Alvará Sanitário',
numero: 'SAN-2023-7890',
emissao: '05/12/2022',
vencimento: '05/12/2024',
status: 'Válido',
diasRestantes: 525
}
];
// Dados de processos para a página de processos
const processosData = [
{
id: 1,
empresa: 'Farmácia Saúde Total',
tipo: 'Renovação de Alvará Sanitário',
dataAbertura: '15/05/2023',
responsavel: 'Maria Silva',
status: 'Em análise',
etapas: [
{ nome: 'Submissão de documentos', status: 'Concluído', data: '15/05/2023' },
{ nome: 'Análise documental', status: 'Em andamento', data: '20/05/2023' },
{ nome: 'Vistoria técnica', status: 'Pendente', data: null },
{ nome: 'Emissão de alvará', status: 'Pendente', data: null }
]
},
{
id: 2,
empresa: 'Laboratório Análises Clínicas',
tipo: 'Renovação de Alvará dos Bombeiros',
dataAbertura: '01/05/2023',
responsavel: 'João Oliveira',
status: 'Aguardando vistoria',
etapas: [
{ nome: 'Submissão de documentos', status: 'Concluído', data: '01/05/2023' },
{ nome: 'Análise documental', status: 'Concluído', data: '10/05/2023' },
{ nome: 'Vistoria técnica', status: 'Agendada', data: '25/05/2023' },
{ nome: 'Emissão de alvará', status: 'Pendente', data: null }
]
},
{
id: 3,
empresa: 'Mercado Central',
tipo: 'Emissão de Alvará de Funcionamento',
dataAbertura: '10/04/2023',
responsavel: 'Ana Santos',
status: 'Documentação pendente',
etapas: [
{ nome: 'Submissão de documentos', status: 'Incompleto', data: '10/04/2023' },
{ nome: 'Análise documental', status: 'Pendente', data: null },
{ nome: 'Vistoria técnica', status: 'Pendente', data: null },
{ nome: 'Emissão de alvará', status: 'Pendente', data: null }
]
},
{
id: 4,
empresa: 'Consultoria & Cia',
tipo: 'Renovação de Alvará Ambiental',
dataAbertura: '05/03/2023',
responsavel: 'Carlos Mendes',
status: 'Concluído',
etapas: [
{ nome: 'Submissão de documentos', status: 'Concluído', data: '05/03/2023' },
{ nome: 'Análise documental', status: 'Concluído', data: '15/03/2023' },
{ nome: 'Vistoria técnica', status: 'Concluído', data: '25/03/2023' },
{ nome: 'Emissão de alvará', status: 'Concluído', data: '05/04/2023' }
]
}
];
// Dados de relatórios para a página de relatórios
const relatoriosData = [
{
id: 1,
nome: 'Relatório de Alvarás Vencidos',
descricao: 'Lista de todos os alvarás vencidos no último mês',
dataCriacao: '01/05/2023',
formato: 'PDF',
tamanho: '1.2 MB'
},
{
id: 2,
nome: 'Relatório de Alvarás a Vencer',
descricao: 'Lista de alvarás que vencem nos próximos 30 dias',
dataCriacao: '01/05/2023',
formato: 'XLSX',
tamanho: '0.8 MB'
},
{
id: 3,
nome: 'Relatório de Processos em Andamento',
descricao: 'Status atual de todos os processos abertos',
dataCriacao: '30/04/2023',
formato: 'PDF',
tamanho: '2.1 MB'
},
{
id: 4,
nome: 'Relatório de Desempenho Mensal',
descricao: 'Métricas de desempenho do mês de abril',
dataCriacao: '01/05/2023',
formato: 'PPTX',
tamanho: '3.5 MB'
},
{
id: 5,
nome: 'Relatório de Empresas por Setor',
descricao: 'Distribuição de empresas por setor de atividade',
dataCriacao: '28/04/2023',
formato: 'PDF',
tamanho: '1.5 MB'
}
];
// Dados de configurações para a página de configurações
const configuracoesData = {
notificacoes: {
emailAlertaVencimento: true,
diasAntecedenciaAlerta: 30,
notificacoesApp: true,
resumoDiario: true,
resumoSemanal: false
},
aparencia: {
tema: 'claro',
corPrimaria: '#1e40af',
densidadeInterface: 'normal',
tamanhoFonte: 'medio'
},
conta: {
nome: 'Escritório Contábil',
email: 'contato@escritoriocontabil.com.br',
telefone: '(11) 1234-5678',
plano: 'Profissional',
validadePlano: '31/12/2023'
},
integracao: {
apiAtiva: true,
webhooksAtivos: false,
exportacaoAutomatica: true,
sincronizacaoCalendario: true
}
};
// Simular carregamento de notificações
useEffect(() => {
const mockNotifications = [
{
id: 1,
tipo: 'alerta',
mensagem: 'Alvará Sanitário da Farmácia Saúde Total venceu há 3 dias.',
data: 'Hoje, 14:30',
empresa: 'Farmácia Saúde Total',
alvaraId: 1
},
{
id: 2,
tipo: 'info',
mensagem: 'Notas fiscais da Mercado Central foram coletadas e processadas.',
data: 'Hoje, 09:30',
empresa: 'Mercado Central'
},
{
id: 3,
tipo: 'alerta',
mensagem: 'Alvará de Bombeiros do Laboratório Análises Clínicas vence em 15 dias.',
data: 'Ontem, 15:22',
empresa: 'Laboratório Análises Clínicas',
alvaraId: 2
}
];
setNotifications(mockNotifications);
// Inicializar o chatbot com uma mensagem de boas-vindas
setChatMessages([
{
id: 1,
sender: 'bot',
message: 'Olá! Sou o assistente virtual do AlvaráControl. Como posso ajudar você hoje?',
timestamp: new Date().toISOString(),
suggestions: ['Ver alvarás a vencer', 'Documentos pendentes', 'Como renovar um alvará?']
}
]);
// Simular uma notificação proativa do chatbot após 3 segundos
setTimeout(() => {
const newBotMessage = {
id: Date.now(),
sender: 'bot',
message: 'Notei que o Alvará Sanitário da Farmácia Saúde Total venceu há 3 dias. Gostaria de iniciar o processo de renovação?',
timestamp: new Date().toISOString(),
suggestions: ['Iniciar renovação', 'Ver detalhes do alvará', 'Lembrar mais tarde']
};
setChatMessages(prev => [...prev, newBotMessage]);
setUnreadMessages(prev => prev + 1);
}, 3000);
}, []);
// Rolar para o final do chat quando novas mensagens são adicionadas
useEffect(() => {
if (chatEndRef.current) {
chatEndRef.current.scrollIntoView({ behavior: 'smooth' });
}
// Se o chat estiver aberto, zerar contador de mensagens não lidas
if (isChatOpen) {
setUnreadMessages(0);
}
}, [chatMessages, isChatOpen]);
// Função para renderizar o status com a cor apropriada
const renderStatus = (status) => {
const statusMap = {
'Em análise': { color: 'bg-blue-100 text-blue-800', icon: },
'Documentação pendente': { color: 'bg-yellow-100 text-yellow-800', icon: },
'Aguardando vistoria': { color: 'bg-orange-100 text-orange-800', icon: },
'Concluído': { color: 'bg-green-100 text-green-800', icon: },
'Válido': { color: 'bg-green-100 text-green-800', icon: },
'A vencer': { color: 'bg-yellow-100 text-yellow-800', icon: },
'Vencido': { color: 'bg-red-100 text-red-800', icon: },
'Em processo': { color: 'bg-blue-100 text-blue-800', icon: },
'Em dia': { color: 'bg-green-100 text-green-800', icon: }
};
const statusStyle = statusMap[status] || { color: 'bg-gray-100 text-gray-800', icon: null };
return (
{statusStyle.icon}
{status}
);
};
// Componente para o card de métrica
const MetricCard = ({ title, value, subtitle, icon, color }) => (
{title}
{icon}
{value}
{subtitle}
);
// Componente para a barra de progresso
const ProgressBar = ({ validos, aVencer, vencidos, total }) => {
const validosPercent = (validos / total) * 100;
const aVencerPercent = (aVencer / total) * 100;
const vencidosPercent = (vencidos / total) * 100;
return (
);
};
// Função para enviar mensagem do usuário para o chatbot
const handleSendMessage = () => {
if (!userInput.trim()) return;
// Adicionar mensagem do usuário ao chat
const userMessage = {
id: Date.now(),
sender: 'user',
message: userInput,
timestamp: new Date().toISOString()
};
setChatMessages(prev => [...prev, userMessage]);
setUserInput('');
setIsTyping(true);
// Simular resposta do chatbot após um pequeno delay
setTimeout(() => {
// Usar RAG para gerar uma resposta contextual
const botResponse = generateBotResponse(userInput);
setChatMessages(prev => [...prev, botResponse]);
setIsTyping(false);
}, 1000);
};
// Função para gerar resposta do chatbot usando RAG simulado
const generateBotResponse = (query) => {
// Palavras-chave para identificar a intenção do usuário
const queryLower = query.toLowerCase();
// Resposta padrão caso nenhuma correspondência seja encontrada
let response = {
id: Date.now(),
sender: 'bot',
message: 'Desculpe, não entendi sua pergunta. Poderia reformular?',
timestamp: new Date().toISOString(),
suggestions: ['Ver alvarás a vencer', 'Documentos pendentes', 'Como renovar um alvará?']
};
// Verificar intenções relacionadas a alvarás a vencer
if (queryLower.includes('vencer') || queryLower.includes('próximo') || queryLower.includes('expirar')) {
response = {
id: Date.now(),
sender: 'bot',
message: `Você tem ${dashboardData.alvarasVencer} alvarás que vencem nos próximos 30 dias. O mais urgente é o Alvará Sanitário da Farmácia Saúde Total, que vence em 15 dias.`,
timestamp: new Date().toISOString(),
suggestions: ['Ver todos os alvarás a vencer', 'Iniciar renovação', 'Agendar lembrete']
};
}
// Verificar intenções relacionadas a alvarás vencidos
else if (queryLower.includes('vencido') || queryLower.includes('expirado')) {
response = {
id: Date.now(),
sender: 'bot',
message: `Você tem ${dashboardData.alvarasVencidos} alvarás vencidos que requerem atenção imediata. O mais crítico é o Alvará de Bombeiros do Laboratório Análises Clínicas, vencido há 5 dias.`,
timestamp: new Date().toISOString(),
suggestions: ['Ver alvarás vencidos', 'Iniciar renovação urgente', 'Verificar penalidades']
};
}
// Verificar intenções relacionadas a renovação
else if (queryLower.includes('renova') || queryLower.includes('atualiza')) {
response = {
id: Date.now(),
sender: 'bot',
message: 'Para renovar um alvará, você precisa iniciar um processo de renovação pelo menos 30 dias antes do vencimento. Você precisa de documentos específicos dependendo do tipo de alvará.',
timestamp: new Date().toISOString(),
suggestions: ['Iniciar renovação', 'Documentos necessários', 'Custos de renovação']
};
}
// Verificar intenções relacionadas a documentos
else if (queryLower.includes('documento') || queryLower.includes('pendente')) {
response = {
id: Date.now(),
sender: 'bot',
message: 'Você tem documentos pendentes para o processo de Alvará de Funcionamento do Mercado Central. É necessário enviar: Comprovante de pagamento da taxa, Certificado de conformidade e Declaração de atividades.',
timestamp: new Date().toISOString(),
suggestions: ['Enviar documentos', 'Verificar requisitos', 'Solicitar prazo adicional']
};
}
// Verificar intenções relacionadas a processos
else if (queryLower.includes('processo') || queryLower.includes('andamento')) {
response = {
id: Date.now(),
sender: 'bot',
message: 'Você tem 4 processos em andamento. O processo de Renovação de Alvará Sanitário da Farmácia Saúde Total está em análise documental e deve ser concluído em aproximadamente 10 dias.',
timestamp: new Date().toISOString(),
suggestions: ['Ver detalhes do processo', 'Acompanhar status', 'Adicionar documentos']
};
}
// Verificar intenções relacionadas a empresas específicas
else if (queryLower.includes('farmácia') || queryLower.includes('saúde total')) {
response = {
id: Date.now(),
sender: 'bot',
message: 'A Farmácia Saúde Total possui 4 alvarás, sendo que o Alvará Sanitário vence em 15 dias. Recomendo iniciar o processo de renovação o quanto antes para evitar penalidades.',
timestamp: new Date().toISOString(),
suggestions: ['Iniciar renovação', 'Ver todos os alvarás', 'Verificar documentos necessários']
};
}
// Verificar intenções relacionadas a laboratório
else if (queryLower.includes('laboratório') || queryLower.includes('análises')) {
response = {
id: Date.now(),
sender: 'bot',
message: 'O Laboratório Análises Clínicas possui um Alvará de Bombeiros vencido há 5 dias. É urgente iniciar o processo de renovação para evitar multas e possível interdição.',
timestamp: new Date().toISOString(),
suggestions: ['Iniciar renovação urgente', 'Verificar penalidades', 'Solicitar prorrogação']
};
}
// Verificar intenções relacionadas a ajuda geral
else if (queryLower.includes('ajuda') || queryLower.includes('como') || queryLower.includes('funciona')) {
response = {
id: Date.now(),
sender: 'bot',
message: 'O AlvaráControl ajuda você a gerenciar todos os alvarás e licenças das empresas. Você pode acompanhar vencimentos, iniciar processos de renovação e receber alertas sobre pendências.',
timestamp: new Date().toISOString(),
suggestions: ['Ver tutorial', 'Funcionalidades principais', 'Configurar alertas']
};
}
return response;
};
// Função para lidar com cliques nas sugestões do chatbot
const handleSuggestionClick = (suggestion) => {
// Adicionar a sugestão como mensagem do usuário
const userMessage = {
id: Date.now(),
sender: 'user',
message: suggestion,
timestamp: new Date().toISOString()
};
setChatMessages(prev => [...prev, userMessage]);
setIsTyping(true);
// Simular resposta do chatbot após um pequeno delay
setTimeout(() => {
const botResponse = generateBotResponse(suggestion);
setChatMessages(prev => [...prev, botResponse]);
setIsTyping(false);
}, 1000);
};
// Função para lidar com notificações relacionadas a alvarás
const handleNotificationClick = (notification) => {
// Se a notificação estiver relacionada a um alvará, oferecer ajuda via chatbot
if (notification.tipo === 'alerta' && notification.alvaraId) {
// Encontrar o alvará correspondente
const alvara = alvarasData.find(a => a.id === notification.alvaraId);
if (alvara) {
const botMessage = {
id: Date.now(),
sender: 'bot',
message: `Notei que você clicou na notificação sobre o ${alvara.tipo} da ${alvara.empresa}. Posso ajudar com o processo de renovação.`,
timestamp: new Date().toISOString(),
suggestions: ['Iniciar renovação', 'Ver detalhes do alvará', 'Documentos necessários']
};
setChatMessages(prev => [...prev, botMessage]);
setUnreadMessages(prev => prev + 1);
// Abrir o chat automaticamente se estiver fechado
if (!isChatOpen) {
setTimeout(() => setIsChatOpen(true), 500);
}
}
}
};
// Renderizar a página atual com base no estado
const renderPage = () => {
switch (currentPage) {
case 'dashboard':
return renderDashboard();
case 'empresas':
return renderEmpresas();
case 'alvaras':
return renderAlvaras();
case 'processos':
return renderProcessos();
case 'relatorios':
return renderRelatorios();
case 'notificacoes':
return renderNotificacoes();
case 'configuracoes':
return renderConfiguracoes();
default:
return renderDashboard();
}
};
// Renderizar o Dashboard
const renderDashboard = () => {
return (
<>
{/* Metrics */}