242 lines
7.9 KiB
React
242 lines
7.9 KiB
React
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import { BrandMark } from '../../../shared/components/BrandMark';
|
||
|
|
import { clearSession } from '../../auth/services/sessionService';
|
||
|
|
|
||
|
|
const navigationBySection = {
|
||
|
|
supervisor: [
|
||
|
|
{ id: 'dashboard', label: 'Dashboard', count: null },
|
||
|
|
{ id: 'queues', label: 'Filas em tempo real', count: 42 },
|
||
|
|
{ id: 'areas', label: 'Areas supervisionadas', count: 3 },
|
||
|
|
{ id: 'agents', label: 'Agentes online', count: 18 },
|
||
|
|
{ id: 'reports', label: 'Relatorios', count: null },
|
||
|
|
],
|
||
|
|
admin: [
|
||
|
|
{ id: 'dashboard', label: 'Dashboard', count: null },
|
||
|
|
{ id: 'users', label: 'Usuarios e acessos', count: 64 },
|
||
|
|
{ id: 'areas', label: 'Areas', count: 3 },
|
||
|
|
{ id: 'knowledge', label: 'Conteudo para IA', count: 28 },
|
||
|
|
{ id: 'channels', label: 'Canais', count: 1 },
|
||
|
|
{ id: 'audit', label: 'Auditoria', count: null },
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
const actionLabelBySection = {
|
||
|
|
supervisor: '+ Redistribuir atendimento',
|
||
|
|
admin: '+ Nova configuracao',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function ManagementLayout({
|
||
|
|
title,
|
||
|
|
subtitle,
|
||
|
|
activeSection,
|
||
|
|
profileLabel,
|
||
|
|
initials,
|
||
|
|
children,
|
||
|
|
isDesktop,
|
||
|
|
isMobile,
|
||
|
|
}) {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const navItems = navigationBySection[activeSection] || navigationBySection.supervisor;
|
||
|
|
const actionLabel = actionLabelBySection[activeSection] || '+ Nova acao';
|
||
|
|
|
||
|
|
function handleLogout() {
|
||
|
|
clearSession();
|
||
|
|
navigate('/login', { replace: true });
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main style={{ minHeight: '100vh', padding: '1.5rem' }}>
|
||
|
|
<section
|
||
|
|
style={{
|
||
|
|
width: 'min(1680px, calc(100vw - 3rem))',
|
||
|
|
margin: '0 auto',
|
||
|
|
background: 'var(--color-surface-strong)',
|
||
|
|
borderRadius: '32px',
|
||
|
|
boxShadow: 'var(--shadow-lg)',
|
||
|
|
padding: '1.5rem',
|
||
|
|
display: 'grid',
|
||
|
|
gap: '1.5rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: isDesktop ? 'minmax(300px, 360px) minmax(0, 1fr)' : '1fr',
|
||
|
|
gap: '1.5rem',
|
||
|
|
alignItems: 'start',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ display: 'grid', gap: '1.25rem' }}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: '#fff',
|
||
|
|
border: '1px solid var(--color-border)',
|
||
|
|
borderRadius: '28px',
|
||
|
|
padding: '1.5rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<BrandMark size="lg" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside
|
||
|
|
style={{
|
||
|
|
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
|
||
|
|
color: '#fff',
|
||
|
|
borderRadius: '28px',
|
||
|
|
padding: '1.5rem',
|
||
|
|
display: 'grid',
|
||
|
|
gap: '1.25rem',
|
||
|
|
alignContent: 'start',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => navigate(activeSection === 'admin' ? '/admin' : '/supervisor')}
|
||
|
|
style={{
|
||
|
|
border: 'none',
|
||
|
|
borderRadius: '20px',
|
||
|
|
padding: '1rem 1.15rem',
|
||
|
|
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
|
||
|
|
color: '#132534',
|
||
|
|
fontWeight: 800,
|
||
|
|
textAlign: 'left',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{actionLabel}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<nav
|
||
|
|
style={{
|
||
|
|
display: 'grid',
|
||
|
|
gap: '0.5rem',
|
||
|
|
gridTemplateColumns: isMobile ? 'repeat(auto-fit, minmax(180px, 1fr))' : '1fr',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{navItems.map((item, index) => {
|
||
|
|
const isActive = index === 0;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={item.id}
|
||
|
|
type="button"
|
||
|
|
style={{
|
||
|
|
border: 'none',
|
||
|
|
borderRadius: '18px',
|
||
|
|
padding: '0.9rem 1rem',
|
||
|
|
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
|
||
|
|
color: '#fff',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
fontWeight: isActive ? 700 : 500,
|
||
|
|
width: '100%',
|
||
|
|
textAlign: 'left',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<span>{item.label}</span>
|
||
|
|
{item.count ? (
|
||
|
|
<span
|
||
|
|
style={{
|
||
|
|
minWidth: 30,
|
||
|
|
borderRadius: 999,
|
||
|
|
padding: '0.2rem 0.5rem',
|
||
|
|
background: 'rgba(255, 255, 255, 0.12)',
|
||
|
|
fontSize: '0.82rem',
|
||
|
|
textAlign: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{item.count}
|
||
|
|
</span>
|
||
|
|
) : null}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleLogout}
|
||
|
|
style={{
|
||
|
|
border: '1px solid rgba(255, 255, 255, 0.18)',
|
||
|
|
borderRadius: '18px',
|
||
|
|
padding: '0.9rem 1rem',
|
||
|
|
background: 'transparent',
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 700,
|
||
|
|
textAlign: 'left',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Sair
|
||
|
|
</button>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: '1.25rem', minWidth: 0 }}>
|
||
|
|
<header
|
||
|
|
style={{
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto',
|
||
|
|
gap: '1rem',
|
||
|
|
alignItems: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
padding: '1.1rem 1.25rem',
|
||
|
|
borderRadius: '22px',
|
||
|
|
background: '#fff',
|
||
|
|
border: '1px solid var(--color-border)',
|
||
|
|
minWidth: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<h1 style={{ margin: 0, fontSize: '1.65rem' }}>{title}</h1>
|
||
|
|
<p style={{ margin: '0.45rem 0 0', color: 'var(--color-text-soft)' }}>
|
||
|
|
{subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '0.9rem',
|
||
|
|
justifySelf: isMobile ? 'stretch' : 'end',
|
||
|
|
justifyContent: isMobile ? 'space-between' : 'flex-end',
|
||
|
|
padding: '0.85rem 1rem',
|
||
|
|
borderRadius: '22px',
|
||
|
|
background: '#fff',
|
||
|
|
border: '1px solid var(--color-border)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ textAlign: 'right' }}>
|
||
|
|
<strong style={{ display: 'block' }}>{profileLabel}</strong>
|
||
|
|
<span style={{ color: 'var(--color-text-soft)', fontSize: '0.92rem' }}>
|
||
|
|
Ambiente de gestao
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
aria-hidden="true"
|
||
|
|
style={{
|
||
|
|
width: 48,
|
||
|
|
height: 48,
|
||
|
|
borderRadius: '16px',
|
||
|
|
display: 'grid',
|
||
|
|
placeItems: 'center',
|
||
|
|
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 800,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{initials}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|