Update static/js/app.js

static/js/app.js

@@ -78,6 +78,27 @@ const app = createApp({
             loadingAudioFiles: false,
             showAudioFilesModal: false,
             audioFileSearchQuery: '',
+            // Add credit system properties
+            // Change the first userCredits to currentUserCredit
+            currentUserCredit: {
+                minutes_used: 0,
+                minutes_quota: 60,
+                minutes_remaining: 60,
+                last_updated: null
+            },
+            showCreditsModal: false,
+            // Admin credit management
+            activeAdminTab: 0,
+            creditSearchQuery: '',
+            userCredits: [], // Keep this one for the admin panel
+            loadingCredits: false,
+            showCreditEditModal: false,
+            selectedUserCredit: null,
+            editCreditForm: {
+                minutes_used: 0,
+                minutes_quota: 10
+            },
+            savingCredits: false
         }
     },
 
@@ -365,6 +386,34 @@ const app = createApp({
             return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
         },
 
+        async loadUserCredits() {
+            try {
+                const response = await fetch('/api/credits', {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Failed to load credit information');
+                }
+                
+                this.currentUserCredit = await response.json();
+                
+            } catch (error) {
+                console.error('Error loading credits:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+
+        showCreditsInfo() {
+            this.loadUserCredits();
+            this.showCreditsModal = true;
+        },
+        
         async processTranscription() {
             const formData = new FormData();
             formData.append('file', this.audioFile[0]);
@@ -431,6 +480,21 @@ const app = createApp({
                     });
                 }
                 
+                if (result.metadata?.credit_usage) {
+                    this.currentUserCredit.minutes_used = result.metadata.credit_usage.total_minutes_used;
+                    this.currentUserCredit.minutes_quota = result.metadata.credit_usage.minutes_quota;
+                    this.currentUserCredit.minutes_remaining = result.metadata.credit_usage.minutes_remaining;
+                    this.currentUserCredit.last_updated = new Date().toISOString();
+                    
+                    // Show credit usage notification
+                    this.$buefy.notification.open({
+                        message: `Used ${result.metadata.credit_usage.minutes_used} minutes of credit. ${result.metadata.credit_usage.minutes_remaining} minutes remaining.`,
+                        type: 'is-info',
+                        position: 'is-bottom-right',
+                        duration: 5000
+                    });
+                }
+
                 if (this.responseFormat === 'verbose_json') {
 
                     // Validate segments
@@ -911,7 +975,6 @@ const app = createApp({
                 this.uploadPaused = false;
             }, 1500);            
         },
-        
         async startChunkedUpload() {
             if (!this.resumableFile || this.uploadInProgress) return;
             
@@ -925,7 +988,6 @@ const app = createApp({
             
             await this.uploadNextChunk();
         },
-        
         async uploadNextChunk() {
             if (this.uploadPaused || !this.uploadInProgress) return;
             
@@ -993,7 +1055,6 @@ const app = createApp({
                 this.uploadPaused = true;
             }
         },
-
         formatTimeRemaining(seconds) {
             if (seconds < 60) {
                 return `${seconds} sec`;
@@ -1007,16 +1068,13 @@ const app = createApp({
                 return `${hours} hr ${minutes} min`;
             }
         },
-        
         pauseUpload() {
             this.uploadPaused = true;
         },
-        
         async resumeUpload() {
             this.uploadPaused = false;
             await this.uploadNextChunk();
         },
-        
         async cancelUpload() {
             if (!this.uploadId) return;
             
@@ -1038,7 +1096,6 @@ const app = createApp({
             this.uploadProgress = 0;
             this.currentChunkIndex = 0;
         },
-        
         async finalizeUpload() {
             try {
                 // Check if uploadId exists
@@ -1124,17 +1181,22 @@ const app = createApp({
             this.showAudioFilesModal = true;
             this.loadUploadedAudioFiles();
         },
-        
         async deleteAudioFile(file) {
             try {
                 this.$buefy.dialog.confirm({
                     title: 'Delete Audio File',
-                    message: `Are you sure you want to delete "${file.filename}"? This action cannot be undone.`,
+                    message: `Are you sure you want to delete "${file.filename}"?`,
                     confirmText: 'Delete',
                     type: 'is-danger',
                     hasIcon: true,
                     onConfirm: async () => {
-                        const response = await fetch(`/api/audio-files/${file.filename}`, {
+                        // Construct the API endpoint with user_id if admin is deleting another user's file
+                        let endpoint = `/api/audio-files/${file.filename}`;
+                        if (this.isAdmin && file.user_id && file.user_id !== this.currentUser.id) {
+                            endpoint += `?user_id=${file.user_id}`;
+                        }
+                        
+                        const response = await fetch(endpoint, {
                             method: 'DELETE',
                             headers: {
                                 'Authorization': `Bearer ${this.token}`
@@ -1146,7 +1208,10 @@ const app = createApp({
                         }
                         
                         // Remove from local list
-                        this.uploadedAudioFiles = this.uploadedAudioFiles.filter(f => f.filename !== file.filename);
+                        this.uploadedAudioFiles = this.uploadedAudioFiles.filter(f => 
+                            !(f.filename === file.filename && 
+                              (!file.user_id || f.user_id === file.user_id))
+                        );
                         
                         this.$buefy.toast.open({
                             message: 'Audio file deleted successfully',
@@ -1162,11 +1227,15 @@ const app = createApp({
                 });
             }
         },
-
         async selectAudioFile(file) {
             try {
+                // Construct the correct URL based on whether the file has a user_id (admin view)
+                const fileUrl = file.user_id 
+                    ? `/uploads/${file.user_id}/${file.filename}`
+                    : `/uploads/${this.currentUser.id}/${file.filename}`;
+                
                 // Fetch the file from the server to create a proper File object
-                const response = await fetch(`/uploads/${file.filename}`);
+                const response = await fetch(fileUrl);
                 const blob = await response.blob();
                 
                 // Create a File object from the blob
@@ -1176,7 +1245,7 @@ const app = createApp({
                 
                 // Set the audio file and URL
                 this.audioFile = [fileObj];
-                this.audioUrl = `/uploads/${file.filename}`;
+                this.audioUrl = fileUrl;
                 
                 // Initialize audio player with the selected file
                 this.initializeAudio();
@@ -1196,7 +1265,323 @@ const app = createApp({
                     type: 'is-danger'
                 });
             }
-        }        
+        },
+        async loadAllUserCredits() {
+            try {
+                this.loadingCredits = true;
+                
+                const response = await fetch('/api/admin/credits', {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Failed to load credit information');
+                }
+                
+                this.userCredits = await response.json();
+                
+            } catch (error) {
+                console.error('Error loading all credits:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            } finally {
+                this.loadingCredits = false;
+            }
+        },
+        editUserCredits(userCredit) {
+            this.selectedUserCredit = userCredit;
+            this.editCreditForm.minutes_used = userCredit.minutes_used;
+            this.editCreditForm.minutes_quota = userCredit.minutes_quota;
+            this.showCreditEditModal = true;
+        },
+        async saveUserCredits() {
+            if (!this.selectedUserCredit) return;
+            
+            try {
+                this.savingCredits = true;
+                
+                const response = await fetch(`/api/admin/credits/${this.selectedUserCredit.user_id}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${this.token}`
+                    },
+                    body: JSON.stringify({
+                        minutes_used: this.editCreditForm.minutes_used,
+                        minutes_quota: this.editCreditForm.minutes_quota
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Failed to update credit information');
+                }
+                
+                // Update local data
+                const updatedCredit = await response.json();
+                const index = this.userCredits.findIndex(c => c.user_id === updatedCredit.user_id);
+                if (index !== -1) {
+                    this.userCredits[index] = updatedCredit;
+                }
+                
+                this.$buefy.toast.open({
+                    message: 'Credit information updated successfully',
+                    type: 'is-success'
+                });
+                
+                this.showCreditEditModal = false;
+            } catch (error) {
+                console.error('Error updating credits:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            } finally {
+                this.savingCredits = false;
+            }
+        },
+        async resetUserCredits(userCredit) {
+            try {
+                this.$buefy.dialog.confirm({
+                    title: 'Reset Credits',
+                    message: `Are you sure you want to reset credits for user "${userCredit.username}"?`,
+                    confirmText: 'Reset',
+                    type: 'is-warning',
+                    hasIcon: true,
+                    onConfirm: async () => {
+                        const response = await fetch(`/api/admin/credits/${userCredit.user_id}/reset`, {
+                            method: 'POST',
+                            headers: {
+                                'Authorization': `Bearer ${this.token}`
+                            }
+                        });
+                        
+                        if (!response.ok) {
+                            throw new Error('Failed to reset credit information');
+                        }
+                        
+                        // Update local data
+                        const updatedCredit = await response.json();
+                        const index = this.userCredits.findIndex(c => c.user_id === updatedCredit.user_id);
+                        if (index !== -1) {
+                            this.userCredits[index] = updatedCredit;
+                        }
+                        
+                        this.$buefy.toast.open({
+                            message: `Credits reset for user ${userCredit.username}`,
+                            type: 'is-success'
+                        });
+                    }
+                });
+            } catch (error) {
+                console.error('Error resetting credits:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+        async resetUserQuota(userCredit) {
+            try {
+                this.$buefy.dialog.prompt({
+                    title: 'Reset Quota',
+                    message: `Enter new quota value for user "${userCredit.username}"`,
+                    inputAttrs: {
+                        type: 'number',
+                        min: '0',
+                        value: '60',
+                        placeholder: 'Minutes'
+                    },
+                    confirmText: 'Reset Quota',
+                    type: 'is-warning',
+                    hasIcon: true,
+                    onConfirm: async (value) => {
+                        const newQuota = parseInt(value);
+                        if (isNaN(newQuota) || newQuota < 0) {
+                            this.$buefy.toast.open({
+                                message: 'Please enter a valid non-negative number',
+                                type: 'is-danger'
+                            });
+                            return;
+                        }
+                        
+                        const response = await fetch(`/api/admin/credits/${userCredit.user_id}/reset-quota`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': `Bearer ${this.token}`
+                            },
+                            body: JSON.stringify({
+                                new_quota: newQuota
+                            })
+                        });
+                        
+                        if (!response.ok) {
+                            throw new Error('Failed to reset quota');
+                        }
+                        
+                        // Update local data
+                        const updatedCredit = await response.json();
+                        const index = this.userCredits.findIndex(c => c.user_id === updatedCredit.user_id);
+                        if (index !== -1) {
+                            this.userCredits[index] = updatedCredit;
+                        }
+                        
+                        this.$buefy.toast.open({
+                            message: `Quota reset for user ${userCredit.username}`,
+                            type: 'is-success'
+                        });
+                    }
+                });
+            } catch (error) {
+                console.error('Error resetting quota:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+        refreshAdminData() {
+            if (this.activeAdminTab === 0) {
+                this.loadUsers();
+            } else if (this.activeAdminTab === 1) {
+                this.loadAllUserCredits();
+            }
+        },
+        downloadTranscription(transcription) {
+            try {
+                // Create a JSON object with all the transcription data
+                const jsonData = {
+                    id: transcription.id,
+                    name: transcription.name,
+                    audio_file: transcription.audio_file,
+                    text: transcription.text,
+                    segments: transcription.segments || [],
+                    created_at: transcription.created_at,
+                    model: transcription.model,
+                    language: transcription.language
+                };
+                
+                // Convert to a JSON string with nice formatting
+                const jsonString = JSON.stringify(jsonData, null, 2);
+                
+                // Create a blob with the JSON data
+                const blob = new Blob([jsonString], { type: 'application/json' });
+                
+                // Create a URL for the blob
+                const url = URL.createObjectURL(blob);
+                
+                // Create a temporary link element
+                const link = document.createElement('a');
+                link.href = url;
+                
+                // Set the filename
+                const filename = `transcription_${transcription.id}_${new Date().toISOString().slice(0, 10)}.json`;
+                link.download = filename;
+                
+                // Append the link to the body
+                document.body.appendChild(link);
+                
+                // Trigger the download
+                link.click();
+                
+                // Clean up
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+                
+                this.$buefy.toast.open({
+                    message: `Transcription downloaded as ${filename}`,
+                    type: 'is-success'
+                });
+            } catch (error) {
+                console.error('Error downloading transcription:', error);
+                this.$buefy.toast.open({
+                    message: `Error downloading transcription: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+        downloadCurrentTranscription() {
+            if (!this.transcriptionText) {
+                this.$buefy.toast.open({
+                    message: 'No transcription to download',
+                    type: 'is-warning'
+                });
+                return;
+            }
+            
+            try {
+                // Create a JSON object with the current transcription data
+                const jsonData = {
+                    text: this.transcriptionText,
+                    segments: this.segments || [],
+                    audio_file: this.audioFile && this.audioFile.length > 0 ? this.audioFile[0].name : 'unknown',
+                    created_at: new Date().toISOString(),
+                    model: this.selectedModel,
+                    language: this.selectedLanguage
+                };
+                
+                // Convert to a JSON string with nice formatting
+                const jsonString = JSON.stringify(jsonData, null, 2);
+                
+                // Create a blob with the JSON data
+                const blob = new Blob([jsonString], { type: 'application/json' });
+                
+                // Create a URL for the blob
+                const url = URL.createObjectURL(blob);
+                
+                // Create a temporary link element
+                const link = document.createElement('a');
+                link.href = url;
+                
+                // Set the filename
+                const filename = `transcription_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+                link.download = filename;
+                
+                // Append the link to the body
+                document.body.appendChild(link);
+                
+                // Trigger the download
+                link.click();
+                
+                // Clean up
+                document.body.removeChild(link);
+                URL.revokeObjectURL(url);
+                
+                this.$buefy.toast.open({
+                    message: `Transcription downloaded as ${filename}`,
+                    type: 'is-success'
+                });
+            } catch (error) {
+                console.error('Error downloading current transcription:', error);
+                this.$buefy.toast.open({
+                    message: `Error downloading transcription: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+        getQuotaTagType(credit) {
+            const remaining = credit.minutes_remaining;
+            const quota = credit.minutes_quota;
+            
+            if (remaining <= 0) {
+                return 'is-danger';
+            } else if (remaining < quota * 0.2) {
+                return 'is-warning';
+            } else {
+                return 'is-success';
+            }
+        },
+        getAudioUrl(file) {
+            if (file.user_id) {
+                return `/uploads/${file.user_id}/${file.filename}`;
+            } else {
+                return `/uploads/${this.currentUser.id}/${file.filename}`;
+            }
+        },
     }, // methods
     // Computed properties
     computed: {
@@ -1220,13 +1605,25 @@ const app = createApp({
             return this.uploadedAudioFiles.filter(file => 
                 file.filename.toLowerCase().includes(query)
             );
-        }
-    },
+        },
+        filteredCredits() {
+            if (!this.creditSearchQuery) {
+                return this.userCredits;
+            }
+            
+            const query = this.creditSearchQuery.toLowerCase();
+            return this.userCredits.filter(credit => 
+                credit.username.toLowerCase().includes(query) || 
+                credit.user_id.toString().includes(query)
+            );
+        },
+    }, // computed
     mounted() {
         this.checkAuth();
         this.loadTranscriptions();
         if (this.isAuthenticated) {
             this.loadUploadedAudioFiles();
+            this.loadUserCredits();
         }
     },
     watch: {
@@ -1239,11 +1636,13 @@ const app = createApp({
         showAdminPanel(newVal) {
             if (newVal && this.isAdmin) {
                 this.loadUsers();
+                this.loadAllUserCredits();
             }
         },
         isAuthenticated(newVal) {
             if (newVal) {
                 this.loadUploadedAudioFiles();
+                this.loadUserCredits();
             }
         }
     },