Squad03_Luiz_Anselmo/riseup_squad_03
0
0
Fork 0
forked from RiseUP/riseup_squad_03
Code Pull Requests Activity

new file: public/favicon.svg

Browse Source 
deleted:    src/assets/hero.png
modified:   src/components/AppShell.jsx
modified:   src/components/calendar/AgendaDailyView.jsx
modified:   src/components/calendar/AgendaMonthlyView.jsx
modified:   src/components/calendar/AgendaWeeklyView.jsx
modified:   src/hooks/useAgenda.js
modified:   src/index.css
modified:   src/mappers/appointmentMapper.js
modified:   src/mappers/reportMapper.js
modified:   src/pages/AgendaPage.jsx
modified:   src/pages/AuthPages.jsx
modified:   src/pages/HomePage.jsx
modified:   src/pages/MessagesPage.jsx
modified:   src/pages/PatientsPage.jsx
modified:   src/pages/ProfilePage.jsx
modified:   src/pages/ReportsPage.jsx
modified:   src/pages/SettingsPage.jsx
modified:   src/repositories/appointmentRepository.js
modified:   src/repositories/settingsRepository.js
This commit is contained in:
letvb20-dot
2026-05-08 01:32:46 -03:00
parent bc900fbdd4
commit 94dab58d85
20 changed files with 1206 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/pages/ProfilePage.jsx
View File

