forked from RiseUP/riseup_squad_03
490 lines
20 KiB
JavaScript
490 lines
20 KiB
JavaScript
import { useState } from 'react'
|
|
|
|
import { FeatureCallout } from '../components/FeatureState.jsx'
|
|
import { settingsRepository } from '../repositories/settingsRepository.js'
|
|
|
|
|
|
const cardClass = 'rounded-2xl border border-[#404040] bg-[#262626] shadow-sm'
|
|
const rowClass = 'flex items-center justify-between gap-6 border-b border-[#404040] py-4 last:border-0'
|
|
const inputClass =
|
|
'h-10 rounded-sm border border-[#404040] bg-[#171717] px-3 text-sm text-[#e5e5e5] outline-none transition focus:border-[#3b82f6] focus:ring-2 focus:ring-[#3b82f6]/20'
|
|
|
|
export function SettingsPage() {
|
|
const sections = settingsRepository.getSections()
|
|
const [activeSection, setActiveSection] = useState('aparencia')
|
|
|
|
return (
|
|
<div className="mx-auto max-w-5xl">
|
|
<FeatureCallout
|
|
className="mb-6"
|
|
description="Preferências, integrações e backup ainda são protótipos locais, sem persistência real."
|
|
status="mock"
|
|
title="Configurações ainda estão em modo protótipo"
|
|
/>
|
|
|
|
<header className="mb-8">
|
|
<h1 className="text-2xl font-bold tracking-tight text-[#f5f5f5]">Configurações</h1>
|
|
<p className="mt-1 text-sm text-[#b8b8b8]">Gerencie preferências, segurança e integrações do MediConnect</p>
|
|
</header>
|
|
|
|
<div className="flex flex-col gap-6 lg:flex-row">
|
|
<nav className="lg:w-64" aria-label="Seções de configuração">
|
|
<div className={`${cardClass} flex flex-col gap-1 p-2`}>
|
|
{sections.map((item) => (
|
|
<button
|
|
className={`flex items-center gap-3 rounded-xl px-3 py-3 text-left transition ${
|
|
activeSection === item.id
|
|
? 'bg-[#3b82f6]/10 text-[#3b82f6]'
|
|
: 'text-[#a3a3a3] hover:bg-[#303030] hover:text-[#e5e5e5]'
|
|
}`}
|
|
key={item.id}
|
|
onClick={() => setActiveSection(item.id)}
|
|
type="button"
|
|
>
|
|
<SettingsIcon className="size-4 shrink-0" name={item.icon} />
|
|
<span className="min-w-0">
|
|
<span className="block text-sm font-semibold leading-none">{item.label}</span>
|
|
<span className="mt-1 block truncate text-[11px] opacity-70">{item.description}</span>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
<section className={`${cardClass} min-w-0 flex-1 p-6 lg:p-8`}>
|
|
{activeSection === 'aparencia' ? <AppearanceSection /> : null}
|
|
{activeSection === 'notificacoes' ? <NotificationsSection /> : null}
|
|
{activeSection === 'privacidade' ? <PrivacySection /> : null}
|
|
{activeSection === 'conta' ? <AccountSection /> : null}
|
|
{activeSection === 'integracoes' ? <IntegrationsSection /> : null}
|
|
{activeSection === 'dados' ? <DataSection /> : null}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AppearanceSection() {
|
|
const [theme, setTheme] = useState('dark')
|
|
const [compact, setCompact] = useState(false)
|
|
const [contrast, setContrast] = useState(false)
|
|
const [animations, setAnimations] = useState(true)
|
|
|
|
return (
|
|
<SectionFrame description="Personalize a interface do MediConnect." title="Aparência">
|
|
<div className="mb-8">
|
|
<p className="mb-4 text-sm font-semibold text-[#e5e5e5]">Tema da Interface</p>
|
|
<div className="grid max-w-xl gap-4 sm:grid-cols-2">
|
|
{[
|
|
{ id: 'dark', label: 'Escuro', preview: 'bg-[#0a1628]' },
|
|
{ id: 'light', label: 'Claro', preview: 'bg-[#f4f7fb]' },
|
|
].map((item) => (
|
|
<button
|
|
className={`rounded-2xl border-2 p-4 text-left transition ${
|
|
theme === item.id ? 'border-[#3b82f6] bg-[#3b82f6]/5 shadow-md shadow-[#3b82f6]/20' : 'border-[#404040] bg-[#262626] hover:border-[#3b82f6]/40'
|
|
}`}
|
|
key={item.id}
|
|
onClick={() => setTheme(item.id)}
|
|
type="button"
|
|
>
|
|
<span className={`mb-3 flex h-20 flex-col gap-1.5 overflow-hidden rounded-xl border border-[#404040] p-2 ${item.preview}`}>
|
|
<span className={`h-2.5 rounded ${item.id === 'dark' ? 'bg-[#1a3050]' : 'bg-white'}`} />
|
|
<span className="flex flex-1 gap-1">
|
|
<span className={`w-8 rounded ${item.id === 'dark' ? 'bg-[#0f1f36]' : 'bg-white'}`} />
|
|
<span className="flex flex-1 flex-col justify-center gap-1">
|
|
<span className={`h-1.5 w-3/4 rounded-full ${item.id === 'dark' ? 'bg-[#1e3a5f]' : 'bg-[#dde8f7]'}`} />
|
|
<span className={`h-1.5 w-1/2 rounded-full ${item.id === 'dark' ? 'bg-[#1e3a5f]' : 'bg-[#dde8f7]'}`} />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<span className="flex items-center justify-between">
|
|
<span className="text-sm font-semibold text-[#e5e5e5]">{item.label}</span>
|
|
{theme === item.id ? <span className="grid size-5 place-items-center rounded-full bg-[#3b82f6] text-[11px] text-white">✓</span> : null}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="mt-3 text-xs text-[#a3a3a3]">A preferência de tema é salva localmente neste protótipo.</p>
|
|
</div>
|
|
|
|
<SettingsGroup>
|
|
<SettingRow description="Transições suaves entre telas e componentes" label="Animações de interface">
|
|
<ToggleSwitch checked={animations} onChange={setAnimations} />
|
|
</SettingRow>
|
|
<SettingRow description="Aumenta o contraste dos elementos para melhor acessibilidade" label="Modo de alto contraste">
|
|
<ToggleSwitch checked={contrast} onChange={setContrast} />
|
|
</SettingRow>
|
|
<SettingRow description="Reduz o espaçamento para exibir mais informações na tela" label="Densidade compacta">
|
|
<ToggleSwitch checked={compact} onChange={setCompact} />
|
|
</SettingRow>
|
|
<SettingRow label="Idioma do sistema">
|
|
<select className={inputClass} defaultValue="pt-br">
|
|
<option value="pt-br">Português (BR)</option>
|
|
<option value="en-us">English (US)</option>
|
|
<option value="es">Español</option>
|
|
</select>
|
|
</SettingRow>
|
|
</SettingsGroup>
|
|
</SectionFrame>
|
|
)
|
|
}
|
|
|
|
function NotificationsSection() {
|
|
const [settings, setSettings] = useState({
|
|
email: true,
|
|
sms: true,
|
|
whatsapp: true,
|
|
push: false,
|
|
ai: true,
|
|
appointment: true,
|
|
report: true,
|
|
noShow: true,
|
|
})
|
|
|
|
return (
|
|
<SectionFrame description="Configure como e quando deseja receber alertas." title="Notificações">
|
|
<Subsection title="Canais de Comunicação">
|
|
<ToggleRow checked={settings.email} description="Receba resumos e alertas via e-mail" label="Notificações por E-mail" onChange={(value) => setSettings((current) => ({ ...current, email: value }))} />
|
|
<ToggleRow checked={settings.sms} description="Alertas urgentes via mensagem de texto" label="SMS" onChange={(value) => setSettings((current) => ({ ...current, sms: value }))} />
|
|
<ToggleRow checked={settings.whatsapp} description="Integração com WhatsApp Business para lembretes" label="WhatsApp" onChange={(value) => setSettings((current) => ({ ...current, whatsapp: value }))} />
|
|
<ToggleRow checked={settings.push} description="Notificações no navegador em tempo real" label="Push (navegador)" onChange={(value) => setSettings((current) => ({ ...current, push: value }))} />
|
|
</Subsection>
|
|
|
|
<Subsection title="Tipos de Alerta">
|
|
<ToggleRow checked={settings.ai} description="Alerta preditivo quando paciente tem alto risco de faltar" label="Risco de No-Show (IA)" onChange={(value) => setSettings((current) => ({ ...current, ai: value }))} />
|
|
<ToggleRow checked={settings.appointment} description="Lembre pacientes 24h e 1h antes da consulta" label="Lembrete de Consulta" onChange={(value) => setSettings((current) => ({ ...current, appointment: value }))} />
|
|
<ToggleRow checked={settings.report} description="Notificar quando relatórios mensais estiverem prontos" label="Relatório Disponível" onChange={(value) => setSettings((current) => ({ ...current, report: value }))} />
|
|
<ToggleRow checked={settings.noShow} description="Confirmar quando uma falta é registrada no sistema" label="No-Show registrado" onChange={(value) => setSettings((current) => ({ ...current, noShow: value }))} />
|
|
</Subsection>
|
|
|
|
<Subsection title="Horário Silencioso">
|
|
<SettingRow description="Sem notificações push entre 22h e 7h" label="Ativar horário silencioso">
|
|
<ToggleSwitch checked onChange={() => {}} />
|
|
</SettingRow>
|
|
<SettingRow label="Horário de início / fim">
|
|
<div className="flex items-center gap-2">
|
|
<input className={`${inputClass} w-28`} defaultValue="22:00" type="time" />
|
|
<span className="text-sm text-[#a3a3a3]">até</span>
|
|
<input className={`${inputClass} w-28`} defaultValue="07:00" type="time" />
|
|
</div>
|
|
</SettingRow>
|
|
</Subsection>
|
|
</SectionFrame>
|
|
)
|
|
}
|
|
|
|
function PrivacySection() {
|
|
const [twoFactor, setTwoFactor] = useState(false)
|
|
const [audit, setAudit] = useState(true)
|
|
const [anonymous, setAnonymous] = useState(false)
|
|
|
|
return (
|
|
<SectionFrame description="Gerencie conformidade com a Lei Geral de Proteção de Dados." title="Privacidade & LGPD">
|
|
<div className="mb-6 flex gap-3 rounded-xl border border-amber-500/30 bg-amber-500/10 p-4">
|
|
<SettingsIcon className="mt-0.5 size-5 shrink-0 text-amber-400" name="alert" />
|
|
<div>
|
|
<p className="text-sm font-semibold text-amber-400">Conformidade LGPD Ativa</p>
|
|
<p className="mt-1 text-xs leading-5 text-[#a3a3a3]">
|
|
Dados de pacientes são tratados com finalidade legítima e armazenados com segurança neste protótipo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Subsection title="Segurança de Acesso">
|
|
<ToggleRow checked={twoFactor} description="Adiciona uma camada extra de segurança ao login" label="Autenticação de Dois Fatores (2FA)" onChange={setTwoFactor} />
|
|
<SettingRow description="Desconectar automaticamente após inatividade" label="Tempo de sessão">
|
|
<select className={inputClass} defaultValue="30">
|
|
<option value="30">30 minutos</option>
|
|
<option value="60">1 hora</option>
|
|
<option value="240">4 horas</option>
|
|
</select>
|
|
</SettingRow>
|
|
<ToggleRow checked={audit} description="Registrar todas as ações realizadas no sistema" label="Log de auditoria" onChange={setAudit} />
|
|
</Subsection>
|
|
|
|
<Subsection title="Dados dos Pacientes">
|
|
<ToggleRow checked={anonymous} description="Ocultar dados pessoais identificáveis nos relatórios exportados" label="Anonimizar em relatórios" onChange={setAnonymous} />
|
|
<SettingRow description="Período de armazenamento de dados inativos" label="Retenção de dados">
|
|
<select className={inputClass} defaultValue="5">
|
|
<option value="1">1 ano</option>
|
|
<option value="3">3 anos</option>
|
|
<option value="5">5 anos (padrão)</option>
|
|
<option value="10">10 anos</option>
|
|
</select>
|
|
</SettingRow>
|
|
<SettingRow description="Gerar relatório completo para atender solicitação de titular" label="Exportar dados do paciente">
|
|
<button className="h-9 rounded-sm border border-[#404040] bg-[#303030] px-3 text-sm font-semibold text-[#e5e5e5]" type="button">
|
|
Exportar
|
|
</button>
|
|
</SettingRow>
|
|
</Subsection>
|
|
</SectionFrame>
|
|
)
|
|
}
|
|
|
|
function AccountSection() {
|
|
const [profile, setProfile] = useState({
|
|
name: 'Dra. Ana Silva',
|
|
email: 'ana.silva@mediconnect.com.br',
|
|
role: 'Coordenação Médica',
|
|
crm: 'CRM/SE 12345',
|
|
})
|
|
|
|
function update(field, value) {
|
|
setProfile((current) => ({ ...current, [field]: value }))
|
|
}
|
|
|
|
return (
|
|
<SectionFrame description="Gerencie suas informações pessoais e credenciais." title="Conta & Perfil">
|
|
<div className="mb-6 flex items-center gap-4 rounded-xl border border-[#404040] bg-[#171717] p-5">
|
|
<div className="grid size-16 place-items-center rounded-full border-2 border-[#3b82f6]/20 bg-[#3b82f6]/10 text-xl font-bold text-[#3b82f6]">
|
|
AS
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-bold text-[#f5f5f5]">{profile.name}</p>
|
|
<p className="text-xs text-[#a3a3a3]">{profile.role}</p>
|
|
<button className="mt-1 text-xs font-semibold text-[#3b82f6]" type="button">
|
|
Alterar foto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<TextField label="Nome completo" onChange={(value) => update('name', value)} value={profile.name} />
|
|
<TextField label="E-mail" onChange={(value) => update('email', value)} value={profile.email} />
|
|
<TextField label="Cargo / Função" onChange={(value) => update('role', value)} value={profile.role} />
|
|
<TextField label="CRM / Registro" onChange={(value) => update('crm', value)} value={profile.crm} />
|
|
</div>
|
|
|
|
<Subsection title="Segurança">
|
|
<SettingRow description="Última alteração há 45 dias" label="Alterar senha">
|
|
<button className="h-9 rounded-sm border border-[#404040] bg-[#303030] px-3 text-sm font-semibold text-[#e5e5e5]" type="button">
|
|
Alterar
|
|
</button>
|
|
</SettingRow>
|
|
<SettingRow description="Gerenciar dispositivos conectados" label="Sessões ativas">
|
|
<button className="text-sm font-semibold text-[#3b82f6]" type="button">
|
|
Ver sessões
|
|
</button>
|
|
</SettingRow>
|
|
</Subsection>
|
|
</SectionFrame>
|
|
)
|
|
}
|
|
|
|
function IntegrationsSection() {
|
|
const integrations = settingsRepository.getIntegrations()
|
|
|
|
return (
|
|
<SectionFrame description="Conecte o MediConnect com sistemas e serviços externos." title="Integrações">
|
|
<div className="space-y-3">
|
|
{integrations.map(([name, desc, connected, color]) => (
|
|
<div className="flex items-center gap-4 rounded-xl border border-[#404040] bg-[#171717] p-4" key={name}>
|
|
<div className={`grid size-10 shrink-0 place-items-center rounded-lg ${color}`}>
|
|
<SettingsIcon className="size-5 text-white" name="globe" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-semibold text-[#f5f5f5]">{name}</p>
|
|
<p className="text-xs text-[#a3a3a3]">{desc}</p>
|
|
</div>
|
|
<span className={`rounded-full px-2.5 py-1 text-xs font-semibold ${connected ? 'bg-emerald-500/10 text-emerald-400' : 'bg-[#303030] text-[#a3a3a3]'}`}>
|
|
{connected ? 'Conectado' : 'Desconectado'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</SectionFrame>
|
|
)
|
|
}
|
|
|
|
function DataSection() {
|
|
return (
|
|
<SectionFrame description="Exporte, importe e gerencie backups do sistema." title="Dados & Backup">
|
|
<Subsection title="Exportação de Dados">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{[
|
|
['Pacientes (CSV)', 'Lista completa com dados cadastrais'],
|
|
['Prontuários (PDF)', 'Registros médicos do período'],
|
|
['Relatório Geral (PDF)', 'Dashboard executivo completo'],
|
|
].map(([label, desc]) => (
|
|
<button className="flex items-center gap-3 rounded-xl border border-[#404040] bg-[#171717] p-4 text-left transition hover:border-[#3b82f6]/40" key={label} type="button">
|
|
<span className="grid size-9 place-items-center rounded-lg bg-[#3b82f6]/10 text-[#3b82f6]">
|
|
<SettingsIcon className="size-4" name="download" />
|
|
</span>
|
|
<span>
|
|
<span className="block text-sm font-semibold text-[#f5f5f5]">{label}</span>
|
|
<span className="block text-xs text-[#a3a3a3]">{desc}</span>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Subsection>
|
|
|
|
<Subsection title="Backup Automático">
|
|
<SettingRow description="Salvar snapshot diário dos dados" label="Backup automático">
|
|
<ToggleSwitch checked onChange={() => {}} />
|
|
</SettingRow>
|
|
<SettingRow description="Com que frequência o backup é realizado" label="Frequência">
|
|
<select className={inputClass} defaultValue="daily">
|
|
<option value="daily">Diário (00h)</option>
|
|
<option value="12h">A cada 12h</option>
|
|
<option value="weekly">Semanal</option>
|
|
</select>
|
|
</SettingRow>
|
|
<SettingRow description="30/03/2026 às 00:15" label="Último backup">
|
|
<button className="h-9 rounded-sm border border-[#404040] bg-[#303030] px-3 text-sm font-semibold text-[#e5e5e5]" type="button">
|
|
Baixar
|
|
</button>
|
|
</SettingRow>
|
|
</Subsection>
|
|
</SectionFrame>
|
|
)
|
|
}
|
|
|
|
function SectionFrame({ children, description, title }) {
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-bold text-[#f5f5f5]">{title}</h2>
|
|
<p className="mt-1 text-sm text-[#a3a3a3]">{description}</p>
|
|
</div>
|
|
<div className="space-y-6">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Subsection({ children, title }) {
|
|
return (
|
|
<div>
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.12em] text-[#a3a3a3]">{title}</p>
|
|
<SettingsGroup>{children}</SettingsGroup>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SettingsGroup({ children }) {
|
|
return <div className="rounded-xl border border-[#404040] bg-[#171717] px-6">{children}</div>
|
|
}
|
|
|
|
function ToggleRow({ checked, description, label, onChange }) {
|
|
return (
|
|
<SettingRow description={description} label={label}>
|
|
<ToggleSwitch checked={checked} onChange={onChange} />
|
|
</SettingRow>
|
|
)
|
|
}
|
|
|
|
function SettingRow({ children, description, label }) {
|
|
return (
|
|
<div className={rowClass}>
|
|
<div className="min-w-0 flex-1 pr-4">
|
|
<p className="text-sm font-semibold text-[#e5e5e5]">{label}</p>
|
|
{description ? <p className="mt-1 text-xs leading-5 text-[#a3a3a3]">{description}</p> : null}
|
|
</div>
|
|
<div className="shrink-0">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TextField({ label, onChange, value }) {
|
|
return (
|
|
<label className="grid gap-2">
|
|
<span className="text-xs font-semibold text-[#a3a3a3]">{label}</span>
|
|
<input className={`${inputClass} w-full`} onChange={(event) => onChange(event.target.value)} value={value} />
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function ToggleSwitch({ checked, onChange }) {
|
|
return (
|
|
<button
|
|
aria-checked={checked}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${checked ? 'bg-[#3b82f6]' : 'bg-[#303030]'}`}
|
|
onClick={() => onChange(!checked)}
|
|
role="switch"
|
|
type="button"
|
|
>
|
|
<span className={`inline-block size-4 rounded-full bg-white shadow-md transition-transform ${checked ? 'translate-x-6' : 'translate-x-1'}`} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function SettingsIcon({ className = 'size-4', name }) {
|
|
const common = {
|
|
className,
|
|
fill: 'none',
|
|
stroke: 'currentColor',
|
|
strokeLinecap: 'round',
|
|
strokeLinejoin: 'round',
|
|
strokeWidth: 1.9,
|
|
viewBox: '0 0 24 24',
|
|
}
|
|
|
|
if (name === 'bell') {
|
|
return (
|
|
<svg {...common}>
|
|
<path d="M18 8a6 6 0 1 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />
|
|
<path d="M10 21h4" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
if (name === 'shield') {
|
|
return (
|
|
<svg {...common}>
|
|
<path d="M12 3 5 6v5c0 4 3 7.5 7 10 4-2.5 7-6 7-10V6l-7-3Z" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
if (name === 'user') {
|
|
return (
|
|
<svg {...common}>
|
|
<path d="M16 19a4 4 0 0 0-8 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
if (name === 'globe') {
|
|
return (
|
|
<svg {...common}>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
if (name === 'database') {
|
|
return (
|
|
<svg {...common}>
|
|
<ellipse cx="12" cy="5" rx="7" ry="3" />
|
|
<path d="M5 5v14c0 1.7 3.1 3 7 3s7-1.3 7-3V5M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
if (name === 'download') {
|
|
return (
|
|
<svg {...common}>
|
|
<path d="M12 3v12M7 10l5 5 5-5M5 21h14" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
if (name === 'alert') {
|
|
return (
|
|
<svg {...common}>
|
|
<path d="M12 3 2 21h20L12 3Z" />
|
|
<path d="M12 9v5M12 18h.01" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<svg {...common}>
|
|
<path d="M12 3v3M12 18v3M4.9 4.9 7 7M17 17l2.1 2.1M3 12h3M18 12h3M4.9 19.1 7 17M17 7l2.1-2.1" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
)
|
|
}
|