Dashboard

Your central hub for viewing school information, tracking system statistics, and quickly accessing all major features of the timetable management system.

Navigation

Start from the left sidebar navigation menu:

1. Look for the "Dashboard" menu item at the top of the left sidebar (home icon)
2. Click on "Dashboard" to navigate to this page
3. The page will load and display: school name as the title, school information card with stats, and quick access cards to other pages

Overview

The Dashboard is your starting point and overview page for the entire timetable system. It shows your school's basic information (principal name and contact details), displays key statistics (number of teachers, subjects, grades, schedules, working days, teams, and groups), provides capacity analysis cards showing system health and staff composition, and includes a Getting Started checklist to guide you through setup. You can edit school information directly from this page via a dialog.

Tasks

Read - View Dashboard Statistics

Navigation: Start from sidebar → Click "Dashboard" → Page loads

Display Format: The dashboard shows information in several sections:

1. School Information Card:

   • Principal name
   • Contact information (phone or email)
   • "Edit School Info" button in the top-right

2. System Status Indicator:

   • Green dot with "Data Available" when your school has data entered
   • Blue dot with "Ready for Setup" when starting fresh

3. Statistics Bar (7 stat pills in a horizontal gradient bar):

   • Teachers: Total number of teachers in the system
   • Subjects: Total number of subjects configured
   • Grades: Total number of grades/classes
   • Schedules: Total number of bell time schedules
   • Working Days: Number of days marked as working days
   • Teams: Number of team teaching assignments
   • Groups: Number of subject groups
   • Hover over each segment to see the label tooltip

4. Getting Started Checklist (9 steps):

   • Steps 1-6 (emerald icons): School Settings, Bell Times, Working Days, Teachers, Subjects, Grades
   • Steps 7-8 (amber icons): Teacher→Subject Assignments, Grade→Subject Assignments
   • Step 9 (blue icon): Pre-Assignments (optional)
   • Followed by a "Next Steps" emerald box: "Your system is ready for timetable generation"

Example: "When you log in, the Dashboard shows your school name, a gradient bar with 25 teachers, 15 subjects, 12 grades, 3 schedules, 5 working days, 4 teams, 2 groups, and a setup checklist to guide you through configuration."

Read - Refresh Dashboard Data

Navigation: Start from sidebar → Click "Dashboard" → Reload the page

Steps:

1. Reload Page: Refresh the browser page or navigate away and back to the Dashboard
2. Data Auto-Loads: Dashboard statistics and school information automatically fetch from the server on page load
3. View Updated Stats: Statistics bar and capacity analysis update to show current values

Example: "If another administrator just added new teachers, reload the Dashboard page to see the updated teacher count in the statistics bar."

Update - Edit School Information

Navigation: Start from sidebar → Click "Dashboard" → Click "Edit School Info" button

Steps:

1. Click Edit Button: In the School Information card, click the "Edit School Info" button (top-right, has Settings icon)
2. Dialog Opens: A dialog appears with all current school information pre-filled:
   • School Name
   • Principal Name
   • Address
   • Phone
   • Email
   • Website
3. Modify Fields: Update any information you want to change
4. Save Changes: Click "Save" to save your changes
5. Dialog Closes: The dashboard immediately reflects the updated information

Example: "To update your school's principal name, click 'Edit School Info', change the Principal field to 'Dr. Johnson', and click Save. The dashboard updates immediately without page navigation."

Buttons & Controls

• Edit School Info (Secondary Button with Settings Icon): Opens the School Info dialog where you can edit all school information. Located in the top-right corner of the School Information card.
• Load Dashboard (Primary Button): Appears when data hasn't loaded yet. Click to fetch and display dashboard statistics. Only shows on first visit or after errors.

Visual Elements

