Today, I implemented complete permission-based access control for the Station Details Panel feature. The work involved three main areas: backend permission configuration, database migration, and frontend integration.
Backend Implementation: Added six granular permission constants in the SystemPermissions.cs (userPermission.cs) to control access to each tab individually - Overview, Sessions, Revenue, Performance, Reseller, and Service. These permissions follow the naming convention stations.station-detail-panel.{tabname} and are now available for role-based assignment across the system.
Database Migration: Created a comprehensive SQL migration script (V0046) that automatically provisions these six permissions across all tenant schemas in the database. The script intelligently loops through each tenant_* schema, checks for existing permissions to avoid duplicates, and assigns them to both the System Admin user and Admin role.
Frontend Integration: Implemented permission checks throughout the Station Details Panel component using the useApiPermissions hook. Each tab now conditionally renders based on the user's permissions, and data fetching operations are guarded to prevent unauthorized API calls when a user lacks access to specific tabs. Added "No Permission" fallback UI that displays when a user has no access to any tab . Also fixed a critical tab index mismatch issue where the Service tab was not rendering correctly when it was the only visible tab.
resolved tab index mismatch issue where the Service tab was not rendering correctly when it was the only visible tab. Fixed by correcting serviceTabIndex to return the actual index (5) instead of the visual index, ensuring proper tab rendering in all permission scenarios.