NAGRIMALA / STEP 04.3
Reusable UI Components
Brand-consistent component preview. Demo only — no student records are saved.
Buttons
Primary, secondary, outline, danger and disabled states
Status Badges
Shared status indicators across campus modules
ActivePendingOverdueIn ReviewDraft
Form Controls
Accessible fields with labels, validation and helper text
Input States
Error, disabled and helper-text styles
Read-only example
Example validation: enter a valid email
Students Table
Responsive data table with sample rows and client-side filtering
| Student ID | Student Name | Class | Status |
|---|---|---|---|
| NM-001 | Ayesha Rahman | Class 8 | Active |
| NM-002 | Arif Ahmed | Class 9 | Pending |
| NM-003 | Nusrat Jahan | Class 7 | Inactive |
Sample records only. Authentication, role permissions and database actions will be implemented in later phases.