EDUSHARE

As a frontend developer, implement the Navbar section for the Login page. This component may already exist from the Landing page. It uses `useState` to manage `open` (mobile menu toggle), renders a `nv-root` header with `nv-inner` nav containing: a brand logo link with `GraduationCap` (lucide-react, size=22, strokeWidth=2.4) and `nv-logo-text` span; a `nv-links` ul mapping over `navLinks` array (Features→/Landing, Pricing→/Courses, About→/Landing); a `nv-actions` div with Login and Sign up anchor buttons; and a `nv-toggle` button toggling between `<X size={24}/>` and `<Menu size={24}/>` icons with aria-expanded/aria-label. Mobile menu renders as `nv-mobile` div with `nv-open` class conditional, containing `nv-mobile-link` anchors that call `closeMenu` on click plus `nv-mobile-actions` buttons. Import and apply `Navbar.css` (4222 chars). Ensure reuse of the Landing page Navbar component if already built.

As a Backend Developer, implement user management API endpoints using FastAPI. Include: GET /users (paginated list with filters for role, status, date), GET /users/{id}, PUT /users/{id} (update profile), DELETE /users/{id}, PUT /users/{id}/status (activate/suspend/deactivate), GET /users/{id}/activity, POST /users/bulk-action (bulk suspend/export). Implement admin-only guards. Note: Frontend tasks for UserManagerTable, UserManagerFilters, and UserManagerPagination depend on these endpoints.

As a Backend Developer, implement course management API endpoints using FastAPI. Include: GET /courses (paginated, filterable by subject/class/teacher/difficulty), GET /courses/{id}, POST /courses (teacher creates course), PUT /courses/{id}, DELETE /courses/{id}, GET /courses/{id}/chapters, POST /courses/{id}/enroll, GET /courses/{id}/progress (student progress). Also implement: GET /courses/{id}/videos, GET /courses/{id}/materials. Note: Frontend tasks for CoursesGrid, CoursesCatalog, CoursesHero, CoursesFilter, and CourseDetail sections depend on these endpoints.

As a Backend Developer, implement doubt session management API endpoints. Include: POST /doubt-sessions (student books a session with subject, duration, question details), GET /doubt-sessions (list with filters for status/subject/duration/date), GET /doubt-sessions/{id}, PUT /doubt-sessions/{id}/accept (teacher accepts with doubt code), PUT /doubt-sessions/{id}/decline, PUT /doubt-sessions/{id}/complete, PUT /doubt-sessions/{id}/cancel, POST /doubt-sessions/{id}/doubt-code/validate (validate doubt code 1 min before session). Implement doubt code generation (unique alphanumeric, e.g. DOUBT-8K4X9M2P), session status state machine (pending→active→completed/cancelled). Note: Frontend tasks for DoubtSessionHero, DurationSelector, ExpertMatcher, SessionSelectionForm, ConfirmationBanner, TeacherDoubtRequests, and SessionManager sections depend on these endpoints.

As a Backend Developer, implement user profile management API endpoints. Include: GET /profile (current user profile), PUT /profile/personal-info (update name, email, phone, dob, bio), POST /profile/avatar (upload profile picture), PUT /profile/learning-preferences (update subjects, language, class level, frequency), PUT /profile/account-security (change password, 2FA toggle), GET /profile/sessions (active login sessions), DELETE /profile/sessions/{id} (revoke session), POST /profile/account/deactivate, DELETE /profile/account (delete account, requires password), GET /profile/export-data (GDPR data download). Note: Frontend tasks for PersonalInfo, LearningPreferences, AccountSecurity, NotificationSettings, PaymentMethods, and DangerZone depend on these endpoints.

As a Backend Developer, implement notification management API endpoints. Include: GET /notifications (list user notifications with read/unread state), PUT /notifications/{id}/read, PUT /notifications/read-all, DELETE /notifications/{id}, GET /notifications/preferences (user notification settings per category and channel: email/sms/inapp), PUT /notifications/preferences (update per-category, per-channel toggles). Integrate with email service (SendGrid) and SMS gateway for push delivery. Note: Frontend task NotificationSettings depends on these endpoints.

As a Frontend Developer, set up a centralized API client for all frontend-to-backend communication. Create src/api/client.js using Axios with base URL configuration from environment variables (REACT_APP_API_URL). Implement: request interceptor to attach JWT Bearer token from localStorage, response interceptor to handle 401 (redirect to login / refresh token), global error handling, and retry logic. Create typed API service modules: authApi.js, coursesApi.js, practiceApi.js, doubtSessionsApi.js, channelsApi.js, liveClassApi.js, profileApi.js, analyticsApi.js, adminApi.js. All API modules must export async functions matching the backend endpoints. This is a prerequisite for all integration tasks.

As a frontend developer, implement the LoginHero section for the Login page. The section renders a `lh-root` section with two layers: (1) a `lh-canvas-bg` div containing a React Three Fiber `<Canvas>` with `camera={{ position: [0, 0, 5], fov: 60 }}`, `dpr={[1, 1.5]}`, `gl={{ alpha: true, antialias: false }}`, wrapping a `<Suspense fallback={null}>` that renders a `ParticleField` component; (2) a `lh-inner` content div with `lh-headline` h1 (including `lh-headline-accent` span for 'EduShare'), `lh-subheadline` paragraph, and `lh-benefits` div mapping over `benefits` array (Brain/'AI-Powered Learning', MessageCircle/'Expert Support', Zap/'Instant Access') rendering `lh-benefit` spans each with `lh-benefit-icon`. The `ParticleField` component uses `useRef`, `useMemo` to create a `Float32Array` of 80 particles (positions spread across 14×6×4 units), renders as `<points>` with `<bufferGeometry>` and `<bufferAttribute attach='attributes-position'>`, and `<pointsMaterial size={0.04} color='#AED6F1' transparent opacity={0.7} blending={2} depthWrite={false}/>`. Import `@react-three/fiber`, lucide-react icons (Sparkles, Brain, MessageCircle, Zap), and apply `LoginHero.css` (2323 chars).

As a frontend developer, implement the LoginForm section for the Login page. The component manages six state hooks: `email`, `password`, `remember`, `loading`, `errors` (object), and `generalError`. It renders a `lf-root` section with: (1) a `lf-canvas-wrap` background containing a React Three Fiber `<Canvas>` with a `FloatingParticles` component (count=40) that uses `useRef`, `useMemo` for positions (Float32Array, 6×8×4 spread), speeds array (0.15–0.75 range), and per-particle colors lerped between `#2E86C1` and `#AED6F1` using `THREE.Color.lerp`; particles rendered as `<instancedMesh args={[null, null, count]}>` with `<sphereGeometry args={[0.03, 8, 8]}/>` and `<meshBasicMaterial transparent opacity={0.35}/>`. (2) A login form card with Mail/Lock lucide-react icon inputs for email and password, a remember-me checkbox, inline field-level error display using `AlertCircle` icon, a `generalError` banner, and a submit button with `LogIn` icon showing a loading spinner during the 1200ms simulated auth delay. `validateForm` checks email regex and password min-length 6. `handleInputChange` clears per-field errors and `generalError` on input. `handleSubmit` prevents default, runs validation, sets `loading=true`, and after timeout sets `generalError`. Import `@react-three/fiber`, `three`, Mail/Lock/AlertCircle/LogIn from lucide-react, and apply `LoginForm.css` (8700 chars).

As a frontend developer, implement the Footer section for the Login page. This component may already exist from the Landing page. It uses `useState` for `email` and `subscribed` newsletter state. Renders a `ftr-root` footer with: a `ftr-deco` aria-hidden decorative div; a `ftr-inner` containing `ftr-top` with a `ftr-brand-col` (logo anchor with `ftr-logo-mark` 'E' span + `ftr-logo-text`, `ftr-tagline` paragraph, newsletter `ftr-news-form` with email input and Subscribe button, conditional `ftr-news-success` paragraph on subscription); three `linkColumns` (Product: Courses/Practice/DoubtSession/LiveClass, Company: StudentDashboard/TeacherDashboard/Channel/Profile, Resources: CourseDetail/ContentManager/Signup/Login) each rendered as a column of anchor links; and a `socials` array (Twitter, Linkedin, Youtube, Instagram, Facebook from lucide-react) rendered as icon links. `handleSubmit` sets `subscribed=true` and clears email if `email.trim()` is truthy. Dynamic `year` via `new Date().getFullYear()`. Import Twitter/Linkedin/Youtube/Instagram/Facebook from lucide-react, apply `Footer.css` (4559 chars). Reuse Landing page Footer if already built.

As a frontend developer, implement the SignupHero section for the Signup page. Based on the JSX provided, this section reuses the Navbar component structure and renders a hero area for the Signup page. It leverages the same `isOpen`/`isScrolled` state pattern and `nv-root`/`nv-scrolled` class toggling from `Navbar.css`. Implement the hero banner that introduces the Signup flow, ensuring it visually connects with the Navbar above it. Verify CSS imports from `Navbar.css` (6652 chars) and that the hero layout is responsive across breakpoints.

As a frontend developer, implement the SignupForm section for the Signup page. This is the most complex section, using `useState` for `userType` ('student'/'teacher'), `name`, `email`, `password`, `confirmPassword`, `grade`, `subject`, `errors`, `submitted`, and `touched`. Includes a `getPasswordStrength(pw)` utility that scores passwords by length (≥8, ≥12), uppercase, digits, and special chars — returning `weak/medium/strong` with corresponding widths (28/56/100%) and colors (`#E74C3C`/`#F39C12`/`#27AE60`). Includes a `validateEmail` regex helper. Renders a `@react-three/fiber` `<Canvas>` with a `FloatingShapes` component: a `useRef` group of 6 alternating `boxGeometry`/`sphereGeometry` meshes in colors `#2E86C1`, `#AED6F1`, `#F39C12`, animated via `useFrame` with slow Y-axis group rotation and sinusoidal X tilt. Form fields conditionally show `grade` dropdown (gradeOptions) for students and `subject` for teachers. Imports `SignupForm.css` (11149 chars).

As a frontend developer, implement the SignupBenefits section for the Signup page. This section renders three benefit cards, each with a mini `@react-three/fiber` `<Canvas>` 3D icon. `BookIcon`: a `useRef` group with two `boxGeometry` pages (`#AED6F1`/`#2E86C1` via `meshPhongMaterial`), a spine mesh, and a red bookmark ribbon, all rotating via `useFrame` at `delta * 0.3`. `ChatIcon`: a `useRef` group with a scaled `sphereGeometry` speech bubble, a `coneGeometry` tail, and three dot `sphereGeometry` meshes, with the second bubble ref (`bubble2Ref`) oscillating via `Math.sin(Date.now() * 0.002)`. All 3D icons use `meshPhongMaterial` with emissive highlights. Imports `SignupBenefits.css` (4284 chars). Section highlights platform value propositions such as 'Learn at Your Pace' and 'Get Expert Help'.