• Statistics Pill Bar: A horizontal gradient bar with 7 segments (stone-900 through amber-400) showing Teachers, Subjects, Grades, Schedules, Working Days, Teams, and Groups counts. Hover over each segment for label tooltip. Labels shown below the bar.
• School Information Section: Card showing Principal name and Contact information with "Edit School Info" button.
• Capacity Analysis Cards: Two side-by-side cards (System Health and Teaching Staff Composition) showing workload metrics. Only appear when teachers are configured.
• Workload Progress Bar: Color-coded bar in System Health card (green <70%, amber 70-85%, red >85%).
• Demand Breakdown: Shows period types: regular, team, class teacher, fixed.
• Top Overloaded Teachers: List of teachers exceeding capacity with demand/capacity numbers.
• Getting Started Checklist: 9-step setup guide with color-coded icons (emerald for steps 1-6, amber for 7-8, blue for 9).
• Error Alert (Red Alert): Shows error messages like "Failed to fetch dashboard data".
• Loading Spinners: Appear with text while data is being fetched.

Form Fields Reference

In School Settings Page:

• Name (School Name): Text field, displays current school name, can be edited. Example: "Lincoln High School".
• Principal: Text field, optional, shows principal's name. Example: "Dr. Sarah Johnson".
• Address: Text field, optional, full school address. Example: "123 Education Ave, City, State 12345".
• Phone: Text field, optional, school contact phone. Example: "+1 (555) 123-4567".
• Email: Text field, optional, school contact email. Example: "admin@school.edu".
• Website: Text field, optional, school website URL. Example: "https://www.myschool.edu".

Alerts & Errors

• "School information updated successfully!": Green success message that appears at the top of School Settings page after successfully saving changes. Auto-dismisses after 3 seconds.
• "Failed to fetch dashboard data": Red error message on Dashboard if statistics cannot be loaded from the server. Includes "Try Again" button.
• "Failed to load school information": Error shown on School Settings page if school data cannot be fetched.
• "Failed to update school information": Error shown on School Settings page if save operation fails. Appears after clicking "Save Changes".
• "Loading dashboard data...": Informational text with spinning loader while the dashboard is fetching statistics.
• "Loading school information...": Shown with spinner while school info card is loading principal and contact data.

Rules & Constraints

• School Name Can Be Updated Anytime: The school name field can be changed at any time without restrictions

  • What's Valid: Any non-empty text like "Lincoln High School" or "Roosevelt Middle School"
  • What's Invalid: (Currently no strict validation)
  • Example: Change from "Test School" to "Washington Elementary School"

• All School Fields Are Optional Except Name: Only the school name is required; principal, address, phone, email, and website are optional

  • What's Valid: Leaving principal, phone, or email empty while saving
  • What's Invalid: (All fields are currently accepted)
  • Note: If a field shows "Not specified" on the Dashboard, it means that optional field is empty
  • Example: You can save with just a school name and principal, leaving contact info for later

• Data Refreshes Don't Save Changes: Clicking "Refresh Data" only reloads what's in the database; it doesn't save any edits

  • What Happens: If you're on School Settings and click Refresh Data on Dashboard (different page), your unsaved edits won't be lost because you're on a different page
  • Important: Always click "Save Changes" on School Settings page before navigating away
  • Example: After editing the principal name but before saving, if you click "Back to Dashboard" without saving, your changes are lost

• Statistics Are Real-Time Counts: The numbers on stat cards (Teachers, Subjects, etc.) reflect actual database counts

  • What's Valid: Any number from 0 and up
  • Updates: Statistics only update when you refresh the page or click "Refresh Data"
  • Example: If the Teachers stat shows "0", it means no teachers have been added yet. After adding teachers on the Teachers page, click "Refresh Data" to see the updated count.

• Status Indicator Reflects Data Presence: The colored status dot changes based on whether your school has entered core data

  • Green "Data Available": Shown when you have teachers, subjects, or grades in the system
  • Blue "Ready for Setup": Shown when the system is fresh with no data entered yet
  • Example: A brand new installation shows blue "Ready for Setup". After adding your first teacher, it changes to green "Data Available".

Capacity Analysis Cards

When you have teachers configured in the system, the Dashboard displays two additional analysis cards below the main statistics.

System Health Card

Shows overall teacher workload and capacity status:

Workload Indicator:

• Percentage Bar: Visual progress bar showing overall teacher workload percentage
• Status Colors:
  • Green (Healthy): Below 70% - sufficient capacity
  • Amber (Warning): 70-85% - approaching capacity limits
  • Red (Critical): Above 85% - teachers are overloaded
• Status Labels: "✅ Healthy capacity", "⚠️ Approaching capacity", or "🔴 Overloaded"

Capacity Details (gray info box):

• Total Demand: Total periods needed per week
• Total Capacity: Total teaching periods available
• Demand Breakdown: Shows period types separated by dots (e.g., "120 regular · 15 team · 12 class teacher · 8 fixed")

Top Overloaded Teachers (when any exist):

• Lists overloaded teachers with their demand/capacity and utilization percentage
• Format: "Teacher Name — demand/capacity (X%)"
• When no issues: "✅ No critical issues detected"

Teaching Staff Composition Card

Shows breakdown of teaching staff:

Staff Categories:

• Regular Teachers: Count, demand/capacity (periods), percentage of capacity
• Visiting Teachers: Count, demand/capacity (periods), percentage of capacity

Teacher Utilization:

• Well-balanced (40-85%): Count of teachers with healthy workload (shown in green)
• Overloaded (>85%): Count of teachers with high workload (shown in red) - only if any exist
• Underutilized (<40%): Count of teachers with low workload (shown in blue) - only if any exist

Example: "The Staff Composition card shows: Regular Teachers: 20 (800 periods/week, 85% of capacity), Visiting Teachers: 5 (100 periods/week, 15% of capacity). Utilization shows 18 well-balanced, 2 overloaded, 5 underutilized."

Using Capacity Analysis

Before Generation: Check capacity analysis to ensure:

• Overall workload is below 85% (ideally below 70%)
• No critical overload alerts
• Sufficient teachers for required curriculum

If Overloaded:

• Add more teachers
• Reduce periods in Grade→Subject Assignments
• Convert some subjects to optional/elective

If Underutilized:

• Consider if visiting teachers have enough hours assigned
• Review teacher→subject assignments for gaps
• May indicate teachers qualified for subjects not being used

School Info Dialog

Click "Edit School Info" to open a dialog (not navigate to a new page) where you can edit:

• School Name
• Principal Name
• Address
• Phone
• Email
• Website

The dialog saves changes and updates the Dashboard immediately without page navigation.

Tips & Notes

• Start Here Every Session: The Dashboard gives you a quick overview of your system status. Check the stats to see what's been set up and what still needs attention.
• Check Capacity Before Generating: Review the System Health card to ensure you have sufficient teacher capacity before generating timetables.
• Monitor Alerts: Critical alerts indicate potential scheduling problems - address these before generation for best results.
• Edit School Info First: When setting up a new system, click "Edit School Info" and fill in your school details before adding teachers and subjects.
• Refresh After Changes: If you've been adding teachers or subjects, come back to the Dashboard to see updated statistics and capacity analysis.
• Stats Don't Auto-Update: The numbers on stat cards only update when you refresh the page. They won't update automatically while the page is open.
• Save Before Closing Dialog: On the School Info dialog, click "Save" before closing to preserve your changes.
• Success Messages Disappear: The green success message automatically disappears after a few seconds.
• All Fields Update Together: You can change multiple school info fields and save them all at once with a single "Save" click.
• Contact Info Shows on Dashboard: Whatever you enter for phone or email will display in the Contact row on the School Information card.
• Workload Colors Guide Action: Green is good, amber needs attention, red requires immediate action to add capacity.
• Utilization Helps Planning: The teacher utilization breakdown helps identify if you need more staff or have underused resources.