docs/user interfaces.md

\documentclass[12pt]{article}
\usepackage[margin=1in]{geometry}
\usepackage{graphicx}
\usepackage{hyperref}
\usepackage{enumitem}
\usepackage{setspace}
\setstretch{1.1}

\begin{document}

\title{User Interface Pages}
\author{Interactive Platform for Learning and Reciting Qur'an}
\date{June 5, 2026}
\maketitle

This document describes the main pages in the application, their purpose, features, visible elements, functions, and the reasons they exist.

\section{Landing Page}

\subsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Provide a welcoming entry point for visitors.
  \item Help users choose their role and language.
  \item Present the platform’s value proposition clearly.
\end{itemize}

\subsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Role selection for students, sheikhs, and admins.
  \item Language switching support.
  \item Quick call-to-action for signing in or registering.
\end{itemize}

\subsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Header with logo and navigation links.
  \item Role switcher or sign-in call-to-action.
  \item Language switcher.
  \item Main hero section with short product explanation.
  \item Buttons for student, sheikh, and admin flows.
\end{itemize}

\subsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Guide users to the correct authentication or dashboard path.
  \item Allow users to switch language quickly.
  \item Explain what the platform offers.
\end{itemize}

\subsection*{Why}
\begin{itemize}[leftmargin=*]
  \item First impressions matter: a strong landing page increases trust and lowers abandonment.
  \item It helps users self-select the correct path, reducing confusion.
\end{itemize}

\subsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/landing-page.png}
  \caption{Landing page mockup}
  \label{fig:landing-page}
\end{figure}

\section{Authentication Pages}

\subsection{Sign In}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Authenticate returning users.
  \item Provide quick access to the platform.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Credential input and validation.
  \item Password recovery link.
  \item Redirect to role-specific dashboard.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Email/phone input.
  \item Password input.
  \item Sign-in button.
  \item Links for registration and password reset.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Validate credentials.
  \item Redirect authenticated users to their dashboard.
  \item Provide recovery options if access is lost.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Secure access is essential for personal learning and session scheduling.
  \item It separates protected content from public pages.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/sign-in-page.png}
  \caption{Sign in page mockup}
  \label{fig:sign-in-page}
\end{figure}

\subsection{Register}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Create new user accounts for students and sheikhs.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Account creation for different user roles.
  \item Role-specific onboarding path.
  \item Easy transition to sign in after registration.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Name, email, password inputs.
  \item Role selection (student or sheikh).
  \item Register button.
  \item Link to sign in page.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Collect account information.
  \item Create a new user profile.
  \item Onboard new users into the system.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Registration is the first step in enabling personalized learning journeys.
  \item It allows the platform to manage users and their sessions.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/register-page.png}
  \caption{Registration page mockup}
  \label{fig:register-page}
\end{figure}

\subsection{Forgot Password / Reset Password / Verify OTP}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Support account recovery and validation.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Recover access by email or OTP.
  \item Verify user identity.
  \item Reset password securely.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Email or phone input for recovery.
  \item OTP verification interface.
  \item New password form.
  \item Submit button.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Trigger password reset emails or OTP codes.
  \item Verify user identity before allowing account changes.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Account recovery protects users from being locked out.
  \item OTP verification adds an extra layer of security.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/forgot-password-page.png}
  \caption{Password recovery and OTP verification page mockup}
  \label{fig:forgot-password-page}
\end{figure}

\section{Dashboard Pages}

\subsection{Student Dashboard}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Give students a central place for tracking sessions, teachers, and practice.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Summary of upcoming sessions.
  \item Quick links to practice and profile.
  \item Status badges and progress indicators.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Upcoming session cards.
  \item Quick access links to practice and profile.
  \item Status indicators for waiting rooms and session history.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Show session summaries and progress.
  \item Let students enter live sessions or book a teacher.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item A dashboard improves engagement by surfacing the most important actions.
  \item It helps students stay organized and motivated.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/student-dashboard.png}
  \caption{Student dashboard mockup}
  \label{fig:student-dashboard}
\end{figure}

\subsection{Sheikh Dashboard}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Help instructors manage availability, sessions, and student relationships.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Availability scheduling controls.
  \item Session management overview.
  \item Student roster access.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Availability controls.
  \item Session schedule overview.
  \item Student list or profile links.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Allow sheikhs to update availability.
  \item Provide easy access to live session controls.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Sheikhs need a dedicated workspace to manage teaching effectively.
  \item It supports scheduling and communication with students.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/sheikh-dashboard.png}
  \caption{Sheikh dashboard mockup}
  \label{fig:sheikh-dashboard}
\end{figure}

\subsection{Admin Dashboard}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Enable administrators to oversee users, sessions, and approvals.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item User approval workflows.
  \item Request and alert management.
  \item Platform analytics summaries.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item User management tools.
  \item Approval request panels.
  \item System metrics or notifications.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Approve or reject sheikh requests.
  \item Manage accounts and platform settings.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Admins keep the platform safe and organized.
  \item They enforce quality and ensure teacher/student matching works.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/admin-dashboard.png}
  \caption{Admin dashboard mockup}
  \label{fig:admin-dashboard}
\end{figure}

\section{Session Pages}