@@ -1,13 +1,16 @@
import { useRef, useState, useEffect } from 'react'
import { useEffect, useRef, useState } from 'react'
import { FeatureCallout } from '../components/FeatureState.jsx'
import { featurePanelClass } from '../components/featureStateStyles.js'
import { profileRepository } from '../repositories/profileRepository.js'
import { normalizeRole } from '../config/permissions.js'
import { authRepository } from '../repositories/authRepository.js'
import { profileRepository } from '../repositories/profileRepository.js'
const cardClass = 'rounded-2xl border border-[#404040] bg-[#262626] shadow-sm'
const inputClass =
'h-10 rounded-sm border border-[#404040] bg-[#171717] px-3 text-sm text-[#e5e5e5] outline-none transition placeholder:text-[#a3a3a3] focus:border-[#3b82f6] focus:ring-2 focus:ring-[#3b82f6]/20'
const readOnlyInputClass =
'h-10 rounded-sm border border-[#404040] bg-[#1f1f1f] px-3 text-sm text-[#a3a3a3] outline-none'
export function ProfilePage({ navigate }) {
const [saved, setSaved] = useState(false)
@@ -18,10 +21,13 @@ export function ProfilePage({ navigate }) {
const fileInputRef = useRef(null)
useEffect(() => {
profileRepository.getCurrentUserProfile().then(data => {
setProfile(data)
setLoading(false)
}).catch(() => setLoading(false))
profileRepository
.getCurrentUserProfile()
.then((data) => {
setProfile(data)
setLoading(false)
})
.catch(() => setLoading(false))
}, [])
function update(field, value) {
@@ -56,31 +62,33 @@ export function ProfilePage({ navigate }) {
}
if (loading) {
return <div className="text-center pt-20 text-[#a3a3a3]">Localizando dados do paciente...</div>
return <div className="pt-20 text-center text-[#a3a3a3]">Localizando dados do perfil...</div>
}
const normalizedRole = normalizeRole(profile.role)
const canEditProfile = !['medico', 'secretaria'].includes(normalizedRole)
const currentInputClass = canEditProfile ? inputClass : readOnlyInputClass
return (
<div className="mx-auto max-w-6xl space-y-6">
<FeatureCallout
description="Carregar perfil, avatar e logout usam integração. O botão de salvar preferências desta tela ainda grava só localmente."
status="partial"
title="Perfil com persistência parcial"
/>
{canEditProfile ? (
<FeatureCallout
description="Carregar perfil, avatar e logout usam integração. O botão de salvar preferências desta tela ainda grava só localmente."
status="partial"
title="Perfil com persistência parcial"
/>
) : null}
<header>
<h1 className="text-2xl font-bold tracking-tight text-[#f5f5f5]">Perfil</h1>
<p className="mt-1 text-sm text-[#b8b8b8]">Dados locais do usuário logado e preferências básicas do shell.</p>
<p className="mt-1 text-sm text-[#b8b8b8]">Dados do usuário logado e preferências básicas do shell.</p>
</header>
<div className="grid gap-6 lg:grid-cols-[1fr_360px]">
<section className={`${cardClass} ${featurePanelClass('partial')} p-6`}>
<section className={`${cardClass} ${featurePanelClass(canEditProfile ? 'partial' : 'live')} p-6`}>
<div className="mb-6 flex items-center gap-4">
{profile.avatarUrl ? (
<img
alt=""
className="size-16 rounded-full border border-[#3b82f6]/30 object-cover"
src={profile.avatarUrl}
/>
<img alt="" className="size-16 rounded-full border border-[#3b82f6]/30 object-cover" src={profile.avatarUrl} />
) : (
<div className="grid size-16 place-items-center rounded-full border border-[#3b82f6]/30 bg-[#3b82f6]/10 text-xl font-bold text-[#3b82f6]">
{initials(profile.name)}
@@ -89,21 +97,25 @@ export function ProfilePage({ navigate }) {
<div>
<h2 className="text-lg font-bold text-[#f5f5f5]">{profile.name}</h2>
<p className="mt-1 text-sm text-[#a3a3a3]">{profile.role}</p>
<button
className="mt-1 text-xs font-semibold text-[#3b82f6] disabled:opacity-60"
disabled={uploadingAvatar}
onClick={() => fileInputRef.current?.click()}
type="button"
>
{uploadingAvatar ? 'Enviando...' : 'Alterar foto'}
</button>
<input
accept="image/*"
className="hidden"
onChange={handleAvatarChange}
ref={fileInputRef}
type="file"
/>
{canEditProfile ? (
<>
<button
className="mt-1 text-xs font-semibold text-[#3b82f6] disabled:opacity-60"
disabled={uploadingAvatar}
onClick={() => fileInputRef.current?.click()}
type="button"
>
{uploadingAvatar ? 'Enviando...' : 'Alterar foto'}
</button>
<input
accept="image/*"
className="hidden"
onChange={handleAvatarChange}
ref={fileInputRef}
type="file"
/>
</>
) : null}
{avatarError ? <p className="mt-1 text-xs font-semibold text-red-400">{avatarError}</p> : null}
</div>
</div>
@@ -112,38 +124,44 @@ export function ProfilePage({ navigate }) {
className="grid gap-4"
onSubmit={(event) => {
event.preventDefault()
setSaved(true)
if (canEditProfile) setSaved(true)
}}
>
<div className="grid gap-4 md:grid-cols-2">
<Field label="Nome">
<input className={inputClass} onChange={(event) => update('name', event.target.value)} value={profile.name} />
<input className={currentInputClass} onChange={(event) => update('name', event.target.value)} readOnly={!canEditProfile} value={profile.name} />
</Field>
<Field label="Cargo">
<input className={inputClass} onChange={(event) => update('role', event.target.value)} value={profile.role} />
<input className={currentInputClass} onChange={(event) => update('role', event.target.value)} readOnly={!canEditProfile} value={profile.role} />
</Field>
</div>
<div className="grid gap-4 md:grid-cols-2">
<Field label="E-mail">
<input className={inputClass} onChange={(event) => update('email', event.target.value)} type="email" value={profile.email} />
<input className={currentInputClass} onChange={(event) => update('email', event.target.value)} readOnly={!canEditProfile} type="email" value={profile.email} />
</Field>
<Field label="Telefone">
<input className={inputClass} onChange={(event) => update('phone', event.target.value)} value={profile.phone} />
<input className={currentInputClass} onChange={(event) => update('phone', event.target.value)} readOnly={!canEditProfile} value={profile.phone} />
</Field>
</div>
<Field label="Unidade padrão">
<select className={inputClass} onChange={(event) => update('unit', event.target.value)} value={profile.unit}>
<option>Clínica Boa Vista</option>
<option>Unidade Centro</option>
<option>Unidade Sul</option>
</select>
{canEditProfile ? (
<select className={inputClass} onChange={(event) => update('unit', event.target.value)} value={profile.unit}>
<option>Clínica Boa Vista</option>
<option>Unidade Centro</option>
<option>Unidade Sul</option>
</select>
) : (
<input className={readOnlyInputClass} readOnly value={profile.unit} />
)}
</Field>
<div className="flex flex-wrap items-center gap-3">
<button className="h-10 rounded-sm bg-[#3b82f6] px-4 text-sm font-semibold text-white" type="submit">
Salvar alterações
</button>
{saved ? <span className="rounded bg-amber-500/20 px-2.5 py-1 text-xs font-bold text-amber-300">Preferências salvas localmente</span> : null}
</div>
{canEditProfile ? (
<div className="flex flex-wrap items-center gap-3">
<button className="h-10 rounded-sm bg-[#3b82f6] px-4 text-sm font-semibold text-white" type="submit">
Salvar alterações
</button>
{saved ? <span className="rounded bg-amber-500/20 px-2.5 py-1 text-xs font-bold text-amber-300">Preferências salvas localmente</span> : null}
</div>
) : null}
</form>
</section>
@@ -155,9 +173,10 @@ export function ProfilePage({ navigate }) {
<Info label="Permissões" value="Agenda, pacientes, comunicação e configurações" />
</dl>
<div className="mt-8 border-t border-[#404040] pt-6">
<button
className="w-full h-10 rounded-sm border border-red-500/30 text-red-500 font-semibold text-sm transition hover:bg-red-500/10"
<button
className="h-10 w-full rounded-sm border border-red-500/30 text-sm font-semibold text-red-500 transition hover:bg-red-500/10"
onClick={handleLogout}
type="button"
>
Sair da conta
</button>
@@ -181,7 +200,7 @@ function Info({ label, value }) {
return (
<div className="rounded-xl border border-[#404040] bg-[#171717] p-4">
<dt className="font-semibold text-[#a3a3a3]">{label}</dt>
<dd className="mt-1 text-[#e5e5e5]">{value}</dd>
<dd className="mt-1 text-[#e5e5e5]">{value || '-'}</dd>
</div>
)
}