REFACTOR: Ajustes de borda e modal de novo template
Some checks are pending
Deploy Dev / deploy (push) Waiting to run
Some checks are pending
Deploy Dev / deploy (push) Waiting to run
- Ajustado border Radius de todos componentes de 28 para 20px - Criado modal para quando for criado um novo template
This commit is contained in:
parent
d5e35b11ad
commit
faa03f80cf
@ -8,7 +8,7 @@ export function RecentContactsList({
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.25rem',
|
||||
display: 'grid',
|
||||
gap: '0.9rem',
|
||||
@ -34,7 +34,7 @@ export function RecentContactsList({
|
||||
border: '1px solid',
|
||||
borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
|
||||
background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
|
||||
borderRadius: '20px',
|
||||
borderRadius: '15px',
|
||||
padding: '1rem',
|
||||
textAlign: 'left',
|
||||
display: 'grid',
|
||||
@ -71,7 +71,7 @@ export function RecentContactsList({
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '1rem',
|
||||
background: 'rgba(0, 49, 80, 0.04)',
|
||||
color: 'var(--color-text-soft)',
|
||||
|
||||
@ -40,7 +40,7 @@ export function AgentNewAttendancePage() {
|
||||
width: 'min(1680px, calc(100vw - 3rem))',
|
||||
margin: '0 auto',
|
||||
background: 'var(--color-surface-strong)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
@ -60,7 +60,7 @@ export function AgentNewAttendancePage() {
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
}}
|
||||
>
|
||||
@ -81,7 +81,7 @@ export function AgentNewAttendancePage() {
|
||||
<div
|
||||
style={{
|
||||
padding: '1.1rem 1.25rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
@ -100,7 +100,7 @@ export function AgentNewAttendancePage() {
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
justifyContent: isMobile ? 'space-between' : 'flex-end',
|
||||
padding: '0.85rem 1rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
@ -116,7 +116,7 @@ export function AgentNewAttendancePage() {
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { BrandMark } from '../../../shared/components/BrandMark';
|
||||
import { useViewport } from '../../../shared/hooks/useViewport';
|
||||
@ -369,7 +369,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
style={{
|
||||
justifySelf: isMobile ? 'stretch' : 'center',
|
||||
padding: '0.85rem 1rem',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
background: 'rgba(0, 49, 80, 0.06)',
|
||||
color: 'var(--color-primary)',
|
||||
fontWeight: 700,
|
||||
@ -382,7 +382,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
to="/home"
|
||||
style={{
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -407,7 +407,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
gap: '1.25rem',
|
||||
@ -443,7 +443,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
style={{
|
||||
border: '1px solid',
|
||||
borderColor: isActive ? `${channel.accent}44` : 'var(--color-border)',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
padding: '1rem',
|
||||
background: isActive ? `${channel.accent}12` : '#fff',
|
||||
textAlign: 'left',
|
||||
@ -485,7 +485,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
}}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -508,7 +508,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder={selectedCountry.placeholder}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -525,7 +525,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="Nome para salvar na agenda"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -550,7 +550,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="Ex: Departamento, vaga ou conta vinculada"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -565,7 +565,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
onChange={(event) => setSelectedTemplateId(event.target.value)}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -597,7 +597,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="Ex: 26/05/2026"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -613,7 +613,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="https://..."
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -629,7 +629,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="Valor livre"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -642,7 +642,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(0, 49, 80, 0.08)',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
padding: '1rem',
|
||||
background: 'linear-gradient(180deg, #e8f3ee, #dcefe8)',
|
||||
minHeight: 220,
|
||||
@ -695,7 +695,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="Contexto inicial deste atendimento."
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -716,7 +716,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
>
|
||||
<article
|
||||
style={{
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
padding: '1.25rem',
|
||||
background:
|
||||
'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
|
||||
style={{
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
padding: '1.25rem',
|
||||
border: '1px solid var(--color-border)',
|
||||
background: '#fff',
|
||||
@ -773,7 +773,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
onClick={clearSelection}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '1rem 1.1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -789,7 +789,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
disabled={!canStartAttendance || isStarting}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '1rem 1.1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -808,7 +808,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
padding: '1rem',
|
||||
background: '#fff',
|
||||
display: 'grid',
|
||||
@ -829,7 +829,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
placeholder="Buscar por nome, telefone ou etiqueta"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.85rem 0.9rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -849,7 +849,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
style={{
|
||||
border: '1px solid',
|
||||
borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.78rem',
|
||||
background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
|
||||
textAlign: 'left',
|
||||
@ -896,7 +896,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
onClick={clearSelection}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -911,7 +911,7 @@ export function NewAttendancePage({ embedded = false }) {
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid rgba(0, 164, 183, 0.24)',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
padding: '1rem',
|
||||
background: 'rgba(0, 164, 183, 0.06)',
|
||||
color: 'var(--color-text-soft)',
|
||||
|
||||
@ -4,7 +4,7 @@ import { useLogin } from '../hooks/useLogin';
|
||||
const fieldStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -14,7 +14,7 @@ const fieldStyle = {
|
||||
const primaryButtonStyle = {
|
||||
width: '100%',
|
||||
padding: '0.95rem 1rem',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -25,7 +25,7 @@ const primaryButtonStyle = {
|
||||
const secondaryButtonStyle = {
|
||||
width: '100%',
|
||||
padding: '0.95rem 1rem',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid rgba(0, 49, 80, 0.16)',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -95,7 +95,7 @@ export function LoginForm() {
|
||||
role="alert"
|
||||
style={{
|
||||
border: '1px solid rgba(180, 35, 24, 0.24)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'rgba(180, 35, 24, 0.08)',
|
||||
color: '#b42318',
|
||||
@ -111,7 +111,7 @@ export function LoginForm() {
|
||||
role="alert"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.85rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text-soft)',
|
||||
|
||||
@ -25,7 +25,7 @@ export function LoginPage() {
|
||||
background:
|
||||
'linear-gradient(180deg, rgba(0, 49, 80, 0.98) 0%, rgba(11, 90, 134, 0.95) 100%)',
|
||||
color: '#fff',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
padding: '2.5rem',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
position: 'relative',
|
||||
@ -99,7 +99,7 @@ export function LoginPage() {
|
||||
key={item.label}
|
||||
style={{
|
||||
padding: '1rem',
|
||||
borderRadius: '20px',
|
||||
borderRadius: '15px',
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
}}
|
||||
@ -116,7 +116,7 @@ export function LoginPage() {
|
||||
background: 'var(--color-surface)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.65)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
padding: '2.5rem',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
display: 'grid',
|
||||
|
||||
@ -78,7 +78,7 @@ export function CallControls({ controls, isMobile = false }) {
|
||||
type="button"
|
||||
style={{
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
padding: '1rem',
|
||||
background: 'rgba(255, 255, 255, 0.06)',
|
||||
color: '#fff',
|
||||
@ -93,7 +93,7 @@ export function CallControls({ controls, isMobile = false }) {
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
|
||||
@ -41,7 +41,7 @@ export function CallHeader({ isMobile = false }) {
|
||||
to="/home"
|
||||
style={{
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'rgba(255, 255, 255, 0.08)',
|
||||
color: '#fff',
|
||||
|
||||
@ -74,7 +74,7 @@ export function CallPage() {
|
||||
style={{
|
||||
width: isMobile ? 110 : 132,
|
||||
height: isMobile ? 110 : 132,
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
background: 'linear-gradient(135deg, #0d3d5d, #00a4b7)',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
@ -105,7 +105,7 @@ export function CallPage() {
|
||||
<article
|
||||
key={item.label}
|
||||
style={{
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
padding: '1rem',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
}}
|
||||
@ -128,7 +128,7 @@ export function CallPage() {
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
padding: isMobile ? '1.5rem' : '2.25rem',
|
||||
background:
|
||||
'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
|
||||
style={{
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
padding: '1rem 1.15rem',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
color: 'rgba(255, 255, 255, 0.72)',
|
||||
@ -191,7 +191,7 @@ export function CallPage() {
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
padding: '1rem 1.15rem',
|
||||
background: 'rgba(255, 255, 255, 0.05)',
|
||||
color: 'rgba(255, 255, 255, 0.72)',
|
||||
@ -203,7 +203,7 @@ export function CallPage() {
|
||||
type="button"
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
padding: '1rem 1.4rem',
|
||||
background: 'linear-gradient(135deg, var(--color-secondary), #d43a3a)',
|
||||
color: '#fff',
|
||||
|
||||
@ -157,7 +157,7 @@ export function ChatConversationList({
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gridTemplateRows: 'auto minmax(0, 1fr)',
|
||||
@ -204,7 +204,7 @@ export function ChatConversationList({
|
||||
border: '1px solid',
|
||||
borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
|
||||
background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
|
||||
borderRadius: '20px',
|
||||
borderRadius: '15px',
|
||||
padding: '1rem',
|
||||
textAlign: 'left',
|
||||
display: 'grid',
|
||||
@ -239,7 +239,7 @@ export function ChatConversationList({
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '1rem',
|
||||
background: 'rgba(0, 49, 80, 0.04)',
|
||||
color: 'var(--color-text-soft)',
|
||||
|
||||
@ -19,7 +19,7 @@ export function ChatTransferPanel({
|
||||
const fieldStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -30,7 +30,7 @@ export function ChatTransferPanel({
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.25rem',
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
@ -112,7 +112,7 @@ export function ChatTransferPanel({
|
||||
onClick={onSubmit}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
|
||||
@ -112,7 +112,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
|
||||
width: 260,
|
||||
maxWidth: '100%',
|
||||
height: 150,
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
background: isAgent ? 'rgba(255,255,255,0.18)' : 'rgba(0,49,80,0.08)',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
@ -145,7 +145,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
|
||||
maxWidth: '100%',
|
||||
maxHeight: 340,
|
||||
objectFit: 'cover',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
boxShadow: '0 14px 30px rgba(0,0,0,0.18)',
|
||||
transition: 'transform 160ms ease',
|
||||
}}
|
||||
@ -168,7 +168,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
|
||||
style={{
|
||||
width: 320,
|
||||
maxWidth: '100%',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
background: '#111',
|
||||
}}
|
||||
/>
|
||||
@ -189,7 +189,7 @@ function MediaRenderer({ message, contactId, onLoadMedia, isAgent }) {
|
||||
gap: '0.75rem',
|
||||
alignItems: 'center',
|
||||
padding: '0.85rem',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
background: isAgent ? 'rgba(255,255,255,0.16)' : '#fff',
|
||||
color: isAgent ? '#fff' : 'var(--color-primary)',
|
||||
fontWeight: 700,
|
||||
@ -209,7 +209,7 @@ function AttachmentPreview({ file, onRemove }) {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.75rem',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr auto',
|
||||
@ -222,14 +222,14 @@ function AttachmentPreview({ file, onRemove }) {
|
||||
<img
|
||||
src={mediaUrl}
|
||||
alt={file.name}
|
||||
style={{ width: 54, height: 54, objectFit: 'cover', borderRadius: 12 }}
|
||||
style={{ width: 54, height: 54, objectFit: 'cover', borderRadius: 9 }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{
|
||||
width: 54,
|
||||
height: 54,
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'rgba(0,49,80,0.08)',
|
||||
@ -251,7 +251,7 @@ function AttachmentPreview({ file, onRemove }) {
|
||||
title="Remover anexo"
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
width: 36,
|
||||
height: 36,
|
||||
background: 'rgba(214, 40, 40, 0.1)',
|
||||
@ -349,7 +349,7 @@ export function ChatWindow({
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
overflow: 'hidden',
|
||||
display: 'grid',
|
||||
gridTemplateRows: 'auto minmax(0, 1fr)',
|
||||
@ -382,7 +382,7 @@ export function ChatWindow({
|
||||
style={{
|
||||
maxWidth: 460,
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 20,
|
||||
borderRadius: 15,
|
||||
padding: '1.2rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text-soft)',
|
||||
@ -404,7 +404,7 @@ export function ChatWindow({
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
overflow: 'hidden',
|
||||
display: 'grid',
|
||||
gridTemplateRows: 'auto minmax(0, 1fr) auto',
|
||||
@ -442,7 +442,7 @@ export function ChatWindow({
|
||||
disabled
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.8rem 0.95rem',
|
||||
background: '#fff',
|
||||
fontWeight: 600,
|
||||
@ -459,7 +459,7 @@ export function ChatWindow({
|
||||
onClick={() => onAssumeChat?.()}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.8rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -476,7 +476,7 @@ export function ChatWindow({
|
||||
onClick={onReleaseChat}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.8rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -490,7 +490,7 @@ export function ChatWindow({
|
||||
onClick={onCloseChat}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.8rem 1rem',
|
||||
background: 'rgba(181, 31, 31, 0.1)',
|
||||
color: 'var(--color-secondary)',
|
||||
@ -507,7 +507,7 @@ export function ChatWindow({
|
||||
disabled={!canReply}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.8rem 1rem',
|
||||
background: 'rgba(0, 49, 80, 0.08)',
|
||||
color: 'var(--color-primary)',
|
||||
@ -523,7 +523,7 @@ export function ChatWindow({
|
||||
style={{
|
||||
gridColumn: '1 / -1',
|
||||
border: '1px solid rgba(0, 164, 183, 0.24)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'rgba(0, 164, 183, 0.07)',
|
||||
color: 'var(--color-text)',
|
||||
@ -652,7 +652,7 @@ export function ChatWindow({
|
||||
style={{
|
||||
justifySelf: 'center',
|
||||
padding: '0.8rem 1rem',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
background: 'rgba(0,49,80,0.06)',
|
||||
color: 'var(--color-text-soft)',
|
||||
fontWeight: 700,
|
||||
@ -694,7 +694,7 @@ export function ChatWindow({
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.8rem 1rem',
|
||||
background: 'rgba(0, 49, 80, 0.04)',
|
||||
color: 'var(--color-text-soft)',
|
||||
@ -727,7 +727,7 @@ export function ChatWindow({
|
||||
title="Anexar arquivo"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
width: 48,
|
||||
height: 48,
|
||||
display: 'grid',
|
||||
@ -774,7 +774,7 @@ export function ChatWindow({
|
||||
}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -788,7 +788,7 @@ export function ChatWindow({
|
||||
disabled={!safeContact.id || !canReply}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1.2rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
|
||||
@ -70,7 +70,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
|
||||
const fieldStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -103,7 +103,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.25rem',
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
@ -182,7 +182,7 @@ export function ContactProfilePanel({ isOpen, contact, onClose, onSaved }) {
|
||||
disabled={isSaving}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
|
||||
@ -87,7 +87,7 @@ export function ChatPage() {
|
||||
width: 'min(1680px, calc(100vw - 3rem))',
|
||||
margin: '0 auto',
|
||||
background: 'var(--color-surface-strong)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
@ -107,7 +107,7 @@ export function ChatPage() {
|
||||
style={{
|
||||
justifySelf: isMobile ? 'stretch' : 'center',
|
||||
padding: '0.85rem 1rem',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
background: 'rgba(0, 49, 80, 0.06)',
|
||||
color: 'var(--color-primary)',
|
||||
fontWeight: 700,
|
||||
@ -120,7 +120,7 @@ export function ChatPage() {
|
||||
to="/home"
|
||||
style={{
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -197,7 +197,7 @@ export function ChatPage() {
|
||||
disabled={isPaused}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.85rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
|
||||
@ -45,7 +45,7 @@ export function AttendantOpsPanel({
|
||||
<article
|
||||
style={{
|
||||
padding: '1.25rem',
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
border: '1px solid var(--color-border)',
|
||||
background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
|
||||
boxShadow: 'var(--shadow-sm)',
|
||||
@ -77,7 +77,7 @@ export function AttendantOpsPanel({
|
||||
<article
|
||||
style={{
|
||||
padding: '1.25rem',
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
border: '1px solid var(--color-border)',
|
||||
background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
|
||||
boxShadow: 'var(--shadow-sm)',
|
||||
@ -99,7 +99,7 @@ export function AttendantOpsPanel({
|
||||
<article
|
||||
style={{
|
||||
padding: '1.25rem',
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
border: '1px solid var(--color-border)',
|
||||
background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
|
||||
boxShadow: 'var(--shadow-sm)',
|
||||
@ -116,7 +116,7 @@ export function AttendantOpsPanel({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: '1rem',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
background: isPaused ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
|
||||
color: isPaused ? '#10b981' : '#ef4444',
|
||||
|
||||
@ -35,7 +35,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
|
||||
onClick={() => navigate('/call')}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1.1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -51,7 +51,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
|
||||
<article
|
||||
key={call.id}
|
||||
style={{
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid var(--color-border)',
|
||||
padding: '1rem 1.1rem',
|
||||
display: 'grid',
|
||||
@ -78,7 +78,7 @@ export function CallsWorkspace({ calls, isWideDesktop = false, isDesktop = false
|
||||
onClick={() => navigate('/call')}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.7rem 0.95rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
|
||||
@ -9,7 +9,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
|
||||
color: '#fff',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
gap: '1.25rem',
|
||||
@ -21,7 +21,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
|
||||
onClick={() => navigate('/home')}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
borderRadius: '15px',
|
||||
padding: '1rem 1.15rem',
|
||||
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
|
||||
color: '#132534',
|
||||
@ -49,7 +49,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
|
||||
onClick={() => item.route && navigate(item.route)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
|
||||
color: '#fff',
|
||||
@ -87,7 +87,7 @@ export function HomeSidebar({ items, activeItem, isMobile = false }) {
|
||||
}}
|
||||
style={{
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'transparent',
|
||||
color: '#ef4444',
|
||||
|
||||
@ -57,7 +57,7 @@ export function HomeTopbar({
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
padding: '0.35rem',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
background: 'rgba(0, 49, 80, 0.06)',
|
||||
gap: '0.35rem',
|
||||
width: isMobile ? '100%' : 'fit-content',
|
||||
@ -75,7 +75,7 @@ export function HomeTopbar({
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.8rem 1rem',
|
||||
background: isActive ? 'var(--color-primary)' : 'transparent',
|
||||
color: isActive ? '#fff' : 'var(--color-primary)',
|
||||
@ -91,7 +91,7 @@ export function HomeTopbar({
|
||||
<div
|
||||
style={{
|
||||
padding: '0.9rem 1.1rem',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
color: 'var(--color-text-soft)',
|
||||
@ -115,7 +115,7 @@ export function HomeTopbar({
|
||||
style={{
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: '#fff',
|
||||
outline: 'none',
|
||||
@ -145,7 +145,7 @@ export function HomeTopbar({
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||||
|
||||
@ -370,7 +370,7 @@ export function MessagesWorkspace({
|
||||
style={{
|
||||
border: '1px solid',
|
||||
borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
|
||||
borderRadius: '20px',
|
||||
borderRadius: '15px',
|
||||
padding: '1rem',
|
||||
background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
|
||||
textAlign: 'left',
|
||||
@ -417,7 +417,7 @@ export function MessagesWorkspace({
|
||||
disabled={isPaused}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.85rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -471,7 +471,7 @@ export function MessagesWorkspace({
|
||||
disabled={isPaused}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.7rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -486,7 +486,7 @@ export function MessagesWorkspace({
|
||||
type="button"
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.7rem 0.9rem',
|
||||
background: 'rgba(0, 49, 80, 0.08)',
|
||||
color: 'var(--color-primary)',
|
||||
@ -602,7 +602,7 @@ export function MessagesWorkspace({
|
||||
disabled={isPaused}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
fontWeight: 900,
|
||||
@ -618,7 +618,7 @@ export function MessagesWorkspace({
|
||||
disabled={isPaused}
|
||||
style={{
|
||||
border: '1px solid rgba(0, 164, 183, 0.32)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.75rem 0.9rem',
|
||||
background: 'rgba(0, 164, 183, 0.07)',
|
||||
color: 'var(--color-text)',
|
||||
@ -642,7 +642,7 @@ export function MessagesWorkspace({
|
||||
title="Próxima resposta"
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
fontWeight: 900,
|
||||
@ -685,7 +685,7 @@ export function MessagesWorkspace({
|
||||
<article
|
||||
key={message.id}
|
||||
style={{
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem',
|
||||
background: 'rgba(0, 49, 80, 0.04)',
|
||||
display: 'grid',
|
||||
@ -708,7 +708,7 @@ export function MessagesWorkspace({
|
||||
rows={4}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.85rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -725,7 +725,7 @@ export function MessagesWorkspace({
|
||||
disabled={!currentUserId}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -747,7 +747,7 @@ export function MessagesWorkspace({
|
||||
key={note.id}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
padding: '0.8rem',
|
||||
background: '#fff',
|
||||
display: 'grid',
|
||||
|
||||
@ -71,7 +71,7 @@ export function AgentMassMessagePage() {
|
||||
width: 'min(1680px, calc(100vw - 3rem))',
|
||||
margin: '0 auto',
|
||||
background: 'var(--color-surface-strong)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
@ -91,7 +91,7 @@ export function AgentMassMessagePage() {
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
}}
|
||||
>
|
||||
@ -112,7 +112,7 @@ export function AgentMassMessagePage() {
|
||||
<div
|
||||
style={{
|
||||
padding: '1.1rem 1.25rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
@ -131,7 +131,7 @@ export function AgentMassMessagePage() {
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
justifyContent: isMobile ? 'space-between' : 'flex-end',
|
||||
padding: '0.85rem 1rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
@ -147,7 +147,7 @@ export function AgentMassMessagePage() {
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||||
|
||||
@ -9,7 +9,7 @@ import { sidebarItems } from '../services/homeMocks';
|
||||
const inputStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.85rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -158,7 +158,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
<aside
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
padding: '1rem',
|
||||
background: '#fff',
|
||||
display: 'grid',
|
||||
@ -177,7 +177,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
onClick={startNewContact}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.7rem 0.85rem',
|
||||
background: 'var(--color-highlight)',
|
||||
color: '#132534',
|
||||
@ -206,7 +206,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
style={{
|
||||
border: '1px solid',
|
||||
borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.8rem',
|
||||
background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
|
||||
textAlign: 'left',
|
||||
@ -238,7 +238,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
onSubmit={handleSave}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
padding: '1.2rem',
|
||||
background: '#fff',
|
||||
display: 'grid',
|
||||
@ -324,7 +324,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
disabled={isSaving}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.95rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -349,7 +349,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
width: 'min(1680px, calc(100vw - 3rem))',
|
||||
margin: '0 auto',
|
||||
background: 'var(--color-surface-strong)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
@ -369,7 +369,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
}}
|
||||
>
|
||||
@ -390,7 +390,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
<div
|
||||
style={{
|
||||
padding: '1.1rem 1.25rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
@ -409,7 +409,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
justifyContent: isMobile ? 'space-between' : 'flex-end',
|
||||
padding: '0.85rem 1rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
@ -425,7 +425,7 @@ export function ContactsPanel({ embedded = false }) {
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '16px',
|
||||
borderRadius: '12px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||||
|
||||
@ -106,7 +106,7 @@ export function HomePage() {
|
||||
width: 'min(1680px, calc(100vw - 3rem))',
|
||||
margin: '0 auto',
|
||||
background: 'var(--color-surface-strong)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
@ -131,7 +131,7 @@ export function HomePage() {
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
}}
|
||||
>
|
||||
@ -170,7 +170,7 @@ export function HomePage() {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '0.85rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text-soft)',
|
||||
|
||||
@ -25,7 +25,7 @@ export function UnassignedHomePage() {
|
||||
width: 'min(760px, 100%)',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '2rem',
|
||||
display: 'grid',
|
||||
@ -56,7 +56,7 @@ export function UnassignedHomePage() {
|
||||
|
||||
<div
|
||||
style={{
|
||||
borderRadius: '24px',
|
||||
borderRadius: '18px',
|
||||
background: 'rgba(0, 49, 80, 0.04)',
|
||||
padding: '1.25rem',
|
||||
display: 'grid',
|
||||
@ -75,7 +75,7 @@ export function UnassignedHomePage() {
|
||||
onClick={handleLogout}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.95rem 1.15rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
|
||||
@ -31,7 +31,7 @@ export function DataPanel({ title, description, actionLabel, onAction, children
|
||||
onClick={onAction}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
borderRadius: '14px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
|
||||
@ -12,7 +12,7 @@ import {
|
||||
const fieldStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.78rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -21,7 +21,7 @@ const fieldStyle = {
|
||||
|
||||
const primaryButton = {
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.78rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -30,7 +30,7 @@ const primaryButton = {
|
||||
|
||||
const ghostButton = {
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.72rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -109,7 +109,7 @@ function WhatsAppPreview({ message }) {
|
||||
<div
|
||||
style={{
|
||||
background: '#e7f5ef',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '0.85rem',
|
||||
display: 'grid',
|
||||
gap: '0.45rem',
|
||||
@ -172,7 +172,7 @@ function FlowNode({ node, areasById, onAdd, onEdit, onDelete, level = 0, parentT
|
||||
width: nodeWidth,
|
||||
border: '1px solid var(--color-border)',
|
||||
borderTop: `5px solid ${accentColor}`,
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
background: isRoot
|
||||
? 'linear-gradient(180deg, #fff, rgba(0,164,183,0.09))'
|
||||
: isAgent
|
||||
@ -220,7 +220,7 @@ function FlowNode({ node, areasById, onAdd, onEdit, onDelete, level = 0, parentT
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
border: 'none',
|
||||
background: 'var(--color-highlight)',
|
||||
color: '#132534',
|
||||
@ -414,7 +414,7 @@ function NodeModal({ mode, node, parent, areas, draft, onDraftChange, onClose, o
|
||||
width: 'min(760px, calc(100vw - 2rem))',
|
||||
maxHeight: 'calc(100vh - 2rem)',
|
||||
overflowY: 'auto',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
background: '#fff',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.25rem',
|
||||
@ -447,7 +447,7 @@ function NodeModal({ mode, node, parent, areas, draft, onDraftChange, onClose, o
|
||||
onClick={() => change('nodeType', type)}
|
||||
style={{
|
||||
border: `1px solid ${draft.nodeType === type ? 'var(--color-primary)' : 'var(--color-border)'}`,
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.9rem',
|
||||
background: draft.nodeType === type ? 'rgba(0,164,183,0.08)' : '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -743,7 +743,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid rgba(241,184,42,0.45)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
background: 'rgba(241,184,42,0.12)',
|
||||
padding: '0.85rem 1rem',
|
||||
color: 'var(--color-text)',
|
||||
@ -763,7 +763,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 22,
|
||||
borderRadius: 16,
|
||||
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)',
|
||||
backgroundSize: 'auto, 22px 22px',
|
||||
@ -800,7 +800,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
|
||||
{status ? (
|
||||
<span
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem 0.85rem',
|
||||
background:
|
||||
statusTone === 'error'
|
||||
@ -828,7 +828,7 @@ export function KnowledgeBasePanel({ areas, mode = 'admin', isMobile = false })
|
||||
key={version.id}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem 0.85rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
|
||||
@ -64,217 +64,237 @@ export function ManagementLayout({
|
||||
<main style={{ minHeight: '100vh', padding: '1.5rem' }}>
|
||||
<section
|
||||
style={{
|
||||
width: 'min(1680px, calc(100vw - 3rem))',
|
||||
width: 'min(1600px, calc(100vw - 3rem))',
|
||||
margin: '0 auto',
|
||||
background: 'var(--color-surface-strong)',
|
||||
borderRadius: '32px',
|
||||
borderRadius: '24px',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
{/* Grid plano de 4 zonas: col1=sidebar(270px) col2=conteúdo(1fr), row1=topo row2=corpo */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isDesktop ? 'minmax(300px, 360px) minmax(0, 1fr)' : '1fr',
|
||||
gap: '1.5rem',
|
||||
alignItems: 'start',
|
||||
gridTemplateColumns: isDesktop ? '270px 1fr' : '1fr',
|
||||
columnGap: '1.5rem',
|
||||
rowGap: '1.25rem',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'grid', gap: '1.25rem' }}>
|
||||
<div
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '28px',
|
||||
padding: '1.5rem',
|
||||
}}
|
||||
>
|
||||
<BrandMark size="lg" />
|
||||
</div>
|
||||
|
||||
<aside
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
|
||||
color: '#fff',
|
||||
borderRadius: '28px',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
gap: '1.25rem',
|
||||
alignContent: 'start',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (activeSection === 'admin') {
|
||||
onNavItemChange?.('home');
|
||||
return;
|
||||
}
|
||||
|
||||
navigate('/home');
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
padding: '1rem 1.15rem',
|
||||
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
|
||||
color: '#132534',
|
||||
fontWeight: 800,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
{actionLabel}
|
||||
</button>
|
||||
|
||||
<nav
|
||||
style={{
|
||||
display: 'grid',
|
||||
gap: '0.5rem',
|
||||
gridTemplateColumns: isMobile ? 'repeat(auto-fit, minmax(180px, 1fr))' : '1fr',
|
||||
}}
|
||||
>
|
||||
{navItems.map((item, index) => {
|
||||
if (item.type === 'separator') {
|
||||
return (
|
||||
<div
|
||||
key={`separator-${index}`}
|
||||
style={{
|
||||
height: 1,
|
||||
background: 'rgba(255, 255, 255, 0.16)',
|
||||
margin: '0.35rem 0',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const isActive = activeNavItem ? item.id === activeNavItem : index === 0;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (item.path) {
|
||||
navigate(item.path);
|
||||
return;
|
||||
}
|
||||
onNavItemChange?.(item.id);
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '18px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
fontWeight: isActive ? 700 : 500,
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
{item.count ? (
|
||||
<span
|
||||
style={{
|
||||
minWidth: 30,
|
||||
borderRadius: 999,
|
||||
padding: '0.2rem 0.5rem',
|
||||
background: 'rgba(255, 255, 255, 0.12)',
|
||||
fontSize: '0.82rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{item.count}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
style={{
|
||||
border: '1px solid rgba(255, 255, 255, 0.18)',
|
||||
borderRadius: '18px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'transparent',
|
||||
color: '#ef4444',
|
||||
fontWeight: 700,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</aside>
|
||||
{/* Zona 1 — BrandMark card: col1 row1 */}
|
||||
<div
|
||||
style={{
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '20px',
|
||||
padding: '0.85rem 1rem',
|
||||
overflow: 'hidden',
|
||||
minWidth: 0,
|
||||
...(isDesktop ? { gridColumn: 1, gridRow: 1 } : {}),
|
||||
}}
|
||||
>
|
||||
<BrandMark size="md" />
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gap: '1.25rem', minWidth: 0 }}>
|
||||
<header
|
||||
{/* Zona 2 — Aside/menu: col1 row2 */}
|
||||
<aside
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
|
||||
color: '#fff',
|
||||
borderRadius: '20px',
|
||||
padding: '1.5rem',
|
||||
display: 'grid',
|
||||
gap: '1.25rem',
|
||||
alignContent: 'start',
|
||||
alignSelf: 'start',
|
||||
...(isDesktop ? { gridColumn: 1, gridRow: 2 } : {}),
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (activeSection === 'admin') {
|
||||
onNavItemChange?.('home');
|
||||
return;
|
||||
}
|
||||
|
||||
navigate('/home');
|
||||
}}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto',
|
||||
gap: '1rem',
|
||||
alignItems: 'center',
|
||||
border: 'none',
|
||||
borderRadius: '15px',
|
||||
padding: '1rem 1.15rem',
|
||||
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
|
||||
color: '#132534',
|
||||
fontWeight: 800,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
{actionLabel}
|
||||
</button>
|
||||
|
||||
<nav
|
||||
style={{
|
||||
display: 'grid',
|
||||
gap: '0.5rem',
|
||||
gridTemplateColumns: isMobile ? 'repeat(auto-fit, minmax(180px, 1fr))' : '1fr',
|
||||
}}
|
||||
>
|
||||
{navItems.map((item, index) => {
|
||||
if (item.type === 'separator') {
|
||||
return (
|
||||
<div
|
||||
key={`separator-${index}`}
|
||||
style={{
|
||||
height: 1,
|
||||
background: 'rgba(255, 255, 255, 0.16)',
|
||||
margin: '0.35rem 0',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const isActive = activeNavItem ? item.id === activeNavItem : index === 0;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (item.path) {
|
||||
navigate(item.path);
|
||||
return;
|
||||
}
|
||||
onNavItemChange?.(item.id);
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
fontWeight: isActive ? 700 : 500,
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
{item.count ? (
|
||||
<span
|
||||
style={{
|
||||
minWidth: 30,
|
||||
borderRadius: 999,
|
||||
padding: '0.2rem 0.5rem',
|
||||
background: 'rgba(255, 255, 255, 0.12)',
|
||||
fontSize: '0.82rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{item.count}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
style={{
|
||||
border: '1px solid rgba(255, 255, 255, 0.18)',
|
||||
borderRadius: '14px',
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'transparent',
|
||||
color: '#ef4444',
|
||||
fontWeight: 700,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
{/* Zona 3 — Header: col2 row1 — mesma linha do BrandMark card */}
|
||||
<header
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) auto',
|
||||
gap: '1rem',
|
||||
alignItems: 'stretch',
|
||||
...(isDesktop ? { gridColumn: 2, gridRow: 1 } : {}),
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '0.75rem 1.1rem',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: 0, fontSize: '1.4rem' }}>{title}</h1>
|
||||
<p style={{ margin: '0.3rem 0 0', color: 'var(--color-text-soft)' }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.9rem',
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
justifyContent: isMobile ? 'space-between' : 'flex-end',
|
||||
padding: '0.6rem 0.85rem',
|
||||
borderRadius: '16px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<strong style={{ display: 'block' }}>{profileLabel}</strong>
|
||||
<span style={{ color: 'var(--color-text-soft)', fontSize: '0.92rem' }}>
|
||||
Ambiente de gestão
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
padding: '1.1rem 1.25rem',
|
||||
borderRadius: '22px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
minWidth: 0,
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '10px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||||
color: '#fff',
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: 0, fontSize: '1.65rem' }}>{title}</h1>
|
||||
<p style={{ margin: '0.45rem 0 0', color: 'var(--color-text-soft)' }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
{initials}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.9rem',
|
||||
justifySelf: isMobile ? 'stretch' : 'end',
|
||||
justifyContent: isMobile ? 'space-between' : 'flex-end',
|
||||
padding: '0.85rem 1rem',
|
||||
borderRadius: '22px',
|
||||
background: '#fff',
|
||||
border: '1px solid var(--color-border)',
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<strong style={{ display: 'block' }}>{profileLabel}</strong>
|
||||
<span style={{ color: 'var(--color-text-soft)', fontSize: '0.92rem' }}>
|
||||
Ambiente de gestão
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '16px',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: 'linear-gradient(135deg, var(--color-accent), var(--color-primary))',
|
||||
color: '#fff',
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Zona 4 — Conteúdo: col2 row2 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gap: '1.25rem',
|
||||
alignContent: 'start',
|
||||
minWidth: 0,
|
||||
...(isDesktop ? { gridColumn: 2, gridRow: 2 } : {}),
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ export function ManagementTable({ columns, rows, getRowId, isMobile = false }) {
|
||||
<article
|
||||
key={getRowId(row)}
|
||||
style={{
|
||||
borderRadius: '20px',
|
||||
borderRadius: '15px',
|
||||
border: '1px solid var(--color-border)',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
|
||||
@ -8,7 +8,7 @@ import { listTemplates } from '../services/templateService';
|
||||
const inputStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.85rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -347,7 +347,7 @@ export function MassMessagePanel({
|
||||
disabled={isSending}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.95rem 1rem',
|
||||
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
||||
color: '#fff',
|
||||
@ -365,7 +365,7 @@ export function MassMessagePanel({
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '1rem',
|
||||
background: '#fff',
|
||||
display: 'grid',
|
||||
@ -395,7 +395,7 @@ export function MassMessagePanel({
|
||||
style={{
|
||||
border: '1px solid',
|
||||
borderColor: isSelected ? 'rgba(0, 164, 183, 0.36)' : 'var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.7rem',
|
||||
background: isSelected ? 'rgba(0, 164, 183, 0.08)' : '#fff',
|
||||
textAlign: 'left',
|
||||
@ -422,7 +422,7 @@ export function MassMessagePanel({
|
||||
onClick={clearSelectedContacts}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-primary)',
|
||||
@ -437,7 +437,7 @@ export function MassMessagePanel({
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid rgba(0, 164, 183, 0.24)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '1rem',
|
||||
background: 'rgba(0, 164, 183, 0.06)',
|
||||
lineHeight: 1.5,
|
||||
@ -454,7 +454,7 @@ export function MassMessagePanel({
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text-soft)',
|
||||
@ -470,7 +470,7 @@ export function MassMessagePanel({
|
||||
key={`${result.number}-${result.status}`}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem',
|
||||
background: result.status === 'enviado' ? 'rgba(16,185,129,0.08)' : 'rgba(181,31,31,0.08)',
|
||||
}}
|
||||
|
||||
@ -12,7 +12,7 @@ export function MetricGrid({ metrics, minCardWidth = '180px' }) {
|
||||
key={item.label}
|
||||
style={{
|
||||
padding: '1.15rem',
|
||||
borderRadius: '22px',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid var(--color-border)',
|
||||
background: '#fff',
|
||||
}}
|
||||
|
||||
@ -5,7 +5,7 @@ import { MetricGrid } from './MetricGrid';
|
||||
const selectStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.75rem 0.85rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -237,7 +237,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
|
||||
key={item.id}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.8rem',
|
||||
background: '#fff',
|
||||
display: 'grid',
|
||||
@ -258,7 +258,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
|
||||
onClick={() => setAssignmentTarget(item)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.65rem 0.8rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -291,7 +291,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
|
||||
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>
|
||||
<h2 style={{ margin: 0, fontSize: '1.2rem' }}>Atribuir atendimento</h2>
|
||||
<p style={{ margin: '0.35rem 0 0', color: 'var(--color-text-soft)' }}>
|
||||
@ -306,7 +306,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
|
||||
onClick={() => setAssignmentTarget(null)}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.8rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -325,7 +325,7 @@ export function OperationalDashboard({ isDesktop, isMobile }) {
|
||||
onClick={() => setAssignmentTarget(null)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.8rem 1rem',
|
||||
background: 'rgba(0, 49, 80, 0.08)',
|
||||
color: 'var(--color-primary)',
|
||||
|
||||
@ -75,7 +75,7 @@ function renderPreviewBody(content, bodyVariables) {
|
||||
// ── Styles ────────────────────────────────────────────────────────────────
|
||||
|
||||
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,
|
||||
color: 'var(--color-text)', background: '#fff', boxSizing: 'border-box',
|
||||
};
|
||||
@ -92,7 +92,7 @@ function pill(bg, color) {
|
||||
|
||||
function actionBtn(bg, color, disabled = false) {
|
||||
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,
|
||||
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' }}>
|
||||
<span style={{ ...labelStyle, marginBottom: 0 }}>Pré-visualização</span>
|
||||
<div style={{
|
||||
width: 272, background: '#ece5dd', borderRadius: 20,
|
||||
width: 272, background: '#ece5dd', borderRadius: 15,
|
||||
border: '7px solid #1a1a1a', padding: '1rem 0.65rem',
|
||||
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 (
|
||||
<div style={{
|
||||
border: '1px solid var(--color-border)', borderRadius: 16,
|
||||
border: '1px solid var(--color-border)', borderRadius: 12,
|
||||
padding: '1rem', background: '#fff',
|
||||
display: 'flex', flexDirection: 'column', gap: '0.5rem',
|
||||
}}>
|
||||
@ -197,7 +197,7 @@ function TemplateCard({ t, onEdit, onSubmit, onDelete, submitting, deleting }) {
|
||||
{t.name}
|
||||
</strong>
|
||||
<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',
|
||||
}}>
|
||||
{ms.label}
|
||||
@ -296,18 +296,19 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
|
||||
const metaNamePreview = toMetaName(form.name);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'grid', gap: '1.1rem' }}>
|
||||
<div style={{ display: 'grid', gap: '1.1rem', padding: '1.75rem 2rem' }}>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
<button type="button" onClick={onBack} style={{
|
||||
border: 'none', background: 'none', cursor: 'pointer',
|
||||
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'}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<strong style={{ fontSize: '1.15rem', color: 'var(--color-text)' }}>
|
||||
{editingId ? 'Editar template' : 'Novo template'}
|
||||
</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>
|
||||
|
||||
{/* Two-column */}
|
||||
@ -356,7 +357,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '0.5rem' }}>
|
||||
<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' }}>
|
||||
<label style={{ ...labelStyle, marginBottom: 0 }} htmlFor="tpl-body">Corpo *</label>
|
||||
<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',
|
||||
}}>
|
||||
+ Variável
|
||||
@ -396,7 +397,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
|
||||
|
||||
{/* Variáveis detectadas */}
|
||||
{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>
|
||||
<div style={{ display: 'grid', 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>
|
||||
|
||||
{/* 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' }}>
|
||||
<label style={{ ...labelStyle, marginBottom: 0 }}>Botões (opcional)</label>
|
||||
<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)}
|
||||
disabled={form.buttons.length >= 10}
|
||||
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',
|
||||
}}>
|
||||
+ {bt.label}
|
||||
@ -473,7 +474,7 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
|
||||
)}
|
||||
<button type="button" onClick={() => removeBtn(i)} style={{
|
||||
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>
|
||||
</div>
|
||||
))}
|
||||
@ -488,13 +489,13 @@ function TemplateFormView({ form, setForm, editingId, onSave, saving, error, suc
|
||||
{/* Actions */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.65rem' }}>
|
||||
<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',
|
||||
}}>
|
||||
Cancelar
|
||||
</button>
|
||||
<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)',
|
||||
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 = [] }) {
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [view, setView] = useState('list');
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
const [form, setForm] = useState(EMPTY_FORM);
|
||||
const [saving, setSaving] = useState(false);
|
||||
@ -541,7 +542,7 @@ export function TemplateManagementPanel({ areas = [] }) {
|
||||
|
||||
function openNew() {
|
||||
setForm(EMPTY_FORM); setEditingId(null);
|
||||
setError(''); setSuccess(''); setView('form');
|
||||
setError(''); setSuccess(''); setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(t) {
|
||||
@ -557,7 +558,7 @@ export function TemplateManagementPanel({ areas = [] }) {
|
||||
footerText: t.footer_text || '',
|
||||
buttons: Array.isArray(t.buttons) ? t.buttons : [],
|
||||
});
|
||||
setEditingId(t.id); setError(''); setSuccess(''); setView('form');
|
||||
setEditingId(t.id); setError(''); setSuccess(''); setModalOpen(true);
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
@ -583,7 +584,7 @@ export function TemplateManagementPanel({ areas = [] }) {
|
||||
else await saveTemplate(payload);
|
||||
setSuccess('Template salvo! Clique em "Enviar para Meta" para submeter à aprovação.');
|
||||
await load();
|
||||
setTimeout(() => { setView('list'); setSuccess(''); }, 2500);
|
||||
setTimeout(() => { setModalOpen(false); setSuccess(''); }, 2500);
|
||||
} catch (err) {
|
||||
setError(err?.message || 'Erro ao salvar.');
|
||||
} finally {
|
||||
@ -630,34 +631,51 @@ export function TemplateManagementPanel({ areas = [] }) {
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() { setView('list'); setError(''); setSuccess(''); }
|
||||
function goBack() { setModalOpen(false); setError(''); setSuccess(''); }
|
||||
|
||||
// ── Form view ──
|
||||
if (view === 'form') {
|
||||
return (
|
||||
<TemplateFormView
|
||||
form={form} setForm={setForm} editingId={editingId}
|
||||
onSave={handleSave} saving={saving} error={error} success={success}
|
||||
onBack={goBack} areas={areas}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// ── List view ──
|
||||
// ── List view (sempre renderizado) ──
|
||||
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
|
||||
form={form} setForm={setForm} editingId={editingId}
|
||||
onSave={handleSave} saving={saving} error={error} success={success}
|
||||
onBack={goBack} areas={areas}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||||
{/* Toolbar */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap' }}>
|
||||
<strong style={{ flex: 1, fontSize: '0.95rem' }}>Templates HSM</strong>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
|
||||
<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',
|
||||
cursor: syncing ? 'not-allowed' : 'pointer',
|
||||
}}>
|
||||
{syncing ? 'Sincronizando…' : '↻ Sincronizar'}
|
||||
</button>
|
||||
<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,
|
||||
fontSize: '0.82rem', cursor: 'pointer',
|
||||
}}>
|
||||
@ -666,7 +684,7 @@ export function TemplateManagementPanel({ areas = [] }) {
|
||||
</div>
|
||||
|
||||
{/* 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 }}>
|
||||
<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 →{' '}
|
||||
@ -708,5 +726,6 @@ export function TemplateManagementPanel({ areas = [] }) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
const fieldStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.7rem 0.85rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -137,7 +137,7 @@ export function WhatsappConfigModal({ onClose }) {
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: 'min(540px, 100%)',
|
||||
borderRadius: 22,
|
||||
borderRadius: 16,
|
||||
border: '1px solid var(--color-border)',
|
||||
background: '#fff',
|
||||
padding: '1.4rem',
|
||||
@ -155,7 +155,7 @@ export function WhatsappConfigModal({ onClose }) {
|
||||
style={{
|
||||
width: 46,
|
||||
height: 46,
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: '#20a45b',
|
||||
@ -198,7 +198,7 @@ export function WhatsappConfigModal({ onClose }) {
|
||||
{!loading && currentConfig && (
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.7rem 0.9rem',
|
||||
background: currentConfig.is_configured ? '#f0faf4' : '#fff8f0',
|
||||
border: `1px solid ${currentConfig.is_configured ? '#b6e8c8' : '#f5d9a8'}`,
|
||||
@ -315,7 +315,7 @@ export function WhatsappConfigModal({ onClose }) {
|
||||
{validation && (
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.7rem 0.9rem',
|
||||
background: validation.valid ? '#f0faf4' : '#fff2f2',
|
||||
border: `1px solid ${validation.valid ? '#b6e8c8' : '#f5c6c6'}`,
|
||||
@ -368,7 +368,7 @@ export function WhatsappConfigModal({ onClose }) {
|
||||
disabled={!canValidate || validating}
|
||||
style={{
|
||||
border: '1px solid #20a45b44',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.65rem 0.9rem',
|
||||
background: '#fff',
|
||||
color: canValidate ? '#20a45b' : 'var(--color-text-soft)',
|
||||
@ -386,7 +386,7 @@ export function WhatsappConfigModal({ onClose }) {
|
||||
disabled={!canSave}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.65rem 1rem',
|
||||
background: canSave ? 'var(--color-primary)' : 'var(--color-border)',
|
||||
color: '#fff',
|
||||
|
||||
@ -36,7 +36,7 @@ import { WhatsappConfigModal } from '../components/WhatsappConfigModal';
|
||||
const selectStyle = {
|
||||
width: '100%',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.75rem 0.85rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text)',
|
||||
@ -45,7 +45,7 @@ const selectStyle = {
|
||||
|
||||
const compactSelectStyle = {
|
||||
...selectStyle,
|
||||
borderRadius: '10px',
|
||||
borderRadius: '8px',
|
||||
padding: '0.45rem 0.55rem',
|
||||
fontSize: '0.82rem',
|
||||
};
|
||||
@ -184,7 +184,7 @@ export function AdminAttendanceWorkspace({ isWideDesktop, isDesktop, isTablet, i
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '0.85rem 1rem',
|
||||
background: '#fff',
|
||||
color: 'var(--color-text-soft)',
|
||||
@ -660,7 +660,7 @@ export function AdminPage() {
|
||||
onClick={() => openUserEditor(row)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.7rem 0.9rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -723,7 +723,7 @@ export function AdminPage() {
|
||||
onClick={() => openAreaEditor(row)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.55rem 0.7rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -737,7 +737,7 @@ export function AdminPage() {
|
||||
onClick={() => handleDeleteArea(row)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.55rem 0.7rem',
|
||||
background: 'rgba(181, 31, 31, 0.1)',
|
||||
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', gap: '0.75rem' }}>
|
||||
{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}
|
||||
</article>
|
||||
))}
|
||||
@ -935,7 +935,7 @@ export function AdminPage() {
|
||||
placeholder="Digite um aviso para o time..."
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
@ -994,7 +994,7 @@ export function AdminPage() {
|
||||
style={{
|
||||
width: 'min(560px, 100%)',
|
||||
background: '#fff',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.25rem',
|
||||
display: 'grid',
|
||||
@ -1042,7 +1042,7 @@ export function AdminPage() {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.85rem',
|
||||
background: 'rgba(0, 164, 183, 0.08)',
|
||||
color: 'var(--color-primary)',
|
||||
@ -1072,7 +1072,7 @@ export function AdminPage() {
|
||||
disabled={!specialtyToAdd}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem 0.95rem',
|
||||
background: specialtyToAdd ? 'var(--color-primary)' : 'rgba(0, 49, 80, 0.12)',
|
||||
color: specialtyToAdd ? '#fff' : 'var(--color-text-soft)',
|
||||
@ -1089,7 +1089,7 @@ export function AdminPage() {
|
||||
key={specialty.id}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.75rem',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) 140px auto',
|
||||
@ -1111,7 +1111,7 @@ export function AdminPage() {
|
||||
onClick={() => removeSpecialtyFromEdit(specialty.id)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.55rem 0.7rem',
|
||||
background: 'rgba(181, 31, 31, 0.1)',
|
||||
color: 'var(--color-secondary)',
|
||||
@ -1135,7 +1135,7 @@ export function AdminPage() {
|
||||
onClick={submitUserEditor}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -1165,7 +1165,7 @@ export function AdminPage() {
|
||||
onClick={handleCreateArea}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '14px',
|
||||
borderRadius: '10px',
|
||||
padding: '0.75rem 0.95rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -1195,7 +1195,7 @@ export function AdminPage() {
|
||||
style={{
|
||||
width: 'min(520px, 100%)',
|
||||
background: '#fff',
|
||||
borderRadius: 24,
|
||||
borderRadius: 18,
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
padding: '1.25rem',
|
||||
display: 'grid',
|
||||
@ -1247,7 +1247,7 @@ export function AdminPage() {
|
||||
onClick={submitAreaEditor}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -1379,7 +1379,7 @@ export function AdminPage() {
|
||||
onClick={() => removeAiContent(row.id)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.55rem 0.7rem',
|
||||
background: 'rgba(181, 31, 31, 0.1)',
|
||||
color: 'var(--color-secondary)',
|
||||
@ -1439,7 +1439,7 @@ export function AdminPage() {
|
||||
type="submit"
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.9rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -1470,7 +1470,7 @@ export function AdminPage() {
|
||||
type="submit"
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -1488,7 +1488,7 @@ export function AdminPage() {
|
||||
key={`${rule}-${index}`}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.85rem 0.9rem',
|
||||
background: '#fff',
|
||||
display: 'flex',
|
||||
@ -1505,7 +1505,7 @@ export function AdminPage() {
|
||||
onClick={() => setAiGuardrails((current) => current.filter((_, itemIndex) => itemIndex !== index))}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 12,
|
||||
borderRadius: 9,
|
||||
padding: '0.45rem 0.65rem',
|
||||
background: 'rgba(181, 31, 31, 0.1)',
|
||||
color: 'var(--color-secondary)',
|
||||
@ -1565,7 +1565,7 @@ export function AdminPage() {
|
||||
key={item.label}
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '1rem',
|
||||
background: '#f8fbfc',
|
||||
display: 'grid',
|
||||
@ -1583,7 +1583,7 @@ export function AdminPage() {
|
||||
role="alert"
|
||||
style={{
|
||||
border: '1px solid rgba(216, 137, 28, 0.32)',
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
padding: '0.85rem 1rem',
|
||||
background: 'rgba(216, 137, 28, 0.08)',
|
||||
color: '#7a4a08',
|
||||
@ -1610,7 +1610,7 @@ export function AdminPage() {
|
||||
key={item.id}
|
||||
style={{
|
||||
border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`,
|
||||
borderRadius: 22,
|
||||
borderRadius: 16,
|
||||
padding: '1.1rem',
|
||||
background: isEnabled ? `${item.color}0f` : '#fff',
|
||||
display: 'grid',
|
||||
@ -1625,7 +1625,7 @@ export function AdminPage() {
|
||||
style={{
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: item.color,
|
||||
@ -1719,7 +1719,7 @@ export function AdminPage() {
|
||||
}}
|
||||
style={{
|
||||
border: `1px solid ${item.color}44`,
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.65rem 0.8rem',
|
||||
background: '#fff',
|
||||
color: item.color,
|
||||
@ -1758,7 +1758,7 @@ export function AdminPage() {
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
style={{
|
||||
width: 'min(460px, 100%)',
|
||||
borderRadius: 22,
|
||||
borderRadius: 16,
|
||||
border: '1px solid var(--color-border)',
|
||||
background: '#fff',
|
||||
padding: '1.25rem',
|
||||
@ -1773,7 +1773,7 @@ export function AdminPage() {
|
||||
style={{
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: configurationModal.color,
|
||||
@ -1803,7 +1803,7 @@ export function AdminPage() {
|
||||
onClick={() => setConfigurationModal(null)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem 0.95rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -1823,7 +1823,7 @@ export function AdminPage() {
|
||||
function renderPlaceholder(title, description) {
|
||||
return (
|
||||
<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.
|
||||
</div>
|
||||
</DataPanel>
|
||||
@ -1849,7 +1849,7 @@ export function AdminPage() {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '1rem',
|
||||
background: '#f8fbfc',
|
||||
display: 'grid',
|
||||
@ -1862,7 +1862,7 @@ export function AdminPage() {
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 18,
|
||||
borderRadius: 14,
|
||||
padding: '1rem',
|
||||
background: '#f8fbfc',
|
||||
display: 'grid',
|
||||
@ -1890,7 +1890,7 @@ export function AdminPage() {
|
||||
key={item.id}
|
||||
style={{
|
||||
border: `1px solid ${isEnabled ? `${item.color}55` : 'var(--color-border)'}`,
|
||||
borderRadius: 22,
|
||||
borderRadius: 16,
|
||||
padding: '1.1rem',
|
||||
background: isEnabled ? `${item.color}0f` : '#fff',
|
||||
display: 'grid',
|
||||
@ -1905,7 +1905,7 @@ export function AdminPage() {
|
||||
style={{
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 16,
|
||||
borderRadius: 12,
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
background: item.color,
|
||||
@ -1994,7 +1994,7 @@ export function AdminPage() {
|
||||
onClick={() => setAuthConfigModal(item)}
|
||||
style={{
|
||||
border: `1px solid ${item.color}44`,
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.65rem 0.8rem',
|
||||
background: '#fff',
|
||||
color: item.color,
|
||||
@ -2029,7 +2029,7 @@ export function AdminPage() {
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
style={{
|
||||
width: 'min(460px, 100%)',
|
||||
borderRadius: 22,
|
||||
borderRadius: 16,
|
||||
border: '1px solid var(--color-border)',
|
||||
background: '#fff',
|
||||
padding: '1.25rem',
|
||||
@ -2050,7 +2050,7 @@ export function AdminPage() {
|
||||
onClick={() => setAuthConfigModal(null)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 14,
|
||||
borderRadius: 10,
|
||||
padding: '0.75rem 0.95rem',
|
||||
background: 'var(--color-primary)',
|
||||
color: '#fff',
|
||||
@ -2110,7 +2110,9 @@ export function AdminPage() {
|
||||
? 'Conteúdos da IA'
|
||||
: activeAdminSection === 'knowledge'
|
||||
? 'Fluxo do Bot'
|
||||
: 'Painel administrativo';
|
||||
: activeAdminSection === 'templates'
|
||||
? 'Templates HSM'
|
||||
: 'Painel administrativo';
|
||||
|
||||
const pageSubtitle = activeAdminSection === 'home'
|
||||
? 'Visão mensal consolidada por especialidade, canal e atendente.'
|
||||
@ -2132,7 +2134,9 @@ export function AdminPage() {
|
||||
? 'Base de documentos que será consultada pela IA em fase de testes.'
|
||||
: activeAdminSection === 'knowledge'
|
||||
? 'Árvore de decisão configurável para roteamento do Agente Virtual Sothis.'
|
||||
: 'Controle operacional e configurações administrativas.';
|
||||
: activeAdminSection === 'templates'
|
||||
? 'Modelos de mensagens predefinidas e aprovados pela Meta para iniciar conversas.'
|
||||
: 'Controle operacional e configurações administrativas.';
|
||||
|
||||
return (
|
||||
<ManagementLayout
|
||||
|
||||
@ -51,7 +51,7 @@ export function SupervisorPage() {
|
||||
function renderPlaceholder(title, description) {
|
||||
return (
|
||||
<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.
|
||||
</div>
|
||||
</DataPanel>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user