\subsection{Find Sheikh}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Help students search and choose a sheikh.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Search and filter available teachers.
  \item Compare profiles and availability.
  \item Booking controls for sessions.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Search field.
  \item Filter controls (availability, subject, rating).
  \item Teacher profile cards.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Search and filter available sheikhs.
  \item Open teacher details and schedule a session.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Matching students with the right teacher is core to the learning experience.
  \item A clear selection page reduces friction in booking.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/find-sheikh-page.png}
  \caption{Find Sheikh page mockup}
  \label{fig:find-sheikh-page}
\end{figure}

\subsection{My Sessions}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Show a student’s current and past sessions.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Upcoming and completed session summaries.
  \item Join session actions.
  \item Report and feedback links.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Upcoming session list.
  \item Session status labels.
  \item Links to join or view reports.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Display session history and next meeting details.
  \item Allow entry into live sessions from the list.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Tracking sessions helps learners keep commitments and review progress.
  \item It centralizes all session-related actions.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/my-sessions-page.png}
  \caption{My Sessions page mockup}
  \label{fig:my-sessions-page}
\end{figure}

\subsection{Live Session / Waiting Room}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Provide the real-time classroom environment and access control.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Video/audio interaction controls.
  \item Participant and chat views.
  \item Session status updates.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Video/audio controls.
  \item Chat or participant list.
  \item Session status indicator.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Enable live audio/video interactions.
  \item Manage entry to the session through waiting room controls.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Live interaction is the core of recitation practice.
  \item The waiting room ensures sessions start smoothly and securely.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/live-session-page.png}
  \caption{Live Session and Waiting Room mockup}
  \label{fig:live-session-page}
\end{figure}

\subsection{Session End Waiting / Session Report}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Summarize completed sessions and gather feedback.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Session score and notes display.
  \item Feedback collection.
  \item Navigation back to dashboard or next booking.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Session summary text.
  \item Performance metrics or notes.
  \item Buttons to return to dashboard or schedule more sessions.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Present outcome details after the session ends.
  \item Store session notes and progress data.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Reflection after a session improves learning retention.
  \item Reports help students and sheikhs track improvements.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/session-report-page.png}
  \caption{Session report page mockup}
  \label{fig:session-report-page}
\end{figure}

\section{Practice and Feedback Pages}

\subsection{Recording Practice}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Let students practice recitation and record themselves.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Recording session controls.
  \item Review and playback.
  \item Save or submit recordings.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Recording controls.
  \item Playback interface.
  \item Save or submit buttons.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Record audio sessions.
  \item Play back recordings for self-review.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Self-practice is essential for skill improvement.
  \item Recordings let students hear their own recitation and progress.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/recording-practice-page.png}
  \caption{Recording practice page mockup}
  \label{fig:recording-practice-page}
\end{figure}

\subsection{Evaluation Reports}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Deliver feedback on recitation practice and performance.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Visual scorecards and comments.
  \item Recommended next steps.
  \item Historical evaluation access.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Scorecards or evaluation results.
  \item Detailed comments from sheikhs.
  \item Recommended next steps.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Show practice evaluation outcomes.
  \item Help learners understand strengths and areas to improve.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Feedback makes learning measurable and actionable.
  \item It supports continuous improvement and motivation.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/evaluation-reports-page.png}
  \caption{Evaluation reports page mockup}
  \label{fig:evaluation-reports-page}
\end{figure}

\section{Profile and Management Pages}

\subsection{Profile Page}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Let users view and update their personal information.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Profile editing and preferences.
  \item Language and contact settings.
  \item Role-specific information display.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Personal details form.
  \item Profile photo or avatar field.
  \item Contact information and preferences.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Edit and save profile data.
  \item Change language or notification preferences.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item A complete profile helps tailor the platform experience.
  \item It keeps user data accurate for communication and scheduling.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/profile-page.png}
  \caption{Profile page mockup}
  \label{fig:profile-page}
\end{figure}

\subsection{User Management / Sheikh Approval / My Students}

\subsubsection*{Purpose}
\begin{itemize}[leftmargin=*]
  \item Manage the community and verify teacher qualifications.
\end{itemize}

\subsubsection*{Features}
\begin{itemize}[leftmargin=*]
  \item Approval or rejection workflows.
  \item Student roster management.
  \item User detail review.
\end{itemize}

\subsubsection*{Elements}
\begin{itemize}[leftmargin=*]
  \item Lists of users or requests.
  \item Action buttons for approve/reject.
  \item Detail views for each user or student.
\end{itemize}

\subsubsection*{Functions}
\begin{itemize}[leftmargin=*]
  \item Enable admins to approve new sheikhs.
  \item Let sheikhs manage their student roster.
\end{itemize}

\subsubsection*{Why}
\begin{itemize}[leftmargin=*]
  \item Governance pages maintain platform trust and quality.
  \item They ensure only qualified teachers join and that student relationships are organized.
\end{itemize}

\subsubsection*{Image}
\begin{figure}[h!]
  \centering
  \includegraphics[width=0.7\textwidth]{images/user-management-page.png}
  \caption{User management and approval page mockup}
  \label{fig:user-management-page}
\end{figure}

\section*{Summary}

Each page in the application exists to support a specific user need: authentication, learning, teaching, scheduling, monitoring, and feedback. The user interface elements are chosen to make those needs easy to accomplish, while the functions behind the pages keep the platform secure, usable, and focused on effective Qur'an learning.

\end{document}