| <!DOCTYPE html> |
| <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/alpinejs@3.x.x/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 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> |
|
|
| |
| <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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| PDF |
| </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> |
|
|
| |
| <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> |
|
|
| |
| <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(); |
| |
| 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> |
