> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pixlnext.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

# Frontend Components Documentation

This document provides comprehensive documentation for every React component in the STO Education Platform.

## Component Overview

The application uses a component-based architecture with reusable, modular components organized by functionality.

## Component Categories

### 1. Layout Components

#### MainNavbar.tsx

* **Location**: `src/components/MainNavbar.tsx`
* **Purpose**: Main navigation bar for public pages
* **Features**:
  * Responsive design with mobile hamburger menu
  * User authentication state display
  * Navigation links to key sections
  * Theme toggle functionality
* **Props**: None (uses context for user state)
* **Dependencies**:
  * React Router for navigation
  * Supabase for authentication
  * React Icons for icons

#### Navbar.tsx

* **Location**: `src/components/Navbar.tsx`
* **Purpose**: Alternative navigation component
* **Features**: Simplified navigation structure
* **Dependencies**: React Router

#### DashboardLayout.tsx

* **Location**: `src/components/DashboardLayout.tsx`
* **Purpose**: Layout wrapper for student/parent dashboard
* **Features**:
  * Sidebar navigation
  * Responsive design
  * User profile display
  * Logout functionality
* **Dependencies**:
  * LayoutContext for sidebar state
  * Supabase for authentication
  * React Router for navigation

#### TeacherDashboardLayout.tsx

* **Location**: `src/components/TeacherDashboardLayout.tsx`
* **Purpose**: Layout wrapper for teacher dashboard
* **Features**:
  * Teacher-specific navigation
  * Role-based menu items
  * Responsive sidebar
  * Quick access to key features
* **Dependencies**: Same as DashboardLayout

### 2. Authentication Components

#### AuthModal.tsx

* **Location**: `src/components/AuthModal.tsx`
* **Purpose**: Authentication modal for login/signup
* **Features**:
  * Tab-based login/signup interface
  * Form validation
  * Password reset functionality
  * Social login options
  * Error handling and display
* **Props**:
  * `isOpen: boolean` - Modal visibility state
  * `onClose: () => void` - Close handler
* **Dependencies**:
  * Supabase Auth
  * React Hook Form for form handling
  * React Hot Toast for notifications

### 3. Course Management Components

#### CreateCourseModal.tsx

* **Location**: `src/components/CreateCourseModal.tsx`
* **Purpose**: Modal for creating new courses
* **Features**:
  * Course creation form
  * Image upload functionality
  * Rich text editor for description
  * Validation and error handling
* **Props**:
  * `isOpen: boolean`
  * `onClose: () => void`
  * `onSuccess: () => void` - Success callback
* **Dependencies**:
  * Supabase for data persistence
  * Cloudinary for image upload
  * React Hook Form

#### AddSubjectModal.tsx

* **Location**: `src/components/AddSubjectModal.tsx`
* **Purpose**: Modal for adding subjects to courses
* **Features**:
  * Subject selection interface
  * Multiple subject selection
  * Validation
* **Props**:
  * `isOpen: boolean`
  * `onClose: () => void`
  * `onAdd: (subjects: string[]) => void`

### 4. Communication Components

#### StudentMessages.tsx

* **Location**: `src/components/StudentMessages.tsx`
* **Purpose**: Student messaging interface
* **Features**:
  * Message list display
  * Send message functionality
  * File attachment support
  * Real-time updates
* **Dependencies**:
  * SendBird SDK
  * Supabase for user data

#### TeacherMessages.tsx

* **Location**: `src/components/TeacherMessages.tsx`
* **Purpose**: Teacher messaging interface
* **Features**:
  * Enhanced teacher messaging features
  * Student management
  * Message filtering
* **Dependencies**: Same as StudentMessages

#### ParentMessages.tsx

* **Location**: `src/components/ParentMessages.tsx`
* **Purpose**: Parent messaging interface
* **Features**:
  * Parent-specific messaging features
  * Child progress communication
  * Teacher communication
* **Dependencies**: Same as StudentMessages

### 5. Video Conferencing Components

#### WherebyVideoRoom.tsx

* **Location**: `src/components/WherebyVideoRoom.tsx`
* **Purpose**: Whereby video conferencing integration
* **Features**:
  * Video/audio controls
  * Screen sharing
  * Participant management
  * Embedded iframe experience
* **Props**:
  * `roomUrl: string`
  * `sessionId: string`
  * `userName: string`
  * `isTeacher: boolean`
  * `onLeave: () => void`
* **Dependencies**:
  * Whereby embedded rooms

#### VideoRoom.tsx

* **Location**: `src/components/VideoRoom.tsx`
* **Purpose**: Video room wrapper for session management
* **Features**: Session management, timer, room creation
* **Dependencies**: Supabase, create-room Edge Function

### 6. Assessment Components

#### PDFGradingModal.tsx

* **Location**: `src/components/PDFGradingModal.tsx`
* **Purpose**: Modal for grading PDF assignments
* **Features**:
  * PDF viewer integration
  * Annotation tools
  * Grade input
  * Feedback system
* **Props**:
  * `isOpen: boolean`
  * `submission: any`
  * `onClose: () => void`
  * `onGrade: (grade: number, feedback: string) => void`
* **Dependencies**:
  * PDF.js for PDF rendering
  * Supabase for data persistence

#### FormioQuizBuilder.tsx

* **Location**: `src/components/FormioQuizBuilder.tsx`
* **Purpose**: Quiz builder using Formio
* **Features**:
  * Drag-and-drop quiz creation
  * Multiple question types
  * Preview functionality
  * Form validation
* **Dependencies**:
  * Formio React library
  * Supabase for storage

### 7. File Management Components

#### EditableImage.tsx

* **Location**: `src/components/EditableImage.tsx`
* **Purpose**: Editable image component for content management
* **Features**:
  * Image upload and editing
  * Admin-only editing capabilities
  * Image optimization
  * Fallback handling
* **Props**:
  * `src: string`
  * `alt: string`
  * `className?: string`
  * `editable?: boolean`
* **Dependencies**:
  * Cloudinary for image processing
  * AdminContext for permissions

#### UploadMarkSchemeModal.tsx

* **Location**: `src/components/UploadMarkSchemeModal.tsx`
* **Purpose**: Modal for uploading teacher mark schemes
* **Features**:
  * File upload interface
  * Metadata input
  * Validation
  * Progress tracking
* **Props**:
  * `isOpen: boolean`
  * `onClose: () => void`
  * `onUpload: (file: File, metadata: any) => void`

### 8. UI/UX Components

#### FilterTabs.tsx

* **Location**: `src/components/FilterTabs.tsx`
* **Purpose**: Reusable filter tab component
* **Features**:
  * Tab navigation
  * Active state management
  * Responsive design
* **Props**:
  * `tabs: Array<{id: string, label: string}>`
  * `activeTab: string`
  * `onTabChange: (tabId: string) => void`

#### TeamMemberCard.tsx

* **Location**: `src/components/TeamMemberCard.tsx`
* **Purpose**: Display card for team members
* **Features**:
  * Profile image display
  * Contact information
  * Social media links
* **Props**:
  * `member: TeamMember`
* **Type Definition**:
  ```typescript theme={null}
  interface TeamMember {
    id: string;
    name: string;
    role: string;
    image: string;
    bio: string;
    socialLinks: Record<string, string>;
  }
  ```

#### CartIcon.tsx

* **Location**: `src/components/CartIcon.tsx`
* **Purpose**: Shopping cart icon with item count
* **Features**:
  * Cart item count display
  * Click handler for cart modal
  * Badge notification
* **Dependencies**:
  * CartContext for cart state
  * React Icons

#### AdminToggle.tsx

* **Location**: `src/components/AdminToggle.tsx`
* **Purpose**: Admin mode toggle component
* **Features**:
  * Admin mode indicator
  * Toggle functionality
  * Visual feedback
* **Dependencies**:
  * AdminContext for admin state

#### UpdateNotification.tsx

* **Location**: `src/components/UpdateNotification.tsx`
* **Purpose**: App update notification component
* **Features**:
  * Version checking
  * Update prompt modal
  * User action options (refresh, later, dismiss)
* **Props**:
  * `onRefresh: () => void`
* **Dependencies**:
  * Update detection utility

### 9. Content Management Components

#### EditableContent.tsx

* **Location**: `src/components/EditableContent.tsx`
* **Purpose**: Editable content component for CMS
* **Features**:
  * Inline editing
  * Admin-only editing
  * Auto-save functionality
  * Rich text support
* **Props**:
  * `contentKey: string`
  * `defaultValue: string`
  * `className?: string`
* **Dependencies**:
  * PageContentContext
  * AdminContext

#### EditablePageWrapper.tsx

* **Location**: `src/components/EditablePageWrapper.tsx`
* **Purpose**: Wrapper for editable pages
* **Features**:
  * Page-level content management
  * Admin editing capabilities
  * Content initialization
* **Props**:
  * `page: string`
  * `children: React.ReactNode`

#### BlogContent.tsx

* **Location**: `src/components/BlogContent.tsx`
* **Purpose**: Blog content display component
* **Features**:
  * Rich text rendering
  * Image optimization
  * SEO optimization
  * Social sharing
* **Props**:
  * `content: string`
  * `title: string`
  * `author: string`
  * `publishedAt: string`

### 10. Policy Components

#### BookingPolicy.tsx

* **Location**: `src/components/BookingPolicy.tsx`
* **Purpose**: Booking policy display component
* **Features**:
  * Policy content display
  * Legal compliance
  * User-friendly formatting
* **Dependencies**: Static content

#### RefundPolicy.tsx

* **Location**: `src/components/RefundPolicy.tsx`
* **Purpose**: Refund policy display component
* **Features**:
  * Policy terms display
  * Legal compliance
  * Contact information
* **Dependencies**: Static content

#### Terms.tsx

* **Location**: `src/components/Terms.tsx`
* **Purpose**: Terms of service display component
* **Features**:
  * Legal terms display
  * User agreement
  * Version tracking
* **Dependencies**: Static content

#### Privacy.tsx

* **Location**: `src/components/Privacy.tsx`
* **Purpose**: Privacy policy display component
* **Features**:
  * Privacy policy content
  * Data handling information
  * User rights
* **Dependencies**: Static content

#### TeacherTerms.tsx

* **Location**: `src/components/TeacherTerms.tsx`
* **Purpose**: Teacher-specific terms and conditions
* **Features**:
  * Teacher agreement terms
  * Platform usage guidelines
  * Payment terms
* **Dependencies**: Static content

### 11. FAQ Components

#### StudentFAQ.tsx

* **Location**: `src/components/StudentFAQ.tsx`
* **Purpose**: Student frequently asked questions
* **Features**:
  * Expandable FAQ items
  * Search functionality
  * Category filtering
* **Dependencies**: Static FAQ data

#### TeacherFAQ.tsx

* **Location**: `src/components/TeacherFAQ.tsx`
* **Purpose**: Teacher frequently asked questions
* **Features**:
  * Teacher-specific FAQ content
  * Platform usage guidance
  * Support information
* **Dependencies**: Static FAQ data

### 12. Modal Components

#### PrivateClassRequestModal.tsx

* **Location**: `src/components/PrivateClassRequestModal.tsx`
* **Purpose**: Modal for requesting private classes
* **Features**:
  * Request form
  * Schedule selection
  * Teacher preferences
  * Validation
* **Props**:
  * `isOpen: boolean`
  * `onClose: () => void`
  * `onSubmit: (request: any) => void`

#### AddWorkExperienceModal.tsx

* **Location**: `src/components/AddWorkExperienceModal.tsx`
* **Purpose**: Modal for adding work experience
* **Features**:
  * Work experience form
  * Date range selection
  * Validation
  * File upload for certificates
* **Props**:
  * `isOpen: boolean`
  * `onClose: () => void`
  * `onAdd: (experience: any) => void`

#### AddEducationHistoryModal.tsx

* **Location**: `src/components/AddEducationHistoryModal.tsx`
* **Purpose**: Modal for adding education history
* **Features**:
  * Education form
  * Institution selection
  * Degree information
  * Validation
* **Props**:
  * `isOpen: boolean`
  * `onClose: () => void`
  * `onAdd: (education: any) => void`

#### AddressCollection.tsx

* **Location**: `src/components/AddressCollection.tsx`
* **Purpose**: Address collection component
* **Features**:
  * Address form
  * Mapbox integration for autocomplete
  * Validation
  * Geolocation
* **Props**:
  * `onAddressChange: (address: any) => void`
  * `defaultAddress?: any`
* **Dependencies**:
  * Mapbox API
  * React Hook Form

### 13. Utility Components

#### Mochi.tsx

* **Location**: `src/components/Mochi.tsx`
* **Purpose**: AI assistant integration component
* **Features**:
  * AI chat interface
  * Context-aware responses
  * Integration with Mochi service
* **Dependencies**:
  * Mochi service
  * WebSocket for real-time communication

## Component Patterns

### 1. Higher-Order Components (HOCs)

* **Route Protection**: Components that wrap protected routes
* **Authentication**: Components that require authentication
* **Role-based Access**: Components that check user roles

### 2. Render Props Pattern

* Used in components that need to share state or logic
* Particularly useful for data fetching components

### 3. Compound Components

* Used in complex UI components like modals and forms
* Allows for flexible composition of related components

### 4. Context Pattern

* Used extensively for state management
* Provides global state access without prop drilling

## Component Best Practices

### 1. Props Interface

* All components have well-defined TypeScript interfaces
* Props are documented with JSDoc comments
* Default props are used where appropriate

### 2. Error Handling

* Components include error boundaries where needed
* Graceful fallbacks for failed operations
* User-friendly error messages

### 3. Performance Optimization

* React.memo for expensive components
* useMemo and useCallback for expensive calculations
* Lazy loading for large components

### 4. Accessibility

* ARIA labels and roles
* Keyboard navigation support
* Screen reader compatibility
* Color contrast compliance

### 5. Responsive Design

* Mobile-first approach
* Breakpoint-based styling
* Touch-friendly interfaces
* Flexible layouts

## Component Testing

### Testing Strategy

* Unit tests for individual components
* Integration tests for component interactions
* Visual regression tests for UI components
* Accessibility tests for compliance

### Testing Tools

* Jest for unit testing
* React Testing Library for component testing
* Cypress for end-to-end testing
* Storybook for component documentation

## Component Documentation

### Documentation Standards

* Each component has comprehensive JSDoc comments
* Props are documented with types and descriptions
* Usage examples are provided
* Dependencies are clearly listed

### Code Examples

```typescript theme={null}
/**
 * MainNavbar component provides the primary navigation interface
 * @component
 * @example
 * <MainNavbar />
 */
interface MainNavbarProps {
  // Props interface if needed
}

export const MainNavbar: React.FC<MainNavbarProps> = (props) => {
  // Component implementation
};
```

## Future Component Enhancements

### Planned Improvements

* Component library standardization
* Advanced animation components
* Enhanced form components
* Improved accessibility features
* Better mobile optimization
* Component composition patterns
* Advanced state management
* Performance monitoring integration