Sothis/omnichannel-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR: Ajustes de borda e modal de novo template
Some checks are pending
Deploy Dev / deploy (push) Waiting to run
Details

Browse Source 
- Ajustado border Radius de todos componentes de 28 para 20px
- Criado modal para quando for criado um novo template
This commit is contained in:
Rafael Alves Lopes 2026-06-24 14:46:00 -03:00
parent d5e35b11ad
commit faa03f80cf
33 changed files with 485 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/modules/attendance/components/RecentContactsList.jsx
View File

@ -8,7 +8,7 @@ export function RecentContactsList({
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.25rem', padding: '1.25rem',
display: 'grid', display: 'grid',
gap: '0.9rem', gap: '0.9rem',
@ -34,7 +34,7 @@ export function RecentContactsList({
border: '1px solid', border: '1px solid',
borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)', borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff', background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
borderRadius: '20px', borderRadius: '15px',
padding: '1rem', padding: '1rem',
textAlign: 'left', textAlign: 'left',
display: 'grid', display: 'grid',
@ -71,7 +71,7 @@ export function RecentContactsList({
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '1rem', padding: '1rem',
background: 'rgba(0, 49, 80, 0.04)', background: 'rgba(0, 49, 80, 0.04)',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',

10
src/modules/attendance/pages/AgentNewAttendancePage.jsx
View File

@ -40,7 +40,7 @@ export function AgentNewAttendancePage() {
width: 'min(1680px, calc(100vw - 3rem))', width: 'min(1680px, calc(100vw - 3rem))',
margin: '0 auto', margin: '0 auto',
background: 'var(--color-surface-strong)', background: 'var(--color-surface-strong)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
@ -60,7 +60,7 @@ export function AgentNewAttendancePage() {
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
}} }}
> >
@ -81,7 +81,7 @@ export function AgentNewAttendancePage() {
<div <div
style={{ style={{
padding: '1.1rem 1.25rem', padding: '1.1rem 1.25rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -100,7 +100,7 @@ export function AgentNewAttendancePage() {
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
justifyContent: isMobile ? 'space-between' : 'flex-end', justifyContent: isMobile ? 'space-between' : 'flex-end',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -116,7 +116,7 @@ export function AgentNewAttendancePage() {
style={{ style={{
width: 48, width: 48,
height: 48, height: 48,
borderRadius: '16px', borderRadius: '12px',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))', background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

48
src/modules/attendance/pages/NewAttendancePage.jsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { BrandMark } from '../../../shared/components/BrandMark'; import { BrandMark } from '../../../shared/components/BrandMark';
import { useViewport } from '../../../shared/hooks/useViewport'; import { useViewport } from '../../../shared/hooks/useViewport';
@ -369,7 +369,7 @@ export function NewAttendancePage({ embedded = false }) {
style={{ style={{
justifySelf: isMobile ? 'stretch' : 'center', justifySelf: isMobile ? 'stretch' : 'center',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
borderRadius: '18px', borderRadius: '14px',
background: 'rgba(0, 49, 80, 0.06)', background: 'rgba(0, 49, 80, 0.06)',
color: 'var(--color-primary)', color: 'var(--color-primary)',
fontWeight: 700, fontWeight: 700,
@ -382,7 +382,7 @@ export function NewAttendancePage({ embedded = false }) {
to="/home" to="/home"
style={{ style={{
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
borderRadius: '16px', borderRadius: '12px',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -407,7 +407,7 @@ export function NewAttendancePage({ embedded = false }) {
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
gap: '1.25rem', gap: '1.25rem',
@ -443,7 +443,7 @@ export function NewAttendancePage({ embedded = false }) {
style={{ style={{
border: '1px solid', border: '1px solid',
borderColor: isActive ? `${channel.accent}44` : 'var(--color-border)', borderColor: isActive ? `${channel.accent}44` : 'var(--color-border)',
borderRadius: '22px', borderRadius: '16px',
padding: '1rem', padding: '1rem',
background: isActive ? `${channel.accent}12` : '#fff', background: isActive ? `${channel.accent}12` : '#fff',
textAlign: 'left', textAlign: 'left',
@ -485,7 +485,7 @@ export function NewAttendancePage({ embedded = false }) {
}} }}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -508,7 +508,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder={selectedCountry.placeholder} placeholder={selectedCountry.placeholder}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -525,7 +525,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="Nome para salvar na agenda" placeholder="Nome para salvar na agenda"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -550,7 +550,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="Ex: Departamento, vaga ou conta vinculada" placeholder="Ex: Departamento, vaga ou conta vinculada"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -565,7 +565,7 @@ export function NewAttendancePage({ embedded = false }) {
onChange={(event) => setSelectedTemplateId(event.target.value)} onChange={(event) => setSelectedTemplateId(event.target.value)}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -597,7 +597,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="Ex: 26/05/2026" placeholder="Ex: 26/05/2026"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -613,7 +613,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="https://..." placeholder="https://..."
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -629,7 +629,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="Valor livre" placeholder="Valor livre"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -642,7 +642,7 @@ export function NewAttendancePage({ embedded = false }) {
<div <div
style={{ style={{
border: '1px solid rgba(0, 49, 80, 0.08)', border: '1px solid rgba(0, 49, 80, 0.08)',
borderRadius: '22px', borderRadius: '16px',
padding: '1rem', padding: '1rem',
background: 'linear-gradient(180deg, #e8f3ee, #dcefe8)', background: 'linear-gradient(180deg, #e8f3ee, #dcefe8)',
minHeight: 220, minHeight: 220,
@ -695,7 +695,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="Contexto inicial deste atendimento." placeholder="Contexto inicial deste atendimento."
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -716,7 +716,7 @@ export function NewAttendancePage({ embedded = false }) {
> >
<article <article
style={{ style={{
borderRadius: '24px', borderRadius: '18px',
padding: '1.25rem', padding: '1.25rem',
background: background:
'linear-gradient(135deg, rgba(0, 49, 80, 0.98), rgba(11, 90, 134, 0.94))', 'linear-gradient(135deg, rgba(0, 49, 80, 0.98), rgba(11, 90, 134, 0.94))',
@ -754,7 +754,7 @@ export function NewAttendancePage({ embedded = false }) {
<article <article
style={{ style={{
borderRadius: '24px', borderRadius: '18px',
padding: '1.25rem', padding: '1.25rem',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: '#fff', background: '#fff',
@ -773,7 +773,7 @@ export function NewAttendancePage({ embedded = false }) {
onClick={clearSelection} onClick={clearSelection}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '1rem 1.1rem', padding: '1rem 1.1rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -789,7 +789,7 @@ export function NewAttendancePage({ embedded = false }) {
disabled={!canStartAttendance || isStarting} disabled={!canStartAttendance || isStarting}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '1rem 1.1rem', padding: '1rem 1.1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -808,7 +808,7 @@ export function NewAttendancePage({ embedded = false }) {
<article <article
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 24, borderRadius: 18,
padding: '1rem', padding: '1rem',
background: '#fff', background: '#fff',
display: 'grid', display: 'grid',
@ -829,7 +829,7 @@ export function NewAttendancePage({ embedded = false }) {
placeholder="Buscar por nome, telefone ou etiqueta" placeholder="Buscar por nome, telefone ou etiqueta"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.85rem 0.9rem', padding: '0.85rem 0.9rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -849,7 +849,7 @@ export function NewAttendancePage({ embedded = false }) {
style={{ style={{
border: '1px solid', border: '1px solid',
borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)', borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.78rem', padding: '0.78rem',
background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff', background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
textAlign: 'left', textAlign: 'left',
@ -896,7 +896,7 @@ export function NewAttendancePage({ embedded = false }) {
onClick={clearSelection} onClick={clearSelection}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem', padding: '0.75rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -911,7 +911,7 @@ export function NewAttendancePage({ embedded = false }) {
<article <article
style={{ style={{
border: '1px solid rgba(0, 164, 183, 0.24)', border: '1px solid rgba(0, 164, 183, 0.24)',
borderRadius: 24, borderRadius: 18,
padding: '1rem', padding: '1rem',
background: 'rgba(0, 164, 183, 0.06)', background: 'rgba(0, 164, 183, 0.06)',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',

10
src/modules/auth/components/LoginForm.jsx
View File

@ -4,7 +4,7 @@ import { useLogin } from '../hooks/useLogin';
const fieldStyle = { const fieldStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -14,7 +14,7 @@ const fieldStyle = {
const primaryButtonStyle = { const primaryButtonStyle = {
width: '100%', width: '100%',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
borderRadius: '16px', borderRadius: '12px',
border: 'none', border: 'none',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -25,7 +25,7 @@ const primaryButtonStyle = {
const secondaryButtonStyle = { const secondaryButtonStyle = {
width: '100%', width: '100%',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
borderRadius: '16px', borderRadius: '12px',
border: '1px solid rgba(0, 49, 80, 0.16)', border: '1px solid rgba(0, 49, 80, 0.16)',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -95,7 +95,7 @@ export function LoginForm() {
role="alert" role="alert"
style={{ style={{
border: '1px solid rgba(180, 35, 24, 0.24)', border: '1px solid rgba(180, 35, 24, 0.24)',
borderRadius: 14, borderRadius: 10,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'rgba(180, 35, 24, 0.08)', background: 'rgba(180, 35, 24, 0.08)',
color: '#b42318', color: '#b42318',
@ -111,7 +111,7 @@ export function LoginForm() {
role="alert" role="alert"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',

6
src/modules/auth/pages/LoginPage.jsx
View File

@ -25,7 +25,7 @@ export function LoginPage() {
background: background:
'linear-gradient(180deg, rgba(0, 49, 80, 0.98) 0%, rgba(11, 90, 134, 0.95) 100%)', 'linear-gradient(180deg, rgba(0, 49, 80, 0.98) 0%, rgba(11, 90, 134, 0.95) 100%)',
color: '#fff', color: '#fff',
borderRadius: '32px', borderRadius: '24px',
padding: '2.5rem', padding: '2.5rem',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
position: 'relative', position: 'relative',
@ -99,7 +99,7 @@ export function LoginPage() {
key={item.label} key={item.label}
style={{ style={{
padding: '1rem', padding: '1rem',
borderRadius: '20px', borderRadius: '15px',
background: 'rgba(255, 255, 255, 0.1)', background: 'rgba(255, 255, 255, 0.1)',
backdropFilter: 'blur(10px)', backdropFilter: 'blur(10px)',
}} }}
@ -116,7 +116,7 @@ export function LoginPage() {
background: 'var(--color-surface)', background: 'var(--color-surface)',
backdropFilter: 'blur(12px)', backdropFilter: 'blur(12px)',
border: '1px solid rgba(255, 255, 255, 0.65)', border: '1px solid rgba(255, 255, 255, 0.65)',
borderRadius: '32px', borderRadius: '24px',
padding: '2.5rem', padding: '2.5rem',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
display: 'grid', display: 'grid',

4
src/modules/call/components/CallControls.jsx
View File

@ -78,7 +78,7 @@ export function CallControls({ controls, isMobile = false }) {
type="button" type="button"
style={{ style={{
border: '1px solid rgba(255, 255, 255, 0.12)', border: '1px solid rgba(255, 255, 255, 0.12)',
borderRadius: '24px', borderRadius: '18px',
padding: '1rem', padding: '1rem',
background: 'rgba(255, 255, 255, 0.06)', background: 'rgba(255, 255, 255, 0.06)',
color: '#fff', color: '#fff',
@ -93,7 +93,7 @@ export function CallControls({ controls, isMobile = false }) {
style={{ style={{
width: 48, width: 48,
height: 48, height: 48,
borderRadius: '16px', borderRadius: '12px',
background: 'rgba(255, 255, 255, 0.1)', background: 'rgba(255, 255, 255, 0.1)',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',

2
src/modules/call/components/CallHeader.jsx
View File

@ -41,7 +41,7 @@ export function CallHeader({ isMobile = false }) {
to="/home" to="/home"
style={{ style={{
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
borderRadius: '16px', borderRadius: '12px',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'rgba(255, 255, 255, 0.08)', background: 'rgba(255, 255, 255, 0.08)',
color: '#fff', color: '#fff',

12
src/modules/call/pages/CallPage.jsx
View File

@ -74,7 +74,7 @@ export function CallPage() {
style={{ style={{
width: isMobile ? 110 : 132, width: isMobile ? 110 : 132,
height: isMobile ? 110 : 132, height: isMobile ? 110 : 132,
borderRadius: '32px', borderRadius: '24px',
background: 'linear-gradient(135deg, #0d3d5d, #00a4b7)', background: 'linear-gradient(135deg, #0d3d5d, #00a4b7)',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
@ -105,7 +105,7 @@ export function CallPage() {
<article <article
key={item.label} key={item.label}
style={{ style={{
borderRadius: '22px', borderRadius: '16px',
padding: '1rem', padding: '1rem',
background: 'rgba(255, 255, 255, 0.05)', background: 'rgba(255, 255, 255, 0.05)',
}} }}
@ -128,7 +128,7 @@ export function CallPage() {
> >
<div <div
style={{ style={{
borderRadius: '32px', borderRadius: '24px',
padding: isMobile ? '1.5rem' : '2.25rem', padding: isMobile ? '1.5rem' : '2.25rem',
background: background:
'radial-gradient(circle at top right, rgba(229, 162, 42, 0.2), transparent 28%), rgba(255, 255, 255, 0.04)', 'radial-gradient(circle at top right, rgba(229, 162, 42, 0.2), transparent 28%), rgba(255, 255, 255, 0.04)',
@ -181,7 +181,7 @@ export function CallPage() {
> >
<div <div
style={{ style={{
borderRadius: '24px', borderRadius: '18px',
padding: '1rem 1.15rem', padding: '1rem 1.15rem',
background: 'rgba(255, 255, 255, 0.05)', background: 'rgba(255, 255, 255, 0.05)',
color: 'rgba(255, 255, 255, 0.72)', color: 'rgba(255, 255, 255, 0.72)',
@ -191,7 +191,7 @@ export function CallPage() {
</div> </div>
<div <div
style={{ style={{
borderRadius: '24px', borderRadius: '18px',
padding: '1rem 1.15rem', padding: '1rem 1.15rem',
background: 'rgba(255, 255, 255, 0.05)', background: 'rgba(255, 255, 255, 0.05)',
color: 'rgba(255, 255, 255, 0.72)', color: 'rgba(255, 255, 255, 0.72)',
@ -203,7 +203,7 @@ export function CallPage() {
type="button" type="button"
style={{ style={{
border: 'none', border: 'none',
borderRadius: '24px', borderRadius: '18px',
padding: '1rem 1.4rem', padding: '1rem 1.4rem',
background: 'linear-gradient(135deg, var(--color-secondary), #d43a3a)', background: 'linear-gradient(135deg, var(--color-secondary), #d43a3a)',
color: '#fff', color: '#fff',

6
src/modules/chat/components/ChatConversationList.jsx
View File

@ -157,7 +157,7 @@ export function ChatConversationList({
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1rem', padding: '1rem',
display: 'grid', display: 'grid',
gridTemplateRows: 'auto minmax(0, 1fr)', gridTemplateRows: 'auto minmax(0, 1fr)',
@ -204,7 +204,7 @@ export function ChatConversationList({
border: '1px solid', border: '1px solid',
borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)', borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff', background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
borderRadius: '20px', borderRadius: '15px',
padding: '1rem', padding: '1rem',
textAlign: 'left', textAlign: 'left',
display: 'grid', display: 'grid',
@ -239,7 +239,7 @@ export function ChatConversationList({
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '1rem', padding: '1rem',
background: 'rgba(0, 49, 80, 0.04)', background: 'rgba(0, 49, 80, 0.04)',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',

6
src/modules/chat/components/ChatTransferPanel.jsx
View File

@ -19,7 +19,7 @@ export function ChatTransferPanel({
const fieldStyle = { const fieldStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -30,7 +30,7 @@ export function ChatTransferPanel({
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.25rem', padding: '1.25rem',
display: 'grid', display: 'grid',
gap: '1rem', gap: '1rem',
@ -112,7 +112,7 @@ export function ChatTransferPanel({
onClick={onSubmit} onClick={onSubmit}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '16px', borderRadius: '12px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',

44
src/modules/chat/components/ChatWindow.jsx
View File

@ -112,7 +112,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
width: 260, width: 260,
maxWidth: '100%', maxWidth: '100%',
height: 150, height: 150,
borderRadius: 14, borderRadius: 10,
background: isAgent ? 'rgba(255,255,255,0.18)' : 'rgba(0,49,80,0.08)', background: isAgent ? 'rgba(255,255,255,0.18)' : 'rgba(0,49,80,0.08)',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
@ -145,7 +145,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
maxWidth: '100%', maxWidth: '100%',
maxHeight: 340, maxHeight: 340,
objectFit: 'cover', objectFit: 'cover',
borderRadius: 14, borderRadius: 10,
boxShadow: '0 14px 30px rgba(0,0,0,0.18)', boxShadow: '0 14px 30px rgba(0,0,0,0.18)',
transition: 'transform 160ms ease', transition: 'transform 160ms ease',
}} }}
@ -168,7 +168,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
style={{ style={{
width: 320, width: 320,
maxWidth: '100%', maxWidth: '100%',
borderRadius: 14, borderRadius: 10,
background: '#111', background: '#111',
}} }}
/> />
@ -189,7 +189,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
gap: '0.75rem', gap: '0.75rem',
alignItems: 'center', alignItems: 'center',
padding: '0.85rem', padding: '0.85rem',
borderRadius: 14, borderRadius: 10,
background: isAgent ? 'rgba(255,255,255,0.16)' : '#fff', background: isAgent ? 'rgba(255,255,255,0.16)' : '#fff',
color: isAgent ? '#fff' : 'var(--color-primary)', color: isAgent ? '#fff' : 'var(--color-primary)',
fontWeight: 700, fontWeight: 700,
@ -209,7 +209,7 @@ function AttachmentPreview({ file, onRemove }) {
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.75rem', padding: '0.75rem',
display: 'grid', display: 'grid',
gridTemplateColumns: 'auto 1fr auto', gridTemplateColumns: 'auto 1fr auto',
@ -222,14 +222,14 @@ function AttachmentPreview({ file, onRemove }) {
<img <img
src={mediaUrl} src={mediaUrl}
alt={file.name} alt={file.name}
style={{ width: 54, height: 54, objectFit: 'cover', borderRadius: 12 }} style={{ width: 54, height: 54, objectFit: 'cover', borderRadius: 9 }}
/> />
) : ( ) : (
<span <span
style={{ style={{
width: 54, width: 54,
height: 54, height: 54,
borderRadius: 12, borderRadius: 9,
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: 'rgba(0,49,80,0.08)', background: 'rgba(0,49,80,0.08)',
@ -251,7 +251,7 @@ function AttachmentPreview({ file, onRemove }) {
title="Remover anexo" title="Remover anexo"
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
width: 36, width: 36,
height: 36, height: 36,
background: 'rgba(214, 40, 40, 0.1)', background: 'rgba(214, 40, 40, 0.1)',
@ -349,7 +349,7 @@ export function ChatWindow({
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
overflow: 'hidden', overflow: 'hidden',
display: 'grid', display: 'grid',
gridTemplateRows: 'auto minmax(0, 1fr)', gridTemplateRows: 'auto minmax(0, 1fr)',
@ -382,7 +382,7 @@ export function ChatWindow({
style={{ style={{
maxWidth: 460, maxWidth: 460,
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 20, borderRadius: 15,
padding: '1.2rem', padding: '1.2rem',
background: '#fff', background: '#fff',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',
@ -404,7 +404,7 @@ export function ChatWindow({
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
overflow: 'hidden', overflow: 'hidden',
display: 'grid', display: 'grid',
gridTemplateRows: 'auto minmax(0, 1fr) auto', gridTemplateRows: 'auto minmax(0, 1fr) auto',
@ -442,7 +442,7 @@ export function ChatWindow({
disabled disabled
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.8rem 0.95rem', padding: '0.8rem 0.95rem',
background: '#fff', background: '#fff',
fontWeight: 600, fontWeight: 600,
@ -459,7 +459,7 @@ export function ChatWindow({
onClick={() => onAssumeChat?.()} onClick={() => onAssumeChat?.()}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '14px', borderRadius: '10px',
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -476,7 +476,7 @@ export function ChatWindow({
onClick={onReleaseChat} onClick={onReleaseChat}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -490,7 +490,7 @@ export function ChatWindow({
onClick={onCloseChat} onClick={onCloseChat}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '14px', borderRadius: '10px',
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: 'rgba(181, 31, 31, 0.1)', background: 'rgba(181, 31, 31, 0.1)',
color: 'var(--color-secondary)', color: 'var(--color-secondary)',
@ -507,7 +507,7 @@ export function ChatWindow({
disabled={!canReply} disabled={!canReply}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '14px', borderRadius: '10px',
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: 'rgba(0, 49, 80, 0.08)', background: 'rgba(0, 49, 80, 0.08)',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -523,7 +523,7 @@ export function ChatWindow({
style={{ style={{
gridColumn: '1 / -1', gridColumn: '1 / -1',
border: '1px solid rgba(0, 164, 183, 0.24)', border: '1px solid rgba(0, 164, 183, 0.24)',
borderRadius: 16, borderRadius: 12,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'rgba(0, 164, 183, 0.07)', background: 'rgba(0, 164, 183, 0.07)',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -652,7 +652,7 @@ export function ChatWindow({
style={{ style={{
justifySelf: 'center', justifySelf: 'center',
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
borderRadius: 16, borderRadius: 12,
background: 'rgba(0,49,80,0.06)', background: 'rgba(0,49,80,0.06)',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',
fontWeight: 700, fontWeight: 700,
@ -694,7 +694,7 @@ export function ChatWindow({
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: 'rgba(0, 49, 80, 0.04)', background: 'rgba(0, 49, 80, 0.04)',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',
@ -727,7 +727,7 @@ export function ChatWindow({
title="Anexar arquivo" title="Anexar arquivo"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
width: 48, width: 48,
height: 48, height: 48,
display: 'grid', display: 'grid',
@ -774,7 +774,7 @@ export function ChatWindow({
} }
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -788,7 +788,7 @@ export function ChatWindow({
disabled={!safeContact.id || !canReply} disabled={!safeContact.id || !canReply}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1.2rem', padding: '0.95rem 1.2rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',

6
src/modules/chat/components/ContactProfilePanel.jsx
View File

@ -70,7 +70,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
const fieldStyle = { const fieldStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -103,7 +103,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.25rem', padding: '1.25rem',
display: 'grid', display: 'grid',
gap: '1rem', gap: '1rem',
@ -182,7 +182,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
disabled={isSaving} disabled={isSaving}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '16px', borderRadius: '12px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',

8
src/modules/chat/pages/ChatPage.jsx
View File

@ -87,7 +87,7 @@ export function ChatPage() {
width: 'min(1680px, calc(100vw - 3rem))', width: 'min(1680px, calc(100vw - 3rem))',
margin: '0 auto', margin: '0 auto',
background: 'var(--color-surface-strong)', background: 'var(--color-surface-strong)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
@ -107,7 +107,7 @@ export function ChatPage() {
style={{ style={{
justifySelf: isMobile ? 'stretch' : 'center', justifySelf: isMobile ? 'stretch' : 'center',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
borderRadius: '18px', borderRadius: '14px',
background: 'rgba(0, 49, 80, 0.06)', background: 'rgba(0, 49, 80, 0.06)',
color: 'var(--color-primary)', color: 'var(--color-primary)',
fontWeight: 700, fontWeight: 700,
@ -120,7 +120,7 @@ export function ChatPage() {
to="/home" to="/home"
style={{ style={{
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
borderRadius: '16px', borderRadius: '12px',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -197,7 +197,7 @@ export function ChatPage() {
disabled={isPaused} disabled={isPaused}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',

8
src/modules/home/components/AttendantOpsPanel.jsx
View File

@ -45,7 +45,7 @@ export function AttendantOpsPanel({
<article <article
style={{ style={{
padding: '1.25rem', padding: '1.25rem',
borderRadius: '24px', borderRadius: '18px',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: 'linear-gradient(145deg, #ffffff, #f8fafc)', background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
boxShadow: 'var(--shadow-sm)', boxShadow: 'var(--shadow-sm)',
@ -77,7 +77,7 @@ export function AttendantOpsPanel({
<article <article
style={{ style={{
padding: '1.25rem', padding: '1.25rem',
borderRadius: '24px', borderRadius: '18px',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: 'linear-gradient(145deg, #ffffff, #f8fafc)', background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
boxShadow: 'var(--shadow-sm)', boxShadow: 'var(--shadow-sm)',
@ -99,7 +99,7 @@ export function AttendantOpsPanel({
<article <article
style={{ style={{
padding: '1.25rem', padding: '1.25rem',
borderRadius: '24px', borderRadius: '18px',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: 'linear-gradient(145deg, #ffffff, #f8fafc)', background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
boxShadow: 'var(--shadow-sm)', boxShadow: 'var(--shadow-sm)',
@ -116,7 +116,7 @@ export function AttendantOpsPanel({
width: '100%', width: '100%',
height: '100%', height: '100%',
padding: '1rem', padding: '1rem',
borderRadius: '16px', borderRadius: '12px',
border: 'none', border: 'none',
background: isPaused ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)', background: isPaused ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
color: isPaused ? '#10b981' : '#ef4444', color: isPaused ? '#10b981' : '#ef4444',

6
src/modules/home/components/CallsWorkspace.jsx
View File

@ -35,7 +35,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
onClick={() => navigate('/call')} onClick={() => navigate('/call')}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1.1rem', padding: '0.95rem 1.1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -51,7 +51,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
<article <article
key={call.id} key={call.id}
style={{ style={{
borderRadius: '22px', borderRadius: '16px',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
padding: '1rem 1.1rem', padding: '1rem 1.1rem',
display: 'grid', display: 'grid',
@ -78,7 +78,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
onClick={() => navigate('/call')} onClick={() => navigate('/call')}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.7rem 0.95rem', padding: '0.7rem 0.95rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',

8
src/modules/home/components/HomeSidebar.jsx
View File

@ -9,7 +9,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
style={{ style={{
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))', background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
color: '#fff', color: '#fff',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
gap: '1.25rem', gap: '1.25rem',
@ -21,7 +21,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
onClick={() => navigate('/home')} onClick={() => navigate('/home')}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '20px', borderRadius: '15px',
padding: '1rem 1.15rem', padding: '1rem 1.15rem',
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)', background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
color: '#132534', color: '#132534',
@ -49,7 +49,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
onClick={() => item.route && navigate(item.route)} onClick={() => item.route && navigate(item.route)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent', background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
color: '#fff', color: '#fff',
@ -87,7 +87,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
}} }}
style={{ style={{
border: '1px solid rgba(255, 255, 255, 0.2)', border: '1px solid rgba(255, 255, 255, 0.2)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: 'transparent', background: 'transparent',
color: '#ef4444', color: '#ef4444',

10
src/modules/home/components/HomeTopbar.jsx
View File

@ -57,7 +57,7 @@ export function HomeTopbar({
style={{ style={{
display: 'inline-flex', display: 'inline-flex',
padding: '0.35rem', padding: '0.35rem',
borderRadius: '18px', borderRadius: '14px',
background: 'rgba(0, 49, 80, 0.06)', background: 'rgba(0, 49, 80, 0.06)',
gap: '0.35rem', gap: '0.35rem',
width: isMobile ? '100%' : 'fit-content', width: isMobile ? '100%' : 'fit-content',
@ -75,7 +75,7 @@ export function HomeTopbar({
onClick={() => onTabChange(tab.id)} onClick={() => onTabChange(tab.id)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '14px', borderRadius: '10px',
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: isActive ? 'var(--color-primary)' : 'transparent', background: isActive ? 'var(--color-primary)' : 'transparent',
color: isActive ? '#fff' : 'var(--color-primary)', color: isActive ? '#fff' : 'var(--color-primary)',
@ -91,7 +91,7 @@ export function HomeTopbar({
<div <div
style={{ style={{
padding: '0.9rem 1.1rem', padding: '0.9rem 1.1rem',
borderRadius: '18px', borderRadius: '14px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',
@ -115,7 +115,7 @@ export function HomeTopbar({
style={{ style={{
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: '#fff', background: '#fff',
outline: 'none', outline: 'none',
@ -145,7 +145,7 @@ export function HomeTopbar({
style={{ style={{
width: 48, width: 48,
height: 48, height: 48,
borderRadius: '16px', borderRadius: '12px',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))', background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

22
src/modules/home/components/MessagesWorkspace.jsx
View File

@ -370,7 +370,7 @@ export function MessagesWorkspace({
style={{ style={{
border: '1px solid', border: '1px solid',
borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)', borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
borderRadius: '20px', borderRadius: '15px',
padding: '1rem', padding: '1rem',
background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff', background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
textAlign: 'left', textAlign: 'left',
@ -417,7 +417,7 @@ export function MessagesWorkspace({
disabled={isPaused} disabled={isPaused}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -471,7 +471,7 @@ export function MessagesWorkspace({
disabled={isPaused} disabled={isPaused}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.7rem 0.9rem', padding: '0.7rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -486,7 +486,7 @@ export function MessagesWorkspace({
type="button" type="button"
style={{ style={{
border: 'none', border: 'none',
borderRadius: '14px', borderRadius: '10px',
padding: '0.7rem 0.9rem', padding: '0.7rem 0.9rem',
background: 'rgba(0, 49, 80, 0.08)', background: 'rgba(0, 49, 80, 0.08)',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -602,7 +602,7 @@ export function MessagesWorkspace({
disabled={isPaused} disabled={isPaused}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
fontWeight: 900, fontWeight: 900,
@ -618,7 +618,7 @@ export function MessagesWorkspace({
disabled={isPaused} disabled={isPaused}
style={{ style={{
border: '1px solid rgba(0, 164, 183, 0.32)', border: '1px solid rgba(0, 164, 183, 0.32)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.75rem 0.9rem', padding: '0.75rem 0.9rem',
background: 'rgba(0, 164, 183, 0.07)', background: 'rgba(0, 164, 183, 0.07)',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -642,7 +642,7 @@ export function MessagesWorkspace({
title="Próxima resposta" title="Próxima resposta"
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
fontWeight: 900, fontWeight: 900,
@ -685,7 +685,7 @@ export function MessagesWorkspace({
<article <article
key={message.id} key={message.id}
style={{ style={{
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem', padding: '0.95rem',
background: 'rgba(0, 49, 80, 0.04)', background: 'rgba(0, 49, 80, 0.04)',
display: 'grid', display: 'grid',
@ -708,7 +708,7 @@ export function MessagesWorkspace({
rows={4} rows={4}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.85rem 0.9rem', padding: '0.85rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -725,7 +725,7 @@ export function MessagesWorkspace({
disabled={!currentUserId} disabled={!currentUserId}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -747,7 +747,7 @@ export function MessagesWorkspace({
key={note.id} key={note.id}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '16px', borderRadius: '12px',
padding: '0.8rem', padding: '0.8rem',
background: '#fff', background: '#fff',
display: 'grid', display: 'grid',

10
src/modules/home/pages/AgentMassMessagePage.jsx
View File

@ -71,7 +71,7 @@ export function AgentMassMessagePage() {
width: 'min(1680px, calc(100vw - 3rem))', width: 'min(1680px, calc(100vw - 3rem))',
margin: '0 auto', margin: '0 auto',
background: 'var(--color-surface-strong)', background: 'var(--color-surface-strong)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
@ -91,7 +91,7 @@ export function AgentMassMessagePage() {
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
}} }}
> >
@ -112,7 +112,7 @@ export function AgentMassMessagePage() {
<div <div
style={{ style={{
padding: '1.1rem 1.25rem', padding: '1.1rem 1.25rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -131,7 +131,7 @@ export function AgentMassMessagePage() {
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
justifyContent: isMobile ? 'space-between' : 'flex-end', justifyContent: isMobile ? 'space-between' : 'flex-end',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -147,7 +147,7 @@ export function AgentMassMessagePage() {
style={{ style={{
width: 48, width: 48,
height: 48, height: 48,
borderRadius: '16px', borderRadius: '12px',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))', background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

22
src/modules/home/pages/ContactsPage.jsx
View File

@ -9,7 +9,7 @@ import { sidebarItems } from '../services/homeMocks';
const inputStyle = { const inputStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.85rem 0.9rem', padding: '0.85rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -158,7 +158,7 @@ export function ContactsPanel({ embedded = false }) {
<aside <aside
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 24, borderRadius: 18,
padding: '1rem', padding: '1rem',
background: '#fff', background: '#fff',
display: 'grid', display: 'grid',
@ -177,7 +177,7 @@ export function ContactsPanel({ embedded = false }) {
onClick={startNewContact} onClick={startNewContact}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.7rem 0.85rem', padding: '0.7rem 0.85rem',
background: 'var(--color-highlight)', background: 'var(--color-highlight)',
color: '#132534', color: '#132534',
@ -206,7 +206,7 @@ export function ContactsPanel({ embedded = false }) {
style={{ style={{
border: '1px solid', border: '1px solid',
borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)', borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.8rem', padding: '0.8rem',
background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff', background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
textAlign: 'left', textAlign: 'left',
@ -238,7 +238,7 @@ export function ContactsPanel({ embedded = false }) {
onSubmit={handleSave} onSubmit={handleSave}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 24, borderRadius: 18,
padding: '1.2rem', padding: '1.2rem',
background: '#fff', background: '#fff',
display: 'grid', display: 'grid',
@ -324,7 +324,7 @@ export function ContactsPanel({ embedded = false }) {
disabled={isSaving} disabled={isSaving}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 16, borderRadius: 12,
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -349,7 +349,7 @@ export function ContactsPanel({ embedded = false }) {
width: 'min(1680px, calc(100vw - 3rem))', width: 'min(1680px, calc(100vw - 3rem))',
margin: '0 auto', margin: '0 auto',
background: 'var(--color-surface-strong)', background: 'var(--color-surface-strong)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
@ -369,7 +369,7 @@ export function ContactsPanel({ embedded = false }) {
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
}} }}
> >
@ -390,7 +390,7 @@ export function ContactsPanel({ embedded = false }) {
<div <div
style={{ style={{
padding: '1.1rem 1.25rem', padding: '1.1rem 1.25rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -409,7 +409,7 @@ export function ContactsPanel({ embedded = false }) {
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
justifyContent: isMobile ? 'space-between' : 'flex-end', justifyContent: isMobile ? 'space-between' : 'flex-end',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -425,7 +425,7 @@ export function ContactsPanel({ embedded = false }) {
style={{ style={{
width: 48, width: 48,
height: 48, height: 48,
borderRadius: '16px', borderRadius: '12px',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))', background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',

6
src/modules/home/pages/HomePage.jsx
View File

@ -106,7 +106,7 @@ export function HomePage() {
width: 'min(1680px, calc(100vw - 3rem))', width: 'min(1680px, calc(100vw - 3rem))',
margin: '0 auto', margin: '0 auto',
background: 'var(--color-surface-strong)', background: 'var(--color-surface-strong)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
@ -131,7 +131,7 @@ export function HomePage() {
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
}} }}
> >
@ -170,7 +170,7 @@ export function HomePage() {
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',

6
src/modules/home/pages/UnassignedHomePage.jsx
View File

@ -25,7 +25,7 @@ export function UnassignedHomePage() {
width: 'min(760px, 100%)', width: 'min(760px, 100%)',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '2rem', padding: '2rem',
display: 'grid', display: 'grid',
@ -56,7 +56,7 @@ export function UnassignedHomePage() {
<div <div
style={{ style={{
borderRadius: '24px', borderRadius: '18px',
background: 'rgba(0, 49, 80, 0.04)', background: 'rgba(0, 49, 80, 0.04)',
padding: '1.25rem', padding: '1.25rem',
display: 'grid', display: 'grid',
@ -75,7 +75,7 @@ export function UnassignedHomePage() {
onClick={handleLogout} onClick={handleLogout}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.95rem 1.15rem', padding: '0.95rem 1.15rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',

2
src/modules/management/components/DataPanel.jsx
View File

@ -31,7 +31,7 @@ export function DataPanel({ title, description, actionLabel, onAction, children
onClick={onAction} onClick={onAction}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',

24
src/modules/management/components/KnowledgeBasePanel.jsx
View File

@ -12,7 +12,7 @@ import {
const fieldStyle = { const fieldStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.78rem 0.9rem', padding: '0.78rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -21,7 +21,7 @@ const fieldStyle = {
const primaryButton = { const primaryButton = {
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.78rem 1rem', padding: '0.78rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -30,7 +30,7 @@ const primaryButton = {
const ghostButton = { const ghostButton = {
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.72rem 0.9rem', padding: '0.72rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -109,7 +109,7 @@ function WhatsAppPreview({ message }) {
<div <div
style={{ style={{
background: '#e7f5ef', background: '#e7f5ef',
borderRadius: 18, borderRadius: 14,
padding: '0.85rem', padding: '0.85rem',
display: 'grid', display: 'grid',
gap: '0.45rem', gap: '0.45rem',
@ -172,7 +172,7 @@ function FlowNode({ node, areasById, onAdd, onEdit, onDelete, level = 0, parentT
width: nodeWidth, width: nodeWidth,
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderTop: `5px solid ${accentColor}`, borderTop: `5px solid ${accentColor}`,
borderRadius: 18, borderRadius: 14,
background: isRoot background: isRoot
? 'linear-gradient(180deg, #fff, rgba(0,164,183,0.09))' ? 'linear-gradient(180deg, #fff, rgba(0,164,183,0.09))'
: isAgent : isAgent
@ -220,7 +220,7 @@ function FlowNode({ node, areasById, onAdd, onEdit, onDelete, level = 0, parentT
style={{ style={{
width: 34, width: 34,
height: 34, height: 34,
borderRadius: 12, borderRadius: 9,
border: 'none', border: 'none',
background: 'var(--color-highlight)', background: 'var(--color-highlight)',
color: '#132534', color: '#132534',
@ -414,7 +414,7 @@ function NodeModal({ mode, node, parent, areas, draft, onDraftChange, onClose, o
width: 'min(760px, calc(100vw - 2rem))', width: 'min(760px, calc(100vw - 2rem))',
maxHeight: 'calc(100vh - 2rem)', maxHeight: 'calc(100vh - 2rem)',
overflowY: 'auto', overflowY: 'auto',
borderRadius: 24, borderRadius: 18,
background: '#fff', background: '#fff',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.25rem', padding: '1.25rem',
@ -447,7 +447,7 @@ function NodeModal({ mode, node, parent, areas, draft, onDraftChange, onClose, o
onClick={() => change('nodeType', type)} onClick={() => change('nodeType', type)}
style={{ style={{
border: `1px solid ${draft.nodeType === type ? 'var(--color-primary)' : 'var(--color-border)'}`, border: `1px solid ${draft.nodeType === type ? 'var(--color-primary)' : 'var(--color-border)'}`,
borderRadius: 16, borderRadius: 12,
padding: '0.9rem', padding: '0.9rem',
background: draft.nodeType === type ? 'rgba(0,164,183,0.08)' : '#fff', background: draft.nodeType === type ? 'rgba(0,164,183,0.08)' : '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -743,7 +743,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
<div <div
style={{ style={{
border: '1px solid rgba(241,184,42,0.45)', border: '1px solid rgba(241,184,42,0.45)',
borderRadius: 16, borderRadius: 12,
background: 'rgba(241,184,42,0.12)', background: 'rgba(241,184,42,0.12)',
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -763,7 +763,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 22, borderRadius: 16,
background: background:
'linear-gradient(180deg, #fff, rgba(0,49,80,0.03)), radial-gradient(circle at 1px 1px, rgba(0,49,80,0.08) 1px, transparent 0)', 'linear-gradient(180deg, #fff, rgba(0,49,80,0.03)), radial-gradient(circle at 1px 1px, rgba(0,49,80,0.08) 1px, transparent 0)',
backgroundSize: 'auto, 22px 22px', backgroundSize: 'auto, 22px 22px',
@ -800,7 +800,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
{status ? ( {status ? (
<span <span
style={{ style={{
borderRadius: 14, borderRadius: 10,
padding: '0.75rem 0.85rem', padding: '0.75rem 0.85rem',
background: background:
statusTone === 'error' statusTone === 'error'
@ -828,7 +828,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
key={version.id} key={version.id}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem 0.85rem', padding: '0.75rem 0.85rem',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',

70
src/modules/management/components/ManagementLayout.jsx
View File

@ -64,45 +64,52 @@ export function ManagementLayout({
<main style={{ minHeight: '100vh', padding: '1.5rem' }}> <main style={{ minHeight: '100vh', padding: '1.5rem' }}>
<section <section
style={{ style={{
width: 'min(1680px, calc(100vw - 3rem))', width: 'min(1600px, calc(100vw - 3rem))',
margin: '0 auto', margin: '0 auto',
background: 'var(--color-surface-strong)', background: 'var(--color-surface-strong)',
borderRadius: '32px', borderRadius: '24px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
gap: '1.5rem', gap: '1.5rem',
}} }}
> >
{/* Grid plano de 4 zonas: col1=sidebar(270px) col2=conteúdo(1fr), row1=topo row2=corpo */}
<div <div
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: isDesktop ? 'minmax(300px, 360px) minmax(0, 1fr)' : '1fr', gridTemplateColumns: isDesktop ? '270px 1fr' : '1fr',
gap: '1.5rem', columnGap: '1.5rem',
alignItems: 'start', rowGap: '1.25rem',
}} }}
> >
<div style={{ display: 'grid', gap: '1.25rem' }}> {/* Zona 1 — BrandMark card: col1 row1 */}
<div <div
style={{ style={{
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '0.85rem 1rem',
overflow: 'hidden',
minWidth: 0,
...(isDesktop ? { gridColumn: 1, gridRow: 1 } : {}),
}} }}
> >
<BrandMark size="lg" /> <BrandMark size="md" />
</div> </div>
{/* Zona 2 — Aside/menu: col1 row2 */}
<aside <aside
style={{ style={{
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))', background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
color: '#fff', color: '#fff',
borderRadius: '28px', borderRadius: '20px',
padding: '1.5rem', padding: '1.5rem',
display: 'grid', display: 'grid',
gap: '1.25rem', gap: '1.25rem',
alignContent: 'start', alignContent: 'start',
alignSelf: 'start',
...(isDesktop ? { gridColumn: 1, gridRow: 2 } : {}),
}} }}
> >
<button <button
@ -117,7 +124,7 @@ export function ManagementLayout({
}} }}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '20px', borderRadius: '15px',
padding: '1rem 1.15rem', padding: '1rem 1.15rem',
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)', background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
color: '#132534', color: '#132534',
@ -164,7 +171,7 @@ export function ManagementLayout({
}} }}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '18px', borderRadius: '14px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent', background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
color: '#fff', color: '#fff',
@ -201,7 +208,7 @@ export function ManagementLayout({
onClick={handleLogout} onClick={handleLogout}
style={{ style={{
border: '1px solid rgba(255, 255, 255, 0.18)', border: '1px solid rgba(255, 255, 255, 0.18)',
borderRadius: '18px', borderRadius: '14px',
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: 'transparent', background: 'transparent',
color: '#ef4444', color: '#ef4444',
@ -212,28 +219,31 @@ export function ManagementLayout({
Sair Sair
</button> </button>
</aside> </aside>
</div>
<div style={{ display: 'grid', gap: '1.25rem', minWidth: 0 }}> {/* Zona 3 — Header: col2 row1 — mesma linha do BrandMark card */}
<header <header
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto',
gap: '1rem', gap: '1rem',
alignItems: 'center', alignItems: 'stretch',
...(isDesktop ? { gridColumn: 2, gridRow: 1 } : {}),
}} }}
> >
<div <div
style={{ style={{
padding: '1.1rem 1.25rem', padding: '0.75rem 1.1rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
minWidth: 0, minWidth: 0,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}} }}
> >
<h1 style={{ margin: 0, fontSize: '1.65rem' }}>{title}</h1> <h1 style={{ margin: 0, fontSize: '1.4rem' }}>{title}</h1>
<p style={{ margin: '0.45rem 0 0', color: 'var(--color-text-soft)' }}> <p style={{ margin: '0.3rem 0 0', color: 'var(--color-text-soft)' }}>
{subtitle} {subtitle}
</p> </p>
</div> </div>
@ -245,8 +255,8 @@ export function ManagementLayout({
gap: '0.9rem', gap: '0.9rem',
justifySelf: isMobile ? 'stretch' : 'end', justifySelf: isMobile ? 'stretch' : 'end',
justifyContent: isMobile ? 'space-between' : 'flex-end', justifyContent: isMobile ? 'space-between' : 'flex-end',
padding: '0.85rem 1rem', padding: '0.6rem 0.85rem',
borderRadius: '22px', borderRadius: '16px',
background: '#fff', background: '#fff',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
}} }}
@ -260,9 +270,9 @@ export function ManagementLayout({
<div <div
aria-hidden="true" aria-hidden="true"
style={{ style={{
width: 48, width: 40,
height: 48, height: 40,
borderRadius: '16px', borderRadius: '10px',
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))', background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
@ -275,6 +285,16 @@ export function ManagementLayout({
</div> </div>
</header> </header>
{/* Zona 4 — Conteúdo: col2 row2 */}
<div
style={{
display: 'grid',
gap: '1.25rem',
alignContent: 'start',
minWidth: 0,
...(isDesktop ? { gridColumn: 2, gridRow: 2 } : {}),
}}
>
{children} {children}
</div> </div>
</div> </div>

2
src/modules/management/components/ManagementTable.jsx
View File

@ -23,7 +23,7 @@ export function ManagementTable({ columns, rows, getRowId, isMobile = false }) {
<article <article
key={getRowId(row)} key={getRowId(row)}
style={{ style={{
borderRadius: '20px', borderRadius: '15px',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
padding: '1rem', padding: '1rem',
display: 'grid', display: 'grid',

16
src/modules/management/components/MassMessagePanel.jsx
View File

@ -8,7 +8,7 @@ import { listTemplates } from '../services/templateService';
const inputStyle = { const inputStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.85rem 0.9rem', padding: '0.85rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -347,7 +347,7 @@ export function MassMessagePanel({
disabled={isSending} disabled={isSending}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 16, borderRadius: 12,
padding: '0.95rem 1rem', padding: '0.95rem 1rem',
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)', background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
color: '#fff', color: '#fff',
@ -365,7 +365,7 @@ export function MassMessagePanel({
<article <article
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '1rem', padding: '1rem',
background: '#fff', background: '#fff',
display: 'grid', display: 'grid',
@ -395,7 +395,7 @@ export function MassMessagePanel({
style={{ style={{
border: '1px solid', border: '1px solid',
borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)', borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.7rem', padding: '0.7rem',
background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff', background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
textAlign: 'left', textAlign: 'left',
@ -422,7 +422,7 @@ export function MassMessagePanel({
onClick={clearSelectedContacts} onClick={clearSelectedContacts}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem', padding: '0.75rem',
background: '#fff', background: '#fff',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -437,7 +437,7 @@ export function MassMessagePanel({
<article <article
style={{ style={{
border: '1px solid rgba(0, 164, 183, 0.24)', border: '1px solid rgba(0, 164, 183, 0.24)',
borderRadius: 18, borderRadius: 14,
padding: '1rem', padding: '1rem',
background: 'rgba(0, 164, 183, 0.06)', background: 'rgba(0, 164, 183, 0.06)',
lineHeight: 1.5, lineHeight: 1.5,
@ -454,7 +454,7 @@ export function MassMessagePanel({
<article <article
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '1rem', padding: '1rem',
background: '#fff', background: '#fff',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',
@ -470,7 +470,7 @@ export function MassMessagePanel({
key={`${result.number}-${result.status}`} key={`${result.number}-${result.status}`}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem', padding: '0.75rem',
background: result.status === 'enviado' ? 'rgba(16,185,129,0.08)' : 'rgba(181,31,31,0.08)', background: result.status === 'enviado' ? 'rgba(16,185,129,0.08)' : 'rgba(181,31,31,0.08)',
}} }}

2
src/modules/management/components/MetricGrid.jsx
View File

@ -12,7 +12,7 @@ export function MetricGrid({ metrics, minCardWidth = '180px' }) {
key={item.label} key={item.label}
style={{ style={{
padding: '1.15rem', padding: '1.15rem',
borderRadius: '22px', borderRadius: '16px',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: '#fff', background: '#fff',
}} }}

12
src/modules/management/components/OperationalDashboard.jsx
View File

@ -5,7 +5,7 @@ import { MetricGrid } from './MetricGrid';
const selectStyle = { const selectStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.75rem 0.85rem', padding: '0.75rem 0.85rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -237,7 +237,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
key={item.id} key={item.id}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.8rem', padding: '0.8rem',
background: '#fff', background: '#fff',
display: 'grid', display: 'grid',
@ -258,7 +258,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
onClick={() => setAssignmentTarget(item)} onClick={() => setAssignmentTarget(item)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
padding: '0.65rem 0.8rem', padding: '0.65rem 0.8rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -291,7 +291,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
zIndex: 20, zIndex: 20,
}} }}
> >
<div style={{ width: 'min(460px, 100%)', background: '#fff', borderRadius: 22, padding: '1.25rem', boxShadow: 'var(--shadow-lg)', display: 'grid', gap: '1rem' }}> <div style={{ width: 'min(460px, 100%)', background: '#fff', borderRadius: 16, padding: '1.25rem', boxShadow: 'var(--shadow-lg)', display: 'grid', gap: '1rem' }}>
<div> <div>
<h2 style={{ margin: 0, fontSize: '1.2rem' }}>Atribuir atendimento</h2> <h2 style={{ margin: 0, fontSize: '1.2rem' }}>Atribuir atendimento</h2>
<p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-soft)' }}> <p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-soft)' }}>
@ -306,7 +306,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
onClick={() => setAssignmentTarget(null)} onClick={() => setAssignmentTarget(null)}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 14, borderRadius: 10,
padding: '0.8rem 0.9rem', padding: '0.8rem 0.9rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -325,7 +325,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
onClick={() => setAssignmentTarget(null)} onClick={() => setAssignmentTarget(null)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.8rem 1rem', padding: '0.8rem 1rem',
background: 'rgba(0, 49, 80, 0.08)', background: 'rgba(0, 49, 80, 0.08)',
color: 'var(--color-primary)', color: 'var(--color-primary)',

97
src/modules/management/components/TemplateManagementPanel.jsx
View File

@ -75,7 +75,7 @@ function renderPreviewBody(content, bodyVariables) {
// ── Styles ──────────────────────────────────────────────────────────────── // ── Styles ────────────────────────────────────────────────────────────────
const fieldStyle = { const fieldStyle = {
width: '100%', border: '1px solid var(--color-border)', borderRadius: 10, width: '100%', border: '1px solid var(--color-border)', borderRadius: 8,
padding: '0.6rem 0.75rem', fontSize: '0.9rem', fontWeight: 600, padding: '0.6rem 0.75rem', fontSize: '0.9rem', fontWeight: 600,
color: 'var(--color-text)', background: '#fff', boxSizing: 'border-box', color: 'var(--color-text)', background: '#fff', boxSizing: 'border-box',
}; };
@ -92,7 +92,7 @@ function pill(bg, color) {
function actionBtn(bg, color, disabled = false) { function actionBtn(bg, color, disabled = false) {
return { return {
border: 'none', borderRadius: 8, padding: '0.4rem 0.75rem', border: 'none', borderRadius: 6, padding: '0.4rem 0.75rem',
background: disabled ? '#f0f2f5' : bg, color: disabled ? '#aaa' : color, background: disabled ? '#f0f2f5' : bg, color: disabled ? '#aaa' : color,
fontWeight: 800, fontSize: '0.8rem', cursor: disabled ? 'not-allowed' : 'pointer', fontWeight: 800, fontSize: '0.8rem', cursor: disabled ? 'not-allowed' : 'pointer',
}; };
@ -108,7 +108,7 @@ function WhatsAppPreview({ form }) {
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.65rem' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.65rem' }}>
<span style={{ ...labelStyle, marginBottom: 0 }}>Pré-visualização</span> <span style={{ ...labelStyle, marginBottom: 0 }}>Pré-visualização</span>
<div style={{ <div style={{
width: 272, background: '#ece5dd', borderRadius: 20, width: 272, background: '#ece5dd', borderRadius: 15,
border: '7px solid #1a1a1a', padding: '1rem 0.65rem', border: '7px solid #1a1a1a', padding: '1rem 0.65rem',
boxShadow: '0 6px 24px rgba(0,0,0,0.18)', minHeight: 160, boxShadow: '0 6px 24px rgba(0,0,0,0.18)', minHeight: 160,
}}> }}>
@ -188,7 +188,7 @@ function TemplateCard({ t, onEdit, onSubmit, onDelete, submitting, deleting }) {
return ( return (
<div style={{ <div style={{
border: '1px solid var(--color-border)', borderRadius: 16, border: '1px solid var(--color-border)', borderRadius: 12,
padding: '1rem', background: '#fff', padding: '1rem', background: '#fff',
display: 'flex', flexDirection: 'column', gap: '0.5rem', display: 'flex', flexDirection: 'column', gap: '0.5rem',
}}> }}>
@ -197,7 +197,7 @@ function TemplateCard({ t, onEdit, onSubmit, onDelete, submitting, deleting }) {
{t.name} {t.name}
</strong> </strong>
<span style={{ <span style={{
fontSize: '0.72rem', fontWeight: 800, padding: '0.2rem 0.55rem', borderRadius: 20, fontSize: '0.72rem', fontWeight: 800, padding: '0.2rem 0.55rem', borderRadius: 15,
background: ms.bg, color: ms.color, border: `1px solid ${ms.border}`, whiteSpace: 'nowrap', background: ms.bg, color: ms.color, border: `1px solid ${ms.border}`, whiteSpace: 'nowrap',
}}> }}>
{ms.label} {ms.label}
@ -296,18 +296,19 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
const metaNamePreview = toMetaName(form.name); const metaNamePreview = toMetaName(form.name);
return ( return (
<div style={{ display: 'grid', gap: '1.1rem' }}> <div style={{ display: 'grid', gap: '1.1rem', padding: '1.75rem 2rem' }}>
{/* Header */} {/* Header */}
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<button type="button" onClick={onBack} style={{ <strong style={{ fontSize: '1.15rem', color: 'var(--color-text)' }}>
border: 'none', background: 'none', cursor: 'pointer', {editingId ? 'Editar template' : 'Novo template'}
fontWeight: 800, color: 'var(--color-text-soft)', fontSize: '0.88rem', padding: 0,
}}>
← Voltar
</button>
<strong style={{ fontSize: '1rem' }}>
{editingId ? 'Editar Template HSM' : 'Novo Template HSM'}
</strong> </strong>
<button type="button" onClick={onBack} aria-label="Fechar" style={{
border: 'none', background: 'rgba(0,0,0,0.06)', cursor: 'pointer',
width: 34, height: 34, borderRadius: '50%', display: 'grid', placeItems: 'center',
fontSize: '1.1rem', color: 'var(--color-text-soft)', lineHeight: 1,
}}>
×
</button>
</div> </div>
{/* Two-column */} {/* Two-column */}
@ -356,7 +357,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
</div> </div>
{/* Header */} {/* Header */}
<div style={{ border: '1px solid var(--color-border)', borderRadius: 12, padding: '0.75rem', display: 'grid', gap: '0.5rem' }}> <div style={{ border: '1px solid var(--color-border)', borderRadius: 9, padding: '0.75rem', display: 'grid', gap: '0.5rem' }}>
<label style={{ ...labelStyle, marginBottom: 0 }}>Header (opcional)</label> <label style={{ ...labelStyle, marginBottom: 0 }}>Header (opcional)</label>
<div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '0.5rem' }}> <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '0.5rem' }}>
<select value={form.headerType} <select value={form.headerType}
@ -380,7 +381,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.3rem' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.3rem' }}>
<label style={{ ...labelStyle, marginBottom: 0 }} htmlFor="tpl-body">Corpo *</label> <label style={{ ...labelStyle, marginBottom: 0 }} htmlFor="tpl-body">Corpo *</label>
<button type="button" onClick={insertVar} style={{ <button type="button" onClick={insertVar} style={{
border: '1px solid var(--color-border)', borderRadius: 8, padding: '0.2rem 0.6rem', border: '1px solid var(--color-border)', borderRadius: 6, padding: '0.2rem 0.6rem',
background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, fontSize: '0.75rem', cursor: 'pointer', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, fontSize: '0.75rem', cursor: 'pointer',
}}> }}>
+ Variável + Variável
@ -396,7 +397,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
{/* Variáveis detectadas */} {/* Variáveis detectadas */}
{form.bodyVariables.length > 0 && ( {form.bodyVariables.length > 0 && (
<div style={{ border: '1px solid #e0e4ec', borderRadius: 12, padding: '0.75rem', background: '#fafbfc' }}> <div style={{ border: '1px solid #e0e4ec', borderRadius: 9, padding: '0.75rem', background: '#fafbfc' }}>
<p style={{ ...labelStyle, marginBottom: '0.5rem' }}>Variáveis do corpo</p> <p style={{ ...labelStyle, marginBottom: '0.5rem' }}>Variáveis do corpo</p>
<div style={{ display: 'grid', gap: '0.4rem' }}> <div style={{ display: 'grid', gap: '0.4rem' }}>
<div style={{ display: 'grid', gridTemplateColumns: '64px 1fr 1fr', gap: '0.4rem' }}> <div style={{ display: 'grid', gridTemplateColumns: '64px 1fr 1fr', gap: '0.4rem' }}>
@ -433,7 +434,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
</div> </div>
{/* Botões */} {/* Botões */}
<div style={{ border: '1px solid var(--color-border)', borderRadius: 12, padding: '0.75rem', display: 'grid', gap: '0.6rem' }}> <div style={{ border: '1px solid var(--color-border)', borderRadius: 9, padding: '0.75rem', display: 'grid', gap: '0.6rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<label style={{ ...labelStyle, marginBottom: 0 }}>Botões (opcional)</label> <label style={{ ...labelStyle, marginBottom: 0 }}>Botões (opcional)</label>
<div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
@ -441,7 +442,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
<button key={bt.value} type="button" onClick={() => addButton(bt.value)} <button key={bt.value} type="button" onClick={() => addButton(bt.value)}
disabled={form.buttons.length >= 10} disabled={form.buttons.length >= 10}
style={{ style={{
border: '1px solid #dde1e7', borderRadius: 8, padding: '0.2rem 0.55rem', border: '1px solid #dde1e7', borderRadius: 6, padding: '0.2rem 0.55rem',
background: '#fff', color: '#333', fontWeight: 700, fontSize: '0.73rem', cursor: 'pointer', background: '#fff', color: '#333', fontWeight: 700, fontSize: '0.73rem', cursor: 'pointer',
}}> }}>
+ {bt.label} + {bt.label}
@ -473,7 +474,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
)} )}
<button type="button" onClick={() => removeBtn(i)} style={{ <button type="button" onClick={() => removeBtn(i)} style={{
border: 'none', background: '#fff2f2', color: '#b00020', border: 'none', background: '#fff2f2', color: '#b00020',
borderRadius: 8, padding: '0.4rem 0.55rem', fontWeight: 800, cursor: 'pointer', borderRadius: 6, padding: '0.4rem 0.55rem', fontWeight: 800, cursor: 'pointer',
}}>✕</button> }}>✕</button>
</div> </div>
))} ))}
@ -488,13 +489,13 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
{/* Actions */} {/* Actions */}
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.65rem' }}> <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.65rem' }}>
<button type="button" onClick={onBack} style={{ <button type="button" onClick={onBack} style={{
border: '1px solid var(--color-border)', borderRadius: 12, padding: '0.6rem 1rem', border: '1px solid var(--color-border)', borderRadius: 9, padding: '0.6rem 1rem',
background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, cursor: 'pointer', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, cursor: 'pointer',
}}> }}>
Cancelar Cancelar
</button> </button>
<button type="button" onClick={onSave} disabled={saving} style={{ <button type="button" onClick={onSave} disabled={saving} style={{
border: 'none', borderRadius: 12, padding: '0.6rem 1.25rem', border: 'none', borderRadius: 9, padding: '0.6rem 1.25rem',
background: saving ? 'var(--color-border)' : 'var(--color-primary)', background: saving ? 'var(--color-border)' : 'var(--color-primary)',
color: '#fff', fontWeight: 800, cursor: saving ? 'not-allowed' : 'pointer', color: '#fff', fontWeight: 800, cursor: saving ? 'not-allowed' : 'pointer',
}}> }}>
@ -515,7 +516,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
export function TemplateManagementPanel({ areas = [] }) { export function TemplateManagementPanel({ areas = [] }) {
const [templates, setTemplates] = useState([]); const [templates, setTemplates] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [view, setView] = useState('list'); const [modalOpen, setModalOpen] = useState(false);
const [editingId, setEditingId] = useState(null); const [editingId, setEditingId] = useState(null);
const [form, setForm] = useState(EMPTY_FORM); const [form, setForm] = useState(EMPTY_FORM);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@ -541,7 +542,7 @@ export function TemplateManagementPanel({ areas = [] }) {
function openNew() { function openNew() {
setForm(EMPTY_FORM); setEditingId(null); setForm(EMPTY_FORM); setEditingId(null);
setError(''); setSuccess(''); setView('form'); setError(''); setSuccess(''); setModalOpen(true);
} }
function openEdit(t) { function openEdit(t) {
@ -557,7 +558,7 @@ export function TemplateManagementPanel({ areas = [] }) {
footerText: t.footer_text || '', footerText: t.footer_text || '',
buttons: Array.isArray(t.buttons) ? t.buttons : [], buttons: Array.isArray(t.buttons) ? t.buttons : [],
}); });
setEditingId(t.id); setError(''); setSuccess(''); setView('form'); setEditingId(t.id); setError(''); setSuccess(''); setModalOpen(true);
} }
async function handleSave() { async function handleSave() {
@ -583,7 +584,7 @@ export function TemplateManagementPanel({ areas = [] }) {
else await saveTemplate(payload); else await saveTemplate(payload);
setSuccess('Template salvo! Clique em "Enviar para Meta" para submeter à aprovação.'); setSuccess('Template salvo! Clique em "Enviar para Meta" para submeter à aprovação.');
await load(); await load();
setTimeout(() => { setView('list'); setSuccess(''); }, 2500); setTimeout(() => { setModalOpen(false); setSuccess(''); }, 2500);
} catch (err) { } catch (err) {
setError(err?.message || 'Erro ao salvar.'); setError(err?.message || 'Erro ao salvar.');
} finally { } finally {
@ -630,34 +631,51 @@ export function TemplateManagementPanel({ areas = [] }) {
} }
} }
function goBack() { setView('list'); setError(''); setSuccess(''); } function goBack() { setModalOpen(false); setError(''); setSuccess(''); }
// ── Form view ── // ── List view (sempre renderizado) ──
if (view === 'form') {
return ( return (
<>
{/* Modal do formulário */}
{modalOpen && (
<div
onClick={goBack}
style={{
position: 'fixed', inset: 0, zIndex: 50,
background: 'rgba(0, 49, 80, 0.28)',
display: 'grid', placeItems: 'center', padding: '1rem',
}}
>
<div
onClick={e => e.stopPropagation()}
style={{
background: '#fff', borderRadius: '20px',
width: '100%', maxWidth: '1040px',
maxHeight: '92vh', overflowY: 'auto',
boxShadow: '0 8px 40px rgba(0,0,0,0.18)',
}}
>
<TemplateFormView <TemplateFormView
form={form} setForm={setForm} editingId={editingId} form={form} setForm={setForm} editingId={editingId}
onSave={handleSave} saving={saving} error={error} success={success} onSave={handleSave} saving={saving} error={error} success={success}
onBack={goBack} areas={areas} onBack={goBack} areas={areas}
/> />
); </div>
} </div>
)}
// ── List view ──
return (
<div style={{ display: 'grid', gap: '1rem' }}> <div style={{ display: 'grid', gap: '1rem' }}>
{/* Toolbar */} {/* Toolbar */}
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
<strong style={{ flex: 1, fontSize: '0.95rem' }}>Templates HSM</strong>
<button type="button" onClick={handleSync} disabled={syncing} style={{ <button type="button" onClick={handleSync} disabled={syncing} style={{
border: '1px solid var(--color-border)', borderRadius: 10, padding: '0.45rem 0.85rem', border: '1px solid var(--color-border)', borderRadius: 8, padding: '0.45rem 0.85rem',
background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, fontSize: '0.82rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 800, fontSize: '0.82rem',
cursor: syncing ? 'not-allowed' : 'pointer', cursor: syncing ? 'not-allowed' : 'pointer',
}}> }}>
{syncing ? 'Sincronizando…' : '↻ Sincronizar'} {syncing ? 'Sincronizando…' : '↻ Sincronizar'}
</button> </button>
<button type="button" onClick={openNew} style={{ <button type="button" onClick={openNew} style={{
border: 'none', borderRadius: 10, padding: '0.45rem 0.85rem', border: 'none', borderRadius: 8, padding: '0.45rem 0.85rem',
background: 'var(--color-primary)', color: '#fff', fontWeight: 800, background: 'var(--color-primary)', color: '#fff', fontWeight: 800,
fontSize: '0.82rem', cursor: 'pointer', fontSize: '0.82rem', cursor: 'pointer',
}}> }}>
@ -666,7 +684,7 @@ export function TemplateManagementPanel({ areas = [] }) {
</div> </div>
{/* Info banner */} {/* Info banner */}
<div style={{ background: '#f0f4ff', borderRadius: 12, padding: '0.7rem 0.9rem', border: '1px solid #dde4f5' }}> <div style={{ background: '#f0f4ff', borderRadius: 9, padding: '0.7rem 0.9rem', border: '1px solid #dde4f5' }}>
<p style={{ margin: 0, fontSize: '0.8rem', color: '#334', fontWeight: 600, lineHeight: 1.55 }}> <p style={{ margin: 0, fontSize: '0.8rem', color: '#334', fontWeight: 600, lineHeight: 1.55 }}>
<strong>Templates HSM</strong> são aprovados pela Meta para iniciar conversas fora da janela de 24h. <strong>Templates HSM</strong> são aprovados pela Meta para iniciar conversas fora da janela de 24h.
Crie → Salve → <strong>Envie para Meta</strong> → aguarde aprovação →{' '} Crie → Salve → <strong>Envie para Meta</strong> → aguarde aprovação →{' '}
@ -708,5 +726,6 @@ export function TemplateManagementPanel({ areas = [] }) {
</div> </div>
)} )}
</div> </div>
</>
); );
} }

14
src/modules/management/components/WhatsappConfigModal.jsx
View File

@ -7,7 +7,7 @@ import {
const fieldStyle = { const fieldStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 12, borderRadius: 9,
padding: '0.7rem 0.85rem', padding: '0.7rem 0.85rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -137,7 +137,7 @@ export function WhatsappConfigModal({ onClose }) {
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
width: 'min(540px, 100%)', width: 'min(540px, 100%)',
borderRadius: 22, borderRadius: 16,
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: '#fff', background: '#fff',
padding: '1.4rem', padding: '1.4rem',
@ -155,7 +155,7 @@ export function WhatsappConfigModal({ onClose }) {
style={{ style={{
width: 46, width: 46,
height: 46, height: 46,
borderRadius: 14, borderRadius: 10,
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: '#20a45b', background: '#20a45b',
@ -198,7 +198,7 @@ export function WhatsappConfigModal({ onClose }) {
{!loading && currentConfig && ( {!loading && currentConfig && (
<div <div
style={{ style={{
borderRadius: 12, borderRadius: 9,
padding: '0.7rem 0.9rem', padding: '0.7rem 0.9rem',
background: currentConfig.is_configured ? '#f0faf4' : '#fff8f0', background: currentConfig.is_configured ? '#f0faf4' : '#fff8f0',
border: `1px solid ${currentConfig.is_configured ? '#b6e8c8' : '#f5d9a8'}`, border: `1px solid ${currentConfig.is_configured ? '#b6e8c8' : '#f5d9a8'}`,
@ -315,7 +315,7 @@ export function WhatsappConfigModal({ onClose }) {
{validation && ( {validation && (
<div <div
style={{ style={{
borderRadius: 12, borderRadius: 9,
padding: '0.7rem 0.9rem', padding: '0.7rem 0.9rem',
background: validation.valid ? '#f0faf4' : '#fff2f2', background: validation.valid ? '#f0faf4' : '#fff2f2',
border: `1px solid ${validation.valid ? '#b6e8c8' : '#f5c6c6'}`, border: `1px solid ${validation.valid ? '#b6e8c8' : '#f5c6c6'}`,
@ -368,7 +368,7 @@ export function WhatsappConfigModal({ onClose }) {
disabled={!canValidate || validating} disabled={!canValidate || validating}
style={{ style={{
border: '1px solid #20a45b44', border: '1px solid #20a45b44',
borderRadius: 14, borderRadius: 10,
padding: '0.65rem 0.9rem', padding: '0.65rem 0.9rem',
background: '#fff', background: '#fff',
color: canValidate ? '#20a45b' : 'var(--color-text-soft)', color: canValidate ? '#20a45b' : 'var(--color-text-soft)',
@ -386,7 +386,7 @@ export function WhatsappConfigModal({ onClose }) {
disabled={!canSave} disabled={!canSave}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.65rem 1rem', padding: '0.65rem 1rem',
background: canSave ? 'var(--color-primary)' : 'var(--color-border)', background: canSave ? 'var(--color-primary)' : 'var(--color-border)',
color: '#fff', color: '#fff',

80
src/modules/management/pages/AdminPage.jsx
View File

@ -36,7 +36,7 @@ import { WhatsappConfigModal } from '../components/WhatsappConfigModal';
const selectStyle = { const selectStyle = {
width: '100%', width: '100%',
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: '14px', borderRadius: '10px',
padding: '0.75rem 0.85rem', padding: '0.75rem 0.85rem',
background: '#fff', background: '#fff',
color: 'var(--color-text)', color: 'var(--color-text)',
@ -45,7 +45,7 @@ const selectStyle = {
const compactSelectStyle = { const compactSelectStyle = {
...selectStyle, ...selectStyle,
borderRadius: '10px', borderRadius: '8px',
padding: '0.45rem 0.55rem', padding: '0.45rem 0.55rem',
fontSize: '0.82rem', fontSize: '0.82rem',
}; };
@ -184,7 +184,7 @@ export function AdminAttendanceWorkspace({ isWideDesktop, isDesktop, isTablet, i
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: '#fff', background: '#fff',
color: 'var(--color-text-soft)', color: 'var(--color-text-soft)',
@ -660,7 +660,7 @@ export function AdminPage() {
onClick={() => openUserEditor(row)} onClick={() => openUserEditor(row)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.7rem 0.9rem', padding: '0.7rem 0.9rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -723,7 +723,7 @@ export function AdminPage() {
onClick={() => openAreaEditor(row)} onClick={() => openAreaEditor(row)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
padding: '0.55rem 0.7rem', padding: '0.55rem 0.7rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -737,7 +737,7 @@ export function AdminPage() {
onClick={() => handleDeleteArea(row)} onClick={() => handleDeleteArea(row)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
padding: '0.55rem 0.7rem', padding: '0.55rem 0.7rem',
background: 'rgba(181, 31, 31, 0.1)', background: 'rgba(181, 31, 31, 0.1)',
color: 'var(--color-secondary)', color: 'var(--color-secondary)',
@ -922,7 +922,7 @@ export function AdminPage() {
<div style={{ display: 'grid', gridTemplateColumns: isDesktop ? 'minmax(0, 1fr) minmax(320px, 0.8fr)' : '1fr', gap: '1rem' }}> <div style={{ display: 'grid', gridTemplateColumns: isDesktop ? 'minmax(0, 1fr) minmax(320px, 0.8fr)' : '1fr', gap: '1rem' }}>
<div style={{ display: 'grid', gap: '0.75rem' }}> <div style={{ display: 'grid', gap: '0.75rem' }}>
{notices.map((notice) => ( {notices.map((notice) => (
<article key={notice.id} style={{ border: '1px solid var(--color-border)', borderRadius: 18, padding: '0.9rem 1rem', background: '#fff' }}> <article key={notice.id} style={{ border: '1px solid var(--color-border)', borderRadius: 14, padding: '0.9rem 1rem', background: '#fff' }}>
{notice.text} {notice.text}
</article> </article>
))} ))}
@ -935,7 +935,7 @@ export function AdminPage() {
placeholder="Digite um aviso para o time..." placeholder="Digite um aviso para o time..."
style={{ ...selectStyle, resize: 'vertical', lineHeight: 1.45 }} style={{ ...selectStyle, resize: 'vertical', lineHeight: 1.45 }}
/> />
<button type="button" onClick={sendNotice} style={{ border: 'none', borderRadius: 16, padding: '0.95rem 1rem', background: 'var(--color-primary)', color: '#fff', fontWeight: 800 }}> <button type="button" onClick={sendNotice} style={{ border: 'none', borderRadius: 12, padding: '0.95rem 1rem', background: 'var(--color-primary)', color: '#fff', fontWeight: 800 }}>
Enviar aviso Enviar aviso
</button> </button>
</div> </div>
@ -994,7 +994,7 @@ export function AdminPage() {
style={{ style={{
width: 'min(560px, 100%)', width: 'min(560px, 100%)',
background: '#fff', background: '#fff',
borderRadius: 24, borderRadius: 18,
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.25rem', padding: '1.25rem',
display: 'grid', display: 'grid',
@ -1042,7 +1042,7 @@ export function AdminPage() {
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.85rem', padding: '0.85rem',
background: 'rgba(0, 164, 183, 0.08)', background: 'rgba(0, 164, 183, 0.08)',
color: 'var(--color-primary)', color: 'var(--color-primary)',
@ -1072,7 +1072,7 @@ export function AdminPage() {
disabled={!specialtyToAdd} disabled={!specialtyToAdd}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem 0.95rem', padding: '0.75rem 0.95rem',
background: specialtyToAdd ? 'var(--color-primary)' : 'rgba(0, 49, 80, 0.12)', background: specialtyToAdd ? 'var(--color-primary)' : 'rgba(0, 49, 80, 0.12)',
color: specialtyToAdd ? '#fff' : 'var(--color-text-soft)', color: specialtyToAdd ? '#fff' : 'var(--color-text-soft)',
@ -1089,7 +1089,7 @@ export function AdminPage() {
key={specialty.id} key={specialty.id}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.75rem', padding: '0.75rem',
display: 'grid', display: 'grid',
gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) 140px auto', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) 140px auto',
@ -1111,7 +1111,7 @@ export function AdminPage() {
onClick={() => removeSpecialtyFromEdit(specialty.id)} onClick={() => removeSpecialtyFromEdit(specialty.id)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
padding: '0.55rem 0.7rem', padding: '0.55rem 0.7rem',
background: 'rgba(181, 31, 31, 0.1)', background: 'rgba(181, 31, 31, 0.1)',
color: 'var(--color-secondary)', color: 'var(--color-secondary)',
@ -1135,7 +1135,7 @@ export function AdminPage() {
onClick={submitUserEditor} onClick={submitUserEditor}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 16, borderRadius: 12,
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -1165,7 +1165,7 @@ export function AdminPage() {
onClick={handleCreateArea} onClick={handleCreateArea}
style={{ style={{
border: 'none', border: 'none',
borderRadius: '14px', borderRadius: '10px',
padding: '0.75rem 0.95rem', padding: '0.75rem 0.95rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -1195,7 +1195,7 @@ export function AdminPage() {
style={{ style={{
width: 'min(520px, 100%)', width: 'min(520px, 100%)',
background: '#fff', background: '#fff',
borderRadius: 24, borderRadius: 18,
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
padding: '1.25rem', padding: '1.25rem',
display: 'grid', display: 'grid',
@ -1247,7 +1247,7 @@ export function AdminPage() {
onClick={submitAreaEditor} onClick={submitAreaEditor}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 16, borderRadius: 12,
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -1379,7 +1379,7 @@ export function AdminPage() {
onClick={() => removeAiContent(row.id)} onClick={() => removeAiContent(row.id)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
padding: '0.55rem 0.7rem', padding: '0.55rem 0.7rem',
background: 'rgba(181, 31, 31, 0.1)', background: 'rgba(181, 31, 31, 0.1)',
color: 'var(--color-secondary)', color: 'var(--color-secondary)',
@ -1439,7 +1439,7 @@ export function AdminPage() {
type="submit" type="submit"
style={{ style={{
border: 'none', border: 'none',
borderRadius: 16, borderRadius: 12,
padding: '0.9rem 1rem', padding: '0.9rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -1470,7 +1470,7 @@ export function AdminPage() {
type="submit" type="submit"
style={{ style={{
border: 'none', border: 'none',
borderRadius: 16, borderRadius: 12,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -1488,7 +1488,7 @@ export function AdminPage() {
key={`${rule}-${index}`} key={`${rule}-${index}`}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 16, borderRadius: 12,
padding: '0.85rem 0.9rem', padding: '0.85rem 0.9rem',
background: '#fff', background: '#fff',
display: 'flex', display: 'flex',
@ -1505,7 +1505,7 @@ export function AdminPage() {
onClick={() => setAiGuardrails((current) => current.filter((_, itemIndex) => itemIndex !== index))} onClick={() => setAiGuardrails((current) => current.filter((_, itemIndex) => itemIndex !== index))}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 12, borderRadius: 9,
padding: '0.45rem 0.65rem', padding: '0.45rem 0.65rem',
background: 'rgba(181, 31, 31, 0.1)', background: 'rgba(181, 31, 31, 0.1)',
color: 'var(--color-secondary)', color: 'var(--color-secondary)',
@ -1565,7 +1565,7 @@ export function AdminPage() {
key={item.label} key={item.label}
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '1rem', padding: '1rem',
background: '#f8fbfc', background: '#f8fbfc',
display: 'grid', display: 'grid',
@ -1583,7 +1583,7 @@ export function AdminPage() {
role="alert" role="alert"
style={{ style={{
border: '1px solid rgba(216, 137, 28, 0.32)', border: '1px solid rgba(216, 137, 28, 0.32)',
borderRadius: 16, borderRadius: 12,
padding: '0.85rem 1rem', padding: '0.85rem 1rem',
background: 'rgba(216, 137, 28, 0.08)', background: 'rgba(216, 137, 28, 0.08)',
color: '#7a4a08', color: '#7a4a08',
@ -1610,7 +1610,7 @@ export function AdminPage() {
key={item.id} key={item.id}
style={{ style={{
border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`, border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`,
borderRadius: 22, borderRadius: 16,
padding: '1.1rem', padding: '1.1rem',
background: isEnabled ? `${item.color}0f` : '#fff', background: isEnabled ? `${item.color}0f` : '#fff',
display: 'grid', display: 'grid',
@ -1625,7 +1625,7 @@ export function AdminPage() {
style={{ style={{
width: 52, width: 52,
height: 52, height: 52,
borderRadius: 16, borderRadius: 12,
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: item.color, background: item.color,
@ -1719,7 +1719,7 @@ export function AdminPage() {
}} }}
style={{ style={{
border: `1px solid ${item.color}44`, border: `1px solid ${item.color}44`,
borderRadius: 14, borderRadius: 10,
padding: '0.65rem 0.8rem', padding: '0.65rem 0.8rem',
background: '#fff', background: '#fff',
color: item.color, color: item.color,
@ -1758,7 +1758,7 @@ export function AdminPage() {
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
style={{ style={{
width: 'min(460px, 100%)', width: 'min(460px, 100%)',
borderRadius: 22, borderRadius: 16,
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: '#fff', background: '#fff',
padding: '1.25rem', padding: '1.25rem',
@ -1773,7 +1773,7 @@ export function AdminPage() {
style={{ style={{
width: 44, width: 44,
height: 44, height: 44,
borderRadius: 14, borderRadius: 10,
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: configurationModal.color, background: configurationModal.color,
@ -1803,7 +1803,7 @@ export function AdminPage() {
onClick={() => setConfigurationModal(null)} onClick={() => setConfigurationModal(null)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem 0.95rem', padding: '0.75rem 0.95rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -1823,7 +1823,7 @@ export function AdminPage() {
function renderPlaceholder(title, description) { function renderPlaceholder(title, description) {
return ( return (
<DataPanel title={title} description={description}> <DataPanel title={title} description={description}>
<div style={{ border: '1px solid var(--color-border)', borderRadius: 18, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}> <div style={{ border: '1px solid var(--color-border)', borderRadius: 14, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}>
Seção em preparação. Seção em preparação.
</div> </div>
</DataPanel> </DataPanel>
@ -1849,7 +1849,7 @@ export function AdminPage() {
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '1rem', padding: '1rem',
background: '#f8fbfc', background: '#f8fbfc',
display: 'grid', display: 'grid',
@ -1862,7 +1862,7 @@ export function AdminPage() {
<div <div
style={{ style={{
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
borderRadius: 18, borderRadius: 14,
padding: '1rem', padding: '1rem',
background: '#f8fbfc', background: '#f8fbfc',
display: 'grid', display: 'grid',
@ -1890,7 +1890,7 @@ export function AdminPage() {
key={item.id} key={item.id}
style={{ style={{
border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`, border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`,
borderRadius: 22, borderRadius: 16,
padding: '1.1rem', padding: '1.1rem',
background: isEnabled ? `${item.color}0f` : '#fff', background: isEnabled ? `${item.color}0f` : '#fff',
display: 'grid', display: 'grid',
@ -1905,7 +1905,7 @@ export function AdminPage() {
style={{ style={{
width: 52, width: 52,
height: 52, height: 52,
borderRadius: 16, borderRadius: 12,
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
background: item.color, background: item.color,
@ -1994,7 +1994,7 @@ export function AdminPage() {
onClick={() => setAuthConfigModal(item)} onClick={() => setAuthConfigModal(item)}
style={{ style={{
border: `1px solid ${item.color}44`, border: `1px solid ${item.color}44`,
borderRadius: 14, borderRadius: 10,
padding: '0.65rem 0.8rem', padding: '0.65rem 0.8rem',
background: '#fff', background: '#fff',
color: item.color, color: item.color,
@ -2029,7 +2029,7 @@ export function AdminPage() {
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
style={{ style={{
width: 'min(460px, 100%)', width: 'min(460px, 100%)',
borderRadius: 22, borderRadius: 16,
border: '1px solid var(--color-border)', border: '1px solid var(--color-border)',
background: '#fff', background: '#fff',
padding: '1.25rem', padding: '1.25rem',
@ -2050,7 +2050,7 @@ export function AdminPage() {
onClick={() => setAuthConfigModal(null)} onClick={() => setAuthConfigModal(null)}
style={{ style={{
border: 'none', border: 'none',
borderRadius: 14, borderRadius: 10,
padding: '0.75rem 0.95rem', padding: '0.75rem 0.95rem',
background: 'var(--color-primary)', background: 'var(--color-primary)',
color: '#fff', color: '#fff',
@ -2110,6 +2110,8 @@ export function AdminPage() {
? 'Conteúdos da IA' ? 'Conteúdos da IA'
: activeAdminSection === 'knowledge' : activeAdminSection === 'knowledge'
? 'Fluxo do Bot' ? 'Fluxo do Bot'
: activeAdminSection === 'templates'
? 'Templates HSM'
: 'Painel administrativo'; : 'Painel administrativo';
const pageSubtitle = activeAdminSection === 'home' const pageSubtitle = activeAdminSection === 'home'
@ -2132,6 +2134,8 @@ export function AdminPage() {
? 'Base de documentos que será consultada pela IA em fase de testes.' ? 'Base de documentos que será consultada pela IA em fase de testes.'
: activeAdminSection === 'knowledge' : activeAdminSection === 'knowledge'
? 'Árvore de decisão configurável para roteamento do Agente Virtual Sothis.' ? 'Árvore de decisão configurável para roteamento do Agente Virtual Sothis.'
: activeAdminSection === 'templates'
? 'Modelos de mensagens predefinidas e aprovados pela Meta para iniciar conversas.'
: 'Controle operacional e configurações administrativas.'; : 'Controle operacional e configurações administrativas.';
return ( return (

2
src/modules/management/pages/SupervisorPage.jsx
View File

@ -51,7 +51,7 @@ export function SupervisorPage() {
function renderPlaceholder(title, description) { function renderPlaceholder(title, description) {
return ( return (
<DataPanel title={title} description={description}> <DataPanel title={title} description={description}>
<div style={{ border: '1px solid var(--color-border)', borderRadius: 18, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}> <div style={{ border: '1px solid var(--color-border)', borderRadius: 14, padding: '1rem', background: '#fff', color: 'var(--color-text-soft)', fontWeight: 700 }}>
Secao em preparacao. Secao em preparacao.
</div> </div>
</DataPanel> </DataPanel>