ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance audience management features with new components and API integrations

Browse Source 
- Added `AssignCoursesModal`, `AudienceMemberRow`, `AudienceTable`, and related components for improved audience management UI.
- Implemented audience invite actions including resend and revoke functionality.
- Updated audience API to support importing members and assigning courses.
- Refactored audience data handling to include status and invite management.
- Improved overall user experience with pagination and selection features in the audience table.
This commit is contained in:
Rotimi Best
2026-03-22 18:42:23 +01:00
parent e9c4082f89
commit 3919ff6c2f
157 changed files with 13183 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte
+7 -5
View File
@@ -5,6 +5,7 @@
import type { UserAnalytics } from '$lib/utils/types/analytics';
import AlarmClockIcon from '@lucide/svelte/icons/alarm-clock';
import MailIcon from '@lucide/svelte/icons/mail';
import UserIcon from '@lucide/svelte/icons/user';
interface Props {
user: UserAnalytics['user'];
@@ -16,11 +17,12 @@
<div class="rounded-md border p-5">
<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>
{#if user.avatarUrl}
<Avatar.Image src={user.avatarUrl} alt={user.fullName ? user.fullName : 'User'} />
{/if}
<Avatar.Fallback>
<UserIcon class="ui:size-8 ui:text-muted-foreground" />
</Avatar.Fallback>
</Avatar.Root>
<div class="flex flex-col space-y-2">
<p class="text-center text-2xl md:text-left dark:text-white">
apps/dashboard/src/lib/features/ui/course-landing-page/components/editor/reviews-form.svelte
+7 -6
View File
@@ -2,12 +2,12 @@
import get from 'lodash/get';
import z from 'zod';
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
import UserIcon from '@lucide/svelte/icons/user';
import { IconButton } from '@cio/ui/custom/icon-button';
import { Button } from '@cio/ui/base/button';
import ReviewFormEditor from './review-form-editor.svelte';
import * as Avatar from '@cio/ui/base/avatar';
import { processErrors } from '$lib/utils/functions/validator';
import { shortenName } from '$lib/utils/functions/string';
import { t } from '$lib/utils/functions/translations';
import type { Course } from '$features/course/utils/types';
@@ -98,11 +98,12 @@
<!-- the headers -->
<div class="flex w-full items-center justify-between">
<Avatar.Root class="mt-1 h-10 w-10">
<Avatar.Image
src={review.avatar_url ? review.avatar_url : '/logo-192.png'}
alt={review.name ? review.name : 'Reviewer'}
/>
<Avatar.Fallback>{shortenName(review.name) || 'R'}</Avatar.Fallback>
{#if review.avatar_url}
<Avatar.Image src={review.avatar_url} alt={review.name ? review.name : 'Reviewer'} />
{/if}
<Avatar.Fallback>
<UserIcon class="ui:size-5 ui:text-muted-foreground" />
</Avatar.Fallback>
</Avatar.Root>
<p class="text-sm">{review.name}</p>
apps/dashboard/src/lib/features/ui/course-landing-page/components/nav-section.svelte
+9 -1
View File
@@ -1,5 +1,7 @@
<script lang="ts">
import { page } from '$app/state';
import { fade } from 'svelte/transition';
import { cn } from '@cio/ui/tools';
interface Props {
id: string;
@@ -7,8 +9,14 @@
}
let { id, children }: Props = $props();
let includesHash = $derived(page.url.hash?.includes(id) ?? false);
</script>
<section {id} transition:fade={{ delay: 250, duration: 300 }} class="border-b border-gray-300 pt-12 pb-10">
<section
{id}
transition:fade={{ delay: 250, duration: 300 }}
class={cn('border-b border-gray-300 pt-5 pb-5', includesHash && 'pt-22')}
>
{@render children()}
</section>
apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
+18 -20
View File
@@ -6,6 +6,7 @@
import { resolve } from '$app/paths';
import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
import PlayIcon from '@lucide/svelte/icons/play';
import UserIcon from '@lucide/svelte/icons/user';
import { getLectureNo } from '$features/course/utils/functions';
import { currentOrg } from '$lib/utils/store/org';
@@ -31,7 +32,6 @@
import * as Avatar from '@cio/ui/base/avatar';
import PricingSection from './components/pricing-section.svelte';
import NavSection from './components/nav-section.svelte';
import { shortenName } from '$lib/utils/functions/string';
import SectionsDisplay from './components/sections-display.svelte';
import { observeIntersection } from './components/intersection-observer';
@@ -194,7 +194,7 @@
<!-- Course Details -->
<div class="course-content w-full p-3 lg:mr-10 lg:w-10/12">
<!-- Navigation -->
<UnderlineTabs.Root bind:value={activeNav} class="ui:bg-background sticky top-0 py-2">
<UnderlineTabs.Root bind:value={activeNav} class="ui:bg-background sticky top-10 py-2">
<UnderlineTabs.List>
{#each navItems as navItem (navItem.key)}
<UnderlineTabs.Trigger value={navItem.key}>
@@ -316,15 +316,14 @@
<!-- review -->
<div class="item-start my-2 flex w-2/4 flex-row">
<!-- image container -->
{#if review.avatar_url}
<Avatar.Root class="mt-1 size-10">
<Avatar.Image
src={review.avatar_url ? review.avatar_url : '/logo-192.png'}
alt={review.name ? review.name : 'Avatar'}
/>
<Avatar.Fallback>{shortenName(review.name) || 'AV'}</Avatar.Fallback>
</Avatar.Root>
{/if}
<Avatar.Root class="mt-1 size-10">
{#if review.avatar_url}
<Avatar.Image src={review.avatar_url} alt={review.name ? review.name : 'Avatar'} />
{/if}
<Avatar.Fallback>
<UserIcon class="ui:size-5 ui:text-muted-foreground" />
</Avatar.Fallback>
</Avatar.Root>
<!-- profile content -->
<div class="w-11/12 pl-2.5">
@@ -385,15 +384,14 @@
<!-- review -->
<div class="item-start my-2 flex w-full flex-row">
<!-- image container -->
{#if review.avatar_url}
<Avatar.Root class="mt-1 h-10 w-10">
<Avatar.Image
src={review.avatar_url ? review.avatar_url : '/logo-192.png'}
alt={review.name ? review.name : 'Avatar'}
/>
<Avatar.Fallback>{shortenName(review.name) || 'AV'}</Avatar.Fallback>
</Avatar.Root>
{/if}
<Avatar.Root class="mt-1 h-10 w-10">
{#if review.avatar_url}
<Avatar.Image src={review.avatar_url} alt={review.name ? review.name : 'Avatar'} />
{/if}
<Avatar.Fallback>
<UserIcon class="ui:size-5 ui:text-muted-foreground" />
</Avatar.Fallback>
</Avatar.Root>
<!-- profile content -->
<div class="w-11/12 pl-2.5">
apps/dashboard/src/lib/features/ui/course-landing-page/store.ts
+1 -1
View File
@@ -48,7 +48,7 @@ export const landingPageStore = writable({
id: 1,
show: true,
name: 'Adeyemi Adetunji',
avatar_url: '/logo-192.png',
avatar_url: '',
rating: 1,
created_at: new Date(),
description: 'rice ventore officiis maxime laudantium recusandae sit dolor.'
apps/dashboard/src/lib/features/ui/sidebar/footer/menu.svelte
+4 -3
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import { resolve } from '$app/paths';
import { goto } from '$app/navigation';
import { basePath, globalStore } from '$lib/utils/store/app';
import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
import RocketIcon from '@lucide/svelte/icons/rocket';
@@ -12,7 +14,6 @@
import ThemeToggle from './theme-toggle.svelte';
import { t } from '$lib/utils/functions/translations';
import { logout } from '$lib/utils/functions/logout';
import { profile } from '$lib/utils/store/user';
const sidebar = useSidebar();
@@ -36,7 +37,7 @@
{#snippet usertrigger()}
<DropdownMenu.Label class="p-0">
<a href={`${$basePath}/settings`} class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<a href={resolve(`${$basePath}/settings`, {})} class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
{@render avatarblock()}
</a>
</DropdownMenu.Label>
@@ -122,7 +123,7 @@
<DropdownMenu.Separator />
<DropdownMenu.Item onclick={() => logout()}>
<DropdownMenu.Item onclick={() => goto(resolve(`/logout`, {}))}>
<span class="flex items-center gap-2">
<LogOutIcon />
<p class="text-sm">{$t('settings.profile.logout')}</p>