I'll help you create a modern area codes data table component with all the requested features. Let me first explore the codebase structure to understand what components and utilities are available.

I can see this is a clean Next.js project with shadcn/ui components available. Now I'll create a comprehensive area codes component with all the requested features including API fetching, search, filtering, sorting, and responsive design.

I've created a comprehensive area codes data table component that meets all your requirements. The component features a modern, responsive design with summary cards showing total workers and area codes, a searchable and sortable table, filtering options, loading states, error handling, and a refresh button. The table is fully responsive and uses proper authentication headers for the API endpoint, with clean styling using shadcn/ui components and Tailwind CSS.

I can see there's a "Failed to fetch" error in your area codes dashboard. Let me examine the current code to identify and fix the issue.

I can see the issue. The API call is likely failing due to CORS restrictions when making requests from the browser to the external API. Let me create a Next.js API route to proxy the request server-side, which will avoid CORS issues.

I've fixed the API fetch error by creating a Next.js API route that acts as a proxy to the external API. This solves the CORS issue by making the external API call from the server-side instead of the browser. The component now calls the internal /api/area-codes endpoint, which handles the authentication and external API communication securely.