import { mdiChartTimelineVariant, mdiPencil } from '@mdi/js'; import Head from 'next/head'; import React, { ReactElement } from 'react'; import CardBox from '../../components/CardBox'; import LayoutAuthenticated from '../../layouts/Authenticated'; import SectionMain from '../../components/SectionMain'; import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; import { getPageTitle } from '../../config'; import BaseButton from '../../components/BaseButton'; import { useAppSelector } from '../../stores/hooks'; import { useRouter } from 'next/router'; import UserAvatar from '../../components/UserAvatar'; import LoadingSpinner from '../../components/LoadingSpinner'; const ProfilePage = () => { const { currentUser } = useAppSelector( (state) => state.auth, ); const router = useRouter(); const handleEdit = () => { router.push('/profile/edit'); } if (!currentUser) { return ( ); } return ( <> {getPageTitle('Profile')}
{currentUser.avatar && currentUser.avatar.length > 0 ? ( Avatar ) : ( )}

{`${currentUser?.firstName || ''} ${ currentUser?.lastName || '' }`}

{currentUser?.email}

{currentUser.app_role && (

{ currentUser.app_role.name.charAt(0).toUpperCase() + currentUser.app_role.name.slice(1) }

)}
); }; ProfilePage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default ProfilePage;