دليل ضمان الجودة
QA Testing Guide
Every page in the application listed with specific things to test, how to test them, and current pass/fail status. Open each page at http://localhost:4004 and follow the instructions.
121
Total Tests
86
Passing
23
Failing
12
Blocked
0
Skipped
Quick Jump — All 24 Pages
How to Test
1. Start dev server: npm run dev -- -p 4004
2. Open http://localhost:4004 in Chrome
3. Open DevTools (Cmd+Option+I) — watch Console for errors, Network tab for failed API calls
4. Test each page below. Click the "Open Page" link to open the page directly.
5. For responsive testing: DevTools toggle device toolbar — test at 375px, 768px, 1440px
Homepage
Main landing page with hero section, stats counter, feature preview cards, and CTA buttons.
http://localhost:4004/Hero section renders
How: Open page — check headline, Arabic calligraphy, and CTA buttons
Expected: Hero text, animated background pattern, two CTA buttons visible
Stats counter section
How: Scroll down — look for stats row (students managed, madrasas, etc.)
Expected: 4 stat cards with numbers and labels render
Feature preview cards
How: Scroll to features section — check all cards load with icons
Expected: Feature cards with icons, titles, descriptions. Hover effects work.
CTA buttons navigate
How: Click "Get Started" should go to /pricing. Click "Live Demo" should go to /demo
Expected: Correct navigation without 404
Animations play
How: Reload page — observe fade-in and stagger animations
Expected: Smooth entrance animations on hero text and cards
Mobile layout
How: DevTools — 375px width — check hero stacks vertically, no overflow
Expected: Single column layout. All text readable. No horizontal scroll.
Features
Detailed feature showcase with module cards for Student Management, Hifz Tracking, Fees, Attendance, Exams, etc.
http://localhost:4004/featuresModule cards render
How: Scroll through page — count feature module cards
Expected: All modules listed with icon, title, description, and feature bullet points
Islamic design elements
How: Check for geometric patterns, gold accents, Arabic labels
Expected: PatternBackground visible. Gold color scheme. Amiri font on headings.
Responsive grid
How: Test at 375px, 768px, 1440px
Expected: 1-col mobile, 2-col tablet, 3-col desktop
Pricing
Three-tier pricing page: Maktab ($19), Madrasa ($59), Jamia ($149) with feature comparison and FAQ.
http://localhost:4004/pricing3 pricing cards render
How: Open page — check for Maktab, Madrasa, Jamia cards
Expected: Maktab $19/$15, Madrasa $59/$47 (Popular badge), Jamia $149/$119
Monthly/Annual toggle
How: Click the billing toggle
Expected: Prices switch between monthly and annual (annual ~20% discount)
Feature comparison table
How: Scroll below cards — check comparison grid
Expected: 15-row feature comparison with checkmarks per plan
FAQ accordion
How: Scroll to FAQ — click each question
Expected: 6 FAQ items expand/collapse. Answers include trial info, charity discount.
CTA buttons navigate
How: Click CTA button on each plan card
Expected: Navigates to signup/demo (not 404)
About Us
Heritage timeline (750 CE to 2024), mission statement, and team/values section.
http://localhost:4004/aboutTimeline renders
How: Open page — check 4 timeline entries
Expected: Abbasid Golden Age, Nizamiyyah, Mughal/Ottoman, iJamia 2024 — each with icon and description
Mission statement visible
How: Check for mission/vision text block
Expected: Clear mission statement with Islamic education theme
Animations on scroll
How: Scroll slowly — observe fade/stagger effects
Expected: Timeline items animate in sequentially
Blog & Resources
Blog listing page with featured article, category filters, and article cards.
http://localhost:4004/blogFeatured article renders
How: Check top section for large featured post
Expected: Featured article with title, excerpt, author, date
Category filter tabs
How: Click different category tabs
Expected: Article list filters by selected category
Article cards
How: Check grid of article cards below featured
Expected: Cards with title, excerpt, category badge, date
Contact
Contact form with name, email, phone, subject, message fields plus office info cards.
http://localhost:4004/contactContact form renders
How: Open page — check all form fields present
Expected: Fields: name, email, phone, subject, message. Submit button visible.
Empty form validation
How: Click Submit with all fields empty
Expected: Validation errors appear on required fields
Form may submit without validation. Check if onSubmit has guards.
Invalid email validation
How: Enter "bad-email" in email field then submit
Expected: Email format error shown
No client-side format validation. Submits any string.
Successful submission
How: Fill all fields correctly then submit
Expected: Success toast/message. Form resets.
Form handler may not be wired to any backend. Check console for POST errors.
Contact info cards
How: Check sidebar/below form for office address, email, phone
Expected: Contact method cards with icons and details
Demo / Showcase
Product showcase page with screenshots/previews of the dashboard, Hifz tracker, and other modules.
http://localhost:4004/demoScreenshot gallery loads
How: Open page — check for preview images/cards
Expected: Screenshots: Command Dashboard, Hifz Progress Tracker, etc.
Demo CTA
How: Check for "Try Demo" or "Start Free Trial" button
Expected: CTA button links to signup or admin dashboard
Admin Dashboard
Main admin overview with 4 KPI cards (Students, Hifz, Fees, Attendance), charts for attendance trend and enrollment.
http://localhost:4004/adminLayout loads (sidebar + topbar)
How: Navigate to /admin — check sidebar renders with 12 nav items
Expected: AdminSidebar: Dashboard, Students, Hifz, Fees, Attendance, Exams, Staff, Communications, Classes, Reports, Billing, Settings
4 KPI cards render
How: Check main content area for KPI row
Expected: Total Students (347), Hifz Completions (24), Fees Collected (48,200), Avg Attendance (87.4%)
All data is hardcoded mock values
Attendance trend chart
How: Check for area/line chart below KPIs
Expected: recharts AreaChart renders with monthly trend data
Enrollment chart
How: Check for bar/donut chart
Expected: Second chart renders (enrollment by grade or similar)
Mobile sidebar toggle
How: Set width to 375px — click hamburger icon
Expected: Sidebar slides in with overlay. X button closes it.
All sidebar links work
How: Click each of the 12 sidebar items
Expected: Each navigates to correct /admin/* page without 404
Data is live (not mock)
How: Check if KPIs call useApi() hooks vs hardcoded const
Expected: Should call API. Currently FAILS — uses hardcoded values
KPI values are const arrays. No API calls. See issue C-002.
Admin — Students
Student management with DataTable (admission no, name, class, guardian, phone, status), search, and "Enrol Student" button.
http://localhost:4004/admin/studentsStudent table renders
How: Navigate to page — check DataTable with student rows
Expected: Table with columns: Adm No, Name, Class, Guardian, Phone, Status
Renders with hardcoded STUDENTS array (12 mock entries)
Search/filter works
How: Type "Ahmed" in search box
Expected: Table filters to show only matching rows. Case-insensitive.
Search works on mock data only
"Enrol Student" opens form
How: Click the "Enrol Student" button
Expected: FormModal opens with fields: first_name, last_name, DOB, gender, class, guardian, address, medical_notes
Form field names match API
How: Inspect form field names in DevTools
Expected: Fields: admission_no, first_name, last_name, dob, gender, section_id, academic_year_id
MISMATCH: Form sends date_of_birth (API wants dob), class_id (API wants section_id). Missing admission_no, academic_year_id. See C-003.
Form submission saves to DB
How: Fill form then Submit — check new student appears in table
Expected: POST /students called. New student in table after refresh.
BLOCKED: onSubmit not wired to API. Form data goes nowhere.
Form validation on empty submit
How: Open form — leave fields empty — click Submit
Expected: Required field errors shown
No validation. Form submits empty data directly.
Edit student
How: Click a student row or edit icon
Expected: Edit form pre-filled with student data
No edit functionality implemented
Delete student
How: Click delete icon on a student row
Expected: Confirmation dialog then DELETE /students/:id then removed from table
No delete functionality implemented
Pagination
How: Check if table shows pagination controls
Expected: Page numbers or load-more. PAGE_SIZE matches backend.
Frontend PAGE_SIZE=8, backend defaults to 10. Mismatch.
Admin — Hifz Tracker
Quran memorization tracker with student progress cards: juz completion, current surah, daily streak, progress bars.
http://localhost:4004/admin/hifzStudent Hifz cards render
How: Navigate to page — check student progress cards/list
Expected: Cards: student name, juz completed (e.g. 30/30), current surah, streak
Hardcoded STUDENTS array with mock progress data
Juz progress visualization
How: Check progress bars/circles for each student
Expected: Visual indicator showing 0-30 juz completion
Log Hifz session form
How: Look for "Log Session" or "Add Session" button — click it
Expected: Form: student, sabaq ayahs, sabqi review, manzil, mistakes, grade
BLOCKED: No session logging form in UI. API has POST /hifz/plans/:planId/sessions but no frontend form.
Session history per student
How: Click on a student card — check for session history
Expected: List of past sessions with dates, ayah ranges, grades
No session history view implemented
Data from API
How: Check Network tab for GET /hifz/plans
Expected: API call to fetch real Hifz data
Uses hardcoded const. No API integration.
Admin — Fees
Fee management with fee structures list, invoice table, expense tracking, and KPI summary.
http://localhost:4004/admin/feesFee structures render
How: Check for fee structure cards/list
Expected: Fee types: Tuition, Registration, Boarding, etc. with amounts per term
Hardcoded STRUCTURES array
Invoice table renders
How: Check for invoice DataTable
Expected: Table: Invoice No, Student, Amount, Status (Paid/Pending/Overdue), Due Date
Hardcoded INVOICES. Not from API.
Expense tracking section
How: Check for expense list/cards
Expected: Expense entries with category, amount, date
Mock EXPENSES array
"Create Fee" form
How: Look for "Add Fee Structure" or "Create Fee" button
Expected: Form to define new fee type with amount, class, term
No fee creation form implemented
"Generate Invoices" action
How: Look for bulk invoice generation button
Expected: Dialog to select class + fee then generates invoices
No invoice generation UI
"Record Payment" action
How: Click on an invoice — look for payment recording
Expected: Payment form: amount, method (cash/bank/online), reference
No payment recording form. API exists but no frontend.
Fee statistics KPIs
How: Check for summary cards at top
Expected: Total Collected, Outstanding, Overdue count
Mock KPI values
Admin — Attendance
Daily attendance marking with class selector, student checklist (Present/Absent/Late), and "Save Attendance" button.
http://localhost:4004/admin/attendanceClass selector dropdown
How: Check for class/section dropdown at top
Expected: Dropdown with: 6A, 6B, 5A, 5B, 4A, 4B, 3A, 3B, 2A, 1A
Student checklist renders
How: Select a class — check student list appears
Expected: List of students with present/absent/late toggle for each
Shows only hardcoded class 6A students
Switch class loads students
How: Change dropdown to "5A" — check list updates
Expected: Student list changes to class 5A students
Hardcoded students per class. Not from API.
Toggle attendance status
How: Click present/absent/late for a student
Expected: Status toggles visually (green/red/amber)
UI toggles work but state is lost on refresh
"Save Attendance" persists
How: Mark attendance then Save then refresh page
Expected: POST /attendance/sessions called. Persists after refresh.
BLOCKED: Save button not wired to API. Data lost on refresh.
Date picker
How: Check for date selection (today or past dates)
Expected: Can select date for attendance session
May default to today only. Check if date picker exists.
Holiday detection
How: Select a known holiday date — try marking
Expected: Warning: "This is a public holiday" dialog
No holiday awareness. See issue M-003.
Attendance summary/stats
How: Check for daily summary bar (X present, Y absent, Z late)
Expected: Real-time count as checkboxes are toggled
Admin — Exams
Exam management with exam list (upcoming + completed), scheduling, and result entry interface.
http://localhost:4004/admin/examsExam list renders
How: Open page — check for exam table/cards
Expected: List: Subject, Class, Date, Duration, Max Marks, Status (Upcoming/Completed)
Hardcoded EXAMS array with 3 upcoming + 3 completed
"Schedule Exam" form
How: Click "Schedule Exam" or "Create Exam" button
Expected: Form: subject, class, date, start time, duration, max marks, room
No exam creation form in UI. API has POST /exams.
"Add Results" / grading
How: Click "Add Results" on a completed exam
Expected: Grade entry form: each student row with marks input
"Add Results" button has no handler. Marks entry not implemented.
Result analysis
How: After results entered — check analytics section
Expected: Average score, pass rate, top 5 students, grade distribution
Depends on results entry which does not work
Student marks table
How: Check MARK_STUDENTS section
Expected: List of students for selected exam with marks columns
Hardcoded MARK_STUDENTS. Visual only.
Admin — Staff & HR
Staff directory table, role badges, leave request list, and "Add Staff" action.
http://localhost:4004/admin/staffStaff table renders
How: Open page — check staff DataTable
Expected: Table: Name, Role, Department, Phone, Status, Join Date
Hardcoded STAFF array
Role badges display
How: Check badge colors for different roles
Expected: Color-coded: Teacher=emerald, Admin=gold, Accountant=blue
Leave requests section
How: Check for leave request list/cards
Expected: Pending leave requests: staff name, dates, reason, approve/deny buttons
Hardcoded LEAVE_REQUESTS. Not from API.
"Add Staff" form
How: Click "Add Staff" button
Expected: Form: name, email, phone, role, department, salary, join date
Form may not be wired to API
Leave approval action
How: Click Approve/Deny on a leave request
Expected: PATCH /staff/leave/:id with status update
Buttons may be visual only. No API integration confirmed.
Admin — Communications
Notice board with notices list, compose form, message templates, and recipient targeting.
http://localhost:4004/admin/communicationsNotices list renders
How: Open page — check notice cards
Expected: 4 notices with type badge, author, date, reach count
Hardcoded NOTICES array
Notice type badges
How: Check badge colors for notice types
Expected: Exam=purple, Event=emerald, Finance=amber, Academic=blue
"Create Notice" form
How: Click "Create Notice" or compose button
Expected: Form: title, body, type (dropdown), target audience selector
Compose form may not submit to API
Message templates
How: Check for templates section
Expected: TEMPLATES array with pre-written messages
Hardcoded templates list
Send SMS/Email
How: Check for "Send" action on notices
Expected: Sends via configured SMS/email provider
No SMS/email integration. Provider not configured.
Admin — Classes
Academic year and class/section management with year selector, class cards, student count, teacher assignment.
http://localhost:4004/admin/classesAcademic year selector
How: Check for year dropdown/tabs at top
Expected: ACADEMIC_YEARS list with current year highlighted
Class cards render
How: Check for class grid
Expected: Cards: Class 1-6 with sections (A, B), student count, assigned teacher
Hardcoded CLASSES array
"Add Class" action
How: Click "Add Class" or "Create Section" button
Expected: Form: grade name, section letter, capacity, teacher assignment
Form may not exist or be wired to API
Section details
How: Click on a class/section card
Expected: Drill-down showing student list for that section
No drill-down implemented
Admin — Reports
Analytics dashboard with KPI cards, monthly fee collection chart, attendance chart, exportable report cards.
http://localhost:4004/admin/reportsReport KPI cards render
How: Check top KPI row
Expected: Summary cards: Total Revenue, Collection Rate, Average Attendance, etc.
Hardcoded KPI_DATA
Fee collection chart
How: Check for monthly fee bar/area chart
Expected: Chart showing fee collection over months
FEE_MONTHLY hardcoded data
Individual report cards
How: Check for report category cards
Expected: Clickable report types that generate/show detailed reports
Export functionality
How: Click "Export PDF" or "Download" on a report
Expected: PDF or CSV file downloads
No export functionality implemented
Data from API
How: Check Network tab for /reports/* API calls
Expected: GET /reports/dashboard, /reports/fees/collection etc.
All data hardcoded. No API calls. See issue M-001.
Admin — Billing
SaaS subscription management: Overview tab (plan, KPIs, usage), Invoices tab, Usage tab, Plans tab (upgrade/downgrade).
http://localhost:4004/admin/billingOverview tab loads
How: Navigate to page — check Overview tab is default
Expected: Plan banner (Madrasa Plan, active), 4 KPI cards, 2 charts, plan limits bars
Plan limits progress bars
How: Check usage bars section
Expected: Students 347/500, Staff 21/50, Admins 3/10, Storage 4.1/25 GB
Invoices tab
How: Click "Invoices" tab
Expected: DataTable: Invoice No, Period, Total, Due, Status (Paid), Date
Hardcoded invoice rows
Usage tab
How: Click "Usage" tab
Expected: 6 metric cards + enrolment trend chart
Plans tab
How: Click "Plans & Upgrade" tab
Expected: 3 plan cards with prices, current plan marked. Feature comparison below.
"Upgrade" button action
How: On Plans tab — click "Upgrade" on Jamia card
Expected: Upgrade dialog then PATCH /v1/billing/subscription/plan
Upgrade button exists but no API call wired.
Data from API
How: Check Network tab for /v1/billing/* calls
Expected: GET /subscription, GET /invoices, GET /usage/snapshot
All mock data. Hooks exist but not used in page.
Admin — Settings
Tenant settings with tabbed sections: School Info, Branding, Academic, Notifications, Security, Billing.
http://localhost:4004/admin/settingsSettings sections render
How: Open page — check for section tabs/sidebar
Expected: SECTIONS list with clickable navigation
School info form
How: Click "School" section — check form fields
Expected: School name, address, phone, email, principal name fields
"Save" button works
How: Edit a field then click Save
Expected: PATCH /settings with updated values. Success toast.
handleSave shows "saved" state but may not call API
Section switching
How: Click between different setting sections
Expected: Content area updates to show correct section
Teacher Dashboard
Teacher portal: 4 KPIs (My Students: 86, Attendance: 91%, Hifz: 67%, Exams: 3), attendance list, weekly chart.
http://localhost:4004/teacherLayout renders with sidebar
How: Navigate to /teacher — check TeacherSidebar + content
Expected: TeacherSidebar with relevant nav items. Topbar shows teacher context.
4 KPI cards
How: Check KPI row
Expected: My Students (86), Attendance (91%), Hifz Progress (67%), Upcoming Exams (3)
All hardcoded mock values
Today attendance list
How: Check attendance section
Expected: Today class list with student present/absent status
Hardcoded todayAttendance array
Weekly attendance chart
How: Check for weekly chart/table
Expected: Chart showing day-by-day attendance for current week
Hardcoded weeklyAttendance data
Navigation completeness
How: Check all teacher sidebar links
Expected: Links to: Dashboard, My Classes, Hifz Sessions, Attendance, Exams, Messages
Sidebar nav items may be incomplete for teacher role
Student Dashboard
Student portal: 4 KPIs (Hifz: 18/30, Attendance: 94%, Exams: 82%, Fees: 0), Hifz timeline, subject grades, recent exams.
http://localhost:4004/studentLayout renders
How: Navigate to /student — check StudentSidebar + content
Expected: StudentSidebar with nav items. Student name/context in header.
4 KPI cards
How: Check KPIs
Expected: Hifz Progress (18/30), Attendance (94%), Exam Average (82%), Fees Balance (0)
Mock data
Hifz timeline section
How: Check for Hifz progress timeline
Expected: Timeline showing juz completion milestones
Hardcoded hifzTimeline
Subject grades chart
How: Check for grades visualization
Expected: Subject-wise grade breakdown (bar or radar chart)
Hardcoded subjectGrades
Recent exams table
How: Check for exam results list
Expected: Table: Subject, Date, Marks, Grade, Status
Hardcoded recentExams
Accountant Dashboard
Accountant portal: 4 KPIs (Revenue: 48,200, Outstanding: 8,450, Expenses: 12,300, Collection: 85%), charts, transactions.
http://localhost:4004/accountantLayout renders
How: Navigate to /accountant — check AccountantSidebar + content
Expected: AccountantSidebar with financial nav items.
4 KPI cards
How: Check KPI row
Expected: Total Revenue (48,200), Outstanding (8,450), Expenses (12,300), Collection Rate (85%)
Mock values
Revenue monthly chart
How: Check for monthly revenue area/bar chart
Expected: Chart: revenueMonthly data across months
Hardcoded revenueMonthly
Fees by type donut
How: Check for fee breakdown donut chart
Expected: Donut chart: feesByType (Tuition, Boarding, etc.)
Hardcoded feesByType
Recent transactions table
How: Check for transaction DataTable
Expected: Recent payments with student, amount, method, date
Mock data
Architecture Review
Internal page: all identified issues (7 critical, 9 medium, 5 low), broken flows, module matrix, remediation roadmap.
http://localhost:4004/architecture-reviewSummary stats render
How: Open page — check 4 stat cards at top
Expected: Critical (7), Medium (9), Low (5), Broken Flows (6)
Issue cards render
How: Scroll through Critical, Medium, Low sections
Expected: Each issue: ID badge, title, files, description, impact, fix
Broken flows section
How: Scroll to "Broken User Flows"
Expected: 6 flow cards with numbered steps and breakpoint highlight
Module matrix table
How: Check "Module Completion Matrix" section
Expected: 11-row table with status icons per column
Roadmap section
How: Scroll to "Remediation Roadmap"
Expected: 4 phase cards with prioritized action items
QA Guide (this page)
This page — page-by-page QA guide with test instructions, status badges, and quick reference URLs.
http://localhost:4004/qa-guideAll pages listed
How: Scroll through page list
Expected: Every route in the app has its own section with tests
Status badges correct
How: Check PASS/FAIL/BLOCKED badges on each test
Expected: Realistic status reflecting actual implementation state
Quick reference table
How: Scroll to Quick Reference URLs section
Expected: Table with every page, URL, and what to check
Quick Reference — All URLs
| Page | URL | Tests | Pass | Key Focus |
|---|---|---|---|---|
| Homepage | localhost:4004/ | 6 | 100% | Main landing page with hero section, stats counter, feature ... |
| Features | localhost:4004/features | 3 | 100% | Detailed feature showcase with module cards for Student Mana... |
| Pricing | localhost:4004/pricing | 5 | 100% | Three-tier pricing page: Maktab ($19), Madrasa ($59), Jamia ... |
| About Us | localhost:4004/about | 3 | 100% | Heritage timeline (750 CE to 2024), mission statement, and t... |
| Blog & Resources | localhost:4004/blog | 3 | 100% | Blog listing page with featured article, category filters, a... |
| Contact | localhost:4004/contact | 5 | 40% | Contact form with name, email, phone, subject, message field... |
| Demo / Showcase | localhost:4004/demo | 2 | 100% | Product showcase page with screenshots/previews of the dashb... |
| Admin Dashboard | localhost:4004/admin | 7 | 86% | Main admin overview with 4 KPI cards (Students, Hifz, Fees, ... |
| Admin — Students | localhost:4004/admin/students | 9 | 33% | Student management with DataTable (admission no, name, class... |
| Admin — Hifz Tracker | localhost:4004/admin/hifz | 5 | 40% | Quran memorization tracker with student progress cards: juz ... |
| Admin — Fees | localhost:4004/admin/fees | 7 | 57% | Fee management with fee structures list, invoice table, expe... |
| Admin — Attendance | localhost:4004/admin/attendance | 8 | 50% | Daily attendance marking with class selector, student checkl... |
| Admin — Exams | localhost:4004/admin/exams | 5 | 40% | Exam management with exam list (upcoming + completed), sched... |
| Admin — Staff & HR | localhost:4004/admin/staff | 5 | 60% | Staff directory table, role badges, leave request list, and ... |
| Admin — Communications | localhost:4004/admin/communications | 5 | 60% | Notice board with notices list, compose form, message templa... |
| Admin — Classes | localhost:4004/admin/classes | 4 | 50% | Academic year and class/section management with year selecto... |
| Admin — Reports | localhost:4004/admin/reports | 5 | 60% | Analytics dashboard with KPI cards, monthly fee collection c... |
| Admin — Billing | localhost:4004/admin/billing | 7 | 71% | SaaS subscription management: Overview tab (plan, KPIs, usag... |
| Admin — Settings | localhost:4004/admin/settings | 4 | 75% | Tenant settings with tabbed sections: School Info, Branding,... |
| Teacher Dashboard | localhost:4004/teacher | 5 | 80% | Teacher portal: 4 KPIs (My Students: 86, Attendance: 91%, Hi... |
| Student Dashboard | localhost:4004/student | 5 | 100% | Student portal: 4 KPIs (Hifz: 18/30, Attendance: 94%, Exams:... |
| Accountant Dashboard | localhost:4004/accountant | 5 | 100% | Accountant portal: 4 KPIs (Revenue: 48,200, Outstanding: 8,4... |
| Architecture Review | localhost:4004/architecture-review | 5 | 100% | Internal page: all identified issues (7 critical, 9 medium, ... |
| QA Guide (this page) | localhost:4004/qa-guide | 3 | 100% | This page — page-by-page QA guide with test instructions, st... |