Skip to main content

Admin Dashboard API Integration

How the admin dashboard integrates with the backend API.

API Configuration​

Location: src/config/api.ts

Defines all API endpoints and base configuration:

export const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';

export const API_ENDPOINTS = {
  USERS: '/api/admin/users',
  USER_PROFILE: (userId: string) => `/api/admin/users/${userId}`,
  UPDATE_USER_STATUS: (userId: string) => `/api/admin/users/${userId}/status`,
  // ... more endpoints
};

API Utility​

Location: src/utils/api.ts

Axios instance configured with:

  • Base URL
  • Default headers
  • Request/response interceptors
  • Error handling

Making API Calls​

GET Request​

const response = await api.get(API_ENDPOINTS.USERS);
const users = response.data.users;

POST Request​

await api.post(API_ENDPOINTS.SERVICES, {
  name: 'Service Name',
  // ...
});

PUT Request​

await api.put(API_ENDPOINTS.CATEGORY(categoryId), {
  name: 'Updated Name',
  // ...
});

With Query Parameters​

const response = await api.get(API_ENDPOINTS.USERS, {
  params: { role: 'PROVIDER', status: 'ACTIVE' }
});

Authentication​

Admin endpoints require API key authentication:

// Set in API utility
headers: {
  'x-api-key': API_KEY,
}

Error Handling​

try {
  await api.put(endpoint, data);
  toast.success('Updated successfully');
} catch (error: any) {
  const errorMessage = error.response?.data?.error || 'Operation failed';
  toast.error(errorMessage);
}

Rate Limiting​

The API may return rate limit errors (429). The admin dashboard handles these appropriately.

Loading States​

All API operations show loading indicators:

const [submitting, setSubmitting] = useState(false);

const handleSubmit = async () => {
  setSubmitting(true);
  try {
    await api.post(endpoint, data);
  } finally {
    setSubmitting(false);
  }
};

Data Refresh​

After successful operations, data is refreshed:

const handleUpdate = async () => {
  await api.put(endpoint, data);
  await fetchData(); // Refresh to show updated state
};