diff --git a/src/modules/management/pages/AdminPage.jsx b/src/modules/management/pages/AdminPage.jsx index 5d8e7a6..8c32c2c 100644 --- a/src/modules/management/pages/AdminPage.jsx +++ b/src/modules/management/pages/AdminPage.jsx @@ -1,4 +1,5 @@ import { useEffect, useMemo, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { DataPanel } from '../components/DataPanel'; import { ManagementLayout } from '../components/ManagementLayout'; import { ManagementTable } from '../components/ManagementTable'; @@ -65,6 +66,7 @@ const integrationCards = [ name: 'WhatsApp', icon: 'WA', color: '#20a45b', + configured: true, description: 'Canal principal para atendimento, abertura ativa e continuidade das conversas no chat.', }, { @@ -73,6 +75,7 @@ const integrationCards = [ name: 'SMS', icon: 'SM', color: '#00a4b7', + configured: false, description: 'Envio de comunicados curtos, confirmações e mensagens transacionais para contatos sem WhatsApp.', }, { @@ -81,6 +84,7 @@ const integrationCards = [ name: 'Email', icon: 'EM', color: '#d8891c', + configured: false, description: 'Recebimento e resposta de demandas por email dentro da fila omnichannel.', }, { @@ -89,6 +93,7 @@ const integrationCards = [ name: 'SharePoint', icon: 'SP', color: '#036c70', + configured: false, description: 'Permite que a IA visualize documentos autorizados para alimentar e manter a base de conhecimento.', }, { @@ -97,6 +102,7 @@ const integrationCards = [ name: 'Gupy', icon: 'GP', color: '#7b4cc2', + configured: false, description: 'Conecta vagas abertas e processos dos candidatos para enriquecer a base de conhecimento.', }, ]; @@ -180,6 +186,7 @@ export function AdminAttendanceWorkspace({ isWideDesktop, isDesktop, isTablet, i } export function AdminPage() { + const navigate = useNavigate(); const { isWideDesktop, isDesktop, isTablet, isMobile } = useViewport(); const userDisplay = getCurrentUserDisplay(); const [activeAdminSection, setActiveAdminSection] = useState('home'); @@ -213,6 +220,8 @@ export function AdminPage() { sharepoint: false, gupy: false, }); + const [integrationNotice, setIntegrationNotice] = useState(''); + const [configurationModal, setConfigurationModal] = useState(null); useEffect(() => { let isMounted = true; @@ -1271,6 +1280,21 @@ export function AdminPage() { const channelCount = integrationCards.filter((item) => item.group === 'Canal' && integrationStates[item.id]).length; const integrationCount = integrationCards.filter((item) => item.group === 'Integração' && integrationStates[item.id]).length; + function toggleIntegration(item) { + const isEnabled = Boolean(integrationStates[item.id]); + + if (!isEnabled && !item.configured) { + setIntegrationNotice(`${item.name} ainda não pode ser habilitado porque precisa ser configurado primeiro.`); + return; + } + + setIntegrationNotice(''); + setIntegrationStates((current) => ({ + ...current, + [item.id]: !current[item.id], + })); + } + return (
))} + + {integrationNotice ? ( +
+ {integrationNotice} +
+ ) : null}
{ - setIntegrationStates((current) => ({ - ...current, - [item.id]: !current[item.id], - })); - }} + onClick={() => toggleIntegration(item)} style={{ border: 'none', borderRadius: 999, @@ -1422,10 +1457,18 @@ export function AdminPage() { }} > - {isEnabled ? 'Habilitado' : 'Desabilitado'} + {isEnabled ? 'Habilitado' : item.configured ? 'Desabilitado' : 'Pendente de configuração'}
+ + {configurationModal ? ( +
setConfigurationModal(null)} + > +
event.stopPropagation()} + style={{ + width: 'min(460px, 100%)', + borderRadius: 22, + border: '1px solid var(--color-border)', + background: '#fff', + padding: '1.25rem', + display: 'grid', + gap: '0.9rem', + boxShadow: 'var(--shadow-lg)', + }} + > +
+ +
+ + Configurar {configurationModal.name} + + + {configurationModal.group} + +
+
+ +

+ Esta configuração ainda está em construção. Assim que a integração estiver disponível, este espaço vai reunir credenciais, permissões e parâmetros de sincronização. +

+ +
+ +
+
+
+ ) : null}
); }