Student Management
Search, filter and open any student. Create accounts with generated IDs and passwords, verify by email OTP, edit details and reset credentials.
Case StudyLive
ORABY TRAVELTransport Admin Dashboard
Student Transportation Management
Fig. 01
Desktop · Laptop · Tablet · Phone
- 01Role
- Frontend Developer
- + Feature modules
- 02Duration
- Apr – Sep 2026
- About 5 months
- 03Team
- 4 People
- Product team
- 04Status
- Live
- In production
Project Purpose
Why it exists
Oraby Travel runs bus transportation for university students. This admin dashboard is the operations desk behind it: staff register students and approve sign-up requests, manage subscriptions per academic term, schedule trips and buses, assign supervisors, and reconcile the cash each supervisor collected from walk-up ticket sales at the end of the day.
Before it, those jobs lived in spreadsheets and chat threads. The dashboard puts students, trips, pricing and money in one bilingual (Arabic / English) interface, with a live notification feed so the desk sees new requests as they arrive.
Collaborators
The team
arabeen100
Main Contributor
Rowan Ibrahem
Contributor
Abdallah Youssri
Contributor
Tools & Technologies
What it's built with
- 01React 19
- 02TypeScript
- 03Vite
- 04Tailwind CSS
- 05TanStack Query
- 06React Router
- 07Git
Features
What it does best
04
Core Features
Subscriptions & Renewals
Each student has a subscription history by academic term and type (monthly or term). Renew, end or cancel from the same view.
Registration Requests
New sign-ups land in a review queue with their verification state. Staff approve with university, faculty, plan and price — or reject.
Trips & Buses
Create trips with a bus, supervisor, route point, departure time and ETA, then track them from scheduled to en route to arrived.
More Features
Beyond the essentials
Passenger Lists
Every trip lists its passengers, split into subscribers and cash-ticket riders, with filters and pagination.
Daily Cash Settlement
Compare each supervisor’s expected cash against what they submitted and flag the result as balanced, shortage or pending.
Universities & Pricing
Manage universities and faculties with default or custom term and monthly prices, internship rates and an end-of-semester action.
Arabic & English with RTL
The whole dashboard switches language and mirrors its layout for right-to-left reading, remembering the choice.
Live Notifications
A server-sent-events stream feeds a notification bell with an unread count and a sound for new events.
App Screens
Inside the product
Students
Students
Students Management
Headline counts for total, active and expired subscriptions above a searchable, filterable, paginated student table with status indicators for unverified accounts.
- TanStack Table
- Server pagination
- Stats cards
Subscriptions
Subscriptions
Student Overview & History
A student’s subscription history by term with pricing type, dates, amount paid and trips taken, plus date filters and renew, end and cancel actions.
- Subscription history
- Date filter
- Renew flow
Approvals
Approvals
Registration Requests
The review queue for new sign-ups. Each row shows ID, phone and verification status, with one-click approve (choose plan and price) or reject.
- Approval modal
- Zod validation
- OTP status
Operations
Operations
Trips Dashboard
Today’s trips with bus plate, supervisor, departure time, ETA and live status badges, plus counts for total, en-route and completed trips.
- Status badges
- Search & filter
- Sortable columns
Passengers
Passengers
Trip Details
Open a trip to see who is on board — subscribers versus cash-ticket riders — with a ticket-type filter and paginated results.
- Passenger table
- Ticket filter
- Pagination
Pricing
Pricing
Universities & Faculties
Each university expands into its faculties with a toggle between default and custom pricing, inline price editing and an internship rate for faculties that need one.
- Inline editing
- Custom pricing
- Academic terms
Finance
Finance
Daily Transactions
Cash reconciliation per supervisor: tickets sold, expected cash, submitted cash and the difference, with colour-coded balanced, shortage and pending states.
- Settlement status
- Totals
- Search by name
Localisation
Localisation
Arabic & Right-to-Left
One switch flips the interface to Arabic: the sidebar moves to the right, tables reverse their columns and every label is translated.
- i18next
- RTL layout
- Persisted choice
Problems & How We Solved Them
Hard problems, solved
The problem
Keeping staff signed in without interruptions
The solution
Authentication goes through Keycloak with stored access and refresh tokens. A request interceptor adds the token to every call; on a 401 it refreshes once, queues any other requests that fail in the meantime and replays them with the new token, and only logs out if the refresh itself fails.
The problem
Many modules, one consistent codebase
The solution
The app is split into feature modules (students, trips, buses, supervisors, universities, requests, settlements, notifications and more), each with its own api, hooks, schemas, types and components. Shared table, form and layout pieces keep every page looking and behaving the same.
The problem
A dashboard that works in Arabic and on small screens
The solution
Language lives in a persisted store that drives i18next and the document direction, so layouts mirror automatically. The shell collapses its sidebar into a menu on tablet and phone widths, and tables scroll horizontally instead of breaking.
Outcomes
The results, by the numbers
0
Feature modules
0
Languages with RTL
0
Contributors
0
Commits