As a frontend developer, implement the SignupSecurity section for the Signup page. Features a `SecurityParticles` component using `useMemo` to generate 60 particle objects with random positions (spread `[-4, 4]` x/y/z), scale (`0.03–0.11`), speed, and phase. In `useFrame`, the group sinusoidally tilts on Y/X axes and each `octahedronGeometry` child floats vertically via `Math.sin` and spins on Z. Rendered inside a `<Canvas>` with `alpha: true` positioned absolutely as a background via `SecurityScene`. The foreground renders three `securityBadges` cards using Lucide icons `Lock`, `Shield`, `BadgeCheck`, plus a `complianceItems` list with `CheckCircle` icons ('GDPR compliant data handling', 'Regular third-party security audits', 'Transparent data usage policies', 'Right to data deletion'). Also uses `FileCheck` and `ArrowRight` from lucide-react. Imports `THREE` from three and `SignupSecurity.css` (6549 chars).

As a frontend developer, implement the StudentDashboardStats section for the StudentDashboard page. This section renders four animated stat cards using a custom `useCountUp` hook that drives an easing cubic counter animation via `requestAnimationFrame`. Each card hosts a dedicated React Three Fiber `Canvas` with a unique 3D icon: `CubeIcon` (boxGeometry, blue, rotating on x+y axes for Courses), `TorusIcon` (torusGeometry, orange, rotating on x+y for Practice), `SphereIcon` (sphereGeometry, yellow, rotating on y for Doubts), and `OctahedronIcon` (octahedronGeometry, for Hours). Each mesh uses `meshStandardMaterial` with metalness, roughness, and emissive settings. Cards animate in via IntersectionObserver to trigger `startCounting`. Imports `StatCard.css` and `StudentDashboardStats.css`. Three.js/R3F dependencies must be installed. Note: Navbar component may already exist from the Login page.

As a frontend developer, implement the StudentDashboardCourses section for the StudentDashboard page. This section renders a static `coursesData` array of four course objects (Introduction to Calculus, Organic Chemistry Fundamentals, Newtonian Mechanics, Data Structures & Algorithms) as `CourseCard` components. Each `CourseCard` is an anchor tag with class `sdc-card` showing subject thumbnail, title, instructor, and a CSS progress bar driven by `course.progress`. Behind the cards, a React Three Fiber `Canvas` renders a `ParticleField` component: 60 particles using `bufferGeometry` with `bufferAttribute` for positions, animated via `useFrame` to drift vertically (y-axis wrap at ±3.5), with `pointsMaterial` at size 0.04, blue color, additive blending, and opacity 0.35. Positions and speeds are computed with `useMemo`. Imports `StudentDashboardCourses.css`.

As a frontend developer, implement the StudentDashboardUpcoming section for the StudentDashboard page. This section renders upcoming Doubt Sessions and Live Classes in a two-column grid (`su-grid`). It uses a `useState` hook for `attendedMap` to toggle attended/not-attended state per session via `toggleAttended(id)`. `doubtSessionsData` (3 sessions: Mechanics, Calculus, Organic Reactions) and `liveClassesData` (2 classes: Physiology, EM Waves) are static arrays with fields: id, topic, expertName/instructorName, subject, date, time, duration, status. Each card (`su-card`) in an unordered list shows type badge, topic title, time, meta info, and a toggle button rendering `CheckCircle2` or `Circle` from lucide-react based on attended state. Column headings use `HelpCircle` and `BookOpen` icons. Empty state renders a `su-empty` div. Imports `StudentDashboardUpcoming.css` and lucide-react icons: Calendar, Clock, Video, CheckCircle2, Circle, HelpCircle, BookOpen.

As a frontend developer, implement the StudentDashboardQuickActions section for the StudentDashboard page. This section renders a `qk-grid` of four anchor-tag action buttons from a static `actions` array: 'Book New Doubt Session' (Calendar icon, color='accent', href='/DoubtSession'), 'Browse Courses' (BookOpen icon, color='primary', href='/Courses'), 'Start Practice' (Zap icon, color='secondary', href='/Practice'), and 'Join Live Class' (Video icon, color='highlight', href='/LiveClass'). Each button has class `qk-button qk-button--{color}`, a `qk-icon-wrapper` div containing the lucide icon at size=50, and a `qk-label` span. All icons are imported from lucide-react. No state or animation required — pure static navigation links. Imports `StudentDashboardQuickActions.css`.

As a frontend developer, implement the TeacherQuickStats section for the TeacherDashboard page. Render a 5-card stats grid using the `stats` array containing Total Students (2,847), Active Channels (14), Doubts Resolved (1,923), Earnings (Month) (₹48,350), and Avg. Rating (4.8). Each `tqs-card` includes a custom inline SVG icon with radialGradient backgrounds using per-stat `iconColor` values — shapes vary per label (circle for Total Students, concentric circles for Active Channels, polygon/diamond for Doubts Resolved, rect shapes for Earnings, star-path for Avg. Rating). Each card displays `stat.value`, `stat.label`, and a `trend` badge with direction (up/neutral) and text (e.g., '+12.4%', 'Stable'). Implement `tqs-root`, `tqs-inner`, `tqs-header`, `tqs-grid`, `tqs-card`, `tqs-card-icon` CSS classes from TeacherQuickStats.css. This section establishes the page-level dependency chain from the Login page's Navbar task.

As a frontend developer, implement the TeacherActiveSession section for the TeacherDashboard page. Uses `useState` for `timeElapsed` (initialized to '00:12:34'), `isMuted`, `isSharing`, and `hasActiveSession` (true by default). A `useEffect` with `setInterval` increments the `timeElapsed` timer every 1000ms, correctly rolling over seconds → minutes → hours. When `hasActiveSession` is false, renders a `tas-empty-state` with a wave emoji, 'No Active Session' title, and descriptive text. When active, renders a `tas-session-card` with a LIVE badge (`tas-active-badge`), student info panel showing avatar initial 'A', name 'Arjun Patel', subject 'Mathematics • Class 10', topic 'Quadratic Equations', and a timer section displaying `timeElapsed` with '45 min session' label. Includes control buttons using lucide-react icons: Phone, Mic/MicOff toggle (calls `handleMuteToggle`), Monitor toggle for screen share (calls `handleShareToggle`), and X button to end session (calls `handleEndSession` which sets `hasActiveSession` to false). Implement all `tas-*` CSS classes from TeacherActiveSession.css.

As a frontend developer, implement the TeacherDoubtRequests section for the TeacherDashboard page. Manages `requests` state initialized from `initialRequests` array (6 students: Riya Sharma/Physics/PHY-2847, Arjun Patel/Mathematics/MTH-6193, Ananya Gupta/Chemistry/CHM-4502, Vikram Singh/Biology/BIO-7810, Priya Nair/English/ENG-3329, Karan Mehta/Physics/PHY-5091). Uses `useState` for `activeFilter` (default 'All') and `animating` (tracks which card is animating with type 'accept' or 'decline'). Subject filter tabs render from `subjects` array ['All', 'Physics', 'Mathematics', 'Chemistry', 'Biology', 'English']. `filteredRequests` derived via filter on `activeFilter`. `handleAccept` and `handleDecline` use `useCallback`, set `animating` state, then after 380ms timeout remove the request from `requests` and clear `animating`. Each request card renders: colored avatar with initials, studentName, subject badge with per-subject CSS class (e.g., `tdr-sub-physics`, `tdr-sub-math`), doubtCode, timeRequested with recency indicator, and Accept/Decline action buttons. Shows `pendingCount` badge and empty state when `isEmpty`. Renders inline SVG chat-bubble icon in header. Implement all `tdr-*` CSS classes from TeacherDoubtRequests.css.

