feat: add prime vue

frontend/admin/src/api/apiClient.js

@@ -0,0 +1,45 @@
+import axios from 'axios';
+
+// Create a base axios instance
+export const apiClient = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL || '',
+    timeout: 10000,
+    headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+    }
+});
+
+// Request interceptor
+apiClient.interceptors.request.use(
+    (config) => {
+        // You can add auth tokens here if needed
+        const token = localStorage.getItem('auth_token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
+// Response interceptor
+apiClient.interceptors.response.use(
+    (response) => {
+        return response;
+    },
+    (error) => {
+        // Handle common errors (e.g., unauthorized, server errors)
+        if (error.response) {
+            // Handle specific status codes
+            if (error.response.status === 401) {
+                // Handle unauthorized
+                console.error('Unauthorized request');
+                // You might want to redirect to login page
+            }
+        }
+        return Promise.reject(error);
+    }
+);

frontend/admin/src/api/statsApi.js

@@ -0,0 +1,132 @@
+import { apiClient } from './apiClient';
+
+// Environment detection
+let isDevelopment = false; // Default to development mode
+
+// Try different ways to detect environment
+try {
+    if (typeof process !== 'undefined' && process.env) {
+        console.log('Detected process.env, NODE_ENV:', process.env.NODE_ENV);
+        isDevelopment = process.env.NODE_ENV === 'development';
+    } else if (typeof import.meta !== 'undefined' && import.meta.env) {
+        console.log('Detected import.meta.env, MODE:', import.meta.env.MODE);
+        isDevelopment = import.meta.env.MODE === 'development';
+    }
+} catch (error) {
+    console.error('Error detecting environment:', error);
+}
+setTimeout(() => {
+    console.log('%cCurrent environment: ' + (isDevelopment ? 'DEVELOPMENT' : 'PRODUCTION'),
+        'background: #222; color: #bada55; font-size: 16px; padding: 4px;');
+}, 0);
+
+// Mock service implementation
+const mockService = {
+    /**
+     * Mock implementation for getting media count
+     * @returns {Promise<{count: number}>}
+     */
+    getMediaCount: async () => {
+        // Simulate network delay
+        await new Promise(resolve => setTimeout(resolve, 800));
+
+        // Return mock data
+        return {
+            data: {
+                count: Math.floor(Math.random() * 500) + 100 // Random count between 100-600
+            }
+        };
+    },
+
+    /**
+     * Mock implementation for getting article count
+     * @returns {Promise<{count: number}>}
+     */
+    getArticleCount: async () => {
+        // Simulate network delay
+        await new Promise(resolve => setTimeout(resolve, 600));
+
+        // Return mock data
+        return {
+            data: {
+                count: Math.floor(Math.random() * 200) + 50 // Random count between 50-250
+            }
+        };
+    }
+};
+
+// Real API implementation
+const realApiService = {
+    /**
+     * Real implementation for getting media count
+     * @returns {Promise<{count: number}>}
+     */
+    getMediaCount: async () => {
+        try {
+            return await apiClient.get('/api/media/count');
+        } catch (error) {
+            console.error('Error fetching media count:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Real implementation for getting article count
+     * @returns {Promise<{count: number}>}
+     */
+    getArticleCount: async () => {
+        try {
+            return await apiClient.get('/api/articles/count');
+        } catch (error) {
+            console.error('Error fetching article count:', error);
+            throw error;
+        }
+    }
+};
+
+// Log which service we're using
+console.log(`Using ${isDevelopment ? 'MOCK' : 'REAL'} API service for stats`);
+
+// Use the appropriate service based on environment
+const apiService = isDevelopment ? mockService : realApiService;
+
+export const statsApi = {
+    /**
+     * Get the total count of media items
+     * @returns {Promise<{count: number}>} The media count
+     */
+    getMediaCount: async () => {
+        const response = await apiService.getMediaCount();
+        return response.data;
+    },
+
+    /**
+     * Get the total count of articles
+     * @returns {Promise<{count: number}>} The article count
+     */
+    getArticleCount: async () => {
+        const response = await apiService.getArticleCount();
+        return response.data;
+    },
+
+    /**
+     * Get all statistics in a single call
+     * @returns {Promise<{mediaCount: number, articleCount: number}>}
+     */
+    getAllStats: async () => {
+        try {
+            const [mediaResponse, articleResponse] = await Promise.all([
+                apiService.getMediaCount(),
+                apiService.getArticleCount()
+            ]);
+
+            return {
+                mediaCount: mediaResponse.data.count,
+                articleCount: articleResponse.data.count
+            };
+        } catch (error) {
+            console.error('Error fetching all stats:', error);
+            throw error;
+        }
+    }
+};