Add meu-perfil page for profile editing
This commit is contained in:
parent
9b5c600f98
commit
cc29efa8a0
3 changed files with 102 additions and 6 deletions
96
saveinmed-frontend/src/app/meu-perfil/page.tsx
Normal file
96
saveinmed-frontend/src/app/meu-perfil/page.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
import ProfileForm from '@/components/profile/ProfileForm';
|
||||||
|
|
||||||
|
interface UserData {
|
||||||
|
id: string;
|
||||||
|
identificador: string;
|
||||||
|
ativo: boolean;
|
||||||
|
superadmin: boolean;
|
||||||
|
"auth-id-appwrite": string;
|
||||||
|
nome: string;
|
||||||
|
email: string;
|
||||||
|
nivel: string;
|
||||||
|
"registro-completo": boolean;
|
||||||
|
enderecos: string[];
|
||||||
|
empresasDados: string[];
|
||||||
|
"nome-social": string;
|
||||||
|
cpf: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MeuPerfilPage() {
|
||||||
|
const [usuarioData, setUsuarioData] = useState<UserData | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUser = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('access_token');
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
setError('Token de acesso não encontrado');
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Erro HTTP: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const userData = await response.json();
|
||||||
|
setUsuarioData(userData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao carregar usuário:', error);
|
||||||
|
setError('Erro ao carregar dados do usuário');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchUser();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||||
|
<p className="text-gray-600">Carregando...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-red-500 text-xl mb-4">⚠️ Erro</div>
|
||||||
|
<p className="text-gray-600">{error}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
<Header
|
||||||
|
user={usuarioData}
|
||||||
|
title="Meu perfil"
|
||||||
|
subtitle="Gerencie suas informações pessoais"
|
||||||
|
/>
|
||||||
|
<ProfileForm usuarioData={usuarioData} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -247,7 +247,7 @@ const Header = ({
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
href="/perfil#usuario"
|
href="/meu-perfil#usuario"
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
|
||||||
>
|
>
|
||||||
<UserIcon className="w-4 h-4 mr-2 flex-shrink-0" />
|
<UserIcon className="w-4 h-4 mr-2 flex-shrink-0" />
|
||||||
|
|
@ -256,7 +256,7 @@ const Header = ({
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
href="/perfil#empresa"
|
href="/meu-perfil#empresa"
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
|
||||||
>
|
>
|
||||||
<BuildingOffice2Icon className="w-4 h-4 mr-2 flex-shrink-0" />
|
<BuildingOffice2Icon className="w-4 h-4 mr-2 flex-shrink-0" />
|
||||||
|
|
|
||||||
|
|
@ -119,7 +119,7 @@ export const ROLE_ROUTES = {
|
||||||
"/pagamentos",
|
"/pagamentos",
|
||||||
"/relatorios",
|
"/relatorios",
|
||||||
"/laboratorios",
|
"/laboratorios",
|
||||||
"/perfil",
|
"/meu-perfil",
|
||||||
"/gestao-usuarios",
|
"/gestao-usuarios",
|
||||||
],
|
],
|
||||||
[UserRole.ADMIN]: [
|
[UserRole.ADMIN]: [
|
||||||
|
|
@ -130,7 +130,7 @@ export const ROLE_ROUTES = {
|
||||||
"/pagamentos",
|
"/pagamentos",
|
||||||
"/relatorios",
|
"/relatorios",
|
||||||
"/laboratorios",
|
"/laboratorios",
|
||||||
"/perfil",
|
"/meu-perfil",
|
||||||
"/gestao-usuarios",
|
"/gestao-usuarios",
|
||||||
],
|
],
|
||||||
[UserRole.COLABORADOR]: [
|
[UserRole.COLABORADOR]: [
|
||||||
|
|
@ -138,7 +138,7 @@ export const ROLE_ROUTES = {
|
||||||
"/entregas",
|
"/entregas",
|
||||||
"/produtos",
|
"/produtos",
|
||||||
"/pedidos",
|
"/pedidos",
|
||||||
"/perfil",
|
"/meu-perfil",
|
||||||
],
|
],
|
||||||
[UserRole.ENTREGADOR]: ["/entregas", "/pedidos", "/perfil"],
|
[UserRole.ENTREGADOR]: ["/entregas", "/pedidos", "/meu-perfil"],
|
||||||
} as const;
|
} as const;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue