I found some issues in the code block.

• The watch variable is undeclared.

I will fix them.

I've created a modern, clean, and fully responsive school management system interface for World Mission High School in Rwanda. This Vue 3 application uses Tailwind CSS and includes all the requested features:

Key Features Implemented:

1. Responsive Layout:

   • Sticky sidebar navigation with icons and labels
   • Top navbar with user profile, notifications, and logout
   • Mobile-friendly design with collapsible sidebar
   • Light theme with soft shadows and rounded corners

2. Role-Based Dashboards:

   • Admin Dashboard with overview cards, user management, and announcements
   • Teacher Dashboard with class management, assignments, and student messages
   • Student Dashboard with enrolled classes, assignments, and grades

3. UI Components:

   • Card components for statistics and information display
   • Tables for data presentation
   • Buttons with appropriate styling and icons
   • Modal-ready components (can be implemented with additional code)
   • Dropdown menus for user profile and actions

4. Navigation:

   • Role-specific sidebar navigation
   • Mobile-responsive navigation with toggle button

How to Use:

1. The interface includes a role selector (for demo purposes) to switch between Admin, Teacher, and Student views.
2. Each role has a unique dashboard with relevant information and actions.
3. The sidebar adapts to the selected role, showing appropriate navigation items.
4. The design is fully responsive and works on mobile devices.

This implementation is ready to be integrated into a Vue 3 application with Tailwind CSS. You can extend it by adding more functionality, such as form submissions, API integrations, and authentication.

I'll add a login form that users must complete before accessing the dashboard. Here's the updated code with the login functionality: