School Admin UI

Location: syncad/apps/school-admin-ui Stack: Next.js 14, MUI (Material UI), Tailwind CSS, Redux Toolkit, TanStack Query Port: 3002 (dev)

Overview

Primary interface for school staff to manage day-to-day operations: student records, attendance, exams, fees, announcements, and more.

Pages

Dashboard

• Quick stats: total students, today's attendance %, pending leave requests, fee collection today
• Recent announcements list
• Quick action tiles

Student Management

• Student list with search, filter by class/division
• Add / edit student form (admission no, name, DOB, parent info, photo upload)
• Student detail view with tabs: Profile, Attendance, Fees, Results, Library
• Bulk CSV import
• Student promotion (end of academic year)

Employee Management

• Teacher and staff list
• Add / edit employee form
• Assign classes and subjects to teachers
• Teacher profile with assigned classes

Attendance

• Daily attendance marking: calendar date picker → class → student list → mark status
• Bulk actions: mark all present, mark all absent
• Monthly attendance report: tabular view per student with day-by-day status
• Attendance summary: % present/absent/late per class

Exam Management

• Create exam: name, start/end date, class, division, subjects
• Exam schedule: date × subject × time × room
• Result upload: CSV or manual entry per subject per student
• Result view: per student, per class, per exam
• Result card generation (printable PDF)

Fee Management

• Fee structure: create fee heads (tuition, lab, transport, etc.) per class
• Concession rules: sibling discount, scholarship, need-based
• Record payment: student search → select fee heads → record amount → generate receipt
• Fee ledger view: all transactions per student
• Reminder: send payment reminder SMS via SNS

Announcements

• Create announcement: title, body, priority (normal/urgent), attachment, target audience (all/students/teachers/parents)
• View announcement history
• Pin important announcements

Leave Management

• View all leave applications (students + employees)
• Approve / reject with optional comment
• Leave balance tracking per employee

Bus Tracking

• Bus fleet overview: bus name, driver name, capacity, current status
• Route management: assign route to bus, add/edit stops
• Trip scheduling: assign trips to bus per day (pickup/dropoff/both)
• Live map: see all active buses on map (via school-admin-ui)

Library

• Book catalog: title, author, ISBN, copies available
• Issue book: select student → select book → set return date
• Return book: scan or search → confirm return
• Overdue list: books past return date with student info
• Book inventory report

Messaging

• Send messages to parents, teachers, or all
• Message templates
• Message history with delivery status

State Management

Layer	Technology	Purpose
Server state	TanStack Query	API data fetching, caching, invalidation
UI state	React Context	Theme, sidebar state
Server-side	Redux Toolkit	Complex form state, optimistic updates

API Integration

// lib/apiClient.ts
import axios from 'axios';

export const apiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  withCredentials: true,
});

apiClient.interceptors.request.use((config) => {
  const token = getAccessToken(); // from secure cookie
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      await refreshToken();
      return apiClient(error.config);
    }
    throw error;
  }
);

Key Files

apps/school-admin-ui/src/
├── app/
│   ├── layout.tsx           # Root layout with sidebar
│   ├── page.tsx            # Dashboard
│   ├── students/
│   ├── attendance/
│   ├── exams/
│   ├── fees/
│   ├── announcements/
│   ├── leave/
│   ├── transport/
│   └── library/
├── components/
│   ├── ui/                 # Reusable MUI overrides
│   └── features/           # Feature-specific components
├── store/
│   ├── index.ts            # Redux store config
│   └── slices/             # RTK slices
└── lib/
    ├── apiClient.ts        # Axios instance
    └── queryClient.ts       # TanStack Query client