As a frontend developer, implement the TeacherChannelOverview section for the TeacherDashboard page. Integrates `@react-three/fiber` Canvas with custom `RotatingShape` component that uses `useRef` and `useFrame` to continuously rotate meshes (rotation.x and rotation.y driven by delta * speed). `RotatingShape` accepts `geo` prop to switch between `torusGeometry` (args [1,0.35,16,32]), `octahedronGeometry`, `icosahedronGeometry`, and `coneGeometry` via `useMemo`. Uses `THREE.MeshPhysicalMaterial` with per-channel color, metalness 0.1, roughness 0.35, clearcoat 0.15, and emissive at 0.15 multiplier. On hover (`hovered` state via `onMouseEnter`/`onMouseLeave` on `tco-card-thumb`), scale lerps to 1.15 via `THREE.Vector3`. `ChannelThumb` wraps the Canvas with `tco-thumb-overlay` div. The `channelShapes` array defines 4 shape configs (torus/#2E86C1, octahedron/#F39C12, icosahedron/#27AE60, cone/#E74C3C). Channel cards use index modulo 4 for shape assignment. Renders inline SVG Plus and Upload icon components. Implement all `tco-*` CSS classes from TeacherChannelOverview.css.

As a frontend developer, implement the TeacherScheduledClasses section for the TeacherDashboard page. Integrates `@react-three/fiber` Canvas with `@react-three/drei` Box and Sphere for a `CalendarCube` 3D accent: uses `groupRef` and `cubeRef`, animates via `useFrame` with `state.clock.getElapsedTime()` — group rotates (y: t*0.25, x: sin(t*0.3)*0.2), inner cube bobs (y: sin(t*1.6)*0.08). Renders two nested Box meshes (AED6F1 at opacity 0.55, 2E86C1 at opacity 0.65 offset by 0.04) and a Sphere (F7DC6F with emissiveIntensity 0.4) at corner position. Implements `getTimeUntil(dateStr, timeStr)` helper computing ms diff to target datetime, returning hours/minutes/isPast. `getCountdownLabel` returns human labels ('In progress', 'Starting now', 'In Xm', 'In Xh Ym', 'In Xd'). `getCountdownClass` returns CSS class variants: `tsc-countdown-urgent` (<1h or past), `tsc-countdown-soon` (<24h), `tsc-countdown-normal`. `scheduledClassesData` contains classes with id, date ('2026-06-28'), time, subject, topic, channel, enrolled, and maxStudents. Renders class cards with countdown badges, subject labels, topic text, channel name, enrolled/maxStudents progress indicator. Implement all `tsc-*` CSS classes from TeacherScheduledClasses.css.

As a frontend developer, implement the TeacherEarningsPanel section for the TeacherDashboard page. Integrates both `@react-three/fiber` and `react-chartjs-2`. 3D accent: `CoinMesh` uses `useRef` for `groupRef`, animates via `useFrame` (rotation.y += delta*0.9, rotation.x += delta*0.15). Uses `useMemo` to create `THREE.CylinderGeometry(1.15,1.15,0.28,48)` for coin body (color F39C12, metalness 0.7, roughness 0.25) and `THREE.TorusGeometry(1.15,0.09,16,48)` for three edge rings (color E67E22, metalness 0.85) at y positions 0, 0.14, -0.14. `CoinScene` wraps in Canvas with camera at [0,0.15,3.8] fov 32, alpha:true. Chart.js: registers CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, Filler. Bar chart with `chartLabels` (['Jan'–'Jun']), `earningsData` ([18200–24850]), `doubtData` ([11200–15200]), `classData` ([7000–9650]). `chartOptions` sets responsive true, maintainAspectRatio false, interaction mode 'index', legend at top/end with Inter font, tooltip with dark background rgba(44,62,80,0.92). Lucide icons used: Wallet, MessageCircle, MonitorPlay, CreditCard, CalendarDays, ArrowUpRight, TrendingUp for earnings breakdown cards. Implement all `tep-*` CSS classes from TeacherEarningsPanel.css.

As a frontend developer, implement the AdminSidebar section for the AdminDashboard page. Build the collapsible sidebar using the `asb-root`, `asb-overlay`, and `asb-toggle` CSS classes. Implement `useState` hooks for `active` (currently selected menu item) and `mobileOpen` (drawer open/close state). Render `menuCategories` array with three groups (MAIN, MANAGEMENT, SYSTEM) using `asb-nav-section-label` and `asb-item` classes. Include Lucide icons: `LayoutDashboard`, `Users`, `FileText`, `BarChart3`, `MonitorPlay`, `Settings`, `LogOut`, `Shield`, `Menu`, `X`. Display badge counts (12 for Users, 3 for Sessions) on nav items. Implement mobile hamburger toggle button with `aria-expanded` attribute, Escape key listener via `useEffect` to close the drawer, and overlay click-to-close. Render brand header with `Shield` icon, 'Admin Panel' label, and 'EduShare' title. Note: this component may be reused across admin pages. Import `AdminSidebar.css` for all styling.

As a Backend Developer, implement video management API endpoints. Include: POST /videos/upload (multipart upload with metadata), GET /videos/{id} (video details + streaming URL), PUT /videos/{id} (update metadata), DELETE /videos/{id}, PUT /videos/{id}/status (approve/reject by admin), GET /videos (paginated list with filters). Integrate with object storage (S3-compatible) for video file storage and CDN URL generation. Note: Frontend tasks for VideoPlayer, ContentManagerVideosTable, and ChannelVideos depend on these endpoints.

As a Backend Developer, implement payment and wallet API endpoints. Include: POST /payments/initiate (initiate pay-per-doubt payment for a session booking), POST /payments/verify (verify payment gateway callback), GET /payments/history (student transaction history with debit/credit entries), GET /wallet/balance (student wallet balance), POST /wallet/topup, POST /payments/refund (for cancelled sessions), GET /payments/{id}/receipt (generate receipt for download). Integrate with a payment gateway (Razorpay recommended for India). Note: Frontend tasks for PaymentMethods, ConfirmationBanner, DurationSelector, and BookDoubtCTA depend on these endpoints.

As a Backend Developer, implement analytics API endpoints for admin dashboard. Include: GET /analytics/overview (total users, active courses, doubt sessions, revenue KPIs with trend percentages), GET /analytics/users (DAU data for 28 days, user role distribution, weekly active breakdown), GET /analytics/sessions (daily session counts Mon-Sun, session category distribution, summary stats), GET /analytics/courses (course performance table with enrolled, completion rate, rating, revenue, chapter breakdown), GET /analytics/reports (list available reports with metadata), POST /analytics/reports/{type}/generate (trigger report generation), GET /analytics/reports/{type}/download. Note: Frontend tasks for AnalyticsOverview, AnalyticsUserMetrics, AnalyticsSessionMetrics, AnalyticsCoursePerformance, and AnalyticsDetailedReports depend on these endpoints.

As an AI Engineer, implement AI-powered expert matching API endpoints. Include: GET /experts (list available teachers/experts filterable by subject, availability, rating), GET /experts/{id} (expert profile with rating, reviews, experience, availability), POST /experts/match (AI-powered matching: input subject + doubt description, output ranked list of available experts with match score using LiteLLM/LangChain for semantic similarity on doubt description vs. teacher expertise), GET /experts/{id}/availability (real-time availability slots). Note: Frontend task ExpertMatcher depends on these endpoints.

As a Tech Lead, verify the end-to-end integration between the Login/Signup frontend implementation and the Auth backend API. Ensure: LoginForm calls POST /auth/login and stores JWT, SignupForm calls POST /auth/register with correct role payload, JWT is persisted in localStorage and attached via the API client interceptor, protected routes redirect unauthenticated users to /Login, and /auth/me populates the current user context. Verify role-based routing sends students to /StudentDashboard and teachers to /TeacherDashboard after login. Note: frontend section tasks LoginForm (e468ec5e) and SignupForm (9cebccc3) should depend on backend-auth and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the Courses/CourseDetail frontend sections and the Courses backend API. Ensure: CoursesGrid fetches real paginated course data from GET /courses with filters applied, CoursesFilter correctly passes filter params (subject, classLevel, difficulty) as query strings, CourseDetail VideoPlayer loads the video stream URL from GET /courses/{id}, PracticeSection links correctly route to /Practice with chapter context, and BookDoubtCTA passes course/teacher context into the doubt booking flow. Verify enrollment state is persisted via POST /courses/{id}/enroll. Note: frontend section tasks CoursesGrid (925ace50), CoursesCatalog (643f8c10), VideoPlayer (f7829dc4), BookDoubtCTA (f34b4691) should depend on backend-courses and frontend-api-client.

As a frontend developer, implement the SignupCTA section for the Signup page. Uses `useState` for `clicked` (button interaction state) and `useRef` for animation targets. Renders a `<Canvas>` backdrop with `CompletionRing`: a `torusGeometry` (radius 2.6, tube 0.05, 128 segments) with `#2E86C1` emissive material rotating via `torusRef.rotation.z = t * 0.14`, plus 10 orbiting `sphereGeometry` accent particles in `#F7DC6F` positioned at elliptical angles (`r=2.95`, y-scale 0.35). The group also oscillates via `Math.sin` on Y/X. The `sc-card` foreground renders a `nextSteps` array of three items (Confirmation Email via `<Mail />`, Profile Setup via `<UserCheck />`, Start Learning via `<Sparkles />`) with `ArrowRight` and `Clock` from lucide-react. Imports `SignupCTA.css` (6133 chars). Camera at `[0, 0, 7.5]`, fov 48, dpr `[1, 2]`.

As a frontend developer, implement the AdminDashboardHeader section for the AdminDashboard page. Build the `adh-root` header container with a two-column layout (`adh-left` and `adh-actions`). In the left column, render a breadcrumb nav (`adh-breadcrumb`) using the `breadcrumbItems` array ([EduShare → /Landing, Dashboard → /AdminDashboard]) with `ChevronRight` separators and `adh-breadcrumb-current` for the last item. Display an `h1` with class `adh-title` ('Admin Dashboard') and a live datetime display using `adh-datetime` with `Clock` icon — updated every 30 seconds via `setInterval` in `useEffect` using `toLocaleString('en-US', opts)`. In the right column, render 'Refresh' button (`adh-btn-outline` with `RefreshCw` icon) and 'Export' button (`adh-btn-primary` with `Download` icon). Both buttons trigger `showToast()` which sets a temporary `toast` state cleared after 2500ms. Render the toast notification conditionally with `CheckCircle` icon. Import `AdminDashboardHeader.css`.

As a frontend developer, implement the AdminDashboardStats section for the AdminDashboard page. Render four stat cards from the `stats` array: 'Total Users' (8432, with Students/Teachers sub-metrics using `ads-dot-students`/`ads-dot-teachers`), 'Active Sessions' (342, `ads-icon-green`), 'Content Published' (1563, `ads-icon-amber`), and 'Revenue (MTD)' (₹ 2,84,930, `ads-icon-green`). Implement the `TrendArrow` component using `TrendingUp`, `TrendingDown`, or `Minus` Lucide icons based on `trend` field. Implement `healthStatus` state toggling between `'healthy'` and `'warning'` every 12 seconds via `setInterval`. Build the Three.js health indicator canvas on `healthCanvasRef` using `THREE.TorusGeometry` (inner ring 0.55 radius, outer ring 0.7 radius) and `THREE.SphereGeometry` (core sphere 0.18 radius) with `MeshBasicMaterial` in green (0x27AE60), animated via `requestAnimationFrame`. Handle canvas resize via `getBoundingClientRect`. Cleanup `animFrameRef` and renderer on unmount. Import `AdminDashboardStats.css` and `three`.

As a frontend developer, implement the AdminDashboardTabs section for the AdminDashboard page. Render a horizontally scrollable tab bar from the `tabs` array (overview, users, content, analytics, sessions, settings) with Lucide icons (`LayoutDashboard`, `Users`, `FileText`, `BarChart3`, `CalendarCheck`, `Settings`) and badge counts (Users: 3, Content: 5, Sessions: 2). Manage `activeTab` state with `useState('overview')`. Implement scroll fade indicators (`showLeft`/`showRight`) via `updateScrollFades` callback on `barRef` scroll and window resize events using `useCallback` + `useEffect`. Add a subtle Three.js particle accent canvas behind the tab bar on `canvasRef`: create 28 particles using `THREE.BufferGeometry` with `Float32Array` positions and speeds, rendered with `THREE.WebGLRenderer` (alpha, no antialias), `PerspectiveCamera` at z=12, animated via `requestAnimationFrame` stored in `animRef`. Handle DPR scaling and parent element `getBoundingClientRect` for canvas sizing. Cleanup renderer and animation frame on unmount. Import `AdminDashboardTabs.css` and `three`.

As a frontend developer, implement the CoursesHero section for the Courses page. This section features a Three.js-powered Canvas background via the FloatingParticles component using @react-three/fiber — 40 particles with Float32Array-based position/speed/size buffers, animated via useFrame to float upward and reset, rendered as points with pointsMaterial (color #2E86C1, blending additive, opacity 0.5). The ParticleScene wraps this in a Canvas with alpha/antialias and pointerEvents none. The hero includes a searchQuery useState hook with a handleSearch handler, and renders 4 featuredCourses cards (Mathematics, Science, Physics, Chemistry) each with a lucide-react icon (BookOpen, FlaskConical, Atom, Beaker), iconClass variants (ch-fcard-icon--math, ch-fcard-icon--science, ch-fcard-icon--physics, ch-fcard-icon--chemistry), and href links. A Search icon from lucide-react is used in the search input. Styles live in CoursesHero.css.

As a frontend developer, implement the DoubtSessionHero section for the DoubtSession page. This section features a full-screen hero with a Three.js/React Three Fiber Canvas background using @react-three/fiber. Implement the ParticleConstellation component with 120 particles using Float32Array bufferGeometry and pointsMaterial (color #AED6F1, opacity 0.55, additive blending), animated via useFrame with slow Y-axis rotation and sinusoidal X tilt. Implement the AmbientGlow component as a planeGeometry mesh with pulsing opacity driven by useFrame. Compose both into ConstellationScene. The main DoubtSessionHero component uses useState for a `sparkle` boolean triggered via setTimeout(600ms) on mount to fade-in the .dsh-content via .dsh-content--visible class. Render four trustBadges (icons: ★ ◉ ○ ✓) with labels '500+ Expert Teachers', 'Live Sessions Available', 'Pay Per Doubt', 'Verified Experts'. Apply .dsh-root, .dsh-canvas-wrapper, .dsh-headline, and .dsh-content CSS classes from DoubtSessionHero.css.

As a frontend developer, implement the LiveClassHeader section for the LiveClass page. This section includes a custom `useElapsedTimer` hook using `useRef` and `setInterval` to track seconds elapsed since class start, and a `formatTimer` utility for HH:MM:SS / MM:SS formatting. The centerpiece is the `LiveStatusRing` component which uses an HTML5 Canvas (via `canvasRef`) with a `requestAnimationFrame` animation loop rendering: an outer radial gradient glow pulsing via `Math.sin(elapsed * 2.2)`, a filled inner dot pulsing at 2.5Hz, a static ring arc at `rgba(231,76,60,0.85)`, and a sweeping pulsing arc that cycles every 1.6 seconds. Canvas is DPR-aware (`window.devicePixelRatio`). Imports `LiveStatusRing.css` and `LiveClassHeader.css`. Depends on StudentDashboard page tasks for page-level chaining.

As a frontend developer, implement the PersonalInfo section for the Profile page. This section renders a profile form using useState hooks for formData (fullName, email, phoneNumber, dateOfBirth, bio), profileImage, profileImagePreview, errors, touched, saveSuccess, isSaving, and dragActive. Implement drag-and-drop avatar upload with dragActive state toggling, real-time field validation via validateField() covering regex checks for email and phone, age validation for dateOfBirth (min 5 years), and 500-char bio limit. handleChange triggers per-field validation only after touched state is set via handleBlur. Include isSaving async simulation and saveSuccess toast/banner feedback. Style via PersonalInfo.css.

As a frontend developer, implement the ChannelHero section for the Channel page. This section features a 3D decorative scene (AvatarOrbitScene) rendered via @react-three/fiber Canvas with three torus orbit rings (blue #2E86C1, amber #F39C12, light blue #AED6F1), 10 floating geometric particles (icosahedron, octahedron, dodecahedron) animated via @react-three/drei Float component, and a central ambient glow sphere. The main ChannelHero component uses useState to hold channel data (name 'Physics Masterclass', handle '@physics_masterclass', description) and renders a channel avatar area overlaid with the 3D Canvas. UI includes action buttons using lucide-react icons (Users, Video, BookOpen, Settings, Upload, Edit, UserPlus) for subscribe, upload, edit, and follow actions. Import ChannelHero.css for styling. Note: This is the root section for the Channel page and chains from TeacherDashboard via dependency.

As a frontend developer, implement the UserManagerHeader section for the UserManager page. Build the `UserManagerHeader` component using the `umh-root` / `umh-inner` CSS class hierarchy. Render a breadcrumb `<nav>` with a `ChevronRight` (size=12) separator linking back to `/AdminDashboard` and a current-page span. Render the main headline row (`umh-main`) containing an `umh-text-group` with `<h1>` 'Manage Users' and a subtitle paragraph, plus a `<a className='umh-cta'>` anchor with `UserPlus` (size=16) icon linking to `/UserManager`. Below that, render the `umh-stats` row by mapping over the static `pageStats` array (Total Users=2, Active=1, Pending=1) and displaying `umh-stat-value` / `umh-stat-label` spans; conditionally render `umh-stat-badge umh-stat-badge--{kind}` badges for items with a badge object (active='online', pending='review'). Apply all `UserManagerHeader.css` styles. Note: the AdminSidebar component from AdminDashboard may already exist and should be referenced for consistent layout framing.

As a frontend developer, implement the ContentManagerHeader section for the ContentManager page. This section uses a Three.js scene (via useRef/useEffect) rendering a rotating BoxGeometry cube with MeshPhongMaterial (color: 0x2E86C1, emissive: 0x1a6da8, shininess: 100) lit by a DirectionalLight and a PointLight (0xAED6F1), mounted on a <canvas ref={canvasRef}> inside a `.cmh-three-accent` div. The header includes a breadcrumb row with an anchor to /AdminDashboard and a current-page label, a title row with the 3D canvas accent alongside an <h1 className='cmh-title'>, and an actions row with `.cmh-btn cmh-btn-primary` Upload Video button (Upload icon from lucide-react), a New Course button (BookOpen icon), and a Pending Review button (Clock icon). The animation loop increments cube.rotation.x by 0.005 and cube.rotation.y by 0.008 per frame, with resize handling via window event listener and full cleanup on unmount. Import ContentManagerHeader.css for styling.

As a frontend developer, implement the AnalyticsOverview section for the Analytics page. This section renders four KPI cards (Total Users: 24,892, Active Courses: 486, Doubt Sessions: 3,156, Revenue: ₹4.28L) using the `kpiCards` data array, each with a `KpiCard` component that displays an icon from lucide-react (Users, BookOpen, MessageCircle, DollarSign), trend indicator (TrendingUp/TrendingDown), percentage change, sparkline SVG mini-chart rendered from a 12-point array, and color-coded CSS class variants (`ao-card--users`, `ao-card--courses`, `ao-card--sessions`, `ao-card--revenue`). A `TorusAccent` 3D component using `@react-three/fiber` Canvas renders two overlapping torus meshes with `meshStandardMaterial` using blue palette colors (#2E86C1, #AED6F1), transparent opacity, and emissive glow, absolutely positioned as a background accent with `pointerEvents: none`. Import from `../styles/AnalyticsOverview.css`. Note: AdminSidebar component may already exist from AdminDashboard page.

As a frontend developer, implement the SessionManagerHeader section for the SessionManager page. This section renders a `<section className='smh-root'>` with a decorative `smh-accent-bar`, a breadcrumb `<nav>` that maps over a `breadcrumbs` array ([EduShare → /Landing, Admin → /AdminDashboard, Session Manager → null]) rendering anchor tags or `smh-breadcrumb-current` spans with `/` separators via `React.Fragment`. It includes an `smh-content-row` containing an `smh-headline-block` with an `<h1>` featuring an `smh-headline-accent` span around 'Doubt', and an `smh-actions` block that maps over an `actions` array rendering three `<a role='button'>` elements with lucide-react icons (Download for Export/primary, SlidersHorizontal for Filter/default, Settings for ghost variant) with CSS BEM variants `smh-action-btn--primary`, `smh-action-btn--default`, and `smh-action-btn--ghost`. Import and apply SessionManagerHeader.css. Note: This is an admin sub-page header; check if a similar header pattern exists from AdminDashboard pages.

As an AI Engineer, implement AI-powered content generation service using LiteLLM and LangChain with GPT-5.4 / Claude 4.6 Opus. Expose endpoints: POST /ai/generate-mcqs (input: video transcript/chapter text, output: MCQ array with question, options, correctAnswer, explanation), POST /ai/generate-key-concepts (output: concepts with title, definition, detail, examples), POST /ai/generate-important-questions (output: question bank), POST /ai/generate-numerical-problems (output: numerical problems with steps, answer, hint, solution). Implement background task queue (Celery + Redis) to process content asynchronously after video upload. Store results in MySQL. Note: Frontend MCQSection, KeyConceptsSection, NumericalProblemsSection, and ProgressAndStats depend on AI-generated content via these endpoints.

As a Backend Developer, implement teacher channel management API endpoints. Include: POST /channels (teacher creates a channel with name, description, subject), GET /channels (list all channels), GET /channels/{id} (channel details with stats: subscribers, videos, materials, rating), PUT /channels/{id} (update channel settings: name, description, privacy, doubt rules, notifications), DELETE /channels/{id}, POST /channels/{id}/subscribe, GET /channels/{id}/videos (paginated, filterable), GET /channels/{id}/materials (paginated by category), POST /channels/{id}/materials (upload study material: PDF, notes, formula sheets), DELETE /channels/{id}/materials/{material_id}. Note: Frontend tasks for ChannelHero, ChannelVideos, ChannelMaterials, ChannelStats, and ChannelSettings depend on these endpoints.

As a Backend Developer, implement content moderation API endpoints for admin. Include: GET /moderation/queue (paginated list of flagged content: videos/courses, with reason: ai/manual/appeal, priority, flagNote), PUT /moderation/{id}/approve, PUT /moderation/{id}/reject, GET /moderation/logs (audit trail of moderation actions), GET /admin/stats (total sessions=1284, pending=47, active=23, completed=1214 etc. for AdminDashboardStats). Note: Frontend tasks for ContentManagerModerationPanel, ContentManagerVideosTable, ContentManagerCoursesTable, AdminDashboardStats, and AdminDashboardContent depend on these endpoints.

As a Tech Lead, verify the end-to-end integration between the DoubtSession frontend sections and the Doubt Session + Expert Matching + Payment backend APIs. Ensure: SessionSelectionForm posts doubt details to POST /doubt-sessions, DurationSelector passes selected duration in the booking payload, ExpertMatcher calls POST /experts/match with subject and doubt description and displays ranked experts, payment is initiated via POST /payments/initiate after expert selection, ConfirmationBanner displays the real doubt code and countdown from the session response, and TeacherDoubtRequests fetches pending requests from GET /doubt-sessions (teacher-filtered). Verify doubt code validation occurs at session join time. Note: frontend tasks DoubtSessionHero (22c492d4), ExpertMatcher (a8ac481e), DurationSelector (2435b5a0), ConfirmationBanner (d2f95d58), SessionSelectionForm (def1e657) should depend on relevant backend tasks and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the Analytics frontend sections and the Analytics backend API. Ensure: AnalyticsOverview KPI cards render real data from GET /analytics/overview with correct trend percentages, AnalyticsUserMetrics charts render 28-day DAU data from GET /analytics/users, AnalyticsSessionMetrics bar/pie charts render session data from GET /analytics/sessions, AnalyticsCoursePerformance table loads from GET /analytics/courses with sort and chapter expand working against real data, and AnalyticsDetailedReports triggers POST /analytics/reports/{type}/generate and downloads from GET /analytics/reports/{type}/download. Note: frontend section tasks AnalyticsOverview (0a14d2ea), AnalyticsUserMetrics (23cfe396), AnalyticsSessionMetrics (e7cf1a27), AnalyticsCoursePerformance (342b264d), AnalyticsDetailedReports (b3544990) should depend on backend-analytics and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the Profile frontend sections and the Profile backend API. Ensure: PersonalInfo form loads from and saves to GET/PUT /profile/personal-info, LearningPreferences persists subject/language/class selections via PUT /profile/learning-preferences, AccountSecurity password change and 2FA toggle call the appropriate security endpoints, NotificationSettings loads from and saves to GET/PUT /notifications/preferences, PaymentMethods fetches wallet balance and transaction history from GET /wallet/balance and GET /payments/history, and DangerZone deactivation/deletion calls POST /profile/account/deactivate and DELETE /profile/account with password confirmation. Note: frontend section tasks PersonalInfo (810990cc), LearningPreferences (6b07e634), AccountSecurity (6490d4da), NotificationSettings (51120722), PaymentMethods (4d1bf1f6), DangerZone (0be9f185) should depend on backend-profile and frontend-api-client.

As a frontend developer, implement the AdminDashboardContent section for the AdminDashboard page. Register Chart.js modules (`CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `BarElement`, `ArcElement`, `Tooltip`, `Legend`, `Filler`) and render `Line`, `Bar`, and `Doughnut` charts from `react-chartjs-2` for the analytics views. Implement data tables for `userRows` (10 users: id, name, email, role, status) with `Search`, `Edit3`, `Trash2`, `Eye` action icons and pagination via `ChevronLeft`/`ChevronRight`. Render `contentRows` (8 content items: id, title, type, author, status, views) with status badges (Approved, In Review, Pending, Declined) and inline approve/decline actions using `Check`/`X` icons. Render `liveSessions` table with `Radio` icon for live indicators and `AlertCircle` for warnings. Use `useState` for active tab content panel, search filter string, and pagination index. Use `useMemo` to derive filtered/paginated row subsets. Manage `useRef` for chart container elements. Include `Users`, `Video`, `BarChart3` summary metric icons per content panel. Import `AdminDashboardContent.css`, `chart.js`, and `react-chartjs-2`.

As a frontend developer, implement the CoursesFilter section for the Courses page. This section renders a filter bar driven by FILTER_CONFIG (4 filters: subject, classLevel, teacher, difficulty), each with a dropdown toggled via openDropdown useState. State is managed with a filters object (subject, classLevel, teacher, difficulty all null initially). A useParticleField(canvasRef) custom hook animates a canvas particle background. A useAnimatedBackground(rootRef) hook listens to scroll events and updates a CSS custom property --bg-offset for parallax. Outside-click detection via mousedown on document closes dropdowns, and Escape key also closes them. handleSelect toggles filter values (deselects if same value re-selected). handleClearAll resets all filters. activeFilters is derived from filters entries where value !== null. Icons used: ChevronDown, SlidersHorizontal, X from lucide-react. Styles in CoursesFilter.css.

As a frontend developer, implement the CoursesCatalog section for the Courses page. This section features a Three.js SceneCanvas using @react-three/fiber with a ParticleField component that renders 40 animated geometry particles (shapes: box, sphere, torus, octahedron) via a group ref. Each particle is a mesh with position animated in useFrame using sinusoidal motion (sin/cos of elapsedTime * speed + phase) and continuous rotation increments. Geometries are memoized: boxGeometry, sphereGeometry, torusGeometry, octahedronGeometry. meshStandardMaterial uses hsl colors (hue 200–230, saturation 55%, lightness 65%) with opacity 0.38. The features array (4 items) uses lucide-react icons Brain, FileText, MessageCircle, Zap with variant classes (cc-icon-blue etc.) and titles/descriptions for AI-Generated MCQs and related features. Canvas is absolutely positioned with pointer-events none. Styles in CoursesCatalog.css.

As a frontend developer, implement the CoursesCTA section for the Courses page. This is a static call-to-action section with a cta-root section wrapper containing a cta-inner div. It renders an h2 with class cta-headline containing a span.cta-headline-accent for 'Learning?', a cta-description paragraph, and a cta-buttons div with two anchor tags: a primary CTA (cta-btn-primary) linking to /Courses with a BookOpen icon (size 18) and label 'Browse Courses', and a secondary CTA (cta-btn-secondary) linking to /TeacherDashboard with a Users icon (size 18) and label 'Explore Teachers'. Both icons are from lucide-react. No state or interactivity. Styles in CoursesCTA.css.

As a frontend developer, implement the SessionSelectionForm section for the DoubtSession page. This section uses @react-three/fiber Canvas with @react-three/drei Float and THREE.js for a 3D decorative scene. Implement FloatingShapes component with a groupRef animated via useFrame (sinusoidal Y/X/Z rotations scaled by typingProgress). It renders a central sphere (sphereGeometry 1.1r, 64 segments) with color lerped from #AED6F1 to #2E86C1 based on typingProgress, an orbiting torus (torusGeometry 0.55r, color lerped from #F39C12 to #27AE60), and two icosahedron meshes (#F7DC6F and #E74C3C), all wrapped in Float components with varying speed/intensity. The form tracks typingProgress (0–1) and isComplete state, updating 3D scene reactivity as the user types their doubt question. Import useState, useRef, useCallback, useMemo from React. Apply SessionSelectionForm.css styles.

As a frontend developer, implement the DurationSelector section for the DoubtSession page. This section uses useState for `selectedDuration` (null initially). Render a .dsr-root container with a decorative .dsr-background-visual/.dsr-canvas-wrapper div and a .dsr-content area. Display a .dsr-header with title 'Choose Your Session Duration' and subtitle. Render a .dsr-grid with four duration option buttons mapped from the `durations` array: 30min/₹99 (Quick Session), 45min/₹139 (Standard Session, isPopular:true with .dsr-card-badge 'Popular'), 60min/₹179 (Extended Session), 90min/₹249 (Premium Session). Each button has class .dsr-card and adds .dsr-card--selected when its id matches selectedDuration, aria-pressed attribute, ⏱ icon, time, label, price, and description. Apply DurationSelector.css classes.

As a frontend developer, implement the ExpertMatcher section for the DoubtSession page. Uses useState for `selectedExpert` (null). Import Star, Clock, BookOpen from lucide-react. Define a `experts` array of 6 experts with fields: id, name, initials, rating, reviews, subject, experience, availability — covering Math (Dr. Rajesh Kumar, 4.9★), Physics (Ms. Priya Sharma, 4.8★), Chemistry (Prof. Arjun Singh, 5.0★), Biology (Ms. Ananya Verma, 4.7★), English Lit (Dr. Vikram Patel, 4.9★), History (Ms. Sneha Gupta, 4.6★). Implement `renderStars(rating)` that computes fullStars, hasHalf, and emptyStars, rendering Star components with fill='currentColor' for full, opacity=0.5 for half, and .em-rating-star-empty for empty. Render expert cards inside .em-scroll-track with staggered animationDelay (idx * 0.06s) and .em-card-enter animation class, wrapped in .em-experts-container. Apply ExpertMatcher.css.

As a frontend developer, implement the FAQSection section for the DoubtSession page. Uses useState for `openIndex` (null) to track the expanded accordion item. Uses canvasRef and animRef with a raw THREE.js WebGLRenderer (not @react-three/fiber) — set up manually in useEffect: creates Scene, OrthographicCamera (-1,1,1,-1), WebGLRenderer with alpha:true, and a BufferGeometry of 60 particles using Float32Array for positions, velocities, and sizes, rendered as floating background particles with animation loop via requestAnimationFrame stored in animRef. Defines FAQ_DATA array of 5 Q&A pairs covering: how doubt codes work, expert no-show policy (auto-reassign within 10min), rescheduling (up to 30min before, no cost), recording policy (opt-in, 30-day storage), and support contact (chat widget, support@edushare.com, 24/7 live chat). Render accordion items toggling open/closed on click with openIndex state. Apply FAQSection.css. Clean up renderer and cancelAnimationFrame on unmount.

As a frontend developer, implement the ChannelStats section for the Channel page. This section renders a 3D background via @react-three/fiber Canvas containing a FloatingParticles component (count=40, color='#AED6F1') — 40 sphere meshes with random positions, radii, and phases, animated via requestAnimationFrame with group rotation (rotation.y += 0.0004) and sinusoidal position drift. The ChannelStats component uses useState for role ('teacher' | 'student') and useEffect to read the URL query param `?role=` on mount. Teacher view shows 4 stat cards (Total Videos Uploaded: 47, Total Subscribers: 2.4K, Study Materials: 132, Channel Rating: 4.8) with lucide-react icons (Video, Users, BookOpen, Star) and trend badges. Student view shows 3 stat cards (Videos Watched: 32, Doubt Sessions Attended: 12, Materials Downloaded: 28). Import ChannelStats.css for styling.

As a frontend developer, implement the ChannelVideos section for the Channel page. This section includes a ChannelVideos3DBG component rendered in a @react-three/fiber Canvas (camera position [0,0,8], fov 45, alpha true) with Float-animated 3D decorative elements from @react-three/drei. The main ChannelVideos component uses useState for active category filter and sort option, and useMemo to derive filtered/sorted video list from VIDEO_DATA (9 hardcoded videos across Mathematics, Physics, Chemistry, Biology categories). CATEGORIES array drives filter tabs ('All', 'Mathematics', 'Physics', 'Chemistry', 'Biology') and SORT_OPTIONS drives a sort dropdown (newest, popular, shortest, longest) using parseDurationToSeconds and formatViewCount helpers. Each video card shows title, category badge, duration (Clock icon), views (Eye icon), uploadedAt (Calendar icon), and a BookmarkPlus bookmark action. Teacher role additionally shows Edit3 and Trash2 action buttons per card. AnimatePresence + motion.div from framer-motion animate card list transitions. Includes a Filter icon toolbar and Video icon empty state. Import ChannelVideos.css.

As a frontend developer, implement the ChannelMaterials section for the Channel page. The section includes a MaterialsBackground component with a @react-three/fiber Canvas (camera [0,0,8], fov 55, alpha true) rendering a FloatingGeometry component (count=18) — randomly mixed box and torus meshes with useRef groupRef animated via useFrame (rotation.x/y increment by rotSpeed, sinusoidal y-float per mesh), colored in blue (#2E86C1) or amber (#F39C12) at opacity 0.12. The ChannelMaterials component organizes materials into MATERIAL_CATEGORIES: MCQs (FileQuestion icon), Notes (Lightbulb icon), Question Banks (BookOpen icon), Formula Sheets (Calculator icon), and Practice Sets (Layers icon), each with an array of material items (id, title, fileType PDF, ext, uploadDate, downloads, size, category). Material cards display title, fileType badge, uploadDate (Calendar icon), downloads count, file size, with Download and Eye action buttons. Teacher role shows Edit and Trash2 actions additionally. Import ChannelMaterials.css and use lucide-react icons (Download, Eye, Edit, Trash2, FileText, Calendar, BookOpen, Layers, FileQuestion, Lightbulb, Calculator).

As a frontend developer, implement the ChannelSettings section for the Channel page. This section renders a SettingsGear3D component via @react-three/fiber Canvas — a group of three animated objects: an outer torus (r=0.75, blue #2E86C1) rotating via useFrame at 0.25 rad/s, an inner torus (r=0.42, light blue #AED6F1) counter-rotating at 0.18 rad/s, a group of 8 amber (#F39C12) sphere dots orbiting at radius 0.68 rotating at 0.35 rad/s, and a central blue emissive sphere. Uses THREE directly from 'three'. The ChannelSettings component manages five collapsible accordion panels via useState panels object: channelInfo (default open), privacy, notifications, doubtSessions, dangerZone — toggled by togglePanel(). State includes channelName ('Physics Masterclass'), channelDesc (textarea), isPrivate boolean toggle, doubtRule ('manual' | other), and notifications object (newEnrollment, doubtRequest, commentReply, materialDownload) toggled via toggleNotification(). handleSave() sets a toast message via useState toast that auto-dismisses after 3 seconds. handleDelete() validates deleteConfirm input. Import ChannelSettings.css.

As a frontend developer, implement the UserManagerFilters section for the UserManager page. Build the `UserManagerFilters` component with five pieces of `useState`: `search`, `role`, `status`, `dateFrom`, `dateTo`, and a `chips` array. Render a `<section className='umf-root'>` with an `umf-row` containing: a search input (`umf-search-input`) with a `Search` (size=16) icon in `umf-search-wrap`; a Role `<select>` populated from the `roleOptions` array (All Roles, Student, Teacher, Admin); a Status `<select>` from `statusOptions` (All Statuses, Active, Inactive, Suspended); date-from and date-to date inputs; an Apply Filters button that calls `applyFilters()` which builds chip objects via `buildChip(label, value, onRemove)` and pushes them into `chips` state; and a Clear All button (rendered only when `hasActiveFilters` is truthy) that calls `clearAll()` resetting all state. Render active filter chips below the row with `X` (lucide) remove icons that call the chip's `onRemove` callback. Apply all `UserManagerFilters.css` styles including `Filter` icon usage.

As a frontend developer, implement the ContentManagerSidebar section for the ContentManager page. This section uses useState for `activeItem` (default: 'content-overview') and `drawerOpen` (default: false). It renders a `menuItems` array of 7 nav entries (Dashboard → /AdminDashboard, Content Overview, Videos, Courses, Pending Reviews with badge=5 badgeVariant='accent', Moderation Logs with badge=12 badgeVariant='secondary', Reports → /Analytics) using lucide-react icons (LayoutDashboard, FileText, Video, BookOpen, Clock, ShieldAlert, BarChart3). Nav items are split into two labeled sections: 'Management' (first 4) and 'Moderation' (last 3). Each `<a>` applies `.cms-nav-item--active` CSS class when its id matches activeItem, sets aria-current='page', and calls handleNavClick on click (which also closes the drawer). A mobile hamburger toggle (Menu/X icons) controls `drawerOpen`, with a backdrop overlay calling closeDrawer. Badge spans use `.cms-nav-badge` or `.cms-nav-badge--secondary` depending on badgeVariant. Import ContentManagerSidebar.css. Note: this component may already exist from AdminDashboard's AdminSidebar — check for reuse.

As a frontend developer, implement the ContentManagerFilters section for the ContentManager page. This section manages six pieces of state via useState: `isPanelOpen`, `searchQuery`, `contentType`, `statusFilter` (default: 'all'), `channelFilter`, `dateFrom`, and `dateTo`. It derives `activeCount` by summing boolean flags for each active filter and builds an `activeBadges` array of {key, label} descriptors for display. The UI includes a Search input (Search icon from lucide-react) with live `searchQuery` binding, a Filter toggle button showing `activeCount` badge, and a collapsible panel (controlled by `isPanelOpen`) containing: a CONTENT_TYPES dropdown (4 options), a STATUS_OPTIONS tab/button group (all/approved/pending/rejected), a CHANNELS dropdown (6 teacher channels), and date-range inputs for `dateFrom`/`dateTo`. Active filter badges render below the filter bar with individual X remove buttons calling `handleRemoveBadge(key)` per filter key, plus a 'Clear All' button calling `handleClearAll` that resets all state to defaults. Uses lucide-react icons: Search, ChevronDown, X, Filter. Import ContentManagerFilters.css.

As a frontend developer, implement the ContentManagerModerationPanel section for the ContentManager page. This section uses @react-three/fiber Canvas and @react-three/drei (Sphere, MeshDistortMaterial) to render animated `CountBadge3D` components — each a distorted sphere with meshRef rotating via requestAnimationFrame (rotation.y += 0.005, rotation.x += 0.002) using MeshDistortMaterial props: color, speed, distort, roughness=0.3, metalness=0.1, transparent, opacity=0.85. State includes useState for the moderation queue (initialQueue array of 8+ items with id, type: 'video'/'course', title, reason: 'ai'/'manual'/'appeal', reasonLabel, submitted, priority: 'high'/'medium', duration/modules, author, channel, flagNote) and useMemo for filtered/sorted queue. Each queue item renders a card with: type icon (Video/BookOpen), priority badge (AlertTriangle), reason badge (Bot for ai, User for manual, MessageSquare for appeal), flagNote excerpt, submitted date (Calendar icon), author (User icon), and action buttons: Eye (preview), CheckCircle (approve), XCircle (reject). A sort/filter bar uses ArrowUpDown and ChevronDown icons. Summary stat cards at the top display counts (total, high-priority, AI-flagged, appeals) each backed by a CountBadge3D sphere. Imports: CountBadge3D.css, ContentManagerModerationPanel.css, and lucide-react icons: ShieldAlert, Video, BookOpen, Flag, Clock, Calendar, ChevronDown, Eye, CheckCircle, XCircle, ArrowUpDown, AlertTriangle, Play, FileText, User, MessageSquare, Bot.

As a frontend developer, implement the AnalyticsUserMetrics section for the Analytics page. This section integrates Chart.js (registered with CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Filler) via `react-chartjs-2` to render three charts: a `Line` chart for 28-day DAU data (`dauTotal` and `dauStudents` arrays, June 1–28 labels) with gradient fill and hover point effects, a `Doughnut` chart for user role distribution, and a `Bar` chart for weekly active user breakdown. A 3D `AccentRing` component uses `useFrame` from `@react-three/fiber` to animate two nested torus meshes — the outer ring (#2E86C1) rotates on Z-axis continuously while the group oscillates on Y/X axes using `Math.sin` of elapsed time. Stat summary cards use lucide-react icons (Users, TrendingUp, UserCheck, ArrowUp, ArrowDown). `useRef` is used for mesh and group animation refs. Import from `../styles/AnalyticsUserMetrics.css`.

As a frontend developer, implement the AnalyticsCoursePerformance section for the Analytics page. This section renders a sortable, expandable course performance table using a `COURSES` array of 6+ courses (Mathematics Fundamentals, Physics: Mechanics & Waves, Chemistry: Organic Reactions, Biology: Cell Structure, English Grammar Mastery, Computer Science Basics) each with enrolled count, completionRate, rating, revenue, color, and nested `chapters` array. Uses `useState` for sort column/direction and expanded row tracking, and `useMemo` for sorted course computation. Each row is expandable via ChevronDown/ChevronUp icons to reveal chapter-level sub-rows with per-chapter student counts and completion rates. Column headers (enrolled, completionRate, rating, revenue) are clickable for sort toggling. Icons from lucide-react include Play, Star, TrendingUp, Users, BookOpen, DollarSign, BarChart3. A `@react-three/fiber` Canvas accent is rendered via `useRef`. Import from `../styles/AnalyticsCoursePerformance.css`.

As a frontend developer, implement the AnalyticsSessionMetrics section for the Analytics page. This section renders a `Bar` chart for daily doubt sessions (Mon–Sun, `dailySessions` data with per-bar rgba colors and #F39C12 highlight for Saturday) and a `Pie` chart for session category distribution, both using Chart.js registered with CategoryScale, LinearScale, BarElement, ArcElement. A `SessionGlobeMesh` 3D component uses `useFrame` to continuously rotate a wireframe `Sphere` group on Y-axis and counter-rotate a `points` particle system (50 particles in spherical distribution computed via `useMemo` into a `Float32Array` bufferAttribute) on Y/X axes; particles use `pointsMaterial` with #F39C12 color. `useState` manages active tab between bar/pie chart views. Summary stat cards use lucide-react icons (TrendingUp, DollarSign, BarChart3, PieChartIcon, Timer, CheckCircle). Imports `Sphere` from `@react-three/drei`. Import from `../styles/AnalyticsSessionMetrics.css`.

As a frontend developer, implement the AnalyticsDetailedReports section for the Analytics page. This section renders a `REPORTS` array of report cards (User Engagement, Course Performance, Session Analytics, Revenue, and additional report types) each with title, description, icon from lucide-react (Users, BarChart3, Activity, DollarSign), `iconClass` color variant, `lastGenerated` timestamp, `fileSize`, `defaultSchedule` (weekly/monthly), and `defaultEmail` toggle. Uses `useState` and `useCallback` to manage per-report schedule dropdowns, email toggle state, and download/refresh actions with icons (Download, FileText, Clock, HardDrive, Mail, Calendar, CheckCircle2, RefreshCw). A `ReportIcon3D` 3D accent uses `@react-three/drei` `Float` and `RoundedBox` to render an animated floating document icon with three horizontal line elements (RoundedBox bars at y=0.5, y=0.2, y=-0.1) using #AED6F1 material on a #2E86C1 base panel, with `Float` speed=2.2, rotationIntensity=0.25. Import from `../styles/AnalyticsDetailedReports.css`.

As a frontend developer, implement the SessionFiltersBar section for the SessionManager page. This section uses `useState(INITIAL_FILTERS)` to manage a filter state object with fields: `studentName`, `teacherName`, `status`, `subject`, `duration`, `dateFrom`, `dateTo`. It computes `hasActiveFilters` (boolean) and `activeFilterCount` (integer) from current filter state. Uses `useCallback` for `handleChange`, `handleReset`, `handleApply`, `handleClearSingle`, and `handleClearDateRange` handlers. Renders dropdown selects for `STATUS_OPTIONS` (All Statuses, Pending, Active, Completed, Cancelled), `SUBJECT_OPTIONS` (7 subjects including Mathematics, Physics, Chemistry, Biology, English, Social Studies, Computer Science), and `DURATION_OPTIONS` (30min, 45min, 1hr, 1.5hrs, 2hrs). Includes text inputs for studentName and teacherName, date range pickers for dateFrom/dateTo, a Reset button with RotateCcw icon, and an Apply button. Renders active filter chips for status, subject, and duration with X/close buttons via `handleClearSingle`. Uses lucide-react icons: Search, ChevronDown, X, RotateCcw, SlidersHorizontal. Import and apply SessionFiltersBar.css.

As a frontend developer, implement the SessionStatsCards section for the SessionManager page. This section renders a `<section className='ssc-root'>` with an `ssc-inner` container and an `ssc-grid` that maps over a `stats` array of 4 stat objects: Total Sessions (1284, trend up 12.5%, MessageSquare icon size 52), Pending Sessions (47, trend down 8.3%, Clock icon size 48), Active Sessions (23, trend up 15.2%, PlayCircle icon size 50), and Completed Sessions (1214, trend up 10.1%, CheckCircle icon size 50). Each `ssc-card` renders the icon as a large background decoration (`ssc-bg-icon`) plus `ssc-card-content` with label, value (formatted via `.toLocaleString()`), and a `TrendIndicator` sub-component. `TrendIndicator` conditionally renders one of three variants: `ssc-trend-up` (TrendingUp icon), `ssc-trend-down` (TrendingDown icon), or `ssc-trend-neutral` (Minus icon), all with the trend percentage and label. Import and apply SessionStatsCards.css.

As a frontend developer, implement the VideoPlayer section for the CourseDetail page. This section features a Three.js animated background scene (SceneBackground component using @react-three/fiber Canvas) with AnimatedShapes including a rotating wireframe torus (torusGeometry args=[2.4, 0.05, 16, 100]), two floating icosahedra at positions [3.2, 1.6, -2] and [-3.4, -1.2, -1.5], and an octahedron accent at [0.8, -2.2, -2.5], all driven by useFrame clock-based rotation. The main player UI uses useState and useRef hooks for play/pause state, volume control, and progress tracking. Inline SVG icon components (PlayIcon, PauseIcon, VolumeHighIcon) are used to avoid extra dependencies. Import VideoPlayer.css for all styles. This section establishes the primary content viewing experience on CourseDetail.

As a frontend developer, implement the CourseInfo section for the CourseDetail page. This section uses useState for shareTooltip (boolean, auto-resets after 2000ms via setTimeout) and a handleShare function that calls navigator.clipboard.writeText(window.location.href). The layout uses a ci-root > ci-inner > ci-grid structure with a ci-left column containing three ci-card components: Course Overview card (📖 icon, two paragraph descriptions of advanced algebra content), What You'll Learn card (✓ icon, five ci-outcome-item list entries with ci-check spans), and a Prerequisites card. Import CourseInfo.css for all styles. The share tooltip conditionally renders based on shareTooltip state.

As a frontend developer, implement the PracticeSection section for the CourseDetail page. This section uses useState, useRef, useMemo, and Suspense from React along with @react-three/fiber Canvas and @react-three/drei (Float, MeshDistortMaterial, Icosahedron) for a decorative DecoOrb component — a floating wireframe icosahedron (args=[1.15, 4]) with MeshDistortMaterial (opacity=0.22, wireframe, emissive='#1B5580'). A useTiltCard cursor-reactive tilt hook uses useRef and useState with requestAnimationFrame for smooth card perspective transforms. The practiceItems array defines four cards: MCQs (48 items, Beginner), Key Concepts (24 items, Intermediate), Important Questions (32 items, Advanced), and Numerical Problems (36 items, Advanced), each with id, title, icon, iconClass, count, difficulty, difficultyClass, cardDifficultyClass, desc, href ('/Practice'), and aiLabel fields. Cards link to /Practice route. Import PracticeSection.css for all styles. THREE from 'three' is used for Color objects in DecoOrb uniforms.

As a frontend developer, implement the BookDoubtCTA section for the CourseDetail page. This section uses useState, useMemo, and useRef from React along with @react-three/fiber (Canvas, useFrame) and @react-three/drei (Float) and THREE from 'three' for a decorative background. The Three.js scene includes a ParticleField component: 260 particles distributed in a spherical cloud (radius 4–8) with colors interpolated between '#AED6F1', '#2E86C1', and '#F39C12' using THREE.BufferGeometry with position and color BufferAttributes, animated via useFrame. A FloatingOrb uses Float from drei. Inline SVG icon components are defined: CheckIcon (polyline checkmark), ArrowRightIcon (line + polyline arrow), and StarIcon (polygon star). The DURATIONS constant defines four session pricing chips: 30 min/₹99, 45 min/₹149, 1 hr/₹199, 1:30 hr/₹279, each with a desc string. A learner stat display uses StarIcon. Import BookDoubtCTA.css for all styles. This CTA drives users toward the pay-per-doubt booking flow.

As a Backend Developer, implement practice content API endpoints. Include: GET /practice/mcqs?chapter={id}&subject={subject} (returns AI-generated MCQs for a chapter), GET /practice/key-concepts?chapter={id}, GET /practice/important-questions?chapter={id}, GET /practice/numerical-problems?chapter={id}, POST /practice/submit-answer (records student attempt), GET /practice/progress/{student_id} (returns progress stats: attempts, accuracy, timeSpent per category). Note: Frontend tasks for MCQSection, KeyConceptsSection, NumericalProblemsSection, ProgressAndStats, and PracticeTypeSelector depend on these endpoints.

As a Backend Developer, implement live class management API endpoints. Include: POST /live-classes (teacher schedules a class with date, time, subject, topic, channel, maxStudents), GET /live-classes (list upcoming classes, filterable by subject/channel/date), GET /live-classes/{id}, PUT /live-classes/{id} (update schedule), DELETE /live-classes/{id}, POST /live-classes/{id}/join (student joins, returns WebRTC session token), PUT /live-classes/{id}/end (teacher ends session), GET /live-classes/{id}/participants (list active participants). Integrate with a WebRTC signaling service (LiveKit or Agora) for real-time video. Note: Frontend tasks for LiveClassHeader, VideoStream, ParticipantsSidebar, ChatPanel, and LiveClassControls depend on these endpoints.

As a Tech Lead, verify the end-to-end integration between the Channel frontend sections and the Channel backend API. Ensure: ChannelHero loads real channel data from GET /channels/{id}, ChannelVideos fetches paginated videos from GET /channels/{id}/videos with category filter and sort params, ChannelMaterials loads materials from GET /channels/{id}/materials by category, ChannelStats displays real subscriber/video/material counts from the channel stats endpoint, ChannelSettings persists changes via PUT /channels/{id} with correct payload, and upload actions post to POST /videos/upload and POST /channels/{id}/materials respectively. Note: frontend tasks ChannelHero (98c3fa24), ChannelVideos (096abb94), ChannelMaterials (07a92b54), ChannelStats (2845556e), ChannelSettings (c8830971) should depend on backend-channels and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the AdminDashboard frontend sections and the Admin/Analytics/Content Moderation backend APIs. Ensure: AdminDashboardStats fetches real platform metrics from GET /admin/stats, AdminDashboardContent tables load real users and content rows with correct pagination and search, AdminDashboardTabs switch between views pulling live data, UserManagerTable fetches users from GET /users with sort/filter, UserManagerFilters passes params correctly, ContentManagerVideosTable and CoursesTable load from GET /videos and GET /courses, ContentManagerModerationPanel pulls from GET /moderation/queue, SessionTable fetches from GET /doubt-sessions. Note: all admin frontend section tasks should depend on backend-content-moderation, backend-user-management, and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the SessionManager frontend sections and the Doubt Session backend API for admin use. Ensure: SessionTable fetches real paginated session data from GET /doubt-sessions with sort/filter params, SessionFiltersBar correctly sends status/subject/duration/date range query params, SessionStatsCards displays real counts (total/pending/active/completed) from GET /admin/stats, SessionDetailModal loads full session detail from GET /doubt-sessions/{id}, and admin action buttons (approve/complete/cancel) call PUT /doubt-sessions/{id}/accept, PUT /doubt-sessions/{id}/complete, PUT /doubt-sessions/{id}/cancel respectively. Note: frontend section tasks SessionTable (6568b02c), SessionFiltersBar (ec493190), SessionStatsCards (2189ec76), SessionDetailModal (7e3d32c4) should depend on backend-doubt-sessions and frontend-api-client.

As a frontend developer, implement the CoursesGrid section for the Courses page. This section renders a grid of course cards from a COURSES array (multiple subjects: Mathematics, Physics, English, etc.) each with title, teacher, rating, students, mcqs, practice, price, originalPrice, class, gradient, and subject fields. A Three.js ParticleField background uses 80 particles (Float32Array pos/vel), animated via requestAnimationFrame in a useEffect with bounce boundary conditions (±5, ±3, ±2), using THREE.AdditiveBlending pointsMaterial (color #AED6F1, size 0.018, opacity 0.5). The Canvas wraps this particle field absolutely. Course cards display Star, Users, FileQuestion, BookOpen, ArrowRight, Bookmark, ChevronDown icons from lucide-react. State includes useState for bookmarking, filtering/sorting, and a 'load more' ChevronDown interaction. useMemo is used to derive filtered/sorted course lists. Styles in CoursesGrid.css.

As a frontend developer, implement the ConfirmationBanner section for the DoubtSession page. Uses useState for sessionStartTime (Date.now() + 4h), countdown ({hours, minutes, seconds, show}), and copied (bool). Uses useEffect with setInterval(1000ms) to compute live countdown from sessionStartTime diff, clearing when diff ≤ 0. Import CheckCircle, Clock, Copy, Download, LogIn from lucide-react. Hardcode session details: doubtCode='DOUBT-8K4X9M2P', expertName='Dr. Rajesh Kumar', doubtTopic='Quantum Mechanics - Wave Functions', duration='60 minutes', totalPrice='₹299'. Implement handleCopyCode() using navigator.clipboard.writeText then setCopied(true) for 2s. Implement handleDownloadReceipt() that constructs a plain-text receipt, creates a Blob, generates an object URL, and triggers download via an anchor element as receipt-DOUBT-8K4X9M2P.txt. Render .cb-root with .cb-particles decorative div, .cb-header with CheckCircle icon, .cb-summary with summary cards, countdown display. Apply ConfirmationBanner.css.

As a frontend developer, implement the UserManagerTable section for the UserManager page. Build the `UserManagerTable` component using `useState` (selected rows, sort column/direction, open more-menu row ID) and `useMemo` for sorted user data. Render a table over the static `users` array (10 records: Aarav Sharma, Priya Patel, Rohan Gupta, Ananya Iyer, Vikram Singh, Kavya Reddy, Arjun Nair, Meera Joshi, Dev Menon, Sanya Kapoor) with columns defined in `COLUMNS` (name, email, role, status, joined). Column headers support click-to-sort cycling through `SORT_DIR` (none → asc → desc). Each row renders: an avatar circle with `getInitials(name)` (2-char uppercase), name, email, a role badge using `getRoleClass()` (umt-role-student / umt-role-teacher / umt-role-admin), a status badge via `getStatusClass()`, and a formatted joined date via `formatDate()` using `toLocaleDateString`. Each row has a `MoreVertical` (size=16) button that toggles the `MoreMenu` component inline, which renders Edit (`Pencil`), Suspend (`Ban`), Activate (`UserCheck`), and Delete (`Trash2` with `umt-more-danger`) actions with an `umt-more-divider` separator. Also render a bulk-action toolbar (visible when rows are selected) with `Download` and `UserX` icons. Apply all `UserManagerTable.css` styles including `Users`, `Mail`, `Calendar`, `Shield` icon usage in empty/header states.

As a frontend developer, implement the ContentManagerVideosTable section for the ContentManager page. This section uses useState for selection set (`selected` as a Set), pagination (`page`), and sorting state, and useMemo for filtered/sorted video rows. The INITIAL_VIDEOS array has 12+ entries each with id (e.g. 'VID-2024-0892'), title, channel, teacher, uploadDate, duration, and status ('Approved'/'Pending'/'Rejected'). The table renders columns: checkbox (bulk select with select-all header checkbox), Video ID, Title, Channel, Teacher (User icon), Upload Date (Calendar icon), Duration (Clock icon), Status badge with color-coded pill, and Actions. Action buttons per row include Play (Play icon), Edit (Edit3 icon), Approve (CheckCircle icon), Reject (XCircle icon), and Delete (Trash2 icon). Pagination controls use ChevronLeft/ChevronRight icons with page X of Y display. A column sort toggle uses SlidersHorizontal icon. Bulk action bar appears when rows are selected. An empty state uses the Video icon. Import ContentManagerVideosTable.css and lucide-react icons: Play, Edit3, CheckCircle, XCircle, Trash2, Video, ChevronLeft, ChevronRight, Clock, User, Calendar, SlidersHorizontal.

As a frontend developer, implement the ContentManagerCoursesTable section for the ContentManager page. This section uses useState for `search`, `sort` ({field: 'lastModified', dir: 'desc'}), `selected` (Set), `page` (paginated at ROWS_PER_PAGE=8), and `openMenuId` for per-row dropdown menus. It uses useMemo for filtered/sorted course rows derived from COURSES (12 entries with id, name, chapters, videos, materials, teacher, status: 'Active'/'Draft'/'Archived', lastModified). Additionally, it mounts a Three.js background via useRef/useEffect: a THREE.WebGLRenderer with alpha:true renders a scene with a PerspectiveCamera (fov:60, z:18), with animRef tracking the animation frame for cleanup. The table columns include: checkbox, Course ID, Course Name, Chapters/Videos/Materials counts, Teacher, Status badge, Last Modified, and a row-level actions dropdown (openMenuId state) with options to Edit, Archive, and Delete. A search input filters by course name/teacher. Column header clicks toggle sort direction. Bulk selection header checkbox selects all visible rows. Pagination controls advance through pages. Import ContentManagerCoursesTable.css; uses lucide-react and Three.js (three).

As a frontend developer, implement the SessionTable section for the SessionManager page. This section uses `useState` for sort state and pagination, and `useMemo` to derive sorted/paginated data from a `sessionData` array of 15+ session rows (each with id, doubtCode, student, teacher, subject, status, duration, bookedDate, startedTime, endedTime fields). Renders a full data table with sortable column headers using ChevronUp/ChevronDown icons (lucide-react) for sort direction indicators. Each row includes status badges with CSS color variants (completed, active, pending, cancelled). Action buttons per row use Eye (view), Pencil (edit), Check (approve), X (reject/cancel), StopCircle (stop), and Trash2 (delete) icons from lucide-react. Includes a search bar with Search icon for inline filtering. Implements client-side pagination with ChevronLeft/ChevronRight controls showing current page and total pages. Import and apply SessionTable.css.

As a frontend developer, implement the PracticeTypeSelector section for the Practice page. This section renders a tab-based practice type switcher with three tabs (MCQs, Key Concepts, Numerical Problems) defined in PRACTICE_TYPES array, each with an icon (TAB_ICONS: ✦, ◆, ▲), label, description, and count. It includes a Three.js ParticleField background using @react-three/fiber Canvas with 58 animated particles driven by requestAnimationFrame — particles use Float32Array for positions, sizes, speeds, and colors (THREE.Color palette: #2E86C1, #AED6F1, #F7DC6F). State is managed via useState for the activeIndex tab. The active tab description and count are displayed below the tab bar with smooth transitions. CSS imports from '../styles/PracticeTypeSelector.css'. Exposes the selected practice type to sibling sections (MCQSection, KeyConceptsSection, NumericalProblemsSection) for conditional rendering.

As a Tech Lead, verify the end-to-end integration between the Practice page frontend sections and the Practice/AI Content Generation backend APIs. Ensure: MCQSection fetches real MCQ data from GET /practice/mcqs with chapter context, KeyConceptsSection loads concepts from GET /practice/key-concepts, NumericalProblemsSection fetches problems from GET /practice/numerical-problems, ProgressAndStats displays real student progress data from GET /practice/progress/{student_id}, and answer submissions are sent via POST /practice/submit-answer. Verify AI-generated content renders correctly in the 3D-enhanced UI components. Note: frontend section tasks MCQSection (ab702146), KeyConceptsSection (f510d41d), NumericalProblemsSection (95a269d7), ProgressAndStats (946ec213) should depend on backend-practice and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the LiveClass frontend sections and the Live Class backend API with WebRTC signaling. Ensure: LiveClassHeader shows real class metadata from GET /live-classes/{id}, VideoStream connects to the WebRTC session using the token from POST /live-classes/{id}/join, ParticipantsSidebar fetches live participant list from GET /live-classes/{id}/participants, ChatPanel sends and receives messages via WebSocket, LiveClassControls sends mute/unmute state and triggers PUT /live-classes/{id}/end on session end, and TeacherScheduledClasses displays real scheduled classes from GET /live-classes with correct countdown. Note: frontend tasks LiveClassHeader (e420c5b7), VideoStream (cff190c1), ParticipantsSidebar (90341dd9), ChatPanel (8058bebe), LiveClassControls (12e9fbb7) should depend on backend-live-classes and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the StudentDashboard frontend sections and the relevant backend APIs. Ensure: StudentDashboardStats displays real enrolled courses, practice attempts, doubt sessions booked, and learning hours from aggregated endpoints, StudentDashboardCourses fetches enrolled courses with progress from GET /courses with enrollment filter, StudentDashboardUpcoming fetches upcoming doubt sessions from GET /doubt-sessions and live classes from GET /live-classes for the current student, and StudentDashboardQuickActions routes correctly to authenticated pages. Note: frontend section tasks StudentDashboardStats (95ff099d), StudentDashboardCourses (462898ce), StudentDashboardUpcoming (5acf60bd) should depend on backend-courses, backend-doubt-sessions, backend-live-classes, and frontend-api-client.

As a Tech Lead, verify the end-to-end integration between the TeacherDashboard frontend sections and the relevant backend APIs. Ensure: TeacherQuickStats fetches real stats (total students, channels, doubts resolved, earnings, rating) from an aggregated teacher stats endpoint, TeacherDoubtRequests fetches pending doubt requests from GET /doubt-sessions?teacher_id={id}&status=pending and accept/decline actions call the correct endpoints, TeacherEarningsPanel fetches monthly earnings breakdown from GET /analytics/teacher/{id}/earnings, TeacherChannelOverview fetches teacher's channels from GET /channels?teacher_id={id}, TeacherScheduledClasses fetches upcoming live classes from GET /live-classes?teacher_id={id}, and TeacherActiveSession connects to the active session WebRTC token. Note: frontend tasks TeacherQuickStats (c257c071), TeacherDoubtRequests (4d3e56ef), TeacherEarningsPanel (9ed75a84), TeacherChannelOverview (a018546f), TeacherScheduledClasses (a6f690b6), TeacherActiveSession (eba9150d) should depend on relevant backend tasks and frontend-api-client.

As a frontend developer, implement the UserManagerPagination section for the UserManager page. Build the `UserManagerPagination` component with `useState` for `currentPage` (initial 1) and `rowsPerPage` (initial 25), and `totalUsers` hardcoded to 248. Compute `totalPages = Math.ceil(totalUsers / rowsPerPage)`, `showingFrom`, and `showingTo` each render. Use `useMemo` to compute `visiblePages` array with smart ellipsis logic: if totalPages <= 7 render all; otherwise always include page 1 and last page, insert `'ellipsis-start'` / `'ellipsis-end'` string sentinels when gaps exist, and clamp the visible window around `currentPage` with a `maxVisible=5` range adjusted for edges (currentPage <= 3 or >= totalPages-2). Render `ump-bar` containing: an `ump-counter` div showing 'Showing **X-Y** of **248** users'; `ump-controls` with a `ChevronLeft` prev button (disabled when page=1), page buttons mapping `visiblePages` — rendering `<span className='ump-ellipsis'>` for string sentinels and `<button>` with `ump-btn--active` + `aria-current='page'` for the current page; a `ChevronRight` next button (disabled when page=totalPages); and a rows-per-page `<select>` from `ROWS_OPTIONS` [10,25,50,100] that calls `handleRowsChange` to update `rowsPerPage` and reset `currentPage` to 1. Apply all `UserManagerPagination.css` styles.

As a frontend developer, implement the SessionDetailModal section for the SessionManager page. This modal uses `useState`, `useEffect`, and `useRef` hooks and imports `* as THREE from 'three'` for a particle canvas background. The `SdmHeaderCanvas` sub-component mounts a 2D canvas (not WebGL) with up to 48 floating particles — each with randomized x, y, radius (1.1–2.4), velocity (vx/vy ±0.3), and alpha (0.12–0.38) — animating via `requestAnimationFrame` stored in `animRef`, with a ResizeObserver for responsive canvas sizing at device pixel ratio (clamped to 2). The modal displays a session built by `buildSession()` with fields: session_id ('DS-2026-08472'), doubt_code, status (active/pending/completed/cancelled), payment_status (paid/pending/refunded), student object (name, class, email, phone), teacher object (name, expertise, email), session object (booked_datetime, duration, subject, topic, description), recording_link, notes, and a 5-step timeline array with done/current/future statuses. Uses lucide-react icons: X, CheckCircle, Clock, Ban, RotateCcw, Users, GraduationCap, School, Mail, Phone, Calendar, Timer, BookOpen, Tag, FileText, Video, ChevronRight, MessageSquare, UserCircle, DollarSign. Renders student info, teacher info, session details, timeline stepper, and action buttons (approve, complete, cancel, etc.) based on current status. Import and apply SessionDetailModal.css.

As a frontend developer, implement the MCQSection for the Practice page. This section renders a full MCQ quiz experience with 7+ hardcoded QUESTIONS (each with id, question, options array, correctAnswer index, and explanation). State hooks include useState for currentQuestion index, selectedAnswer, showAnswer (toggle), showHint, answered, score tracking, and timer via useEffect. Framer Motion AnimatePresence and motion.div handle question card transitions. Lucide icons used: CheckCircle, XCircle, Clock, Eye, EyeOff, ChevronLeft, ChevronRight, HelpCircle, AlertCircle. Three.js is imported (via 'three') for decorative background elements. Navigation controls (ChevronLeft/ChevronRight) step through questions; answer selection highlights correct/incorrect options with color-coded feedback; explanation panel expands on reveal. CSS imports from '../styles/MCQSection.css'.

As a frontend developer, implement the KeyConceptsSection for the Practice page. This section renders expandable concept cards from a CONCEPTS array (including active-recall, spaced-repetition, and others), each with id, title, definition, detail, examples array, shapeIndex, color (#2E86C1 etc.), and accent. Each card features a Three.js 3D icon via ConceptIcon3D component rendered inside a @react-three/fiber Canvas, using @react-three/drei components: Float, Icosahedron, Torus, Octahedron, Dodecahedron, Cone, RoundedBox — selected by shapeIndex % geometryMap.length. useFrame drives rotation (speed doubles on hover: 0.7 → 2.2) and emissiveIntensity lerp (0.08 → 0.35 on hover). State uses useState for expanded card id and hovered card. ChevronDown (lucide-react) animates on expand; CheckCircle and Lightbulb icons decorate examples. CSS imports from '../styles/KeyConceptsSection.css'.

As a frontend developer, implement the NumericalProblemsSection for the Practice page. This section renders step-by-step numerical problem cards from practiceProblems array (5+ problems with id, difficulty, number, statement, answer, units array, hint, solution, subject fields). A MathParticles Three.js background uses @react-three/fiber with 160 particles in a Float32Array with vertex colors (palette: #2E86C1, #AED6F1, #F39C12, #E74C3C, #F7DC6F), AdditiveBlending pointsMaterial, and useFrame for y-axis rotation + sinusoidal x tilt. State hooks: useState for currentProblem index, userAnswer string, selectedUnit, showHint, showSolution, isCorrect, attempted. Lucide icons used: Lightbulb, Eye, CheckCircle, XCircle, ChevronRight, Calculator, Hash. Framer Motion AnimatePresence handles card transitions. Unit selection dropdown renders units array; answer validation compares trimmed input. CSS imports from '../styles/NumericalProblemsSection.css'.

As a frontend developer, implement the ProgressAndStats section for the Practice page. This section renders a progress dashboard with a 3D animated ProgressRing built from @react-three/drei Torus components inside a RingScene Canvas (camera at [0,0,3.5], fov 42): a background dim ring (opacity 0.3), a progress arc ring using arc = (percentage/100)*Math.PI*2, and an inner accent ring (#AED6F1). useFrame drives smooth auto-rotation on all axes (z: 0.4, y: 0.25, x: 0.15 delta multipliers). A progress object tracks mcq ({done:5,total:10}), concepts ({done:3,total:5}), problems ({done:2,total:8}) with derived completionPct. Stats object includes attempts (47), accuracy (74), timeSpent. State: useState for insightsOpen accordion and revealed flag; useRef for sectionRef IntersectionObserver reveal trigger. Lucide icons: Target, Clock, Crosshair, ChevronDown, Lightbulb. Per-category progress bars and an expandable AI insights accordion (insightsOpen toggle via ChevronDown). CSS imports from '../styles/ProgressAndStats.css'.