forked from RiseUP/riseup_squad_03
letvb20-dot
efb942d5aa
modified: src/App.jsx modified: src/components/AppShell.jsx modified: src/components/featureStateStyles.js modified: src/config/permissions.js modified: src/hooks/useAgenda.js modified: src/mappers/reportMapper.js modified: src/pages/AgendaPage.jsx modified: src/pages/AnalyticsPage.jsx modified: src/pages/AuthPages.jsx modified: src/pages/HomePage.jsx modified: src/pages/MedicalRecordsPage.jsx modified: src/pages/MessagesPage.jsx modified: src/pages/PatientsPage.jsx modified: src/pages/ReportsPage.jsx modified: src/pages/SettingsPage.jsx deleted: src/pages/TeamPage.jsx modified: src/pages/UsersPage.jsx modified: src/repositories/availabilityRepository.js modified: src/repositories/patientRepository.js modified: src/repositories/professionalRepository.js modified: src/repositories/reportRepository.js modified: src/repositories/settingsRepository.js
428 lines
16 KiB
JavaScript
428 lines
16 KiB
JavaScript
import { useState } from 'react'
|
|
|
|
import { authRepository } from '../repositories/authRepository.js'
|
|
|
|
import { BrandLogo } from '../components/Brand.jsx'
|
|
import { FeatureBadge, FeatureCallout } from '../components/FeatureState.jsx'
|
|
import loginClinicImage from '../assets/figma/login-clinic.png'
|
|
|
|
const mockCredentials = [
|
|
{ label: 'Admin', email: 'hugo@popcode.com.br', password: 'hdoria' },
|
|
{ label: 'Médico', email: 'leticia.lacerda@souunit.com.br', password: 'Senha@123' },
|
|
{ label: 'Secretária', email: 'recepcao@mediconnect.com', password: 'demo12345' },
|
|
{ label: 'Gestor', email: 'gestao@mediconnect.com', password: '12345678' },
|
|
]
|
|
|
|
export function LoginPage({ navigate }) {
|
|
const [form, setForm] = useState({
|
|
email: '',
|
|
password: '',
|
|
})
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [credentialsOpen, setCredentialsOpen] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
function updateField(field, value) {
|
|
setForm((current) => ({ ...current, [field]: value }))
|
|
}
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault()
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
try {
|
|
await authRepository.login(form)
|
|
navigate('/inicio')
|
|
} catch (err) {
|
|
setError(err.message || 'Erro de autenticação')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#0a1628] text-white">
|
|
<div className="grid min-h-screen lg:grid-cols-2">
|
|
<section className="relative hidden min-h-screen overflow-hidden lg:block">
|
|
<img
|
|
alt=""
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
src={loginClinicImage}
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute inset-0"
|
|
style={{
|
|
background:
|
|
'linear-gradient(126.72deg, rgba(10, 22, 40, 0.9) 0%, rgba(10, 22, 40, 0.6) 50%, rgba(59, 130, 246, 0.3) 100%)',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative flex min-h-screen flex-col justify-between px-[43px] py-[43px] xl:px-12 xl:py-12">
|
|
<LoginLogo />
|
|
|
|
<div className="max-w-[488px] pb-0">
|
|
<h1 className="text-[32px] font-bold leading-[40px] tracking-[-0.02em] xl:text-4xl xl:leading-[45px]">
|
|
Gestão clínica
|
|
<br />
|
|
<span className="text-[#3b82f6]">inteligente</span> com IA
|
|
<br />
|
|
preditiva.
|
|
</h1>
|
|
<p className="mt-5 max-w-[352px] text-sm leading-[23px] text-white/60 xl:text-base xl:leading-[26px]">
|
|
Reduza o absenteísmo, organize sua agenda e melhore a experiência dos seus pacientes.
|
|
</p>
|
|
|
|
<dl className="mt-[38px] flex flex-wrap gap-8">
|
|
<LoginMetric label="Acurácia IA" value="87%" />
|
|
<LoginMetric label="Absenteísmo" value="↓42%" />
|
|
<LoginMetric label="Clínicas" value="+2.8k" />
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="relative flex min-h-screen items-center justify-center px-6 py-12 sm:px-10 lg:px-[60px] xl:px-[68px]">
|
|
<div className="w-full max-w-[448px] lg:translate-y-3">
|
|
<div className="mb-12 lg:hidden">
|
|
<LoginLogo />
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-[30px] font-bold leading-9 text-white">Entrar</h2>
|
|
<p className="mt-1 text-sm leading-5 text-white/40">
|
|
Bem-vindo(a) de volta! Acesse sua conta.
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-4 rounded bg-red-500/10 p-3 text-sm font-semibold text-red-500 border border-red-500/20">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form className="mt-8 grid gap-5" onSubmit={handleSubmit}>
|
|
<LoginField htmlFor="login-email" label="E-mail">
|
|
<input
|
|
autoComplete="email"
|
|
className="h-11 w-full rounded-[6px] border border-white/10 bg-white/[0.05] px-4 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-[#3b82f6] focus:ring-2 focus:ring-[#3b82f6]/20"
|
|
id="login-email"
|
|
onChange={(event) => updateField('email', event.target.value)}
|
|
placeholder="seu@email.com"
|
|
type="email"
|
|
value={form.email}
|
|
/>
|
|
</LoginField>
|
|
|
|
<LoginField
|
|
action={
|
|
<button
|
|
className="text-xs font-medium leading-4 text-[#3b82f6] transition hover:text-[#66a3ff]"
|
|
onClick={() => navigate('/recuperar-senha')}
|
|
type="button"
|
|
>
|
|
Esqueceu a senha?
|
|
</button>
|
|
}
|
|
htmlFor="login-password"
|
|
label="Senha"
|
|
>
|
|
<div className="relative">
|
|
<input
|
|
autoComplete="current-password"
|
|
className="h-11 w-full rounded-[6px] border border-white/10 bg-white/[0.05] py-2 pl-4 pr-11 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-[#3b82f6] focus:ring-2 focus:ring-[#3b82f6]/20"
|
|
id="login-password"
|
|
onChange={(event) => updateField('password', event.target.value)}
|
|
placeholder="••••••••"
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={form.password}
|
|
/>
|
|
<button
|
|
aria-label={showPassword ? 'Ocultar senha' : 'Mostrar senha'}
|
|
className="absolute right-3 top-1/2 grid size-5 -translate-y-1/2 place-items-center text-white/30 transition hover:text-white/60"
|
|
onClick={() => setShowPassword((current) => !current)}
|
|
type="button"
|
|
>
|
|
<EyeIcon />
|
|
</button>
|
|
</div>
|
|
</LoginField>
|
|
|
|
<button
|
|
className="inline-flex h-11 w-full items-center justify-center rounded-[6px] border border-[#3b82f6] bg-[#3b82f6] px-4 py-2 text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2),0_4px_6px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3b82f6] disabled:opacity-50"
|
|
disabled={loading}
|
|
type="submit"
|
|
>
|
|
{loading ? 'Entrando...' : 'Entrar'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="absolute bottom-4 right-4">
|
|
{credentialsOpen ? (
|
|
<div className="mb-2 w-[292px] rounded-md border border-white/10 bg-[#0f1b2d] p-2 shadow-2xl">
|
|
<p className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-white/40">
|
|
Credenciais mockadas
|
|
</p>
|
|
<div className="grid gap-1">
|
|
{mockCredentials.map((credential) => (
|
|
<button
|
|
className="rounded px-2 py-2 text-left text-xs text-white/70 transition hover:bg-white/10 hover:text-white"
|
|
key={credential.email}
|
|
onClick={() => {
|
|
setForm({
|
|
email: credential.email,
|
|
password: credential.password,
|
|
})
|
|
setCredentialsOpen(false)
|
|
}}
|
|
type="button"
|
|
>
|
|
<span className="block font-semibold">{credential.label}</span>
|
|
<span className="block font-mono text-[11px] text-white/40">{credential.email}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<button
|
|
className="flex h-[29px] items-center gap-1.5 rounded-sm border border-white/10 bg-white/[0.05] px-3 font-mono text-[10px] font-medium leading-[15px] text-white/30 transition hover:text-white/50"
|
|
onClick={() => setCredentialsOpen((current) => !current)}
|
|
title="Preencher credenciais mockadas"
|
|
type="button"
|
|
>
|
|
dev · credenciais
|
|
<FeatureBadge className="border-white/20 bg-white/10 text-white/70" status="mock" text="mock" />
|
|
<span aria-hidden="true" className="text-[9px]">
|
|
{credentialsOpen ? 'v' : '^'}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
export function RegisterPage({ navigate }) {
|
|
const [role, setRole] = useState('Clínica')
|
|
|
|
return (
|
|
<AuthLayout
|
|
description="Crie um acesso mockado para navegar pelo ambiente da clínica."
|
|
title="Criar acesso"
|
|
>
|
|
<FeatureCallout
|
|
className="mt-6"
|
|
description="Cadastro ainda é apenas demonstrativo e não cria conta real."
|
|
status="mock"
|
|
title="Fluxo mockado"
|
|
/>
|
|
<form
|
|
className="mt-8 grid gap-5"
|
|
onSubmit={(event) => {
|
|
event.preventDefault()
|
|
navigate('/inicio')
|
|
}}
|
|
>
|
|
<AuthField label="Nome da organização">
|
|
<input className={authInputClass} defaultValue="Clínica Boa Vista" />
|
|
</AuthField>
|
|
<AuthField label="Responsável">
|
|
<input className={authInputClass} defaultValue="Marina Lopes" />
|
|
</AuthField>
|
|
<AuthField label="Tipo de conta">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{['Clínica', 'Profissional'].map((option) => (
|
|
<button
|
|
className={`h-11 rounded-[6px] border px-3 text-sm font-semibold transition ${
|
|
role === option
|
|
? 'border-[#3b82f6] bg-[#3b82f6]/15 text-[#3b82f6]'
|
|
: 'border-white/10 bg-white/[0.05] text-white/50 hover:text-white'
|
|
}`}
|
|
key={option}
|
|
onClick={() => setRole(option)}
|
|
type="button"
|
|
>
|
|
{option}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</AuthField>
|
|
<button className="inline-flex h-11 w-full items-center justify-center rounded-[6px] bg-[#3b82f6] text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed]" type="submit">
|
|
Continuar
|
|
</button>
|
|
</form>
|
|
<button className="mt-5 text-sm font-semibold text-[#3b82f6]" onClick={() => navigate('/login')} type="button">
|
|
Voltar para login
|
|
</button>
|
|
</AuthLayout>
|
|
)
|
|
}
|
|
|
|
export function ForgotPasswordPage({ navigate }) {
|
|
const [sent, setSent] = useState(false)
|
|
const [email, setEmail] = useState('recepcao@mediconnect.com')
|
|
const [error, setError] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault()
|
|
setLoading(true)
|
|
setError('')
|
|
try {
|
|
await authRepository.requestPasswordReset(email)
|
|
setSent(true)
|
|
} catch (err) {
|
|
setError(err.message || 'Erro ao comunicar com o servidor.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AuthLayout
|
|
description="Informe o e-mail cadastrado para receber o link de acesso."
|
|
title="Recuperar senha"
|
|
>
|
|
{sent ? (
|
|
<div className="mt-8 rounded-[6px] border border-emerald-500/30 bg-emerald-500/10 p-4 text-sm leading-6 text-emerald-300">
|
|
Link de recuperação enviado para o e-mail informado. Siga as instruções do link!
|
|
</div>
|
|
) : (
|
|
<form
|
|
className="mt-8 grid gap-5"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{error && (
|
|
<div className="rounded bg-red-500/10 p-3 text-sm font-semibold text-red-500 border border-red-500/20">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<AuthField label="E-mail cadastrado">
|
|
<input autoComplete="email" className={authInputClass} onChange={e => setEmail(e.target.value)} value={email} type="email" />
|
|
</AuthField>
|
|
<button
|
|
className="inline-flex h-11 w-full items-center justify-center rounded-[6px] bg-[#3b82f6] text-sm font-semibold text-white shadow-[0_10px_15px_rgba(59,130,246,0.2)] transition hover:bg-[#3478ed] disabled:opacity-50"
|
|
disabled={loading}
|
|
type="submit"
|
|
>
|
|
{loading ? "Enviando..." : "Enviar link"}
|
|
</button>
|
|
</form>
|
|
)}
|
|
<button className="mt-5 text-sm font-semibold text-[#3b82f6]" onClick={() => navigate('/login')} type="button">
|
|
Voltar para login
|
|
</button>
|
|
</AuthLayout>
|
|
)
|
|
}
|
|
|
|
function AuthLayout({ children, description, title }) {
|
|
return (
|
|
<main className="min-h-screen bg-[#0a1628] text-white">
|
|
<div className="grid min-h-screen lg:grid-cols-2">
|
|
<section className="relative hidden min-h-screen overflow-hidden lg:block">
|
|
<img alt="" className="absolute inset-0 h-full w-full object-cover" src={loginClinicImage} />
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute inset-0"
|
|
style={{
|
|
background:
|
|
'linear-gradient(126.72deg, rgba(10, 22, 40, 0.9) 0%, rgba(10, 22, 40, 0.6) 50%, rgba(59, 130, 246, 0.3) 100%)',
|
|
}}
|
|
/>
|
|
<div className="relative flex min-h-screen flex-col justify-between px-[43px] py-[43px] xl:px-12 xl:py-12">
|
|
<LoginLogo />
|
|
<div className="max-w-[488px]">
|
|
<h1 className="text-[32px] font-bold leading-[40px] tracking-[-0.02em] xl:text-4xl xl:leading-[45px]">
|
|
Cuidado conectado
|
|
<br />
|
|
para equipes de
|
|
<br />
|
|
<span className="text-[#3b82f6]">saúde.</span>
|
|
</h1>
|
|
<p className="mt-5 max-w-[360px] text-sm leading-[23px] text-white/60 xl:text-base xl:leading-[26px]">
|
|
Fluxos de acesso simulados para manter a navegação ponta a ponta sem backend real.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="flex min-h-screen items-center justify-center px-6 py-12 sm:px-10 lg:px-[60px] xl:px-[68px]">
|
|
<div className="w-full max-w-[448px]">
|
|
<div className="mb-12 lg:hidden">
|
|
<LoginLogo />
|
|
</div>
|
|
<h2 className="text-[30px] font-bold leading-9 text-white">{title}</h2>
|
|
<p className="mt-1 text-sm leading-5 text-white/40">{description}</p>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
const authInputClass =
|
|
'h-11 w-full rounded-[6px] border border-white/10 bg-white/[0.05] px-4 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-[#3b82f6] focus:ring-2 focus:ring-[#3b82f6]/20'
|
|
|
|
function AuthField({ children, label }) {
|
|
return (
|
|
<label className="grid gap-1.5 text-xs font-medium leading-4 text-white/50">
|
|
<span>{label}</span>
|
|
{children}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function LoginField({ action, children, htmlFor, label }) {
|
|
return (
|
|
<div className="grid gap-1.5">
|
|
<span className="flex min-h-4 items-center justify-between gap-4 text-xs font-medium leading-4 text-white/50">
|
|
<label htmlFor={htmlFor}>{label}</label>
|
|
{action}
|
|
</span>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LoginLogo() {
|
|
return (
|
|
<BrandLogo />
|
|
)
|
|
}
|
|
|
|
function LoginMetric({ label, value }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-[21px] font-bold leading-7 text-[#3b82f6] xl:text-2xl xl:leading-8">{value}</dt>
|
|
<dd className="mt-0.5 text-[11px] leading-4 text-white/50 xl:text-xs">{label}</dd>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function EyeIcon() {
|
|
return (
|
|
<svg aria-hidden="true" className="size-4" fill="none" viewBox="0 0 16 16">
|
|
<path
|
|
d="M1.375 8.23c-.06-.16-.06-.34 0-.5a7.16 7.16 0 0 1 13.25 0c.06.16.06.34 0 .5a7.16 7.16 0 0 1-13.25 0Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.33"
|
|
/>
|
|
<path
|
|
d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.33"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|