Skip to content

feat(rbac): add role request access flow and admin review UI

Lakshy Yarlagadda requested to merge feat/requestrole into develop

🚀 Overview

This Merge Request introduces a Role-Based Access Control (RBAC) Request System, allowing users to request elevated roles (Admin, Coordinator, Volunteer, Doctor) through a structured and auditable workflow.

It also includes:

  • Dashboard navigation improvements using URL state
  • Layout and scrolling fixes
  • Extensive internationalization (i18n) updates

🎯 Motivation

Previously, there was no formal mechanism for users to request role upgrades. Role assignment was handled manually by admins without visibility or tracking.

This MR addresses that gap by:

  • Providing a transparent request/approval workflow
  • Enabling self-service role requests for users
  • Giving admins a centralized interface to review and manage requests

🛠️ What This MR Does

✅ Role Request System

  • Adds a Role Access Panel for users to:
    • View current role status
    • Submit role requests
    • Track request progress
  • Adds an Admin Review Interface:
    • View pending requests
    • Approve or reject requests
    • Filter and manage requests efficiently

🔄 Dashboard Improvements

  • Refactored dashboard navigation to use URL query params (?role=...)
  • Ensures:
    • State persistence on refresh
    • Shareable links for role-specific views
    • Better browser navigation (back/forward)

🎨 UI/UX Enhancements

  • Standardized UI using updated Shadcn components:
    • Button, Card, Dialog, Badge, etc.
  • Improved layout consistency across pages
  • Fixed double scrollbar issues
  • Sidebar and main content now scroll independently

🌍 Internationalization (i18n)

  • Added comprehensive translations (~1500+ lines) across:
    • English (en)
    • Hindi (hi)
    • Telugu (te)
  • Ensured all new UI text is properly localized

⚙️ Technical Details

🧠 Architecture Decisions

1. URL as Source of Truth

  • Dashboard state controlled via query params (?role=...)
  • Prevents local state mismatch and improves UX

2. TanStack Query for Server State

  • Used useQuery and useMutation
  • Aggressive cache invalidation ensures:
    • Immediate UI updates after approval/rejection
    • No full page reloads required

3. Decoupled Role Requests

  • Role requests handled via separate API entity
  • User role updated only after admin approval

🔁 Data Flow

User submits request → POST /role-requests Admin fetches → GET /role-requests?status=pending Admin reviews → PATCH /role-requests/:id → Backend updates user role

📦 Changes Made

🆕 New Components

  • src/components/shared/RoleAccessPanel.tsx – User interface for role requests

✏️ Modified Files

  • src/pages/DashboardPage.tsx – URL-based role switching
  • src/pages/admin/AssignRolesPage.tsx – Added "Role Requests" tab
  • src/components/AppLayout.tsx – Fixed scrolling and layout issues

🔌 API & Types

  • Added APIs:
    • createRoleRequest
    • getMyRoleRequests
    • getRoleRequests
    • reviewRoleRequest
  • Added types:
    • RoleRequest
    • RoleRequestStatus

🌍 i18n

  • Large-scale updates to translation files (en, hi, te)

⚖️ Trade-offs

  • Slight increase in bundle size due to:
    • Updated dependencies
    • Additional UI components

👉 However, this is justified by:

  • Improved modularity
  • Better developer experience
  • Consistent UI architecture

🧪 Testing Done

✅ Manual Testing

  • End-to-end role request lifecycle tested

✅ Unit Tests

  • Added/updated tests for RBAC components

📋 Test Scenarios

Scenario Expected Result Status
User submits request Appears as "Pending" in user & admin views ✅
Admin rejects request Status updates; user can re-request ✅
Dashboard tab switch URL updates and persists on refresh ✅
Layout scroll No double scrollbars; smooth UX ✅

🏷️ Type of Change

  • ✨ New feature
  • 🎨 UI/UX improvement
  • 🐛 Bug fix
  • ♻️ Refactor
  • 🧪 Test update

🔗 Related Issues

Closes:# https://code.swecha.org/healthcare/medical-camp/ehrs-meta/-/issues/47

🧑‍💻 How to Validate Locally

git checkout feat/requestrole npm install npm run dev

🔍 Validation Steps

  1. Login as a normal user
  2. Go to Dashboard → Request Access
  3. Submit a role request (e.g., Doctor)
  4. Login as Admin
  5. Navigate to Admin → Assign Roles → Role Requests
  6. Approve the request
  7. Verify updated role on user side

⚠️ Known Limitations

  • Only one pending request per user (intentional)
  • package-lock.json has large changes due to dependency sync (verified working)

📝 Additional Notes

This MR lays the foundation for the upcoming Provider Onboarding feature by establishing a robust role verification and approval system.

Edited by Lakshy Yarlagadda

Merge request reports