feat: Implement a structured API service layer for authentication and user management, replacing the old API utility.

src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { api, type User } from '@/lib/api';
+import { usersService, User } from '@/services';
 import Link from 'next/link';
 
 export default function DashboardPage() {
@@ -21,7 +21,7 @@ export default function DashboardPage() {
   const fetchDashboardData = async () => {
     setIsLoading(true);
     try {
-      const response = await api.getUsers(1, 100);
+      const response = await usersService.getUsers({ page: 1, limit: 100 });
       const users = response.users || [];
       setStats({
         totalUsers: response.total || 0,

src/app/dashboard/users/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { api, type User } from '@/lib/api';
+import { usersService, User, getErrorMessage } from '@/services';
 
 export default function UsersPage() {
   const router = useRouter();
@@ -21,12 +21,13 @@ export default function UsersPage() {
     setIsLoading(true);
     setError('');
     try {
-      const response = await api.getUsers(currentPage, limit);
+      const response = await usersService.getUsers({ page: currentPage, limit });
       setUsers(response.users || []);
       setTotalUsers(response.total || 0);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch users');
-      if (err instanceof Error && err.message.includes('Unauthorized')) {
+      const errorMessage = getErrorMessage(err);
+      setError(errorMessage);
+      if (errorMessage.includes('Unauthorized')) {
         router.push('/login');
       }
     } finally {