diff --git a/astro.config.mjs b/astro.config.mjs index 85e1df58..97a95ce0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -51,9 +51,11 @@ export default defineConfig({ { label:'Frontend Tutor-Times Requirements', link: '/frontend/tutor-times/tutor-times-requirements', + }, + { + label: 'Tutor Time Dashboard', + link: '/frontend/tutor-time-dashboard', } - - ], }, diff --git a/public/tutor-time-dashboard.png b/public/tutor-time-dashboard.png new file mode 100644 index 00000000..edf1d71c Binary files /dev/null and b/public/tutor-time-dashboard.png differ diff --git a/src/content/docs/frontend/tutor-times/tutor-time-dashboard.md b/src/content/docs/frontend/tutor-times/tutor-time-dashboard.md new file mode 100644 index 00000000..7c6828e0 --- /dev/null +++ b/src/content/docs/frontend/tutor-times/tutor-time-dashboard.md @@ -0,0 +1,43 @@ +--- +title: Tutor Time Dashboard +--- + +## Team Member +Wael Alahmadi | 223837765 + +## Component Name & Files +- tutor-time-dashboard.component.ts +- tutor-time-dashboard.component.html +- tutor-time-dashboard.component.css + +## Purpose +The Tutor Time Dashboard provides tutors with a clear and accessible interface to view and manage their teaching sessions. +It helps instructors by offering: +- Session start and end times +- Calculated session durations +- Associated unit or project information +- Pagination and sorting for large data sets +- A responsive design that adapts to desktop, tablet, and mobile devices + +## Outcomes and Interactions +✅ Sessions displayed in a structured tabular view +✅ Sorting by clicking on column headers +✅ Pagination for navigating through session records +✅ Responsive layout for multi-device usability + +## Visual References +![Tutor Time Dashboard Screenshot](/public/tutor-time-dashboard.png) + +## Review Checklist +- [x] Dashboard layout renders correctly +- [x] Session start and end times are displayed +- [x] Durations calculated and shown +- [x] Associated unit is shown +- [x] Pagination works as expected +- [x] Sorting works as expected +- [] Responsive design verified on multiple devices + +## Notes +This documentation describes the Tutor Time Dashboard implemented in the frontend (`doubtfire-web`). +It introduces a new view accessible at `/tutor-times` and was developed as a frontend-only feature, using mock data for demonstration purposes. +To complete this feature and integrate it fully into the project, a backend (`doubtfire-api`) data service must be implemented and the frontend updated accordingly to connect with the live data source.