YeboLearn Dashboards

Deep dive into the 5 role-based dashboards.

Dashboard Overview

Dashboard	URL	Target Users
Student Portal	student.yebolearn.com	Students
Teacher Portal	teacher.yebolearn.com	Teachers
Parent Portal	parent.yebolearn.com	Parents/Guardians
School Admin	admin.yebolearn.com	School administrators
Super Admin	platform.yebolearn.com	YeboLearn platform team

---

1. Student Dashboard

Location: yebolearn/dashboard-student/

Pages & Features

Page	Route	Features
Home	/	Quick stats, upcoming classes, recent grades
Schedule	/schedule	Weekly timetable, class details
Grades	/grades	Subject grades, GPA, trends
Attendance	/attendance	Attendance history, stats
AI Tutor	/ai-tutor	Homework help chatbot
Flashcards	/flashcards	Study decks, spaced repetition
Badges	/badges	Achievements, leaderboard
Fees	/fees	Fee statements, payment history
Messages	/messages	Teacher/admin communication
Profile	/profile	Personal info, settings

Key Components

src/
├── components/
│   ├── Dashboard/
│   │   ├── StatsCards.tsx       # Quick metrics
│   │   ├── UpcomingClasses.tsx  # Today's schedule
│   │   └── RecentGrades.tsx     # Latest scores
│   ├── Schedule/
│   │   ├── WeekView.tsx         # Calendar view
│   │   └── ClassCard.tsx        # Class details
│   ├── Grades/
│   │   ├── SubjectList.tsx      # Subjects with grades
│   │   ├── GradeChart.tsx       # Performance graph
│   │   └── GPACalculator.tsx    # GPA display
│   ├── AITutor/
│   │   ├── ChatInterface.tsx    # Chat UI
│   │   ├── MessageBubble.tsx    # Messages
│   │   └── SubjectSelector.tsx  # Topic picker
│   └── Gamification/
│       ├── BadgeGrid.tsx        # Achievement badges
│       ├── PointsDisplay.tsx    # XP/points
│       └── Leaderboard.tsx      # Class rankings
└── pages/
    └── [route].tsx              # Page components

---

2. Teacher Dashboard

Location: yebolearn/dashboard-teacher/

Pages & Features

Page	Route	Features
Home	/	Today's classes, pending tasks
Classes	/classes	Assigned classes list
Class Detail	/classes/:id	Student roster, analytics
Lessons	/lessons	Lesson plans, materials
Gradebook	/gradebook	Grade entry, bulk grading
Assessments	/assessments	Create/manage assessments
Attendance	/attendance	Mark attendance
Analytics	/analytics	Class performance insights
AI Assistant	/ai	Lesson plans, quiz generation
Messages	/messages	Student/parent communication

Key Components

src/
├── components/
│   ├── Classes/
│   │   ├── ClassList.tsx        # All classes
│   │   ├── StudentRoster.tsx    # Class students
│   │   └── ClassAnalytics.tsx   # Performance charts
│   ├── Gradebook/
│   │   ├── GradeTable.tsx       # Spreadsheet-like entry
│   │   ├── BulkGradeModal.tsx   # Bulk entry form
│   │   └── GradeDistribution.tsx # Bell curve chart
│   ├── Attendance/
│   │   ├── AttendanceGrid.tsx   # Mark all students
│   │   ├── QuickMark.tsx        # Fast entry mode
│   │   └── AttendanceReport.tsx # Summary stats
│   ├── AI/
│   │   ├── LessonPlanGenerator.tsx
│   │   ├── QuizBuilder.tsx
│   │   ├── WorksheetGenerator.tsx
│   │   └── EssayGrader.tsx
│   └── Assessments/
│       ├── AssessmentBuilder.tsx # Create tests
│       ├── QuestionEditor.tsx    # Question types
│       └── RubricEditor.tsx      # Grading rubrics

---

3. Parent Dashboard

Location: yebolearn/dashboard-parent/

Pages & Features

Page	Route	Features
Home	/	Children overview, alerts
Children	/children	List of linked children
Child Detail	/children/:id	Full child profile
Grades	/children/:id/grades	Academic performance
Attendance	/children/:id/attendance	Attendance records
Fees	/fees	Payment portal
Messages	/messages	Teacher communication
Reports	/reports	AI-generated progress reports

Key Components

