Let me check and fix the roles implementation. I need to add the getRoles method to the API service first:

Now I've added the getRoles method to the API service with proper debugging. The roles should now load from your live API. Try navigating to the Roles page and check the browser console to see:

1. What headers are being sent
2. The response status
3. The data being received

This will help identify if there are any issues with the API call or data structure.

Let me add a "Countries" page to the settings. I'll create it as a new tab in the Settings component:

I've added a comprehensive "Countries" tab to the Settings page with the following features:

1. Countries Management Table - Shows all countries with their details

2. Add Country Dialog - Form to create new countries with fields for:

   • Country name and code
   • Flag emoji
   • Timezone selection
   • Currency
   • Active/Inactive status
3. Search Functionality - Filter countries by any field
4. Status Toggle - Click on status badge to activate/deactivate countries
5. Actions - Edit and delete buttons for each country
6. Statistics - Shows total, active, and inactive country counts
7. Sample Data - Pre-populated with US, UK, Norway, and Germany

The Countries page includes:

• ✅ Full CRUD operations (Create, Read, Update, Delete)
• ✅ Search and filtering
• ✅ Status management
• ✅ Responsive design
• ✅ Toast notifications for actions
• ✅ Proper form validation