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 <[email protected]>

apps/dashboard/src/lib/features/audience/pages/audience.svelte

@@ -10,8 +10,9 @@
   import { Empty } from '@cio/ui/custom/empty';
   import { UpgradeBanner } from '$lib/features/ui';
   import { currentOrg, currentOrgMaxAudience } from '$lib/utils/store/org';
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  import * as Avatar from '@cio/ui/base/avatar';
   import * as Page from '@cio/ui/base/page';
+  import { shortenName } from '$lib/utils/functions/string';
 
   $effect(() => {
     orgApi.getOrgAudience($currentOrg.id);
@@ -81,7 +82,13 @@
                     href={`${pageStore.url.href}/${row.id}/${$currentOrg.id}`}
                     class="text-primary-700 flex items-center gap-2 hover:underline"
                   >
-                    <Avatar src={row.avatar_url} width="w-5" height="h-5" />
+                    <Avatar.Root class="h-5 w-5">
+                      <Avatar.Image
+                        src={row.avatar_url ? row.avatar_url : '/logo-192.png'}
+                        alt={row.name ? row.name : 'User'}
+                      />
+                      <Avatar.Fallback>{shortenName(row.name) || 'U'}</Avatar.Fallback>
+                    </Avatar.Root>
                     {row.name}
                   </a>
                 </Table.Cell>