+```
+
+### Approved Icon Sets
+
+1. **Tabler Icons** (`@tabler/icons-react`) - Primary
+ - Large collection (4000+)
+ - Consistent stroke weight
+ - Import: `import { IconHome, IconUsers } from '@tabler/icons-react';`
+
+2. **Lucide React** (`lucide-react`) - Secondary
+ - Modern, clean icons
+ - Import: `import { Home, Users } from 'lucide-react';`
+
+3. **SVG Files** - Custom branding
+ - Small icons in public/
+ - Optimized for performance
+
+### Sizing Conventions
+
+```tsx
+// Icon sizes
+Loading allowed students...
;
+ }
+
+ return (
+
+
+
+ Allowed Students ({students.length})
+
+
+
+
+
+
+
+ {/* Add Student Sheet */}
+
+
+
+ Add Student
+
+
+
+
+
+
+
+
+ {/* Edit Student Sheet */}
+
+
+
+ Edit Student
+
+ {editingStudent && (
+
+
+
+
+
+
+
+ {/* Delete Confirmation */}
+
+
+ Remove Student
+
+ Are you sure? The student will be prevented from logging in, but their existing enrollments will remain.
+
+
+
+
+ );
+}
diff --git a/app/admin/allowed-students/page.tsx b/app/admin/allowed-students/page.tsx
new file mode 100644
index 0000000..d560a03
--- /dev/null
+++ b/app/admin/allowed-students/page.tsx
@@ -0,0 +1,34 @@
+// app/admin/allowed-students/page.tsx
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth-options';
+import { redirect } from 'next/navigation';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { AppSidebar } from '@/components/app-sidebar';
+import { SiteHeader } from '@/components/site-header';
+import { SidebarInset } from '@/components/ui/sidebar';
+import AllowedStudentsClient from './admin-client';
+
+export const dynamic = 'force-dynamic';
+
+export default async function AllowedStudentsPage() {
+ const session = await getServerSession(authOptions);
+ const role = (session as any)?.user?.role ?? null;
+
+ if (!session?.user) {
+ redirect('/login');
+ }
+
+ if (!(role === 'admin' || role === 'superadmin')) {
+ redirect('/dashboard');
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ setNewEmail(e.target.value)}
+ />
+
+
+
+ setNewLevels(e.target.value)}
+ />
+
+ + Comma-separated course codes +
+
+
+ )}
+
+
+
+ setEditingStudent({ ...editingStudent, email: e.target.value })
+ }
+ />
+
+
+
+
+ setEditingStudent({ ...editingStudent, levels: e.target.value })
+ }
+ />
+
+
+ Cancel
+
+ Remove
+
+
+
+
+
+ Create Course
+
+
+
+
+
+
+
+
+ Courses
+
+
+ {courses.length === 0 ? (
+
+
+
+ );
+}
+
+export default function CoursesAdminClient() {
+ return (
+
+ No courses yet
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ Assign enrollment
+
+
+
+
+
+ {error && (
+
+
+
+
+
+ Current enrollments
+
+
+
+ {loading && enrollments.length === 0 ? (
+
+
+ )}
+
+
+
+
+ );
+}
+
+export default function AdminClient() {
+ return (
+ {error}
+ )}
+ Loading…
+ ) : enrollments.length === 0 ? (
+
+ No enrollments yet.
+
+ ) : (
+
+
+
+
+
+
+
+ );
+ }
+
+ async function fetchPlaylistVideos(playlistId: string) {
+ if (!playlistId) return;
+ try {
+ const res = await fetch(`/api/admin/playlist-videos?playlistId=${playlistId}`);
+ if (res.ok) {
+ const data = await res.json();
+ setVideos(data || []);
+ } else {
+ toast.error('Failed to load playlist videos');
+ }
+ } catch (err) {
+ console.error('Failed to fetch playlist videos', err);
+ toast.error('Failed to load playlist videos');
+ }
+ }
+
+ async function handleDragEnd(e: any) {
+ const { active, over } = e;
+ if (!over || active.id === over.id) return;
+ const oldIndex = videos.findIndex((v) => v.id === active.id);
+ const newIndex = videos.findIndex((v) => v.id === over.id);
+ if (oldIndex === -1 || newIndex === -1) return;
+ const newOrder = arrayMove(videos, oldIndex, newIndex);
+ setVideos(newOrder.map((v, idx) => ({ ...v, index: idx })));
+
+ // Persist order
+ try {
+ const orderedIds = newOrder.map((v) => v.id);
+ const res = await fetch('/api/admin/reorder-videos', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ playlistId: selectedPlaylistId, orderedIds }),
+ });
+ if (!res.ok) {
+ toast.error('Failed to save new order');
+ // refetch to revert
+ await fetchPlaylistVideos(selectedPlaylistId);
+ } else {
+ toast.success('Order saved');
+ }
+ } catch (err) {
+ console.error('Failed to save order', err);
+ toast.error('Failed to save new order');
+ await fetchPlaylistVideos(selectedPlaylistId);
+ }
+ }
+
+ const getCourseTitle = (courseId: string) => {
+ return courses.find((c) => c.id === courseId)?.title || 'Unknown Course';
+ };
+
+ return (
+
+ {thumbnail ? (
+ 
+ ) : (
+
+ No image
+ )}
+ {title}
+
+
+
+ Create Playlist
+
+
+
+
+
+
+
+
+ Organize Playlist
+
+
+
+
+
+
+
+ Playlists
+
+
+ {playlists.length === 0 ? (
+
+
+
+ );
+}
+
+export default function PlaylistsAdminClient() {
+ return (
+
+
+
+
+
+ Select playlist
+
+
+
+
+ {videos.length === 0 ? (
+
+ v.id)} strategy={verticalListSortingStrategy}>
+
+
+ )}
+
+ No videos loaded
+ ) : (
+
+ {videos.map((v) => (
+
+
+ No playlists yet
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+ {label}
+ {sortBy === column && (
+
+ {sortOrder === 'asc' ? '↑' : '↓'}
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+
+
+ Error loading stats
+{error}
+
+
+
+ Video Performance Details
+
+
+
+
+
+ );
+}
diff --git a/app/admin/stats/page.tsx b/app/admin/stats/page.tsx
new file mode 100644
index 0000000..993bb26
--- /dev/null
+++ b/app/admin/stats/page.tsx
@@ -0,0 +1,26 @@
+// app/admin/stats/page.tsx
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth-options';
+import { redirect } from 'next/navigation';
+import StatsClient from '../stats-client';
+
+export const dynamic = 'force-dynamic';
+
+export default async function StatsPage() {
+ const session = await getServerSession(authOptions);
+ const role = (session as any)?.user?.role ?? null;
+
+ if (!session?.user) {
+ redirect('/login');
+ }
+
+ if (!(role === 'admin' || role === 'superadmin')) {
+ redirect('/dashboard');
+ }
+
+ return (
+
+
+ {stats.length} Videos
+
+
+
+ {/* Summary Cards */}
+
+
+ Video Statistics
++ Performance metrics for all videos in the system +
+
+
+
+
+ Total Views
+
+
+
+
+
+
+
+
+
+ Unique Viewers
+
+
+
+
+
+
+
+
+
+ Total Engagements
+
+
+
+
+
+
+
+
+
+ Avg. Completion Rate
+
+
+
+
+
+
+
+ {/* Data Table */}
+
+ {stats.reduce((sum, s) => sum + s.views, 0).toLocaleString()}
+
+
+ {stats.reduce((sum, s) => sum + s.totalViewers, 0).toLocaleString()}
+
+
+ {stats.reduce((sum, s) => sum + s.engagement, 0).toLocaleString()}
+
+ + Likes + Comments +
+
+ {(
+ stats.reduce((sum, s) => sum + parseFloat(s.completionRate), 0) /
+ (stats.length || 1)
+ ).toFixed(1)}
+ %
+
+
+ {loading ? (
+
+
+ )}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ) : stats.length === 0 ? (
+
+ No videos found
+
+ ) : (
+
+
+ );
+}
diff --git a/app/admin/users/[userId]/page.tsx b/app/admin/users/[userId]/page.tsx
new file mode 100644
index 0000000..bebeb07
--- /dev/null
+++ b/app/admin/users/[userId]/page.tsx
@@ -0,0 +1,26 @@
+// app/admin/users/[userId]/page.tsx
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth-options';
+import { redirect } from 'next/navigation';
+import UserDetailClient from './user-detail-client';
+
+export default async function UserDetailPage({
+ params,
+}: {
+ params: Promise<{ userId: string }>;
+}) {
+ const session = await getServerSession(authOptions);
+ const role = (session as any)?.user?.role ?? null;
+
+ if (!session?.user) {
+ redirect('/login');
+ }
+
+ if (!(role === 'admin' || role === 'superadmin')) {
+ redirect('/dashboard');
+ }
+
+ const { userId } = await params;
+
+ return Loading user details...
+ );
+ }
+
+ if (!user) {
+ return (
+
+
+
+ );
+ }
+
+ const getInitials = (name: string | null, email: string) => {
+ if (!name) {
+ return email.substring(0, 2).toUpperCase();
+ }
+ return name
+ .split(' ')
+ .map((n) => n[0])
+ .join('')
+ .toUpperCase();
+ };
+
+ const formatSeconds = (seconds: number) => {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+ if (hours > 0) {
+ return `${hours}h ${minutes}m ${secs}s`;
+ }
+ return `${minutes}m ${secs}s`;
+ };
+
+ return (
+ User not found
+
+
+
+
+
+
+
+ {/* Role Assignment Card (Superadmin Only) */}
+ {isSuperadmin && (
+
+
+ Assign Role
+
+
+
+
+ )}
+
+ {/* Enrollments */}
+ {user.enrollments.length > 0 && (
+
+
+ Enrollments ({user.enrollments.length})
+
+
+
+
+ )}
+
+ {/* Tabs for Watch History and Comments */}
+
+
+
+ Watch History ({user.progress.length})
+
+
+ Comments ({user.comments.length})
+
+
+
+ {/* Watch History Tab */}
+
+
+
+ {user.progress.length === 0 ? (
+
+
+
+
+ {/* Comments Tab */}
+
+
+
+ {user.comments.length === 0 ? (
+
+
+
+
+
+ {/* Delete User Alert Dialog */}
+
+
+ Delete User
+
+
+
+
+
+ {/* Role Change Confirmation Dialog */}
+
+
+ Update User Role
+
+
+
+
+
+ );
+}
+
+
+export default function UserDetailClient({ userId }: UserDetailClientProps) {
+ return (
+
+
+
+
+
+ {/* User Header */}
+
+
+
+ {getInitials(user.name, user.email)}
+
+
+
+
+
+
+
+ {user.role}
+
+
+ + {user.name || user.email} +
+{user.email}
++ Joined {formatDistanceToNow(new Date(user.createdAt), { addSuffix: true })} +
+
+
+
+
+
+
+
+
+ • User: Regular student with access to enrolled courses
+
+ • Admin: Can manage courses, playlists, videos, and users
+
+ • Superadmin: Full access + can assign roles to other admins
+
+ {user.enrollments.map((enrollment, idx) => (
+
+ {enrollment.course.title}
+
+ ))}
+
+
+ No watch history
+
+ ) : (
+
+
+
+
+ )}
+
+ No comments
+
+ ) : (
+
+ {user.comments.map((comment) => (
+
+ )}
+
+
+ ))}
+
+
+ {comment.replies.length} replies
+
+ )}
+
+
+
+ {comment.replies.length > 0 && (
+ + Video: {comment.video.title} +
++ {formatDistanceToNow(new Date(comment.createdAt), { + addSuffix: true, + })} +
+{comment.content}
+
+
+ + Are you sure you want to delete {user?.email}? +
++ ⚠️ This will permanently delete: +
+-
+
- User account and profile +
- All enrollments +
- All progress and watch history +
- All comments and replies +
- All video likes +
- All video unlocks +
+ This action cannot be undone. +
+
+
+ Cancel
+
+
+ {isDeleting ? 'Deleting...' : 'Delete User'}
+
+
+
+
+ + Change {user?.email}'s role from{' '} + {user?.role} to{' '} + {selectedRole}? +
+ {selectedRole === 'superadmin' && ( ++ ⚠️ This user will have full access including the ability to assign roles to other users. +
+ )} + {selectedRole === 'user' && user?.role !== 'user' && ( ++ ℹ️ This user will lose admin access but will still have access to enrolled courses. +
+ )} +
+
+ Cancel
+
+
+ {isUpdatingRole ? 'Updating...' : 'Update Role'}
+
+
+
+
+
+
+ Loading users...
+ );
+ }
+
+ return (
+
+
+
+ Total: {users.length} users
+
+
+
+
+
+
+
+ );
+
+}
+export default function sersAdminClient() {
+ return (
+
+
+
+
+
+
+
+
+
+ {video.title}
+
+
+
+
+
+ + Edit Video +
++ {video.courseTitle} • {video.playlistTitle} +
+