Building Role-Based Dashboards in React Native with Expo

1. Introduction

Week 2 focused on moving HireRosterly Mobile beyond the authentication foundation and into the main application experience. The frontend now separates Admin, HR and Employee experiences using Expo Router route groups, authentication state and role-aware redirects. Where backend endpoints were unavailable, workflows were built around mock data and service boundaries so temporary data can later be replaced without rewriting the UI.

2. Role-Based Application Structure

The application now has dedicated route groups for Admin, HR and Employee dashboards. After login, the authenticated user’s role determines the dashboard opened. This keeps role-specific screens isolated and reduces the risk of showing one role’s workflow inside another panel.

3. Admin Dashboard

The Admin workflow focuses on HR registration requests. The request screen displays HR applicants, status, organization and request date. Approve and Reject actions are wired through a service layer and currently use mock data. The structure is API-ready so backend request and approval endpoints can replace the mock implementation later.

4. HR Dashboard

The HR workflow provides a dedicated dashboard for employee-related management and a Holidays section. Navigation is prepared for employee requests and holiday management. The holiday workflow is structured on the frontend and will be connected to the real create/list APIs once available.

5. Employee Dashboard

The Employee dashboard is separated from the Admin and HR panels and currently focuses on the holiday experience. The intended flow is that holidays created by HR will later be retrieved through an API and displayed to employees.

6. Authentication & Route Protection

The authentication flow carries the user’s role through application state. Admin, HR and Employee users are redirected to their respective dashboard groups. Logout clears authentication state and returns the user to the login flow. Mock credentials and tokens were used during development where backend availability was limited.

7. Reusable Components & API-Ready Architecture

DashboardHeader, SectionHeader, EmptyState and StatusBadge were introduced to keep dashboard screens consistent and maintainable. Mock data is isolated from UI components, while service functions act as the integration boundary. The next integration phase can therefore replace data sources without redesigning screens.

8. Responsive & Modern UI

The dashboards use a mobile-first card layout, clear hierarchy, status badges, touch-friendly actions, consistent spacing and shared color constants. The screens were also tested through Expo web, helping identify platform-specific navigation and storage behavior.

9. Challenges & Learnings

The week included practical challenges: backend availability was limited for some workflows, Expo web exposed platform-specific secure-storage behavior, and role-based navigation required careful handling of Expo Router group paths. These issues reinforced the importance of separating authentication state, navigation and API/data layers.

10. Git & Delivery Workflow

Development remained organized around feature-based structures and reusable components. Dashboard work was kept compatible with the authentication foundation, allowing frontend and backend workstreams to progress independently until the required API contracts are available.

11. Next Development Plan

The next milestone is to remove temporary mock data and connect the real APIs. Planned work includes the HR request list, Approve/Reject actions, HR employee list, Add Holiday and View Holiday APIs, employee holiday retrieval, and the Employee signup requirement for selecting an HR. Authentication and token handling will also be validated against the final backend contract.

12. Conclusion

Week 2 established the core role-based application experience for HireRosterly Mobile. Admin, HR and Employee dashboards are now separated, navigable and API-ready, with reusable UI components and temporary mock services supporting development. The next step is to replace those mock services with backend APIs and validate the complete Admin → HR → Employee workflow end to end.

Author: Hassan Shafique

Leave a Reply

Your email address will not be published. Required fields are marked *