Upgrade Admin Dashboard — Analytics Stats, Activity Chart, and Full Course Management Table

[portableDD]

Labels

Frontend

Description

ByteChain Academy's admin panel (/admin) currently shows only a basic list of courses with links to manage their lessons. There are no platform statistics, no course creation UI, no user management view, and no analytics. For maintainers to run and grow the platform they need a proper admin dashboard. This issue upgrades the admin panel into a functional management interface wired to the backend admin analytics API (Issue 7) and the existing course/lesson management endpoints.

Background & Context

• frontend/app/admin/page.tsx fetches GET /courses and renders a plain list — no stats, no actions
• frontend/app/admin/courses/[courseId]/lessons/page.tsx has a good lesson manager — this should be preserved and extended
• Backend (Issue 7) exposes: GET /api/v1/admin/analytics/overview, GET /api/v1/admin/analytics/course-performance, GET /api/v1/admin/analytics/learner-activity, GET /api/v1/admin/analytics/top-learners
• The admin section currently has no route protection — any logged-in user can access it. This issue should add a frontend guard that redirects non-admin users
• frontend/app/admin/layout.tsx should be created to provide the admin layout and auth guard

Requirements

• Create frontend/app/admin/layout.tsx — admin shell layout with:
  • Sidebar navigation: Dashboard, Courses, Users (placeholder), Analytics
  • Auth guard: if user.role !== 'admin' redirect to /dashboard with a toast "Access denied"
• Upgrade frontend/app/admin/page.tsx into a proper dashboard with:
  • Four overview stat cards from GET /api/v1/admin/analytics/overview: Total Users, Total Courses, Total Enrollments, Certificates Issued
  • Learner activity chart (last 30 days daily active users) using recharts AreaChart — from GET /api/v1/admin/analytics/learner-activity
  • Top 5 courses by enrollment from GET /api/v1/admin/analytics/course-performance
• Create frontend/app/admin/courses/page.tsx — full course management table with:
  • Paginated table of all courses with title, status, enrollment count, and action buttons
  • "Create Course" button opening a modal with title, description, difficulty, and tags fields
  • Edit and delete actions per course row
  • Search and status filter above the table
  • Uses the fetchAdminCourses and deleteAdminCourse from lib/api.ts

Suggested Execution

Branch: git checkout -b feat/admin-dashboard-upgrade

Files to create:

• frontend/app/admin/layout.tsx
• frontend/app/admin/courses/page.tsx
• frontend/components/admin/admin-stat-card.tsx
• frontend/components/admin/activity-chart.tsx
• frontend/components/admin/course-table.tsx
• frontend/components/admin/create-course-modal.tsx
• frontend/hooks/use-admin-analytics.ts

Files to update:

• frontend/app/admin/page.tsx

Implement:

• AdminLayout — sidebar with nav links, role check redirecting non-admins
• useAdminAnalytics hook — useQuery for overview, learner activity, and course performance
• AdminStatCard — icon, label, value, optional percentage change badge
• ActivityChart — recharts AreaChart with 30 data points, filled area in accent green
• CourseTable — columns: Title, Status badge, Enrollments, Created, Actions (edit/delete)
• CreateCourseModal — form with title, description, difficulty select, tags input — calls POST /api/v1/admin/courses

Test & Validate:

• Non-admin user visiting /admin is redirected to /dashboard
• Admin user sees overview stats loaded from the backend
• Activity chart renders the last 30 days correctly
• Course table paginates and filters correctly
• Creating a course via the modal adds it to the table
• Deleting a course prompts for confirmation and removes it from the table

Acceptance Criteria

• AdminLayout redirects non-admin users to /dashboard
• Admin dashboard shows real overview stats from analytics API
• Activity chart renders 30-day learner activity from analytics API
• Course management table shows all courses with pagination
• "Create Course" modal works and adds course to the table on success
• Edit and delete course actions work correctly
• TanStack Query used for all data fetching and mutations

Example Commit Message

feat: upgrade admin dashboard with analytics, stats cards, activity chart, and course management table

Guidelines

• Assignment required before starting
• PR description must include Closes #[issue_id]
• Join our Telegram: https://t.me/ByteChainAcademy
• Complexity: High (200 pts)