Add base API configuration and interceptors

Author: secus217

apps/container-engine-frontend/src/api/api.ts

@@ -0,0 +1,56 @@
+import axios from 'axios';
+
+// Base API configuration
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+
+// Create axios instance with default config
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000, // 10 seconds timeout
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor to add auth token
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle common errors
+api.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    // Handle 401 Unauthorized
+    if (error.response?.status === 401) {
+      localStorage.removeItem('access_token');
+      localStorage.removeItem('user');
+      window.location.href = '/auth';
+    }
+    
+    // Handle 403 Forbidden
+    if (error.response?.status === 403) {
+      console.error('Access forbidden');
+    }
+    
+    // Handle 500 Internal Server Error
+    if (error.response?.status === 500) {
+      console.error('Server error occurred');
+    }
+    
+    return Promise.reject(error);
+  }
+);
+
+export default api;

apps/container-engine-frontend/src/components/DeploymentDetail/LogsPage.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
 import { useParams } from 'react-router-dom';
-import api from '../../lib/api';
+import api from '../../api/api';
 
 export default function LogsPage() {
   const { deploymentId } = useParams();

apps/container-engine-frontend/src/pages/AccountSettingsPage.tsx

@@ -1,6 +1,6 @@
 // src/pages/AccountSettingsPage.tsx
 import React, { useState, useEffect } from 'react';
-import api from '../lib/api';
+import api from '../api/api';
 import DashboardLayout from '../components/Layout/DashboardLayout';
 
 const AccountSettingsPage: React.FC = () => {

apps/container-engine-frontend/src/pages/ApiKeysPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import api from '../lib/api';
+import api from '../api/api';
 import DashboardLayout from '../components/Layout/DashboardLayout';
 import {
   PlusIcon,

apps/container-engine-frontend/src/pages/AuthPage.tsx

@@ -1,6 +1,6 @@
 // src/pages/AuthPage.tsx
 import React, { useState } from 'react';
-import api from '../lib/api';
+import api from '../api/api';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 

apps/container-engine-frontend/src/pages/DashboardPage.tsx

@@ -1,6 +1,6 @@
 // src/pages/DashboardPage.tsx
 import React, { useEffect, useState } from 'react';
-import api from '../lib/api';
+import api from '../api/api';
 import DashboardLayout from '../components/Layout/DashboardLayout'; // Layout với Sidebar, Header
 
 interface DashboardStats {

apps/container-engine-frontend/src/pages/DeploymentDetailPage.tsx

@@ -1,7 +1,7 @@
 // src/pages/DeploymentDetailPage.tsx
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import api from '../lib/api';
+import api from '../api/api';
 import DashboardLayout from '../components/Layout/DashboardLayout';
 import LogsPage from '../components/DeploymentDetail/LogsPage';
 import {

apps/container-engine-frontend/src/pages/DeploymentsPage.tsx

@@ -1,6 +1,6 @@
 // src/pages/DeploymentsPage.tsx
 import React, { useEffect, useState } from 'react';
-import api from '../lib/api';
+import api from '../api/api';
 import DashboardLayout from '../components/Layout/DashboardLayout';
 import { Link } from 'react-router-dom';
 import { formatDistanceToNow, parseISO } from 'date-fns';

apps/container-engine-frontend/src/pages/NewDeploymentPage.tsx

@@ -1,6 +1,6 @@
 // src/pages/NewDeploymentPage.tsx
 import React, { useState } from 'react';
-import api from '../lib/api';
+import api from '../api/api';
 import DashboardLayout from '../components/Layout/DashboardLayout';
 import { useNavigate } from 'react-router-dom';
 import {