Update static/js/script.js

static/js/script.js

@@ -1,537 +1,696 @@
-// Function to log messages to the logs div
-function logMessage(message) {
-    const logsDiv = document.getElementById('logs');
-    const logEntry = document.createElement('div');
-    logEntry.textContent = message;
-    logsDiv.appendChild(logEntry);
-    logsDiv.scrollTop = logsDiv.scrollHeight; // Scroll to the bottom
-}
-
-// Function to generate video
-function generateVideo() {
-    const formData = new FormData(document.getElementById('videoForm'));
-    const apiKey = document.getElementById('apiKey').value; // Get API key from hidden input
-
-    fetch('/api/generate-video', {
-        method: 'POST',
-        headers: {
-            'X-API-Key': apiKey
-        },
-        body: formData
-    })
-    .then(response => {
-        if (response.ok) {
-            return response.blob().then(blob => {
-                const url = window.URL.createObjectURL(blob);
-                const video = document.getElementById('generatedVideo');
-                video.src = url;
-                video.load(); // Load the video
-                video.play(); // Play the video
-                logMessage('Video generation successful!');
-                document.getElementById('downloadVideoButton').disabled = false; // Enable download button
-            });
-        } else {
-            return response.json().then(data => {
-                throw new Error(data.error || 'Video generation failed');
-            });
-        }
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert('Video generation failed: ' + error.message);
-        logMessage('Video generation failed: ' + error.message);
-        document.getElementById('downloadVideoButton').disabled = true; // Disable download button
-    });
-}
-
-// Function to show popup
-function showPopup() {
-    const textGenerator = document.getElementById('text-generator').value;
-    const textGeneratorModel = document.getElementById('text-generator-model').value;
-    const imageGenerator = document.getElementById('image-generator').value;
-    const imageGeneratorModel = document.querySelector('.style-card.selected') ? document.querySelector('.style-card.selected').querySelector('.style-label').textContent : '';
-    const speechGenerator = document.getElementById('speech-generator').value;
-    const speechGeneratorVoice = document.querySelector('.voice-box.selected') ? document.querySelector('.voice-box.selected').querySelector('.voice-name').textContent : '';
-    const disableSubtitles = document.getElementById('disable-subtitles').checked;
-    const subtitlesColor = document.getElementById('subtitles-color').value;
-    const subtitleFontName = document.getElementById('subtitle-font-name').value;
-    const maxCharacterPerLine = document.getElementById('max-character-per-line').value;
-    const subtitleFontSize = document.getElementById('subtitle-font-size').value;
-    const subtitleStrokeWidth = document.getElementById('subtitle-stroke-width').value;
-    const lines = document.querySelector('.line-button.active').textContent.replace(' Line', '');
-    const highlightColor = document.getElementById('highlight-color').value;
-    const niche = document.getElementById('niche').value;
-    const language = document.getElementById('language').value;
-
-    const selectedOptions = {
-        "text_generator": textGenerator,
-        "text_generator_model": textGeneratorModel,
-        "image_generator": imageGenerator,
-        "image_generator_model": imageGeneratorModel,
-        "speech_generator": speechGenerator,
-        "speech_generator_voice": speechGeneratorVoice,
-        "disable_subtitles": disableSubtitles,
-        "subtitles_color": subtitlesColor,
-        "subtitle_font_name": subtitleFontName,
-        "max_character_per_line": parseInt(maxCharacterPerLine),
-        "subtitle_font_size": parseInt(subtitleFontSize),
-        "subtitle_stroke_width": parseInt(subtitleStrokeWidth),
-        "max_lines": parseInt(lines),
-        "highlight_color": highlightColor,
-        "niche": niche,
-        "language": language
-    };
-
-    document.getElementById('popupOptions').textContent = JSON.stringify(selectedOptions, null, 2);
-    document.getElementById('popupOverlay').style.display = 'flex';
-
-    // Update form data
-    document.getElementById('text_generator').value = textGenerator;
-    document.getElementById('text_generator_model').value = textGeneratorModel;
-    document.getElementById('image_generator').value = imageGenerator;
-    document.getElementById('image_generator_model').value = imageGeneratorModel;
-    document.getElementById('speech_generator').value = speechGenerator;
-    document.getElementById('speech_generator_voice').value = speechGeneratorVoice;
-    document.getElementById('disable_subtitles').checked = disableSubtitles;
-    document.getElementById('subtitles_color').value = subtitlesColor;
-    document.getElementById('subtitle_font_name').value = subtitleFontName;
-    document.getElementById('subtitle_font_size').value = subtitleFontSize;
-    document.getElementById('subtitle_stroke_color').value = document.getElementById('subtitle-stroke-color').value;
-    document.getElementById('subtitle_stroke_width').value = subtitleStrokeWidth;
-    document.getElementById('max_character_per_line').value = maxCharacterPerLine;
-    document.getElementById('max_lines').value = lines;
-    document.getElementById('highlight_color').value = highlightColor;
-    document.getElementById('niche_hidden').value = niche;
-    document.getElementById('language_hidden').value = language;
-}
-
-// Function to play or pause the generated video
-function playPauseVideo() {
-    const video = document.getElementById('generatedVideo');
-    if (video) {
-        if (video.paused) {
-            video.play();
-            document.querySelector('.video-controls .control-button i').className = 'fas fa-pause';
-        } else {
-            video.pause();
-            document.querySelector('.video-controls .control-button i').className = 'fas fa-play';
-        }
-    }
-}
-
-// Function to hide popup
-function hidePopup() {
-    document.getElementById('popupOverlay').style.display = 'none';
-}
-
-// Function to show upgrade popup
-function showUpgradePopup() {
-    document.getElementById('upgradePopupOverlay').style.display = 'flex';
-}
-
-// Function to hide upgrade popup
-function hideUpgradePopup() {
-    document.getElementById('upgradePopupOverlay').style.display = 'none';
-}
-
-// Tab Switching
-document.querySelectorAll('.sidebar-item[data-tab]').forEach(item => {
-    item.addEventListener('click', () => {
-        document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
-        item.classList.add('active');
-        
-        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');
-        
-        const tabId = item.getAttribute('data-tab') + '-content';
-        document.getElementById(tabId).style.display = 'block';
-    });
-});
-
-// Style Card Selection
-function selectImage(element) {
-    document.querySelectorAll('.style-card').forEach(card => {
-        card.classList.remove('selected');
-    });
-    element.classList.add('selected');
-
-    const imgSrc = element.querySelector('img').src;
-    document.getElementById('preview-image').src = imgSrc;
-}
-
-// Populate Models Dropdown based on TEXT GENERATOR selection
-document.getElementById('text-generator').addEventListener('change', function() {
-    const selectedTextGen = this.value;
-    const modelsDropdown = document.getElementById('text-generator-model');
-    modelsDropdown.innerHTML = '';
-    fetch(`/text-generator-models/${selectedTextGen}`)
-    .then(response => response.json())
-    .then(data => {
-        data.models.forEach(model => {
-            const option = document.createElement('option');
-            option.value = model;
-            option.textContent = model;
-            modelsDropdown.appendChild(option);
-        });
-    })
-    .catch(error => {
-        console.error('Error fetching text generator models:', error);
-        logMessage('Error fetching text generator models: ' + error.message);
-    });
-});
-
-// Populate Style Cards based on IMAGE GENERATOR selection
-document.getElementById('image-generator').addEventListener('change', function() {
-    const selectedImageGen = this.value;
-    const styleGrid = document.getElementById('style-grid');
-    styleGrid.innerHTML = '';
-    fetch(`/image-generator-models/${selectedImageGen}`)
-    .then(response => response.json())
-    .then(data => {
-        data.models.forEach((style, index) => {
-            const styleCard = document.createElement('div');
-            styleCard.className = 'style-card';
-            styleCard.onclick = function() { selectImage(this); };
-            styleCard.innerHTML = `
-                <img alt="${style} style image" src="/static/media/Image_Generators/${selectedImageGen.toLowerCase()}/${style.replace(/[\s\(]/g, '_').replace(/\)/g, '').toLowerCase()}.jpg"/>
-                <div class="style-label">${style}</div>
-            `;
-            styleGrid.appendChild(styleCard);
-            if (index === 0) { // Default to first style
-                selectImage(styleCard);
-            }
-        });
-    })
-    .catch(error => {
-        console.error('Error fetching image generator models:', error);
-        logMessage('Error fetching image generator models: ' + error.message);
-    });
-});
-
-// Populate Voices Grid based on SPEECH GENERATOR selection
-document.getElementById('speech-generator').addEventListener('change', function() {
-    const selectedSpeechGen = this.value;
-    const voiceGrid = document.getElementById('voice-grid');
-    voiceGrid.innerHTML = '';
-    fetch(`/speech-generator-models/${selectedSpeechGen}`)
-    .then(response => response.json())
-    .then(data => {
-        data.models.forEach((voice, index) => {
-            const voiceBox = document.createElement('div');
-            voiceBox.className = 'voice-box';
-            voiceBox.onclick = function() { selectVoice(this); };
-            voiceBox.innerHTML = `
-                <div class="voice-profile" style="background-color: ${index % 2 === 0 ? '#ff5733' : '#3399ff'};">
-                    ${index % 2 === 0 ? '♀' : '♂'}
-                </div>
-                <div class="voice-name">${voice}</div>
-                <button class="play-button" onclick="playVoice('${voice}')">Play</button>
-            `;
-            voiceGrid.appendChild(voiceBox);
-            if (index === 0) { // Default to first voice
-                selectVoice(voiceBox);
-            }
-        });
-    })
-    .catch(error => {
-        console.error('Error fetching speech generator models:', error);
-        logMessage('Error fetching speech generator models: ' + error.message);
-    });
-});
-
-// Voice Selection
-function selectVoice(element) {
-    document.querySelectorAll('.voice-box').forEach(box => {
-        box.classList.remove('selected');
-    });
-    element.classList.add('selected');
-
-    const selectedVoiceName = element.querySelector('.voice-name').textContent;
-    document.getElementById('preview-image').alt = `Preview of the selected voice: ${selectedVoiceName}`;
-}
-
-// Function to play voice
-function playVoice(voiceName) {
-    const selectedSpeechGen = document.getElementById('speech-generator').value;
-    const voiceNameSanitized = voiceName.toLowerCase().replace(/\s+/g, '_');
-    const audioUrl = `/static/media/Speech_Generators/${selectedSpeechGen.toLowerCase()}/${voiceNameSanitized}.mp3`;
-    const audio = new Audio(audioUrl);
-    audio.play();
-}
-
-// Function to select music
-function selectMusic(element) {
-    document.querySelectorAll('.music-box').forEach(box => {
-        box.classList.remove('selected');
-    });
-    element.classList.add('selected');
-
-    const selectedMusicName = element.querySelector('.music-name').textContent;
-    document.getElementById('preview-image').alt = `Preview of the selected music: ${selectedMusicName}`;
-}
-
-// Function to play or stop music
-function playStopMusic(audioUrl, button) {
-    const audio = new Audio(audioUrl);
-    if (button.textContent === 'Play') {
-        audio.play();
-        button.textContent = 'Stop';
-    } else {
-        audio.pause();
-        button.textContent = 'Play';
-    }
-}
-
-// Set lines per caption
-function setLines(lines) {
-    document.querySelectorAll('.line-button').forEach(button => {
-        button.classList.remove('active');
-    });
-    document.querySelector(`.line-button:nth-child(${lines})`).classList.add('active');
-    document.getElementById('max_lines').value = lines;
-}
-
-// Function to generate script
-function generateScript() {
-    logMessage('Generating script...');
-    const niche = document.getElementById('niche').value;
-    const language = document.getElementById('language').value;
-    const textGenerator = document.getElementById('text-generator').value;
-    const textGeneratorModel = document.getElementById('text-generator-model').value;
-
-    const request = {
-        niche: niche,
-        language: language,
-        text_generator: textGenerator,
-        text_generator_model: textGeneratorModel
-    };
-
-    fetch('/generate-script', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(request)
-    })
-    .then(response => response.json())
-    .then(data => {
-        document.getElementById('generated-topic').value = data.topic;
-        document.getElementById('generated-script').value = data.script;
-        document.getElementById('generated-image-prompts').value = data.image_prompts.join(', ');
-        document.getElementById('generated-metadata').value = JSON.stringify(data.metadata, null, 2);
-        logMessage('Script generated successfully!');
-    })
-    .catch(error => {
-        console.error('Error:', error);
-        alert('Script generation failed: ' + error.message);
-        logMessage('Script generation failed: ' + error.message);
-    });
-}
-
-// Function to start loading
-function startLoading() {
-    document.getElementById('popupOverlay').style.display = 'none';
-
-    // Update video limit
-    const videoLimitElement = document.getElementById('videoLimit');
-    const currentLimit = parseInt(videoLimitElement.textContent.split('/')[0], 10);
-    const maxLimit = parseInt(videoLimitElement.textContent.split('/')[1], 10);
-    if (currentLimit < maxLimit) {
-        videoLimitElement.textContent = `${currentLimit + 1}/${maxLimit}`;
-    } else {
-        alert('You have reached your daily video generation limit!');
-        return;
-    }
-
-    // Clear previous content in the video-preview div
-    const videoContainer = document.querySelector('.video-container');
-    videoContainer.innerHTML = '';
-
-    // Clear logs
-    const logsDiv = document.getElementById('logs');
-    logsDiv.innerHTML = '';
-
-    // Call the generateVideo function to trigger video generation
-    generateVideo();
-}
-
-// Function to download the generated video
-function downloadVideo() {
-    const video = document.getElementById('generatedVideo');
-    if (video && video.src) {
-        const a = document.createElement('a');
-        a.href = video.src;
-        a.download = 'generated_video.mp4';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-    } else {
-        alert('No video to download.');
-    }
-}
-
-// Profile Icon Click Event
-document.getElementById('profileIcon').addEventListener('click', function(event) {
-    event.stopPropagation();
-    const menu = document.getElementById('profileMenu');
-    if (menu.style.display === 'block') {
-        menu.style.display = 'none';
-    } else {
-        menu.style.display = 'block';
-    }
-});
-
-// Close Profile Menu when clicking outside
-document.addEventListener('click', function(event) {
-    const profileIcon = document.getElementById('profileIcon');
-    const profileMenu = document.getElementById('profileMenu');
-    if (!profileIcon.contains(event.target) && !profileMenu.contains(event.target)) {
-        profileMenu.style.display = 'none';
-    }
-});
-
-// Update slider values
-document.getElementById('max-character-per-line').addEventListener('input', function() {
-    document.getElementById('max_chars_value').textContent = this.value;
-    document.getElementById('max_character_per_line').value = this.value;
-});
-
-document.getElementById('subtitle-font-size').addEventListener('input', function() {
-    document.getElementById('subtitle-font-size-value').textContent = this.value;
-    document.getElementById('subtitle_font_size').value = this.value;
-});
-
-document.getElementById('subtitle-stroke-width').addEventListener('input', function() {
-    document.getElementById('subtitle-stroke-width-value').textContent = this.value;
-    document.getElementById('subtitle_stroke_width').value = this.value;
-});
-
-// Search functionality for Image tab
-document.getElementById('image-search').addEventListener('input', function() {
-    const query = this.value.toLowerCase();
-    const styleCards = document.querySelectorAll('.style-card');
-    styleCards.forEach(card => {
-        const label = card.querySelector('.style-label').textContent.toLowerCase();
-        if (label.includes(query)) {
-            card.style.display = 'block';
-        } else {
-            card.style.display = 'none';
-        }
-    });
-});
-
-// Search functionality for Audio tab
-document.getElementById('audio-search').addEventListener('input', function() {
-    const query = this.value.toLowerCase();
-    const voiceBoxes = document.querySelectorAll('.voice-box');
-    voiceBoxes.forEach(box => {
-        const name = box.querySelector('.voice-name').textContent.toLowerCase();
-        if (name.includes(query)) {
-            box.style.display = 'block';
-        } else {
-            box.style.display = 'none';
-        }
-    });
-});
-
-// Search functionality for Music tab
-document.getElementById('music-search').addEventListener('input', function() {
-    const query = this.value.toLowerCase();
-    const musicBoxes = document.querySelectorAll('.music-box');
-    musicBoxes.forEach(box => {
-        const name = box.querySelector('.music-name').textContent.toLowerCase();
-        if (name.includes(query)) {
-            box.style.display = 'block';
-        } else {
-            box.style.display = 'none';
-        }
-    });
-});
-
-// Initialize everything when the page loads
-document.addEventListener('DOMContentLoaded', function() {
-    fetchUserData();
-    setupSearch();
-    populateFonts();
-    populateMusics();
-});
-
-// Fetch User Data
-async function fetchUserData() {
-    try {
-        const response = await fetch('/api/user-data');
-        const userData = await response.json();
-        document.getElementById('user_id').value = userData.uuid;
-        document.getElementById('username').value = userData.username;
-        document.getElementById('profile_path').value = userData.profile_path;
-        document.getElementById('videoLimit').textContent = userData.limit;
-        document.getElementById('apiKey').value = userData.api_key; // Set API key in hidden input
-    } catch (error) {
-        console.error('Failed to fetch user data:', error);
-        logMessage('Failed to fetch user data: ' + error.message);
-    }
-}
-
-// Populate Fonts Dropdown
-async function populateFonts() {
-    try {
-        const response = await fetch('/available-fonts');
-        const fonts = await response.json();
-        const fontsDropdown = document.getElementById('subtitle-font-name');
-        fonts.fonts.forEach(font => {
-            const option = document.createElement('option');
-            option.value = font;
-            option.textContent = font;
-            fontsDropdown.appendChild(option);
-        });
-    } catch (error) {
-        console.error('Error fetching fonts:', error);
-        logMessage('Error fetching fonts: ' + error.message);
-    }
-}
-
-// Populate Musics Grid
-async function populateMusics() {
-    try {
-        const response = await fetch('/available-musics');
-        const musics = await response.json();
-        const musicGrid = document.getElementById('music-grid');
-        musics.musics.forEach(music => {
-            const musicBox = document.createElement('div');
-            musicBox.className = 'music-box';
-            musicBox.onclick = function() { selectMusic(this); };
-            musicBox.innerHTML = `
-                <div class="music-profile" style="background-color: #ff5733;">
-                    🎶
-                </div>
-                <div class="music-name">${music}</div>
-                <button class="play-stop-button" onclick="playStopMusic('/static/music/${music}', this)">Play</button>
-            `;
-            musicGrid.appendChild(musicBox);
-        });
-    } catch (error) {
-        console.error('Error fetching musics:', error);
-        logMessage('Error fetching musics: ' + error.message);
-    }
-}
-
-// Search Functionality
-function setupSearch() {
-    const searchInput = document.getElementById('videoSearch');
-    searchInput.addEventListener('input', function() {
-        const query = this.value.toLowerCase();
-        document.querySelectorAll('.thumbnail-card').forEach(card => {
-            const title = card.querySelector('.thumbnail-label').textContent.toLowerCase();
-            card.style.display = title.includes(query) ? 'block' : 'none';
-        });
-    });
-}
-
-// Navigate to different pages
-function navigateToPage(page) {
-    window.location.href = `/${page}`;
-}
-
-// Logout
-function logout() {
-    window.location.href = '/logout';
+// script.js
+const API_KEY = 'your_secret_api_key';
+
+// Tab Switching
+document.querySelectorAll('.sidebar-item[data-tab]').forEach(item => {
+    item.addEventListener('click', () => {
+        document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');
+        const tabId = item.getAttribute('data-tab') + '-content';
+        document.getElementById(tabId).style.display = 'block';
+        loadTabContent(tabId);
+    });
+});
+
+// Profile Photo Click Event
+document.getElementById('profilePhoto').addEventListener('click', function() {
+    const menu = document.getElementById('profileMenu');
+    if (menu.style.display === 'block') {
+        menu.style.display = 'none';
+    } else {
+        menu.style.display = 'block';
+    }
+});
+
+// Close Profile Menu when clicking outside
+window.onclick = function(event) {
+    if (!event.target.matches('#profilePhoto')) {
+        const menu = document.getElementById('profileMenu');
+        if (menu.style.display === 'block') {
+            menu.style.display = 'none';
+        }
+    }
+};
+
+// Toggle Sidebar
+document.getElementById('toggleSidebar').addEventListener('click', function() {
+    document.getElementById('sidebar').classList.toggle('active');
+});
+
+// Fetch System Info
+async function fetchSystemInfo() {
+    try {
+        const response = await fetch('/api/system-info', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        document.getElementById('osName').textContent = data.os.name;
+        document.getElementById('osVersion').textContent = data.os.version;
+        document.getElementById('uptime').textContent = data.uptime;
+        document.getElementById('storage').textContent = `${(data.storage.total / (1024 ** 3)).toFixed(2)} GB / ${(data.storage.free / (1024 ** 3)).toFixed(2)} GB`;
+    } catch (error) {
+        console.error('Failed to fetch system info:', error);
+    }
+}
+
+// Fetch Bot Stats
+async function fetchBotStats() {
+    try {
+        const response = await fetch('/api/bot-stats', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        document.getElementById('totalFiles').textContent = data.total_files;
+        document.getElementById('totalUsers').textContent = data.total_users;
+        document.getElementById('totalChats').textContent = data.total_chats;
+        document.getElementById('storageUsed').textContent = data.storage_used;
+        document.getElementById('storageFree').textContent = data.storage_free;
+    } catch (error) {
+        console.error('Failed to fetch bot stats:', error);
+    }
+}
+
+// Fetch Bot Status
+async function fetchBotStatus() {
+    try {
+        const response = await fetch('/api/bot-status', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        document.getElementById('cpuUsage').textContent = `${data.cpu_usage}%`;
+        document.getElementById('ramUsage').textContent = `${data.ram_usage}%`;
+        document.getElementById('storageUsed').textContent = data.used_storage;
+        document.getElementById('storageFree').textContent = data.free_storage;
+    } catch (error) {
+        console.error('Failed to fetch bot status:', error);
+    }
+}
+
+// Load Tab Content
+async function loadTabContent(tabId) {
+    if (tabId === 'filters-content') {
+        loadFilters();
+    } else if (tabId === 'global-filters-content') {
+        loadGlobalFilters();
+    } else if (tabId === 'users-content') {
+        loadUsers();
+    } else if (tabId === 'chats-content') {
+        loadChats();
+    } else if (tabId === 'files-content') {
+        loadFiles();
+    } else if (tabId === 'connections-content') {
+        loadConnections();
+    } else if (tabId === 'stats-content') {
+        fetchBotStatus();
+    }
+}
+
+// Load Filters
+async function loadFilters() {
+    try {
+        const response = await fetch('/api/filters?chat_id=123456789', { // Replace with actual chat ID
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        const filtersList = document.getElementById('filtersList');
+        filtersList.innerHTML = '';
+        data.filters.forEach(filter => {
+            const filterItem = document.createElement('div');
+            filterItem.className = 'stat-card';
+            filterItem.innerHTML = `
+                <div class="stat-header">
+                    <div>
+                        <h3>${filter}</h3>
+                    </div>
+                    <div class="stat-icon">
+                        <i class="fas fa-filter"></i>
+                    </div>
+                </div>
+                <button onclick="deleteFilter('${filter}')">Delete</button>
+            `;
+            filtersList.appendChild(filterItem);
+        });
+    } catch (error) {
+        console.error('Failed to load filters:', error);
+    }
+}
+
+// Load Global Filters
+async function loadGlobalFilters() {
+    try {
+        const response = await fetch('/api/gfilters', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        const gfiltersList = document.getElementById('gfiltersList');
+        gfiltersList.innerHTML = '';
+        data.filters.forEach(filter => {
+            const filterItem = document.createElement('div');
+            filterItem.className = 'stat-card';
+            filterItem.innerHTML = `
+                <div class="stat-header">
+                    <div>
+                        <h3>${filter}</h3>
+                    </div>
+                    <div class="stat-icon">
+                        <i class="fas fa-globe"></i>
+                    </div>
+                </div>
+                <button onclick="deleteGFilter('${filter}')">Delete</button>
+            `;
+            gfiltersList.appendChild(filterItem);
+        });
+    } catch (error) {
+        console.error('Failed to load global filters:', error);
+    }
+}
+
+// Load Users
+async function loadUsers() {
+    try {
+        const response = await fetch('/api/users', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        const usersList = document.getElementById('usersList');
+        usersList.innerHTML = '';
+        data.users.forEach(user => {
+            const userItem = document.createElement('div');
+            userItem.className = 'stat-card';
+            userItem.innerHTML = `
+                <div class="stat-header">
+                    <div>
+                        <h3>${user.name}</h3>
+                        <p>ID: ${user.id}</p>
+                    </div>
+                    <div class="stat-icon">
+                        <i class="fas fa-user"></i>
+                    </div>
+                </div>
+                <button onclick="banUser('${user.id}', '${user.ban_status.ban_reason}')">${user.ban_status.is_banned ? 'Unban' : 'Ban'}</button>
+            `;
+            usersList.appendChild(userItem);
+        });
+    } catch (error) {
+        console.error('Failed to load users:', error);
+    }
+}
+
+// Load Chats
+async function loadChats() {
+    try {
+        const response = await fetch('/api/chats', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        const chatsList = document.getElementById('chatsList');
+        chatsList.innerHTML = '';
+        data.chats.forEach(chat => {
+            const chatItem = document.createElement('div');
+            chatItem.className = 'stat-card';
+            chatItem.innerHTML = `
+                <div class="stat-header">
+                    <div>
+                        <h3>${chat.title}</h3>
+                        <p>ID: ${chat.id}</p>
+                    </div>
+                    <div class="stat-icon">
+                        <i class="fas fa-comment-dots"></i>
+                    </div>
+                </div>
+                <button onclick="disableChat('${chat.id}', '${chat.chat_status.reason}')">${chat.chat_status.is_disabled ? 'Enable' : 'Disable'}</button>
+            `;
+            chatsList.appendChild(chatItem);
+        });
+    } catch (error) {
+        console.error('Failed to load chats:', error);
+    }
+}
+
+// Load Files
+async function loadFiles() {
+    try {
+        const response = await fetch('/api/files', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        const filesList = document.getElementById('filesList');
+        filesList.innerHTML = '';
+        data.files.forEach(file => {
+            const fileItem = document.createElement('div');
+            fileItem.className = 'stat-card';
+            fileItem.innerHTML = `
+                <div class="stat-header">
+                    <div>
+                        <h3>${file.file_name}</h3>
+                        <p>Size: ${get_size(file.file_size)}</p>
+                    </div>
+                    <div class="stat-icon">
+                        <i class="fas fa-file"></i>
+                    </div>
+                </div>
+                <button onclick="deleteFile('${file.file_id}')">Delete</button>
+            `;
+            filesList.appendChild(fileItem);
+        });
+    } catch (error) {
+        console.error('Failed to load files:', error);
+    }
+}
+
+// Load Connections
+async function loadConnections() {
+    try {
+        const response = await fetch('/api/connections', {
+            headers: {
+                'Authorization': API_KEY
+            }
+        });
+        const data = await response.json();
+        const connectionsList = document.getElementById('connectionsList');
+        connectionsList.innerHTML = '';
+        data.connections.forEach(connection => {
+            const connectionItem = document.createElement('div');
+            connectionItem.className = 'stat-card';
+            connectionItem.innerHTML = `
+                <div class="stat-header">
+                    <div>
+                        <h3>${connection.title}</h3>
+                        <p>ID: ${connection.id}</p>
+                    </div>
+                    <div class="stat-icon">
+                        <i class="fas fa-link"></i>
+                    </div>
+                </div>
+                <button onclick="deleteConnection('${connection.id}', '${connection.user_id}')">Delete</button>
+            `;
+            connectionsList.appendChild(connectionItem);
+        });
+    } catch (error) {
+        console.error('Failed to load connections:', error);
+    }
+}
+
+// Add Filter
+document.getElementById('addFilterForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const chatId = document.getElementById('chatId').value;
+    const text = document.getElementById('filterText').value;
+    const replyText = document.getElementById('replyText').value;
+    const btn = document.getElementById('btn').value;
+    const file = document.getElementById('file').value;
+    const alert = document.getElementById('alert').value;
+    try {
+        const response = await fetch('/api/add-filter', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `chat_id=${encodeURIComponent(chatId)}&text=${encodeURIComponent(text)}&reply_text=${encodeURIComponent(replyText)}&btn=${encodeURIComponent(btn)}&file=${encodeURIComponent(file)}&alert=${encodeURIComponent(alert)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadFilters();
+    } catch (error) {
+        console.error('Failed to add filter:', error);
+        alert('Failed to add filter');
+    }
+});
+
+// Delete Filter
+async function deleteFilter(text) {
+    try {
+        const response = await fetch('/api/delete-filter', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `chat_id=123456789&text=${encodeURIComponent(text)}`, // Replace with actual chat ID
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadFilters();
+    } catch (error) {
+        console.error('Failed to delete filter:', error);
+        alert('Failed to delete filter');
+    }
+}
+
+// Add Global Filter
+document.getElementById('addGFilterForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const text = document.getElementById('gfilterText').value;
+    const replyText = document.getElementById('greplyText').value;
+    const btn = document.getElementById('gbtn').value;
+    const file = document.getElementById('gfile').value;
+    const alert = document.getElementById('galert').value;
+    try {
+        const response = await fetch('/api/add-gfilter', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `text=${encodeURIComponent(text)}&reply_text=${encodeURIComponent(replyText)}&btn=${encodeURIComponent(btn)}&file=${encodeURIComponent(file)}&alert=${encodeURIComponent(alert)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadGlobalFilters();
+    } catch (error) {
+        console.error('Failed to add global filter:', error);
+        alert('Failed to add global filter');
+    }
+});
+
+// Delete Global Filter
+async function deleteGFilter(text) {
+    try {
+        const response = await fetch('/api/delete-gfilter', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `text=${encodeURIComponent(text)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadGlobalFilters();
+    } catch (error) {
+        console.error('Failed to delete global filter:', error);
+        alert('Failed to delete global filter');
+    }
+}
+
+// Ban User
+async function banUser(userId, banReason) {
+    try {
+        const response = await fetch('/api/ban-user', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `user_id=${encodeURIComponent(userId)}&ban_reason=${encodeURIComponent(banReason)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadUsers();
+    } catch (error) {
+        console.error('Failed to ban user:', error);
+        alert('Failed to ban user');
+    }
+}
+
+// Unban User
+async function unbanUser(userId) {
+    try {
+        const response = await fetch('/api/unban-user', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `user_id=${encodeURIComponent(userId)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadUsers();
+    } catch (error) {
+        console.error('Failed to unban user:', error);
+        alert('Failed to unban user');
+    }
+}
+
+// Disable Chat
+async function disableChat(chatId, reason) {
+    try {
+        const response = await fetch('/api/disable-chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `chat_id=${encodeURIComponent(chatId)}&reason=${encodeURIComponent(reason)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadChats();
+    } catch (error) {
+        console.error('Failed to disable chat:', error);
+        alert('Failed to disable chat');
+    }
+}
+
+// Enable Chat
+async function enableChat(chatId) {
+    try {
+        const response = await fetch('/api/enable-chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `chat_id=${encodeURIComponent(chatId)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadChats();
+    } catch (error) {
+        console.error('Failed to enable chat:', error);
+        alert('Failed to enable chat');
+    }
+}
+
+// Upload File
+document.getElementById('uploadFileForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const formData = new FormData(this);
+    try {
+        const response = await fetch('/api/upload-file', {
+            method: 'POST',
+            headers: {
+                'Authorization': API_KEY
+            },
+            body: formData,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadFiles();
+    } catch (error) {
+        console.error('Failed to upload file:', error);
+        alert('Failed to upload file');
+    }
+});
+
+// Delete File
+async function deleteFile(fileId) {
+    try {
+        const response = await fetch('/api/delete-file', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `file_id=${encodeURIComponent(fileId)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadFiles();
+    } catch (error) {
+        console.error('Failed to delete file:', error);
+        alert('Failed to delete file');
+    }
+}
+
+// Broadcast Message
+document.getElementById('broadcastForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const messageText = document.getElementById('broadcastText').value;
+    try {
+        const response = await fetch('/api/broadcast', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `message_text=${encodeURIComponent(messageText)}`,
+        });
+        const data = await response.json();
+        alert(`Broadcast completed. Success: ${data.success}, Blocked: ${data.blocked}, Deleted: ${data.deleted}`);
+    } catch (error) {
+        console.error('Failed to broadcast message:', error);
+        alert('Failed to broadcast message');
+    }
+});
+
+// Add Connection
+document.getElementById('addConnectionForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const groupId = document.getElementById('groupId').value;
+    const userId = document.getElementById('userId').value;
+    try {
+        const response = await fetch('/api/add-connection', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `group_id=${encodeURIComponent(groupId)}&user_id=${encodeURIComponent(userId)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadConnections();
+    } catch (error) {
+        console.error('Failed to add connection:', error);
+        alert('Failed to add connection');
+    }
+});
+
+// Delete Connection
+async function deleteConnection(groupId, userId) {
+    try {
+        const response = await fetch('/api/delete-connection', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `group_id=${encodeURIComponent(groupId)}&user_id=${encodeURIComponent(userId)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+        loadConnections();
+    } catch (error) {
+        console.error('Failed to delete connection:', error);
+        alert('Failed to delete connection');
+    }
+}
+
+// Save Settings
+document.getElementById('saveSettingsForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const chatId = document.getElementById('settingsChatId').value;
+    const settingKey = document.getElementById('settingKey').value;
+    const settingValue = document.getElementById('settingValue').value;
+    try {
+        const response = await fetch('/api/save-settings', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `chat_id=${encodeURIComponent(chatId)}&setting_key=${encodeURIComponent(settingKey)}&setting_value=${encodeURIComponent(settingValue)}`,
+        });
+        const data = await response.json();
+        alert(data.message);
+    } catch (error) {
+        console.error('Failed to save settings:', error);
+        alert('Failed to save settings');
+    }
+});
+
+// Restart Bot
+document.getElementById('restartBotForm').addEventListener('submit', async function(event) {
+    event.preventDefault();
+    try {
+        const response = await fetch('/api/restart-bot', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Authorization': API_KEY
+            },
+            body: `admin_id=${encodeURIComponent(${ADMINS[0]})}`, // Replace with actual admin ID
+        });
+        const data = await response.json();
+        alert(data.message);
+    } catch (error) {
+        console.error('Failed to restart bot:', error);
+        alert('Failed to restart bot');
+    }
+});
+
+// Performance Chart
+const performanceCtx = document.getElementById('performanceChart').getContext('2d');
+new Chart(performanceCtx, {
+    type: 'line',
+    data: {
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+        datasets: [{
+            label: 'Uploads',
+            data: [65, 59, 80, 81, 56, 55],
+            borderColor: '#3b82f6',
+            tension: 0.4
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+
+// Platform Distribution Chart
+const platformCtx = document.getElementById('platformChart').getContext('2d');
+new Chart(platformCtx, {
+    type: 'doughnut',
+    data: {
+        labels: ['YouTube', 'Instagram', 'Facebook', 'WhatsApp', 'Pinterest', 'LinkedIn', 'TikTok', 'Twitter', 'Reddit', 'Telegram'],
+        datasets: [{
+            data: [45, 30, 25, 15, 10, 8, 7, 6, 5, 4],
+            backgroundColor: ['#ff0000', '#e4405f', '#1877F2', '#25D366', '#BD081C', '#0077B5', '#000000', '#1DA1F2', '#FF4500', '#0088CC']
+        }]
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false
+    }
+});
+
+// Fetch System Info on Page Load
+document.addEventListener('DOMContentLoaded', function() {
+    fetchSystemInfo();
+    fetchBotStats();
+    fetchBotStatus();
+    loadFilters();
+    loadGlobalFilters();
+    loadUsers();
+    loadChats();
+    loadFiles();
+    loadConnections();
+});
+
+// Utility Function to Format Size
+function get_size(size) {
+    const units = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB"];
+    size = parseFloat(size);
+    let i = 0;
+    while (size >= 1024.0 && i < units.length) {
+        i += 1;
+        size /= 1024.0;
+    }
+    return `${size.toFixed(2)} ${units[i]}`;
 }