UI kit
Mobile Components Guide
CodideX Mobile components are built for compact school ERP workflows, touch-friendly actions, and consistent app-style navigation.
Core Components
| Component | Use |
|---|---|
| Mobile app header | Top context, page title, compact actions, and safe-area spacing. |
| Bottom navigation | Primary app navigation for role dashboards and common pages. |
| Cards | Grouped content such as status summaries, notices, records, and forms. |
| Quick action cards | Shortcut entry points from dashboard and role workflows. |
| Notification cards | Unread, priority, timeline, and category-based notification rows. |
| Message bubbles | Chat and communication preview threads. |
| Chips | Filters, status options, quick replies, and compact categories. |
| Badges | Unread counts, statuses, priority labels, and role indicators. |
| Mobile forms | Leave request, grievance, HR complaint, meeting request, and demo entry forms. |
| Toast notifications | Frontend feedback for demo interactions. |
| Confirmation modal | Approve, reject, mark-read, and destructive demo confirmations. |
| Preloader | Shared loading polish for app-style transitions. |
| Dark mode classes | Theme-aware styling with CSS variables and body/theme classes. |
| Symbolic avatar classes | Display-only grey silhouette placeholders across roles. |
| Fee summary cards | Student and parent payment entry cards with due amount, invoice, due date, and fee breakdown. |
| Dummy gateway UI | Frontend-only Cash, Card, UPI, and Net Banking method tabs without SDK or transaction processing. |
| Payment success state | Static success confirmation with reference number, amount, method, and receipt/history links. |
| Payment history rows | Paid, Pending, and Failed rows with method, date, amount, status, and receipt action. |
| Receipt placeholder | Basic receipt preview for buyer review. No real PDF generation or real download. |
| Professional receipt preview | Student and parent receipt documents with fee heads, totals, amount in words, signature area, print button, and dummy PDF button. |
| Salary slip preview | Teacher and employee salary slips with earnings, deductions, net salary, print button, and dummy PDF button. |
| Print-friendly CSS | Print rules hide mobile navigation and actions while preserving clean document content. |
Implementation Notes
Most shared component styles are in /assets/css/mobile-components.css, /assets/css/mobile-layout.css, /assets/css/mobile-navigation.css, /assets/css/mobile-communication.css, /assets/css/mobile-payment.css, and /assets/css/mobile-print.css.
Reusable static snippets live in /components/. These snippets are references for buyers and future static pages.
Payment, receipt, and salary slip components are frontend dummy UI only. No real payment gateway, UPI, card processing, bank integration, payroll engine, receipt engine, backend, API, database, real receipt generation, real salary processing, or PDF generation is included.