move from PHP to VUE, improved Certificate listning

UI/client/src/composables/useApi.js

@@ -0,0 +1,57 @@
+import { useAppConfig } from './useAppConfig';
+
+export function useApi() {
+    const { config } = useAppConfig();
+
+    const getBaseUrl = () => {
+        // Ensure config is loaded or use default/fallback
+        return config.value?.api_base_url || '/api/v1';
+    };
+
+    const fetchStats = async () => {
+        try {
+            const res = await fetch(`${getBaseUrl()}/stats`);
+            return await res.json();
+        } catch (e) {
+            console.error('Fetch Stats Error:', e);
+            throw e;
+        }
+    };
+
+    const fetchClientHistory = async (clientId, range) => {
+        try {
+            const res = await fetch(`${getBaseUrl()}/stats/${clientId}?range=${range}`);
+            return await res.json();
+        } catch (e) {
+            console.error('Fetch History Error:', e);
+            throw e;
+        }
+    };
+
+    const fetchAnalytics = async (range) => {
+        try {
+            const res = await fetch(`${getBaseUrl()}/analytics?range=${range}`);
+            return await res.json();
+        } catch (e) {
+            console.error('Fetch Analytics Error:', e);
+            throw e;
+        }
+    };
+
+    const fetchCertificates = async () => {
+        try {
+            const res = await fetch(`${getBaseUrl()}/certificates`);
+            return await res.json();
+        } catch (e) {
+            console.error('Fetch Certificates Error:', e);
+            throw e;
+        }
+    };
+
+    return {
+        fetchStats,
+        fetchClientHistory,
+        fetchAnalytics,
+        fetchCertificates
+    };
+}

UI/client/src/composables/useAppConfig.js

@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+
+const config = ref(null);
+const isLoaded = ref(false);
+
+export function useAppConfig() {
+    const loadConfig = async () => {
+        if (isLoaded.value) return;
+        try {
+            const response = await fetch('/config.json');
+            config.value = await response.json();
+            isLoaded.value = true;
+        } catch (error) {
+            console.error('Failed to load configuration:', error);
+            // Fallback or critical error handling
+            config.value = {
+                api_base_url: 'http://localhost:5001/api/v1',
+                refresh_interval: 30000
+            };
+        }
+    };
+
+    return {
+        config,
+        isLoaded,
+        loadConfig
+    };
+}

UI/client/src/composables/useFormatters.js

@@ -0,0 +1,29 @@
+export function useFormatters() {
+    function formatBytes(bytes, decimals = 2) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    }
+
+    function formatRate(rate) {
+        return parseFloat(rate).toFixed(3) + ' Mbps';
+    }
+
+    function parseServerDate(dateStr) {
+        if (!dateStr) return null;
+        let isoStr = dateStr.replace(' ', 'T');
+        if (!isoStr.endsWith('Z') && !isoStr.includes('+')) {
+            isoStr += 'Z';
+        }
+        return new Date(isoStr);
+    }
+
+    return {
+        formatBytes,
+        formatRate,
+        parseServerDate
+    };
+}