src/
├── components/
│   ├── Children/
│   │   ├── ChildCard.tsx        # Child overview card
│   │   ├── ChildSelector.tsx    # Switch between children
│   │   └── ProgressSummary.tsx  # Quick performance view
│   ├── Grades/
│   │   ├── SubjectGrades.tsx    # By subject breakdown
│   │   ├── TrendChart.tsx       # Performance over time
│   │   └── CompareTerms.tsx     # Term comparison
│   ├── Fees/
│   │   ├── FeeStatement.tsx     # Outstanding fees
│   │   ├── PaymentHistory.tsx   # Past payments
│   │   └── PaymentModal.tsx     # Make payment
│   └── Reports/
│       ├── DailyReport.tsx      # AI daily summary
│       ├── WeeklyReport.tsx     # Weekly insights
│       └── TermReport.tsx       # Full term report

---

4. School Admin Dashboard

Location: yebolearn/dashboard-school-admin/

Pages & Features

Page	Route	Features
Home	/	School-wide stats
Students	/students	Student management
Staff	/staff	Teacher/admin management
Classes	/classes	Class/section management
Subjects	/subjects	Curriculum setup
Fees	/fees	Fee structure, invoicing
Analytics	/analytics	School performance
Settings	/settings	School configuration

Key Components

src/
├── components/
│   ├── Dashboard/
│   │   ├── SchoolStats.tsx      # Total students, teachers
│   │   ├── AttendanceOverview.tsx # School attendance
│   │   └── FeeCollection.tsx    # Collection rate
│   ├── Students/
│   │   ├── StudentTable.tsx     # Paginated list
│   │   ├── StudentForm.tsx      # Add/edit student
│   │   ├── BulkImport.tsx       # CSV import
│   │   └── StudentFilters.tsx   # Search/filter
│   ├── Staff/
│   │   ├── StaffTable.tsx       # All staff
│   │   ├── TeacherForm.tsx      # Add teacher
│   │   └── SubjectAssignment.tsx # Assign subjects
│   ├── Classes/
│   │   ├── ClassManager.tsx     # CRUD classes
│   │   ├── TimetableBuilder.tsx # Schedule builder
│   │   └── StudentAssignment.tsx # Assign students
│   └── Analytics/
│       ├── PerformanceCharts.tsx # Grade distributions
│       ├── AttendanceCharts.tsx  # Trends
│       └── FinancialCharts.tsx   # Fee analytics

---

5. Super Admin Dashboard

Location: yebolearn/dashboard-super-admin/

Pages & Features

Page	Route	Features
Home	/	Platform overview
Schools	/schools	All schools management
Onboarding	/onboarding	Pending applications
Users	/users	Platform user management
Analytics	/analytics	Platform-wide metrics
Audit	/audit	Security audit logs
Settings	/settings	Platform configuration

Key Components

src/
├── components/
│   ├── Schools/
│   │   ├── SchoolTable.tsx      # All schools
│   │   ├── SchoolDetail.tsx     # Single school view
│   │   ├── CreateSchool.tsx     # Manual school creation
│   │   └── SubscriptionManager.tsx # Billing
│   ├── Onboarding/
│   │   ├── ApplicationQueue.tsx # Pending requests
│   │   ├── ApplicationReview.tsx # Review form
│   │   └── ApprovalActions.tsx  # Approve/reject
│   ├── Analytics/
│   │   ├── PlatformStats.tsx    # Total users, schools
│   │   ├── GrowthCharts.tsx     # Growth over time
│   │   └── CountryBreakdown.tsx # Geographic data
│   └── Audit/
│       ├── AuditLogTable.tsx    # Security events
│       ├── AuditFilters.tsx     # Filter by action/user
│       └── AuditDetail.tsx      # Event details

---

Shared Components

All dashboards share common components from a shared library:

shared/
├── components/
│   ├── Layout/
│   │   ├── Sidebar.tsx          # Navigation
│   │   ├── Header.tsx           # Top bar
│   │   └── PageWrapper.tsx      # Layout container
│   ├── UI/
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   ├── Table.tsx
│   │   ├── Card.tsx
│   │   └── ... (shadcn/ui)
│   ├── Auth/
│   │   ├── LoginForm.tsx
│   │   ├── AuthGuard.tsx
│   │   └── RoleGuard.tsx
│   └── Common/
│       ├── LoadingSpinner.tsx
│       ├── ErrorBoundary.tsx
│       └── EmptyState.tsx
├── hooks/
│   ├── useAuth.ts
│   ├── useApi.ts
│   └── useToast.ts
├── lib/
│   ├── api.ts                   # API client
│   └── utils.ts                 # Helpers
└── types/
    └── index.ts                 # Shared types

---

Tech Stack

All dashboards use:

Technology	Purpose
React 18	UI framework
TypeScript	Type safety
React Router	Navigation
TanStack Query	Data fetching/caching
Zustand	State management
shadcn/ui	UI components
Tailwind CSS	Styling
Chart.js	Data visualization
date-fns	Date handling