feat: setup dashboard analytics api (#604)

* 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>

apps/dashboard/src/routes/lms/community/[slug]/+page.svelte

@@ -21,8 +21,9 @@
 
   import Vote from '$lib/components/Vote/index.svelte';
   import { IconButton } from '$lib/components/IconButton';
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  import * as Avatar from '@cio/ui/base/avatar';
   import TextField from '$lib/components/Form/TextField.svelte';
+  import { shortenName } from '$lib/utils/functions/string';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import CircleCheckIcon from '$lib/components/Icons/CircleCheckIcon.svelte';
@@ -441,7 +442,13 @@
       <div class="border-1 border-gray my-1 rounded-lg border px-1">
         <header class="flex items-center justify-between p-2 leading-none">
           <div class="flex items-center text-black no-underline hover:underline">
-            <Avatar src={question.author.avatar} name={question.author.name} width="w-7" height="h-7" />
+            <Avatar.Root class="h-7 w-7">
+              <Avatar.Image
+                src={question.author.avatar ? question.author.avatar : '/logo-192.png'}
+                alt={question.author.name ? question.author.name : 'User'}
+              />
+              <Avatar.Fallback>{shortenName(question.author.name) || 'U'}</Avatar.Fallback>
+            </Avatar.Root>
             <p class="ml-2 text-sm dark:text-white">{question.author.name}</p>
             <p class="ml-2 text-sm text-gray-500 dark:text-white">
               {question.createdAt}
@@ -490,7 +497,13 @@
           <div class="border-1 border-gray w-full rounded-lg border">
             <header class="flex items-center justify-between p-2 leading-none">
               <div class="flex items-center text-black">
-                <Avatar src={comment.avatar} name={comment.name} width="w-7" height="h-7" />
+                <Avatar.Root class="h-7 w-7">
+                  <Avatar.Image
+                    src={comment.avatar ? comment.avatar : '/logo-192.png'}
+                    alt={comment.name ? comment.name : 'User'}
+                  />
+                  <Avatar.Fallback>{shortenName(comment.name) || 'U'}</Avatar.Fallback>
+                </Avatar.Root>
                 <p class="ml-2 text-sm dark:text-white">{comment.name}</p>
                 <p class="ml-2 text-sm text-gray-500 dark:text-white">
                   {comment.createdAt}