Chapter 1: Getting Started & Role-Based Access
This chapter walks you through logging into Uttercode School ERP, exploring the navigation interface, understanding default credentials for all 10 roles, updating user profile photos, and utilizing the real-time Role Preview Switcher.
1. Accessing the Application
Uttercode School ERP is a web-based responsive application that runs on modern browsers (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).
- Open your web browser.
- Navigate to your institution's School ERP URL (e.g.
http://localhost/uttercode-school-erp/login/orhttps://school.uttercode.com/login/). - You will be greeted by the branded Uttercode School ERP Login Portal.
2. Sample Role Credentials
The system comes pre-configured with 10 role personas for testing, evaluation, and operational onboarding. All sample accounts share the default password: school123.
| # | Role Persona | Email / Username | Default Password | Initial View |
|---|---|---|---|---|
| 1 | Super Admin | superadmin@school.com | school123 | Multi-branch command center & infrastructure |
| 2 | School Admin | admin@school.com | school123 | Campus daily summary, attendance & admissions |
| 3 | Principal | principal@school.com | school123 | Academic GPA, faculty presence & notices |
| 4 | Teacher | teacher@school.com | school123 | Teaching schedule, class attendance & homework |
| 5 | Accountant | accountant@school.com | school123 | Fee POS collection desk, receipts & dues |
| 6 | HR Manager | hr@school.com | school123 | Staff biometric rates, leave requests & birthdays |
| 7 | Librarian | librarian@school.com | school123 | Book catalog, barcode issue desk & fines |
| 8 | Transport Manager | transport@school.com | school123 | Active bus routes, fleet fitness & drivers |
| 9 | Reception / Front Desk | reception@school.com | school123 | Visitor gate pass desk & admissions inquiries |
| 10 | Support Staff | staff@school.com | school123 | Personal shift schedule & task checklists |
[!IMPORTANT] Production Security Recommendation: On first login in a live school deployment, immediately navigate to Settings → Users & Roles to change default passwords, set strong credentials, and configure institution-specific email addresses.
3. The Modern User Interface
Once logged in, the application presents a unified three-tier layout designed according to the Uttercode ERP Design System:
- Top Navigation Header:
- School Logo & Campus Name: Displays the active campus profile.
- Interactive Role Switcher Pill: Allows Super Admins and School Admins to preview the application as any of the 10 roles without logging out.
- Quick Search & Notifications: System alerts for pending fee dues, unread messages, and staff notices.
- User Profile Dropdown: Shows current user name, assigned role, avatar photo, profile settings, and the Logout button.
- Left Sidebar Menu (RBAC-Filtered):
- Contains categorized accordion navigation menus that dynamically show or hide based on the active user's permissions.
- Collapsible for expanded workspace on tablet and laptop screens.
- Central Workspace:
- Main dashboard cards, DataTables lists, form dialogs, POS checkout screens, and printable report previews.
4. Live Role Preview Switcher
Administrators can test the user experience of teachers, librarians, accountants, or front desk staff in real time:
- On the top toolbar, locate the Role Preview Switcher dropdown.
- Select any role (e.g. Teacher, Accountant, Librarian).
- The interface instantly re-renders:
- The left sidebar dynamically adapts to show only the selected role's authorized modules.
- The dashboard widgets immediately switch to the role-specific KPI cards and action shortcuts.
- To return to the full administrative view, select Super Admin or School Admin from the switcher.
5. Managing Your User Profile & Avatar Photo
Users can customize their profile details and upload a photo:
- Click on your avatar photo or name in the top right corner.
- Select My Profile or navigate to
index.php?page=user. - Click the Choose Photo button to upload a passport-sized photograph (formats supported:
.jpg,.png,.webp). - Click Update Profile. Your photo will immediately appear in the top navigation bar, staff directory, and on issued staff ID cards.