Adeyemi AdetunjiandRotimi Best
9a5aee1ee0
* feat: setup dashboard analytics api * chore: requested pr fixes * fix: dash analytics server side type * refactor: update Avatar component usage across the dashboard - Replaced custom Avatar component with the new @cio/ui/base/avatar implementation for consistency. - Enhanced avatar rendering with fallback options and improved accessibility. - Cleaned up unused Avatar component files and related functions. - Updated various components to utilize the new Avatar structure, ensuring a uniform appearance and behavior across the application. * chore: remove console.log statements from analytics routes and API calls - Eliminated console.log statements for orgId and siteName in the dash analytics router and DashStatApi class to clean up the code and improve performance. --------- Co-authored-by: Rotimi Best <best@classroomio.com>
47 lines
1.6 KiB
Svelte
47 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import * as Avatar from '@cio/ui/base/avatar';
|
|
import { calDateDiff } from '$lib/utils/functions/date';
|
|
import { t } from '$lib/utils/functions/translations';
|
|
import type { UserAnalytics } from '$lib/utils/types/analytics';
|
|
import AlarmClockIcon from '@lucide/svelte/icons/alarm-clock';
|
|
import MailIcon from '@lucide/svelte/icons/mail';
|
|
|
|
interface Props {
|
|
user: UserAnalytics['user'];
|
|
}
|
|
|
|
let { user }: Props = $props();
|
|
</script>
|
|
|
|
<div class="rounded-md border p-5 dark:border-neutral-600">
|
|
<div class="flex w-full flex-col items-center justify-start gap-4 text-start md:flex-row">
|
|
<Avatar.Root class="h-16 w-16">
|
|
<Avatar.Image
|
|
src={user.avatarUrl ? user.avatarUrl : '/logo-192.png'}
|
|
alt={user.fullName ? user.fullName : 'User'}
|
|
/>
|
|
<Avatar.Fallback>{user.fullName ? user.fullName : 'User'}</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
<div class="flex flex-col space-y-2">
|
|
<p class="text-center text-2xl md:text-left dark:text-white">
|
|
{user.fullName}
|
|
</p>
|
|
|
|
<div class="flex flex-col items-center gap-1 md:flex-row md:gap-4">
|
|
<p class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
|
|
<MailIcon size={16} />
|
|
{user.email}
|
|
</p>
|
|
|
|
<p class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
|
|
<AlarmClockIcon size={16} />
|
|
{$t('analytics.last_seen')}:
|
|
<span class="italic">
|
|
{user.lastSeen ? calDateDiff(user.lastSeen) : $t('analytics.a_while_ago')}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|