Spaces:
Paused
Paused
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Centre de Gestion - Admin</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div x-data="adminApp()" class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cogs text-primary-600 text-2xl mr-3"></i> | |
| <h1 class="text-xl font-semibold text-gray-900">Centre de Gestion</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button @click="refreshData()" | |
| class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i class="fas fa-sync-alt mr-2" :class="{'animate-spin': loading}"></i> | |
| Actualiser | |
| </button> | |
| <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i class="fas fa-home mr-2"></i> | |
| Retour à l'accueil | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Stats --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- Total Tasks --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-tasks text-primary-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Total des tâches</dt> | |
| <dd class="text-lg font-medium text-gray-900" x-text="stats.total_tasks"></dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Completed Tasks --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Tâches terminées</dt> | |
| <dd class="text-lg font-medium text-gray-900" x-text="stats.completed_tasks"></dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Error Tasks --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Tâches en erreur</dt> | |
| <dd class="text-lg font-medium text-gray-900" x-text="stats.error_tasks"></dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PDF Files --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="p-5"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-file-pdf text-red-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Fichiers PDF</dt> | |
| <dd class="text-lg font-medium text-gray-900" x-text="stats.pdf_files"></dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Status --> | |
| <div class="bg-white shadow rounded-lg mb-8"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> | |
| <i class="fas fa-server mr-2"></i> | |
| État du système | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-3 h-3 rounded-full" :class="stats.latex_installed ? 'bg-green-400' : 'bg-red-400'"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">LaTeX</p> | |
| <p class="text-sm text-gray-500" x-text="stats.latex_installed ? 'Installé' : 'Non installé'"></p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-images text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Images utilisateur</p> | |
| <p class="text-sm text-gray-500" x-text="stats.user_images + ' fichiers'"></p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-clock text-yellow-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Tâches en cours</p> | |
| <p class="text-sm text-gray-500" x-text="stats.pending_tasks + ' actives'"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks Table --> | |
| <div class="bg-white shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| <i class="fas fa-list mr-2"></i> | |
| Gestion des tâches | |
| </h3> | |
| <div class="flex items-center space-x-2"> | |
| <select x-model="statusFilter" class="block w-40 pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"> | |
| <option value="">Tous les statuts</option> | |
| <option value="completed">Terminées</option> | |
| <option value="error">En erreur</option> | |
| <option value="processing">En cours</option> | |
| <option value="pending">En attente</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Loading state --> | |
| <div x-show="loading" class="flex justify-center items-center py-8"> | |
| <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div> | |
| <span class="ml-2 text-gray-600">Chargement...</span> | |
| </div> | |
| <!-- Tasks table --> | |
| <div x-show="!loading" class="overflow-hidden"> | |
| <template x-if="filteredTasks.length === 0"> | |
| <div class="text-center py-8"> | |
| <i class="fas fa-inbox text-gray-400 text-4xl mb-4"></i> | |
| <p class="text-gray-500">Aucune tâche trouvée</p> | |
| </div> | |
| </template> | |
| <div x-show="filteredTasks.length > 0" class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Tâche | |
| </th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Statut | |
| </th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Style | |
| </th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Fichiers | |
| </th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Date | |
| </th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Actions | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <template x-for="task in filteredTasks" :key="task.id"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-gray-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900" x-text="task.id.substring(0, 8) + '...'"></div> | |
| <div class="text-sm text-gray-500" x-text="task.first_filename"></div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full" | |
| :class="{ | |
| 'bg-green-100 text-green-800': task.status === 'completed', | |
| 'bg-red-100 text-red-800': task.status === 'error', | |
| 'bg-yellow-100 text-yellow-800': task.status === 'processing', | |
| 'bg-gray-100 text-gray-800': task.status === 'pending' | |
| }"> | |
| <template x-if="task.status === 'completed'"> | |
| <span><i class="fas fa-check mr-1"></i>Terminée</span> | |
| </template> | |
| <template x-if="task.status === 'error'"> | |
| <span><i class="fas fa-exclamation-triangle mr-1"></i>Erreur</span> | |
| </template> | |
| <template x-if="task.status === 'processing'"> | |
| <span><i class="fas fa-spinner fa-spin mr-1"></i>En cours</span> | |
| </template> | |
| <template x-if="task.status === 'pending'"> | |
| <span><i class="fas fa-clock mr-1"></i>En attente</span> | |
| </template> | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="inline-flex px-2 py-1 text-xs font-medium rounded-md" | |
| :class="{ | |
| 'bg-purple-100 text-purple-800': task.style === 'colorful', | |
| 'bg-blue-100 text-blue-800': task.style === 'light' | |
| }" | |
| x-text="task.style === 'colorful' ? 'Coloré' : 'Léger'"> | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> | |
| <div class="flex items-center space-x-2"> | |
| <span x-show="task.file_count.images > 0" class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"> | |
| <i class="fas fa-image mr-1"></i> | |
| <span x-text="task.file_count.images"></span> | |
| </span> | |
| <span x-show="task.file_count.pdfs > 0" class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-red-100 text-red-800"> | |
| <i class="fas fa-file-pdf mr-1"></i> | |
| <span x-text="task.file_count.pdfs"></span> | |
| </span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <span x-text="task.time_started_formatted"></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <div class="flex items-center space-x-2"> | |
| <template x-if="task.status === 'completed' && task.pdf_filename"> | |
| <a :href="'/download/' + task.id" | |
| class="text-primary-600 hover:text-primary-900 flex items-center"> | |
| <i class="fas fa-download mr-1"></i> | |
| </a> | |
| </template> | |
| <button @click="showTaskDetails(task)" | |
| class="text-indigo-600 hover:text-indigo-900 flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> | |
| Détails | |
| </button> | |
| <button @click="deleteTask(task.id)" | |
| class="text-red-600 hover:text-red-900 flex items-center"> | |
| <i class="fas fa-trash mr-1"></i> | |
| Supprimer | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </template> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Details Modal --> | |
| <div x-show="showModal" | |
| class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" | |
| x-transition:enter="ease-out duration-300" | |
| x-transition:enter-start="opacity-0" | |
| x-transition:enter-end="opacity-100" | |
| x-transition:leave="ease-in duration-200" | |
| x-transition:leave-start="opacity-100" | |
| x-transition:leave-end="opacity-0"> | |
| <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white"> | |
| <div class="mt-3"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Détails de la tâche</h3> | |
| <button @click="showModal = false" | |
| class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <template x-if="selectedTask"> | |
| <div class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">ID de la tâche</label> | |
| <p class="text-sm text-gray-900 font-mono bg-gray-100 p-2 rounded" x-text="selectedTask.id"></p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Statut</label> | |
| <span class="inline-flex px-2 py-1 text-sm font-semibold rounded-full" | |
| :class="{ | |
| 'bg-green-100 text-green-800': selectedTask.status === 'completed', | |
| 'bg-red-100 text-red-800': selectedTask.status === 'error', | |
| 'bg-yellow-100 text-yellow-800': selectedTask.status === 'processing', | |
| 'bg-gray-100 text-gray-800': selectedTask.status === 'pending' | |
| }" | |
| x-text="selectedTask.status"> | |
| </span> | |
| </div> | |
| </div> | |
| <div x-show="selectedTask.error" class="p-4 bg-red-50 border border-red-200 rounded-md"> | |
| <label class="block text-sm font-medium text-red-700 mb-1">Message d'erreur</label> | |
| <p class="text-sm text-red-600" x-text="selectedTask.error"></p> | |
| </div> | |
| <div x-show="selectedTask.response" class="p-4 bg-gray-50 border border-gray-200 rounded-md"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Réponse</label> | |
| <p class="text-sm text-gray-600" x-text="selectedTask.response"></p> | |
| </div> | |
| <div x-show="selectedTask.user_images && selectedTask.user_images.length > 0"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Images utilisateur</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-2"> | |
| <template x-for="image in selectedTask.user_images" :key="image"> | |
| <div class="relative group"> | |
| <img :src="'/user_images/' + image" | |
| :alt="image" | |
| class="w-full h-24 object-cover rounded-md border border-gray-300"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity rounded-md"></div> | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delete Confirmation Modal --> | |
| <div x-show="showDeleteModal" | |
| class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50" | |
| x-transition:enter="ease-out duration-300" | |
| x-transition:enter-start="opacity-0" | |
| x-transition:enter-end="opacity-100" | |
| x-transition:leave="ease-in duration-200" | |
| x-transition:leave-start="opacity-100" | |
| x-transition:leave-end="opacity-0"> | |
| <div class="relative top-32 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white"> | |
| <div class="mt-3 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100"> | |
| <i class="fas fa-exclamation-triangle text-red-600"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mt-2">Supprimer la tâche</h3> | |
| <div class="mt-2 px-7 py-3"> | |
| <p class="text-sm text-gray-500"> | |
| Êtes-vous sûr de vouloir supprimer cette tâche ? Cette action supprimera tous les fichiers associés et ne peut pas être annulée. | |
| </p> | |
| </div> | |
| <div class="flex justify-center space-x-3 mt-4"> | |
| <button @click="showDeleteModal = false" | |
| class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors"> | |
| Annuler | |
| </button> | |
| <button @click="confirmDeleteTask()" | |
| class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"> | |
| Supprimer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function adminApp() { | |
| return { | |
| tasks: [], | |
| stats: { | |
| total_tasks: 0, | |
| completed_tasks: 0, | |
| error_tasks: 0, | |
| pending_tasks: 0, | |
| pdf_files: 0, | |
| user_images: 0, | |
| latex_installed: false | |
| }, | |
| loading: true, | |
| showModal: false, | |
| showDeleteModal: false, | |
| selectedTask: null, | |
| taskToDelete: null, | |
| statusFilter: '', | |
| async init() { | |
| await this.refreshData(); | |
| // Auto-refresh every 30 seconds | |
| setInterval(() => { | |
| this.refreshData(false); | |
| }, 30000); | |
| }, | |
| async refreshData(showLoading = true) { | |
| if (showLoading) this.loading = true; | |
| try { | |
| const [tasksResponse, statsResponse] = await Promise.all([ | |
| fetch('/admin/api/tasks'), | |
| fetch('/admin/api/stats') | |
| ]); | |
| this.tasks = await tasksResponse.json(); | |
| this.stats = await statsResponse.json(); | |
| } catch (error) { | |
| console.error('Erreur lors du rafraîchissement des données:', error); | |
| } finally { | |
| if (showLoading) this.loading = false; | |
| } | |
| }, | |
| showTaskDetails(task) { | |
| this.selectedTask = task; | |
| this.showModal = true; | |
| }, | |
| deleteTask(taskId) { | |
| this.taskToDelete = taskId; | |
| this.showDeleteModal = true; | |
| }, | |
| async confirmDeleteTask() { | |
| if (!this.taskToDelete) return; | |
| try { | |
| const response = await fetch(`/admin/delete_task/${this.taskToDelete}`, { | |
| method: 'POST' | |
| }); | |
| if (response.ok) { | |
| await this.refreshData(); | |
| this.showDeleteModal = false; | |
| this.taskToDelete = null; | |
| } else { | |
| const error = await response.json(); | |
| alert('Erreur lors de la suppression: ' + error.error); | |
| } | |
| } catch (error) { | |
| console.error('Erreur lors de la suppression:', error); | |
| alert('Erreur lors de la suppression de la tâche'); | |
| } | |
| }, | |
| get filteredTasks() { | |
| if (!this.statusFilter) return this.tasks; | |
| return this.tasks.filter(task => task.status === this.statusFilter); | |
| } | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> |