Hostel Admin Console
Refine + Ant Design console for hostel operations and finance teams.
Role · Frontend engineer — migration to Refine, access control and the API layer.
- 16
- Pages migrated
- 35
- API modules
- 20+
- Modules
- CF Pages
- Hosting
Overview
The rewritten staff and admin frontend for the hostel management system. Sixteen legacy pages were migrated onto Refine with Ant Design, adding finance views for payments, refunds, autopay and failure analytics, organisation management, activity history, Excel export and guided tours.
Architecture
Refine resources
Each resource maps to a backend endpoint with list, show, create and edit views.
Access-control provider
Gates routes and actions by the same permission names the API enforces.
Deployment
Cloudflare Pages with environment-based API configuration.
What it does
Operations
- Dashboard, students and bookings
- Inbox, activity and history
- Public booking-preview page
Finance
- Payments, refunds and autopay
- Payment-failure analytics
- Discounts and scholarships
Organisation
- Academic years, hostels, campuses and courses
- Bed types, groups and team / staff
Access
- Token authentication
- Access-control provider mirroring the backend's permission model
- Admin role handling and academic-year scoping on every request
Productivity
- Excel export with SheetJS
- Recharts analytics
- driver.js guided product tours
Engineering decisions
Permission parity
Mirroring the backend's permission names in the access-control provider keeps the UI honest with the API.
Migrating without downtime
Pages moved one by one from the legacy UI with a task ledger tracking feature parity.