( - Component: ComponentType
, - options: UseAuthorizationOptions -): ComponentType
-```
-
----
-
-## Troubleshooting
-
-### Issue: "Page still makes API calls before redirect"
-**Solution**: Ensure effects depend on `isAuthorized`:
-```tsx
-useEffect(() => {
- if (isAuthorized) {
- fetchData();
- }
-}, [isAuthorized]);
-```
-
-### Issue: "Loading spinner flashes too quickly"
-**Solution**: This is normal behavior - authorization should be fast.
-
-### Issue: "TypeScript errors with HOC"
-**Solution**: Ensure component function is declared before export:
-```tsx
-function MyPage() { /* ... */ }
-export default withAuthorization(MyPage, { /* ... */ });
-```
-
----
-
-## Related Files
-
-- `/src/hooks/useAuthorization.ts` - Authorization hook implementation
-- `/src/components/auth/withAuthorization.tsx` - HOC implementation
-- `/src/components/auth/RoleGuard.tsx` - Legacy component (uses hook internally)
-- `/src/lib/userService.ts` - Permission checking logic
-- `/src/types/auth.ts` - Type definitions
-
----
-
-## Support
-
-For questions or issues:
-1. Check this guide first
-2. Review example implementations in `/app/users/page.tsx` and `/app/organisations/page.tsx`
-3. Consult `/src/hooks/useAuthorization.ts` for hook details
-4. Refer to RBAC documentation for role configuration
diff --git a/BEFORE_AFTER_COMPARISON.md b/BEFORE_AFTER_COMPARISON.md
deleted file mode 100644
index 61a1c55..0000000
--- a/BEFORE_AFTER_COMPARISON.md
+++ /dev/null
@@ -1,342 +0,0 @@
-# Before & After: Authorization Fix Comparison
-
-## Visual Flow Comparison
-
-### ❌ BEFORE (RoleGuard with useEffect)
-
-```
-User navigates to /users
- ↓
-Component renders immediately
- ↓
-useEffect runs → API calls fire
- ├─ /api/cities ❌ (403 Error)
- └─ /api/users ❌ (403 Error)
- ↓
-Headers render ⚠️
-Breadcrumbs render ⚠️
- ↓
-Toast errors appear 🔴
- ↓
-useEffect in RoleGuard checks auth
- ↓
-Redirect to /access-denied
-```
-
-**Result**: User sees flashing content, errors, and bad UX
-
----
-
-### ✅ AFTER (useAuthorization Hook)
-
-```
-User navigates to /users
- ↓
-useAuthorization hook runs
- ↓
-Authorization check (synchronous)
- ├─ isChecking = true
- └─ Shows loading spinner only
- ↓
-Authorization fails
- ├─ isAuthorized = false
- ├─ isChecking = false
- └─ Redirects immediately
- ↓
-User sees /access-denied
-```
-
-**Result**: Clean redirect, no errors, professional UX
-
----
-
-## Code Comparison
-
-### Users Page (Complex Page with API Calls)
-
-#### ❌ BEFORE
-```tsx
-'use client';
-import RoleGuard from '@/components/auth/RoleGuard';
-
-export default function UsersPage() {
- const [users, setUsers] = useState([]);
-
- // ⚠️ Runs immediately, before auth check!
- useEffect(() => {
- fetchLocations(); // ❌ API call
- }, []);
-
- useEffect(() => {
- fetchUsers(); // ❌ API call
- }, [currentPage]);
-
- return (
- Users
-