| | <!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> |
