2130 lines
80 KiB
Vue
2130 lines
80 KiB
Vue
<template>
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<h1 class="text-3xl font-bold text-gray-900 mb-8">Administration</h1>
|
||
|
||
<!-- Loading state -->
|
||
<div v-if="loading" class="text-center py-12">
|
||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
|
||
<p class="mt-4 text-gray-600">Chargement du dashboard...</p>
|
||
</div>
|
||
|
||
<!-- Admin content -->
|
||
<div v-else>
|
||
<!-- Overview Stats -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||
<div class="card p-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-600">Total utilisateurs</p>
|
||
<p class="text-2xl font-bold text-gray-900">{{ dashboard.users.total }}</p>
|
||
</div>
|
||
<Users class="w-8 h-8 text-primary-600" />
|
||
</div>
|
||
<div class="mt-2 text-sm text-gray-500">
|
||
{{ dashboard.users.active }} actifs, {{ dashboard.users.admins }} admins
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card p-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-600">Événements</p>
|
||
<p class="text-2xl font-bold text-gray-900">{{ dashboard.content.events }}</p>
|
||
</div>
|
||
<Calendar class="w-8 h-8 text-success-600" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card p-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-600">Médias</p>
|
||
<p class="text-2xl font-bold text-gray-900">{{ dashboard.content.media_files }}</p>
|
||
</div>
|
||
<Image class="w-8 h-8 text-blue-600" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card p-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-600">Stockage total</p>
|
||
<p class="text-2xl font-bold text-gray-900">{{ dashboard.storage.total_formatted }}</p>
|
||
</div>
|
||
<HardDrive class="w-8 h-8 text-purple-600" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<!-- Storage Breakdown -->
|
||
<div class="card p-6">
|
||
<h2 class="text-xl font-semibold text-gray-900 mb-6">Utilisation du stockage</h2>
|
||
|
||
<div class="space-y-4">
|
||
<div v-for="(category, name) in dashboard.storage.breakdown" :key="name">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="text-sm font-medium text-gray-700 capitalize">{{ name }}</span>
|
||
<span class="text-sm text-gray-600">{{ category.formatted }}</span>
|
||
</div>
|
||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
<div
|
||
class="bg-primary-600 h-2 rounded-full transition-all duration-300"
|
||
:style="`width: ${getStoragePercentage(category.bytes)}%`"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-sm font-medium text-gray-700">Total</span>
|
||
<span class="text-lg font-bold text-gray-900">{{ dashboard.storage.total_formatted }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Actions -->
|
||
<div class="card p-6">
|
||
<h2 class="text-xl font-semibold text-gray-900 mb-6">Actions rapides</h2>
|
||
|
||
<div class="space-y-3">
|
||
<button
|
||
@click="showCleanupModal = true"
|
||
class="w-full btn-secondary text-left"
|
||
>
|
||
<Trash2 class="w-4 h-4 mr-2" />
|
||
Nettoyer les fichiers orphelins
|
||
</button>
|
||
|
||
<button
|
||
@click="refreshDashboard"
|
||
class="w-full btn-secondary text-left"
|
||
>
|
||
<RefreshCw class="w-4 h-4 mr-2" />
|
||
Actualiser les statistiques
|
||
</button>
|
||
|
||
<button
|
||
@click="exportUserData"
|
||
class="w-full btn-secondary text-left"
|
||
>
|
||
<Download class="w-4 h-4 mr-2" />
|
||
Exporter les données utilisateurs
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- System Settings -->
|
||
<div class="card p-6 mt-8">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-xl font-semibold text-gray-900">Paramètres système</h2>
|
||
<div class="flex space-x-2">
|
||
<button
|
||
@click="initializeSettings"
|
||
class="btn-secondary"
|
||
>
|
||
<Settings class="w-4 h-4 mr-2" />
|
||
Initialiser les paramètres
|
||
</button>
|
||
<button
|
||
@click="refreshSettings"
|
||
class="btn-secondary"
|
||
>
|
||
<RefreshCw class="w-4 h-4 mr-2" />
|
||
Actualiser
|
||
</button>
|
||
<button
|
||
@click="testUploadLimits"
|
||
class="btn-secondary"
|
||
>
|
||
<TestTube class="w-4 h-4 mr-2" />
|
||
Tester les limites
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Upload Limits -->
|
||
<div class="mb-6">
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">Limites d'upload</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="label">Taille max albums (MB)</label>
|
||
<input
|
||
v-model="settings.max_album_size_mb"
|
||
type="number"
|
||
class="input"
|
||
min="1"
|
||
max="10000"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="label">Taille max vlogs (MB)</label>
|
||
<input
|
||
v-model="settings.max_vlog_size_mb"
|
||
type="number"
|
||
class="input"
|
||
min="1"
|
||
max="10000"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="label">Taille max images (MB)</label>
|
||
<input
|
||
v-model="settings.max_image_size_mb"
|
||
type="number"
|
||
class="input"
|
||
min="1"
|
||
max="1000"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="label">Taille max vidéos (MB)</label>
|
||
<input
|
||
v-model="settings.max_video_size_mb"
|
||
type="number"
|
||
class="input"
|
||
min="1"
|
||
max="10000"
|
||
>
|
||
</div>
|
||
<div>
|
||
<label class="label">Nombre max de médias par album</label>
|
||
<input
|
||
v-model="settings.max_media_per_album"
|
||
type="number"
|
||
class="input"
|
||
min="1"
|
||
max="200"
|
||
>
|
||
<div class="mt-1 text-sm text-gray-600">
|
||
Limite le nombre de photos/vidéos qu'un utilisateur peut ajouter dans un album
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
@click="saveUploadLimits"
|
||
class="btn-primary mt-4"
|
||
:disabled="savingSettings"
|
||
>
|
||
<Save class="w-4 h-4 mr-2" />
|
||
{{ savingSettings ? 'Sauvegarde...' : 'Sauvegarder les limites' }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- General Settings -->
|
||
<div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">Paramètres généraux</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="label">Nombre max d'utilisateurs</label>
|
||
<input
|
||
v-model="settings.max_users"
|
||
type="number"
|
||
class="input"
|
||
min="1"
|
||
max="1000"
|
||
>
|
||
<div class="mt-1 text-sm text-gray-600">
|
||
Actuellement : {{ users.length }}/{{ settings.max_users }} utilisateurs
|
||
<div class="w-full bg-gray-200 rounded-full h-2 mt-1">
|
||
<div
|
||
class="h-2 rounded-full transition-all duration-300"
|
||
:class="getUsersPercentage() >= 90 ? 'bg-red-500' : getUsersPercentage() >= 70 ? 'bg-yellow-500' : 'bg-green-500'"
|
||
:style="`width: ${getUsersPercentage()}%`"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center mt-6">
|
||
<input
|
||
v-model="settings.enable_registration"
|
||
type="checkbox"
|
||
id="enable_registration"
|
||
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||
>
|
||
<label for="enable_registration" class="ml-2 block text-sm text-gray-900">
|
||
Autoriser les nouvelles inscriptions
|
||
</label>
|
||
</div>
|
||
<div v-if="!settings.enable_registration" class="col-span-2">
|
||
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
|
||
<div class="flex">
|
||
<div class="flex-shrink-0">
|
||
<svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<div class="ml-3">
|
||
<p class="text-sm text-yellow-800">
|
||
<strong>Attention :</strong> Les nouvelles inscriptions sont désactivées. Aucun nouvel utilisateur ne pourra s'inscrire.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
@click="saveGeneralSettings"
|
||
class="btn-primary mt-4"
|
||
:disabled="savingSettings"
|
||
>
|
||
<Save class="w-4 h-4 mr-2" />
|
||
{{ savingSettings ? 'Sauvegarde...' : 'Sauvegarder les paramètres' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information Management -->
|
||
<div class="card p-6 mt-8">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-xl font-semibold text-gray-900">Gestion des informations</h2>
|
||
<button
|
||
@click="showInformationModal = true"
|
||
class="btn-primary"
|
||
>
|
||
<Plus class="w-4 h-4 mr-2" />
|
||
Nouvelle information
|
||
</button>
|
||
</div>
|
||
|
||
<div 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">Titre</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Catégorie</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">Priorité</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">
|
||
<tr
|
||
v-for="info in informations"
|
||
:key="info.id"
|
||
class="hover:bg-gray-50"
|
||
>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div>
|
||
<p class="font-medium text-gray-900">{{ info.title }}</p>
|
||
<p class="text-sm text-gray-600 line-clamp-2">{{ info.content.substring(0, 100) }}{{ info.content.length > 100 ? '...' : '' }}</p>
|
||
</div>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span
|
||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
||
:class="getCategoryBadgeClass(info.category)"
|
||
>
|
||
{{ getCategoryLabel(info.category) }}
|
||
</span>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span
|
||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
||
:class="info.is_published ? 'bg-success-100 text-success-800' : 'bg-yellow-100 text-yellow-800'"
|
||
>
|
||
{{ info.is_published ? 'Publié' : 'Brouillon' }}
|
||
</span>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||
{{ info.priority }}
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||
{{ formatDate(info.created_at) }}
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||
<div class="flex space-x-2">
|
||
<button
|
||
@click="editInformation(info)"
|
||
class="text-blue-600 hover:text-blue-900"
|
||
>
|
||
Modifier
|
||
</button>
|
||
|
||
<button
|
||
@click="toggleInformationPublish(info.id)"
|
||
class="text-green-600 hover:text-green-900"
|
||
>
|
||
{{ info.is_published ? 'Dépublier' : 'Publier' }}
|
||
</button>
|
||
|
||
<button
|
||
@click="deleteInformation(info.id)"
|
||
class="text-red-600 hover:text-red-900"
|
||
>
|
||
Supprimer
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Users Management -->
|
||
<div class="card p-6 mt-8">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-xl font-semibold text-gray-900">Gestion des utilisateurs</h2>
|
||
<button
|
||
@click="refreshUsers"
|
||
class="btn-secondary"
|
||
>
|
||
<RefreshCw class="w-4 h-4 mr-2" />
|
||
Actualiser
|
||
</button>
|
||
</div>
|
||
|
||
<div 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">Utilisateur</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">Rôle</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stockage</th>
|
||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Activité</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">
|
||
<tr
|
||
v-for="user in users"
|
||
:key="user.id"
|
||
class="hover:bg-gray-50"
|
||
>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center space-x-3">
|
||
<img
|
||
v-if="user.avatar_url"
|
||
:src="user.avatar_url"
|
||
:alt="user.full_name"
|
||
class="w-8 h-8 rounded-full object-cover"
|
||
>
|
||
<div v-else class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
|
||
<User class="w-4 h-4 text-gray-500" />
|
||
</div>
|
||
<div>
|
||
<p class="font-medium text-gray-900">{{ user.full_name }}</p>
|
||
<p class="text-sm text-gray-600">{{ user.email }}</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span
|
||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
||
:class="user.is_active ? 'bg-success-100 text-success-800' : 'bg-accent-100 text-accent-800'"
|
||
>
|
||
{{ user.is_active ? 'Actif' : 'Inactif' }}
|
||
</span>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span
|
||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
||
:class="user.is_admin ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800'"
|
||
>
|
||
{{ user.is_admin ? 'Admin' : 'Utilisateur' }}
|
||
</span>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||
{{ user.storage_used }}
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="text-sm text-gray-900">
|
||
<div>{{ user.content_count.posts }} posts</div>
|
||
<div>{{ user.content_count.vlogs }} vlogs</div>
|
||
<div>{{ user.content_count.albums }} albums</div>
|
||
</div>
|
||
</td>
|
||
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||
<div class="flex space-x-2">
|
||
<button
|
||
@click="toggleUserStatus(user.id)"
|
||
:disabled="user.id === currentUser?.id"
|
||
class="text-sm"
|
||
:class="user.is_active ? 'text-accent-600 hover:text-accent-900' : 'text-success-600 hover:text-success-900'"
|
||
>
|
||
{{ user.is_active ? 'Désactiver' : 'Activer' }}
|
||
</button>
|
||
|
||
<button
|
||
@click="toggleUserAdmin(user.id)"
|
||
:disabled="user.id === currentUser?.id"
|
||
class="text-sm text-purple-600 hover:text-purple-900"
|
||
>
|
||
{{ user.is_admin ? 'Retirer admin' : 'Donner admin' }}
|
||
</button>
|
||
|
||
<button
|
||
@click="deleteUser(user.id)"
|
||
:disabled="user.id === currentUser?.id"
|
||
class="text-sm text-accent-600 hover:text-accent-900"
|
||
>
|
||
Supprimer
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gestion des tickets -->
|
||
<div class="bg-white rounded-lg shadow p-6 mb-6 mt-8">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-gray-900">Gestion des tickets</h3>
|
||
<p class="text-gray-600 mt-1">Suivi et résolution des demandes utilisateurs</p>
|
||
</div>
|
||
<div class="flex items-center space-x-3">
|
||
<div class="text-right">
|
||
<div class="text-2xl font-bold text-primary-600 stats-number">{{ filteredTickets.length }}</div>
|
||
<div class="text-sm text-gray-500">Tickets actifs</div>
|
||
</div>
|
||
<div class="w-px h-12 bg-gray-300"></div>
|
||
<div class="text-right">
|
||
<div class="text-2xl font-bold text-success-600 stats-number">{{ resolvedTicketsCount }}</div>
|
||
<div class="text-sm text-gray-500">Résolus</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Filtres avancés -->
|
||
<div class="bg-gray-50 rounded-xl p-4 mb-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<!-- Recherche -->
|
||
<div class="relative">
|
||
<input
|
||
v-model="ticketFilters.search"
|
||
type="text"
|
||
placeholder="Rechercher un ticket..."
|
||
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent filter-input"
|
||
>
|
||
<svg class="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Statut -->
|
||
<select v-model="ticketFilters.status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
|
||
<option value="">Tous les statuts</option>
|
||
<option value="open">🔴 Ouverts</option>
|
||
<option value="in_progress">🟡 En cours</option>
|
||
<option value="resolved">🟢 Résolus</option>
|
||
<option value="closed">⚫ Fermés</option>
|
||
</select>
|
||
|
||
<!-- Type -->
|
||
<select v-model="ticketFilters.type" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
|
||
<option value="">Tous les types</option>
|
||
<option value="bug">🐛 Bug</option>
|
||
<option value="feature_request">💡 Fonctionnalité</option>
|
||
<option value="improvement">✨ Amélioration</option>
|
||
<option value="support">❓ Support</option>
|
||
<option value="other">📝 Autre</option>
|
||
</select>
|
||
|
||
<!-- Priorité -->
|
||
<select v-model="ticketFilters.priority" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
|
||
<option value="">Toutes les priorités</option>
|
||
<option value="urgent">🔴 Urgente</option>
|
||
<option value="high">🟠 Élevée</option>
|
||
<option value="medium">🟡 Moyenne</option>
|
||
<option value="low">🟢 Faible</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Filtres rapides -->
|
||
<div class="flex flex-wrap gap-2 mt-4">
|
||
<button
|
||
@click="setQuickFilter('urgent')"
|
||
class="px-3 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 hover:bg-red-200 transition-colors quick-filter-btn"
|
||
>
|
||
🔴 Urgents ({{ urgentTicketsCount }})
|
||
</button>
|
||
<button
|
||
@click="setQuickFilter('unassigned')"
|
||
class="px-3 py-1 text-xs font-medium rounded-full bg-orange-100 text-orange-800 hover:bg-orange-200 transition-colors quick-filter-btn"
|
||
>
|
||
⚠️ Non assignés ({{ unassignedTicketsCount }})
|
||
</button>
|
||
<button
|
||
@click="setQuickFilter('recent')"
|
||
class="px-3 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200 transition-colors quick-filter-btn"
|
||
>
|
||
📅 Récents ({{ recentTicketsCount }})
|
||
</button>
|
||
<button
|
||
@click="clearFilters"
|
||
class="px-3 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors quick-filter-btn"
|
||
>
|
||
🗑️ Effacer les filtres
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading State -->
|
||
<div v-if="ticketsLoading" class="text-center py-12">
|
||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
||
<p class="text-gray-600">Chargement des tickets...</p>
|
||
</div>
|
||
|
||
<!-- Tickets Grid -->
|
||
<div v-else-if="filteredTickets.length > 0" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
||
<div
|
||
v-for="ticket in filteredTickets"
|
||
:key="ticket.id"
|
||
v-if="ticket && ticket.id"
|
||
class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all duration-200 cursor-pointer group ticket-card"
|
||
@click="showTicketDetails(ticket)"
|
||
>
|
||
<!-- Header avec priorité et statut -->
|
||
<div class="p-4 border-b border-gray-100">
|
||
<div class="flex items-start justify-between mb-3">
|
||
<div class="flex-1 min-w-0">
|
||
<h4 class="text-lg font-semibold text-gray-900 truncate group-hover:text-primary-600 transition-colors">
|
||
{{ ticket.title }}
|
||
</h4>
|
||
<p class="text-sm text-gray-500 mt-1">
|
||
Par {{ ticket.user_name }} • {{ formatRelativeDate(ticket.created_at) }}
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-col items-end space-y-2">
|
||
<!-- Badge priorité -->
|
||
<span :class="getPriorityBadgeClass(ticket.priority)" class="text-xs font-medium px-2 py-1 rounded-full">
|
||
{{ getPriorityLabel(ticket.priority) }}
|
||
</span>
|
||
<!-- Badge statut -->
|
||
<span :class="getStatusBadgeClass(ticket.status)" class="text-xs font-medium px-2 py-1 rounded-full">
|
||
{{ getStatusLabel(ticket.status) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Type de ticket -->
|
||
<div class="flex items-center space-x-2">
|
||
<span :class="getTypeBadgeClass(ticket.ticket_type)" class="text-xs font-medium px-2 py-1 rounded-full">
|
||
{{ getTypeLabel(ticket.ticket_type) }}
|
||
</span>
|
||
<span v-if="ticket.assigned_to" class="text-xs text-gray-500">
|
||
→ {{ getAssignedAdminName(ticket.assigned_to) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<div class="p-4">
|
||
<p class="text-gray-700 text-sm line-clamp-3 leading-relaxed">
|
||
{{ ticket.description }}
|
||
</p>
|
||
<div v-if="ticket.description && ticket.description.length > 150" class="text-xs text-primary-600 mt-2 font-medium">
|
||
Cliquez pour voir plus...
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer avec actions rapides -->
|
||
<div class="p-4 border-t border-gray-100 bg-gray-50 rounded-b-xl">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center space-x-3">
|
||
<span v-if="ticket.screenshot_path" class="text-xs text-gray-500 flex items-center">
|
||
📸 Screenshot
|
||
</span>
|
||
<span v-if="ticket.admin_notes" class="text-xs text-gray-500 flex items-center">
|
||
📝 Notes admin
|
||
</span>
|
||
</div>
|
||
|
||
<div class="flex space-x-2">
|
||
<button
|
||
@click.stop="editTicket(ticket)"
|
||
class="p-2 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
|
||
title="Modifier le ticket"
|
||
>
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
@click.stop="quickStatusUpdate(ticket)"
|
||
class="p-2 text-gray-400 hover:text-success-600 hover:bg-success-50 rounded-lg transition-colors"
|
||
title="Mettre à jour le statut"
|
||
>
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- No Tickets -->
|
||
<div v-else class="text-center py-12">
|
||
<div class="w-24 h-24 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
|
||
<svg class="w-12 h-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucun ticket trouvé</h3>
|
||
<p class="text-gray-500">Aucun ticket ne correspond à vos critères de recherche.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ticket Edit Modal -->
|
||
<transition
|
||
enter-active-class="transition ease-out duration-200"
|
||
enter-from-class="opacity-0"
|
||
enter-to-class="opacity-100"
|
||
leave-active-class="transition ease-in duration-150"
|
||
leave-from-class="opacity-100"
|
||
leave-to-class="opacity-0"
|
||
>
|
||
<div
|
||
v-if="showTicketEditModal"
|
||
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
|
||
>
|
||
<div class="bg-white rounded-xl max-w-3xl w-full p-6 max-h-[90vh] overflow-y-auto">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h2 class="text-2xl font-bold text-gray-900">Modifier le ticket</h2>
|
||
<p class="text-gray-600 mt-1">Mettre à jour les informations et le statut</p>
|
||
</div>
|
||
<button
|
||
@click="showTicketEditModal = false"
|
||
class="text-gray-400 hover:text-gray-600 p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<form @submit.prevent="saveTicketChanges" class="space-y-6">
|
||
<!-- Informations du ticket -->
|
||
<div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl p-6">
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
Informations du ticket
|
||
</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">Titre</label>
|
||
<div class="bg-white px-4 py-3 rounded-lg border border-gray-200 text-gray-900">
|
||
{{ editingTicket.title }}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">Type</label>
|
||
<div class="bg-white px-4 py-3 rounded-lg border border-gray-200 text-gray-900">
|
||
{{ getTypeLabel(editingTicket.ticket_type) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gestion du statut et priorité -->
|
||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
Gestion du ticket
|
||
</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- Status -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">Statut</label>
|
||
<select v-model="editingTicket.status" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors">
|
||
<option value="open">🔴 Ouvert</option>
|
||
<option value="in_progress">🟡 En cours</option>
|
||
<option value="resolved">🟢 Résolu</option>
|
||
<option value="closed">⚫ Fermé</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Priority -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">Priorité</label>
|
||
<select v-model="editingTicket.priority" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors">
|
||
<option value="low">🟢 Faible</option>
|
||
<option value="medium">🟡 Moyenne</option>
|
||
<option value="high">🟠 Élevée</option>
|
||
<option value="urgent">🔴 Urgente</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Assignation et notes -->
|
||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
</svg>
|
||
Assignation et communication
|
||
</h3>
|
||
<div class="space-y-6">
|
||
<!-- Assign to -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">Assigner à</label>
|
||
<select v-model="editingTicket.assigned_to" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors">
|
||
<option value="">👤 Non assigné</option>
|
||
<option v-for="admin in adminUsers" :key="admin.id" :value="admin.id">
|
||
👑 {{ admin.full_name }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Admin Notes -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">Notes administrateur</label>
|
||
<textarea
|
||
v-model="editingTicket.admin_notes"
|
||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors resize-none"
|
||
rows="4"
|
||
placeholder="Notes internes, instructions pour l'équipe ou réponse à l'utilisateur..."
|
||
></textarea>
|
||
<p class="text-xs text-gray-500 mt-1">Ces notes sont visibles uniquement par les administrateurs</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex gap-4 pt-4">
|
||
<button
|
||
type="button"
|
||
@click="showTicketEditModal = false"
|
||
class="flex-1 px-6 py-3 bg-gray-600 text-white font-medium rounded-lg hover:bg-gray-700 transition-colors"
|
||
>
|
||
Annuler
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="flex-1 px-6 py-3 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
:disabled="savingTicket"
|
||
>
|
||
<span v-if="savingTicket" class="flex items-center justify-center">
|
||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
Sauvegarde...
|
||
</span>
|
||
<span v-else>Sauvegarder les modifications</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
|
||
<!-- Ticket Details Modal -->
|
||
<transition
|
||
enter-active-class="transition ease-out duration-200"
|
||
enter-from-class="opacity-0"
|
||
enter-to-class="opacity-100"
|
||
leave-active-class="transition ease-in duration-150"
|
||
leave-from-class="opacity-100"
|
||
leave-to-class="opacity-0"
|
||
>
|
||
<div
|
||
v-if="showTicketDetailsModal"
|
||
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
|
||
>
|
||
<div class="bg-white rounded-xl max-w-5xl w-full p-6 max-h-[90vh] overflow-y-auto">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-2xl font-bold text-gray-900">Détails du ticket</h2>
|
||
<button
|
||
@click="showTicketDetailsModal = false"
|
||
class="text-gray-400 hover:text-gray-600 p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="selectedTicket" class="space-y-6">
|
||
<!-- Header avec métadonnées -->
|
||
<div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl p-6">
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<div>
|
||
<h3 class="text-xl font-bold text-gray-900 mb-2">{{ selectedTicket.title }}</h3>
|
||
<p class="text-sm text-gray-600">
|
||
<span class="font-medium">Créé par :</span> {{ selectedTicket.user_name }}
|
||
</p>
|
||
<p class="text-sm text-gray-600">
|
||
<span class="font-medium">Email :</span> {{ selectedTicket.user_email }}
|
||
</p>
|
||
<p class="text-sm text-gray-600">
|
||
<span class="font-medium">Date :</span> {{ formatDate(selectedTicket.created_at) }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex flex-col space-y-3">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-sm font-medium text-gray-700">Statut :</span>
|
||
<span :class="getStatusBadgeClass(selectedTicket.status)" class="px-3 py-1 rounded-full text-sm font-medium">
|
||
{{ getStatusLabel(selectedTicket.status) }}
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-sm font-medium text-gray-700">Priorité :</span>
|
||
<span :class="getPriorityBadgeClass(selectedTicket.priority)" class="px-3 py-1 rounded-full text-sm font-medium">
|
||
{{ getPriorityLabel(selectedTicket.priority) }}
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-sm font-medium text-gray-700">Type :</span>
|
||
<span :class="getTypeBadgeClass(selectedTicket.ticket_type)" class="px-3 py-1 rounded-full text-sm font-medium">
|
||
{{ getTypeLabel(selectedTicket.ticket_type) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-right">
|
||
<div v-if="selectedTicket.assigned_to" class="mb-3">
|
||
<p class="text-sm font-medium text-gray-700">Assigné à :</p>
|
||
<p class="text-sm text-gray-600">{{ getAssignedAdminName(selectedTicket.assigned_to) }}</p>
|
||
</div>
|
||
<div v-else class="mb-3">
|
||
<p class="text-sm text-orange-600 font-medium">⚠️ Non assigné</p>
|
||
</div>
|
||
|
||
<!-- Actions rapides -->
|
||
<div class="flex flex-col space-y-2">
|
||
<button
|
||
@click="quickStatusUpdate(selectedTicket)"
|
||
class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors"
|
||
>
|
||
{{ getNextStatusLabel(selectedTicket.status) }}
|
||
</button>
|
||
<button
|
||
@click="editTicket(selectedTicket)"
|
||
class="px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors"
|
||
>
|
||
Modifier
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||
<h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
Description
|
||
</h4>
|
||
<div class="bg-gray-50 rounded-lg p-4 modal-description">
|
||
<p class="text-gray-900 whitespace-pre-wrap leading-relaxed break-words">{{ selectedTicket.description }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Screenshot -->
|
||
<div v-if="selectedTicket.screenshot_path" class="bg-white border border-gray-200 rounded-xl p-6">
|
||
<h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
Screenshot
|
||
</h4>
|
||
<div class="bg-gray-50 rounded-lg p-4">
|
||
<img
|
||
:src="getMediaUrl(selectedTicket.screenshot_path)"
|
||
:alt="'Screenshot du ticket ' + selectedTicket.title"
|
||
class="max-w-full h-auto rounded-lg shadow-sm ticket-screenshot cursor-pointer"
|
||
@click="openImageModal(selectedTicket.screenshot_path)"
|
||
>
|
||
<p class="text-xs text-gray-500 mt-2">Cliquez sur l'image pour l'agrandir</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin Notes -->
|
||
<div v-if="selectedTicket.admin_notes" class="bg-white border border-gray-200 rounded-xl p-6">
|
||
<h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
Notes administrateur
|
||
</h4>
|
||
<div class="bg-blue-50 rounded-lg p-4">
|
||
<p class="text-gray-900 whitespace-pre-wrap leading-relaxed">{{ selectedTicket.admin_notes }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Historique des mises à jour -->
|
||
<div class="bg-white border border-gray-200 rounded-xl p-6">
|
||
<h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
Historique
|
||
</h4>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center space-x-3 text-sm">
|
||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
||
<span class="text-gray-600">Créé le {{ formatDate(selectedTicket.created_at) }}</span>
|
||
</div>
|
||
<div v-if="selectedTicket.updated_at !== selectedTicket.created_at" class="flex items-center space-x-3 text-sm">
|
||
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||
<span class="text-gray-600">Modifié le {{ formatDate(selectedTicket.updated_at) }}</span>
|
||
</div>
|
||
<div v-if="selectedTicket.resolved_at" class="flex items-center space-x-3 text-sm">
|
||
<div class="w-2 h-2 bg-purple-500 rounded-full"></div>
|
||
<span class="text-gray-600">Résolu le {{ formatDate(selectedTicket.resolved_at) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- Image Modal -->
|
||
<transition
|
||
enter-active-class="transition ease-out duration-200"
|
||
enter-from-class="opacity-0"
|
||
enter-to-class="opacity-100"
|
||
leave-active-class="transition ease-in duration-150"
|
||
leave-from-class="opacity-100"
|
||
leave-to-class="opacity-0"
|
||
>
|
||
<div
|
||
v-if="showImageModal"
|
||
class="fixed inset-0 bg-black bg-opacity-90 z-60 flex items-center justify-center p-4"
|
||
@click="showImageModal = false"
|
||
>
|
||
<div class="relative max-w-4xl max-h-[90vh]">
|
||
<img
|
||
:src="selectedImageUrl"
|
||
alt="Image agrandie"
|
||
class="max-w-full max-h-full object-contain"
|
||
>
|
||
<button
|
||
@click="showImageModal = false"
|
||
class="absolute top-4 right-4 text-white hover:text-gray-300 bg-black bg-opacity-50 rounded-full p-2"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- Cleanup Modal -->
|
||
<transition
|
||
enter-active-class="transition ease-out duration-200"
|
||
enter-from-class="opacity-0"
|
||
enter-to-class="opacity-100"
|
||
leave-active-class="transition ease-in duration-150"
|
||
leave-from-class="opacity-100"
|
||
leave-to-class="opacity-0"
|
||
>
|
||
<div
|
||
v-if="showCleanupModal"
|
||
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
|
||
>
|
||
<div class="bg-white rounded-xl max-w-2xl w-full p-6 max-h-[90vh] overflow-y-auto">
|
||
<h2 class="text-xl font-semibold mb-4">Nettoyage des fichiers orphelins</h2>
|
||
|
||
<div v-if="cleanupLoading" class="text-center py-8">
|
||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
||
<p class="text-gray-600">Analyse en cours...</p>
|
||
</div>
|
||
|
||
<div v-else-if="orphanedFiles.length > 0">
|
||
<p class="text-gray-700 mb-4">
|
||
{{ orphanedFiles.length }} fichier(s) orphelin(s) trouvé(s) pour un total de {{ totalOrphanedSize }}.
|
||
</p>
|
||
|
||
<div class="max-h-60 overflow-y-auto space-y-2 mb-4">
|
||
<div
|
||
v-for="file in orphanedFiles"
|
||
:key="file.path"
|
||
class="flex items-center justify-between p-2 bg-gray-50 rounded text-sm"
|
||
>
|
||
<div>
|
||
<span class="font-medium">{{ file.type }}</span>
|
||
<span class="text-gray-600 ml-2">{{ file.path }}</span>
|
||
</div>
|
||
<span class="text-gray-500">{{ file.size }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-3">
|
||
<button
|
||
@click="showCleanupModal = false"
|
||
class="flex-1 btn-secondary"
|
||
>
|
||
Annuler
|
||
</button>
|
||
<button
|
||
@click="performCleanup"
|
||
class="flex-1 btn-primary"
|
||
>
|
||
Nettoyer ({{ totalOrphanedSize }})
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="text-center py-8 text-gray-500">
|
||
<CheckCircle class="w-16 h-16 mx-auto mb-4 text-success-500" />
|
||
<h3 class="text-lg font-medium mb-2">Aucun fichier orphelin</h3>
|
||
<p>Votre stockage est propre !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- Information Modal -->
|
||
<transition
|
||
enter-active-class="transition ease-out duration-200"
|
||
enter-from-class="opacity-0"
|
||
enter-to-class="opacity-100"
|
||
leave-active-class="transition ease-in duration-150"
|
||
leave-from-class="opacity-100"
|
||
leave-to-class="opacity-0"
|
||
>
|
||
<div
|
||
v-if="showInformationModal"
|
||
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
|
||
>
|
||
<div class="bg-white rounded-xl max-w-4xl w-full p-6 max-h-[90vh] overflow-y-auto">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h2 class="text-xl font-semibold">
|
||
{{ editingInformation ? 'Modifier l\'information' : 'Nouvelle information' }}
|
||
</h2>
|
||
<button
|
||
@click="showInformationModal = false"
|
||
class="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<form @submit.prevent="saveInformation" class="space-y-6">
|
||
<!-- Title -->
|
||
<div>
|
||
<label class="label">Titre *</label>
|
||
<input
|
||
v-model="informationForm.title"
|
||
type="text"
|
||
class="input"
|
||
required
|
||
maxlength="200"
|
||
placeholder="Titre de l'information"
|
||
>
|
||
</div>
|
||
|
||
<!-- Category -->
|
||
<div>
|
||
<label class="label">Catégorie</label>
|
||
<select v-model="informationForm.category" class="input">
|
||
<option value="general">Général</option>
|
||
<option value="release">Nouvelle version</option>
|
||
<option value="upcoming">À venir</option>
|
||
<option value="maintenance">Maintenance</option>
|
||
<option value="feature">Nouvelle fonctionnalité</option>
|
||
<option value="bugfix">Correction de bug</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Priority -->
|
||
<div>
|
||
<label class="label">Priorité</label>
|
||
<input
|
||
v-model="informationForm.priority"
|
||
type="number"
|
||
class="input"
|
||
min="0"
|
||
max="10"
|
||
placeholder="0 (normal) à 10 (très important)"
|
||
>
|
||
<div class="mt-1 text-sm text-gray-600">
|
||
Les informations avec une priorité plus élevée apparaîtront en premier
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content -->
|
||
<div>
|
||
<label class="label">Contenu *</label>
|
||
<textarea
|
||
v-model="informationForm.content"
|
||
class="input resize-none"
|
||
rows="8"
|
||
required
|
||
placeholder="Contenu de l'information (supporte le formatage basique)"
|
||
></textarea>
|
||
<div class="mt-1 text-sm text-gray-600">
|
||
Utilisez des sauts de ligne pour structurer votre contenu
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Published Status -->
|
||
<div class="flex items-center">
|
||
<input
|
||
v-model="informationForm.is_published"
|
||
type="checkbox"
|
||
id="is_published"
|
||
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||
>
|
||
<label for="is_published" class="ml-2 block text-sm text-gray-900">
|
||
Publier immédiatement
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex gap-3 pt-4">
|
||
<button
|
||
type="button"
|
||
@click="showInformationModal = false"
|
||
class="flex-1 btn-secondary"
|
||
>
|
||
Annuler
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="flex-1 btn-primary"
|
||
:disabled="savingInformation"
|
||
>
|
||
<Save class="w-4 h-4 mr-2" />
|
||
{{ savingInformation ? 'Sauvegarde...' : 'Sauvegarder' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, watch } from 'vue'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import { useToast } from 'vue-toastification'
|
||
import axios from '@/utils/axios'
|
||
import {
|
||
Users,
|
||
Calendar,
|
||
Image,
|
||
HardDrive,
|
||
User,
|
||
Trash2,
|
||
RefreshCw,
|
||
Download,
|
||
CheckCircle,
|
||
Settings,
|
||
Save,
|
||
TestTube,
|
||
Plus
|
||
} from 'lucide-vue-next'
|
||
import { formatDistanceToNow } from 'date-fns'
|
||
import { fr } from 'date-fns/locale'
|
||
|
||
const authStore = useAuthStore()
|
||
const toast = useToast()
|
||
|
||
const loading = ref(true)
|
||
const dashboard = ref({})
|
||
const users = ref([])
|
||
const showCleanupModal = ref(false)
|
||
const cleanupLoading = ref(false)
|
||
const orphanedFiles = ref([])
|
||
|
||
// Information Management
|
||
const showInformationModal = ref(false)
|
||
const informations = ref([])
|
||
const editingInformation = ref(null)
|
||
const savingInformation = ref(false)
|
||
const informationForm = ref({
|
||
title: '',
|
||
content: '',
|
||
category: 'general',
|
||
priority: 0,
|
||
is_published: true
|
||
})
|
||
|
||
// Settings
|
||
const settings = ref({
|
||
max_album_size_mb: 100,
|
||
max_vlog_size_mb: 500,
|
||
max_image_size_mb: 10,
|
||
max_video_size_mb: 3000, // Corrigé pour correspondre à la DB
|
||
max_media_per_album: 50,
|
||
max_users: 50,
|
||
enable_registration: true
|
||
})
|
||
const savingSettings = ref(false)
|
||
|
||
const currentUser = computed(() => authStore.user)
|
||
|
||
const totalOrphanedSize = computed(() => {
|
||
if (orphanedFiles.value.length === 0) return '0 B'
|
||
const totalBytes = orphanedFiles.value.reduce((sum, file) => {
|
||
const size = file.size.replace(/[^\d.]/g, '')
|
||
const unit = file.size.replace(/[\d.]/g, '')
|
||
const multiplier = unit === 'KB' ? 1024 : unit === 'MB' ? 1024 * 1024 : unit === 'GB' ? 1024 * 1024 * 1024 : 1
|
||
return sum + (parseFloat(size) * multiplier)
|
||
}, 0)
|
||
|
||
if (totalBytes < 1024) return `${totalBytes} B`
|
||
if (totalBytes < 1024 * 1024) return `${(totalBytes / 1024).toFixed(1)} KB`
|
||
if (totalBytes < 1024 * 1024 * 1024) return `${(totalBytes / (1024 * 1024)).toFixed(1)} MB`
|
||
return `${(totalBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
|
||
})
|
||
|
||
function getStoragePercentage(bytes) {
|
||
if (dashboard.value.storage.total_bytes === 0) return 0
|
||
return Math.round((bytes / dashboard.value.storage.total_bytes) * 100)
|
||
}
|
||
|
||
function getUsersPercentage() {
|
||
if (settings.value.max_users === 0) return 0
|
||
return Math.round((users.value.length / settings.value.max_users) * 100)
|
||
}
|
||
|
||
async function fetchDashboard() {
|
||
try {
|
||
const response = await axios.get('/api/admin/dashboard')
|
||
dashboard.value = response.data
|
||
} catch (error) {
|
||
toast.error('Erreur lors du chargement du dashboard')
|
||
console.error('Error fetching dashboard:', error)
|
||
}
|
||
}
|
||
|
||
async function fetchUsers() {
|
||
try {
|
||
const response = await axios.get('/api/admin/users')
|
||
users.value = response.data
|
||
} catch (error) {
|
||
toast.error('Erreur lors du chargement des utilisateurs')
|
||
console.error('Error fetching users:', error)
|
||
}
|
||
}
|
||
|
||
async function refreshDashboard() {
|
||
await fetchDashboard()
|
||
toast.success('Dashboard actualisé')
|
||
}
|
||
|
||
async function refreshUsers() {
|
||
await fetchUsers()
|
||
toast.success('Liste des utilisateurs actualisée')
|
||
}
|
||
|
||
async function toggleUserStatus(userId) {
|
||
try {
|
||
const response = await axios.put(`/api/admin/users/${userId}/toggle-active`)
|
||
await fetchUsers()
|
||
toast.success(response.data.message)
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la modification du statut')
|
||
}
|
||
}
|
||
|
||
async function toggleUserAdmin(userId) {
|
||
try {
|
||
const response = await axios.put(`/api/admin/users/${userId}/toggle-admin`)
|
||
await fetchUsers()
|
||
toast.success(response.data.message)
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la modification du rôle')
|
||
}
|
||
}
|
||
|
||
async function deleteUser(userId) {
|
||
if (!confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.')) return
|
||
|
||
try {
|
||
await axios.delete(`/api/admin/users/${userId}`)
|
||
await fetchUsers()
|
||
toast.success('Utilisateur supprimé')
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la suppression')
|
||
}
|
||
}
|
||
|
||
async function exportUserData() {
|
||
try {
|
||
const response = await axios.get('/api/admin/users', { responseType: 'blob' })
|
||
const url = window.URL.createObjectURL(new Blob([response.data]))
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.setAttribute('download', 'users_export.json')
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
link.remove()
|
||
toast.success('Export des utilisateurs téléchargé')
|
||
} catch (error) {
|
||
toast.error('Erreur lors de l\'export')
|
||
}
|
||
}
|
||
|
||
async function checkOrphanedFiles() {
|
||
cleanupLoading.value = true
|
||
try {
|
||
const response = await axios.get('/api/admin/storage/cleanup')
|
||
orphanedFiles.value = response.data.orphaned_files
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la vérification des fichiers orphelins')
|
||
} finally {
|
||
cleanupLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function performCleanup() {
|
||
try {
|
||
await axios.delete('/api/admin/storage/cleanup')
|
||
orphanedFiles.value = []
|
||
await fetchDashboard()
|
||
toast.success('Nettoyage terminé')
|
||
showCleanupModal.value = false
|
||
} catch (error) {
|
||
toast.error('Erreur lors du nettoyage')
|
||
}
|
||
}
|
||
|
||
// Settings functions
|
||
async function fetchSettings() {
|
||
try {
|
||
const [uploadLimitsResponse, generalResponse] = await Promise.all([
|
||
axios.get('/api/settings/upload-limits'),
|
||
axios.get('/api/settings/category/general')
|
||
])
|
||
|
||
// Update upload limits
|
||
const uploadLimits = uploadLimitsResponse.data
|
||
console.log('DEBUG - Upload limits from API:', uploadLimits)
|
||
|
||
// Convertir en nombres pour éviter les problèmes de type
|
||
settings.value.max_album_size_mb = parseInt(uploadLimits.max_album_size_mb)
|
||
settings.value.max_vlog_size_mb = parseInt(uploadLimits.max_vlog_size_mb)
|
||
settings.value.max_image_size_mb = parseInt(uploadLimits.max_image_size_mb)
|
||
settings.value.max_video_size_mb = parseInt(uploadLimits.max_video_size_mb)
|
||
settings.value.max_media_per_album = parseInt(uploadLimits.max_media_per_album)
|
||
|
||
console.log('DEBUG - Settings after update:', settings.value)
|
||
|
||
// Update general settings
|
||
const generalSettings = generalResponse.data.settings
|
||
const maxUsersSetting = generalSettings.find(s => s.key === 'max_users')
|
||
const enableRegSetting = generalSettings.find(s => s.key === 'enable_registration')
|
||
|
||
if (maxUsersSetting) settings.value.max_users = parseInt(maxUsersSetting.value)
|
||
if (enableRegSetting) settings.value.enable_registration = enableRegSetting.value === 'true'
|
||
} catch (error) {
|
||
console.error('Error fetching settings:', error)
|
||
}
|
||
}
|
||
|
||
async function saveUploadLimits() {
|
||
savingSettings.value = true
|
||
try {
|
||
const updates = [
|
||
{ key: 'max_album_size_mb', value: settings.value.max_album_size_mb.toString() },
|
||
{ key: 'max_vlog_size_mb', value: settings.value.max_vlog_size_mb.toString() },
|
||
{ key: 'max_image_size_mb', value: settings.value.max_image_size_mb.toString() },
|
||
{ key: 'max_video_size_mb', value: settings.value.max_video_size_mb.toString() },
|
||
{ key: 'max_media_per_album', value: settings.value.max_media_per_album.toString() }
|
||
]
|
||
|
||
await Promise.all(updates.map(update =>
|
||
axios.put(`/api/settings/${update.key}`, { value: update.value })
|
||
))
|
||
|
||
toast.success('Limites d\'upload mises à jour')
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la sauvegarde des limites')
|
||
console.error('Error saving upload limits:', error)
|
||
} finally {
|
||
savingSettings.value = false
|
||
}
|
||
}
|
||
|
||
async function saveGeneralSettings() {
|
||
savingSettings.value = true
|
||
try {
|
||
const updates = [
|
||
{ key: 'max_users', value: settings.value.max_users.toString() },
|
||
{ key: 'enable_registration', value: settings.value.enable_registration.toString() }
|
||
]
|
||
|
||
await Promise.all(updates.map(update =>
|
||
axios.put(`/api/settings/${update.key}`, { value: update.value })
|
||
))
|
||
|
||
toast.success('Paramètres généraux mis à jour')
|
||
|
||
// Afficher un avertissement si l'inscription est désactivée
|
||
if (!settings.value.enable_registration) {
|
||
toast.warning('⚠️ Les nouvelles inscriptions sont maintenant désactivées')
|
||
}
|
||
|
||
// Afficher un avertissement si la limite d'utilisateurs est proche
|
||
const currentUsersCount = users.value.length
|
||
if (currentUsersCount >= settings.value.max_users * 0.9) {
|
||
toast.warning(`⚠️ Attention : ${currentUsersCount}/${settings.value.max_users} utilisateurs (${Math.round(currentUsersCount/settings.value.max_users*100)}%)`)
|
||
}
|
||
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la sauvegarde des paramètres')
|
||
console.error('Error saving general settings:', error)
|
||
} finally {
|
||
savingSettings.value = false
|
||
}
|
||
}
|
||
|
||
async function initializeSettings() {
|
||
try {
|
||
await axios.post('/api/settings/initialize-defaults')
|
||
await fetchSettings()
|
||
toast.success('Paramètres par défaut initialisés')
|
||
} catch (error) {
|
||
toast.error('Erreur lors de l\'initialisation')
|
||
console.error('Error initializing settings:', error)
|
||
}
|
||
}
|
||
|
||
async function refreshSettings() {
|
||
await fetchSettings()
|
||
toast.success('Paramètres actualisés')
|
||
}
|
||
|
||
async function testUploadLimits() {
|
||
try {
|
||
const response = await axios.get('/api/settings/test-upload-limits')
|
||
const testResults = response.data
|
||
|
||
console.log('Test results:', testResults)
|
||
|
||
// Afficher les résultats dans une alerte
|
||
const message = `
|
||
Test des limites d'upload :
|
||
|
||
Images (JPEG) : ${testResults.image_upload_limit.mb}MB (${testResults.image_upload_limit.bytes} bytes)
|
||
Vidéos (MP4) : ${testResults.video_upload_limit.mb}MB (${testResults.video_upload_limit.bytes} bytes)
|
||
|
||
Validation des types :
|
||
- Images JPEG autorisées : ${testResults.file_type_validation.image_jpeg_allowed ? '✅' : '❌'}
|
||
- Vidéos MP4 autorisées : ${testResults.file_type_validation.video_mp4_allowed ? '✅' : '❌'}
|
||
- PDF non autorisé : ${testResults.file_type_validation.pdf_not_allowed ? '✅' : '❌'}
|
||
`.trim()
|
||
|
||
alert(message)
|
||
toast.success('Test des limites terminé - voir la console pour plus de détails')
|
||
|
||
} catch (error) {
|
||
toast.error('Erreur lors du test des limites')
|
||
console.error('Error testing upload limits:', error)
|
||
}
|
||
}
|
||
|
||
// Information Management Functions
|
||
async function fetchInformations() {
|
||
try {
|
||
const response = await axios.get('/api/information/')
|
||
informations.value = response.data
|
||
} catch (error) {
|
||
toast.error('Erreur lors du chargement des informations')
|
||
console.error('Error fetching informations:', error)
|
||
}
|
||
}
|
||
|
||
function resetInformationForm() {
|
||
informationForm.value = {
|
||
title: '',
|
||
content: '',
|
||
category: 'general',
|
||
priority: 0,
|
||
is_published: true
|
||
}
|
||
editingInformation.value = null
|
||
}
|
||
|
||
function editInformation(info) {
|
||
editingInformation.value = info
|
||
informationForm.value = {
|
||
title: info.title,
|
||
content: info.content,
|
||
category: info.category,
|
||
priority: info.priority,
|
||
is_published: info.is_published
|
||
}
|
||
showInformationModal.value = true
|
||
}
|
||
|
||
async function saveInformation() {
|
||
savingInformation.value = true
|
||
try {
|
||
if (editingInformation.value) {
|
||
// Update existing information
|
||
await axios.put(`/api/information/${editingInformation.value.id}`, informationForm.value)
|
||
toast.success('Information mise à jour')
|
||
} else {
|
||
// Create new information
|
||
await axios.post('/api/information/', informationForm.value)
|
||
toast.success('Information créée')
|
||
}
|
||
|
||
await fetchInformations()
|
||
showInformationModal.value = false
|
||
resetInformationForm()
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la sauvegarde')
|
||
console.error('Error saving information:', error)
|
||
} finally {
|
||
savingInformation.value = false
|
||
}
|
||
}
|
||
|
||
async function toggleInformationPublish(informationId) {
|
||
try {
|
||
const response = await axios.put(`/api/information/${informationId}/toggle-publish`)
|
||
await fetchInformations()
|
||
toast.success(response.data.message)
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la modification du statut')
|
||
}
|
||
}
|
||
|
||
async function deleteInformation(informationId) {
|
||
if (!confirm('Êtes-vous sûr de vouloir supprimer cette information ? Cette action est irréversible.')) return
|
||
|
||
try {
|
||
await axios.delete(`/api/information/${informationId}`)
|
||
await fetchInformations()
|
||
toast.success('Information supprimée')
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la suppression')
|
||
}
|
||
}
|
||
|
||
function getCategoryLabel(category) {
|
||
const labels = {
|
||
'general': 'Général',
|
||
'release': 'Nouvelle version',
|
||
'upcoming': 'À venir',
|
||
'maintenance': 'Maintenance',
|
||
'feature': 'Nouvelle fonctionnalité',
|
||
'bugfix': 'Correction de bug'
|
||
}
|
||
return labels[category] || category
|
||
}
|
||
|
||
function getCategoryBadgeClass(category) {
|
||
const classes = {
|
||
'general': 'bg-gray-100 text-gray-800',
|
||
'release': 'bg-green-100 text-green-800',
|
||
'upcoming': 'bg-blue-100 text-blue-800',
|
||
'maintenance': 'bg-yellow-100 text-yellow-800',
|
||
'feature': 'bg-purple-100 text-purple-800',
|
||
'bugfix': 'bg-red-100 text-red-800'
|
||
}
|
||
return classes[category] || 'bg-gray-100 text-gray-800'
|
||
}
|
||
|
||
// Fonctions utilitaires pour les tickets
|
||
function getTypeLabel(type) {
|
||
const labels = {
|
||
'bug': '🐛 Bug',
|
||
'feature_request': '💡 Fonctionnalité',
|
||
'improvement': '✨ Amélioration',
|
||
'support': '❓ Support',
|
||
'other': '📝 Autre'
|
||
}
|
||
return labels[type] || type
|
||
}
|
||
|
||
function getStatusLabel(status) {
|
||
const labels = {
|
||
'open': 'Ouvert',
|
||
'in_progress': 'En cours',
|
||
'resolved': 'Résolu',
|
||
'closed': 'Fermé'
|
||
}
|
||
return labels[status] || status
|
||
}
|
||
|
||
function getPriorityLabel(priority) {
|
||
const labels = {
|
||
'low': 'Faible',
|
||
'medium': 'Moyenne',
|
||
'high': 'Élevée',
|
||
'urgent': 'Urgente'
|
||
}
|
||
return labels[priority] || priority
|
||
}
|
||
|
||
function getTypeBadgeClass(type) {
|
||
const classes = {
|
||
'bug': 'bg-red-100 text-red-800',
|
||
'feature_request': 'bg-blue-100 text-blue-800',
|
||
'improvement': 'bg-green-100 text-green-800',
|
||
'support': 'bg-yellow-100 text-yellow-800',
|
||
'other': 'bg-gray-100 text-gray-800'
|
||
}
|
||
return classes[type] || 'bg-gray-100 text-gray-800'
|
||
}
|
||
|
||
function getStatusBadgeClass(status) {
|
||
const classes = {
|
||
'open': 'bg-blue-100 text-blue-800',
|
||
'in_progress': 'bg-yellow-100 text-yellow-800',
|
||
'resolved': 'bg-green-100 text-green-800',
|
||
'closed': 'bg-gray-100 text-gray-800'
|
||
}
|
||
return classes[status] || 'bg-gray-100 text-gray-800'
|
||
}
|
||
|
||
function getPriorityBadgeClass(priority) {
|
||
const classes = {
|
||
'low': 'bg-green-100 text-green-800',
|
||
'medium': 'bg-yellow-100 text-yellow-800',
|
||
'high': 'bg-orange-100 text-orange-800',
|
||
'urgent': 'bg-red-100 text-red-800'
|
||
}
|
||
return classes[priority] || 'bg-gray-100 text-gray-800'
|
||
}
|
||
|
||
function formatDate(date) {
|
||
return formatDistanceToNow(new Date(date), { addSuffix: true, locale: fr })
|
||
}
|
||
|
||
// Gestion des tickets
|
||
const ticketsLoading = ref(false)
|
||
const tickets = ref([])
|
||
const showTicketEditModal = ref(false)
|
||
const editingTicket = ref({
|
||
id: null,
|
||
title: '',
|
||
description: '',
|
||
ticket_type: 'bug',
|
||
priority: 'medium',
|
||
status: 'open',
|
||
assigned_to: '',
|
||
admin_notes: ''
|
||
})
|
||
const savingTicket = ref(false)
|
||
const ticketFilters = ref({
|
||
status: '',
|
||
type: '',
|
||
priority: '',
|
||
search: ''
|
||
})
|
||
|
||
// Nouvelles variables pour le modal de détails
|
||
const showTicketDetailsModal = ref(false)
|
||
const selectedTicket = ref(null)
|
||
const showImageModal = ref(false)
|
||
const selectedImageUrl = ref('')
|
||
|
||
// Computed properties pour les statistiques
|
||
const resolvedTicketsCount = computed(() => {
|
||
if (!tickets.value || !Array.isArray(tickets.value)) return 0
|
||
return tickets.value.filter(ticket => ticket && ticket.status && (ticket.status === 'resolved' || ticket.status === 'closed')).length
|
||
})
|
||
|
||
const urgentTicketsCount = computed(() => {
|
||
if (!tickets.value || !Array.isArray(tickets.value)) return 0
|
||
return tickets.value.filter(ticket => ticket && ticket.priority && ticket.priority === 'urgent').length
|
||
})
|
||
|
||
const unassignedTicketsCount = computed(() => {
|
||
if (!tickets.value || !Array.isArray(tickets.value)) return 0
|
||
return tickets.value.filter(ticket => ticket && !ticket.assigned_to).length
|
||
})
|
||
|
||
const recentTicketsCount = computed(() => {
|
||
if (!tickets.value || !Array.isArray(tickets.value)) return 0
|
||
const oneWeekAgo = new Date()
|
||
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)
|
||
return tickets.value.filter(ticket => ticket && ticket.created_at && new Date(ticket.created_at) > oneWeekAgo).length
|
||
})
|
||
|
||
async function fetchTickets() {
|
||
ticketsLoading.value = true
|
||
try {
|
||
const response = await axios.get('/api/tickets/admin')
|
||
tickets.value = response.data
|
||
} catch (error) {
|
||
toast.error('Erreur lors du chargement des tickets')
|
||
console.error('Error fetching tickets:', error)
|
||
} finally {
|
||
ticketsLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function editTicket(ticket) {
|
||
editingTicket.value = { ...ticket }
|
||
showTicketEditModal.value = true
|
||
}
|
||
|
||
async function saveTicketChanges() {
|
||
savingTicket.value = true
|
||
try {
|
||
await axios.put(`/api/tickets/${editingTicket.value.id}/admin`, editingTicket.value)
|
||
toast.success('Ticket mis à jour')
|
||
await fetchTickets()
|
||
showTicketEditModal.value = false
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la sauvegarde du ticket')
|
||
console.error('Error saving ticket:', error)
|
||
} finally {
|
||
savingTicket.value = false
|
||
}
|
||
}
|
||
|
||
async function deleteTicket(ticketId) {
|
||
if (!confirm('Êtes-vous sûr de vouloir supprimer ce ticket ? Cette action est irréversible.')) return
|
||
|
||
try {
|
||
await axios.delete(`/api/tickets/${ticketId}`)
|
||
toast.success('Ticket supprimé')
|
||
await fetchTickets()
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la suppression du ticket')
|
||
console.error('Error deleting ticket:', error)
|
||
}
|
||
}
|
||
|
||
const filteredTickets = computed(() => {
|
||
if (!tickets.value || !Array.isArray(tickets.value)) {
|
||
return []
|
||
}
|
||
|
||
return tickets.value.filter(ticket => {
|
||
if (!ticket || !ticket.id) {
|
||
return false
|
||
}
|
||
|
||
const matchesStatus = ticketFilters.value.status ? ticket.status === ticketFilters.value.status : true
|
||
const matchesType = ticketFilters.value.type ? ticket.ticket_type === ticketFilters.value.type : true
|
||
const matchesPriority = ticketFilters.value.priority ? ticket.priority === ticketFilters.value.priority : true
|
||
const matchesSearch = ticketFilters.value.search ?
|
||
(ticket.title && ticket.title.toLowerCase().includes(ticketFilters.value.search.toLowerCase())) ||
|
||
(ticket.description && ticket.description.toLowerCase().includes(ticketFilters.value.search.toLowerCase())) ||
|
||
(ticket.user_name && ticket.user_name.toLowerCase().includes(ticketFilters.value.search.toLowerCase())) ||
|
||
(ticket.assigned_to?.full_name && ticket.assigned_to.full_name.toLowerCase().includes(ticketFilters.value.search.toLowerCase()))
|
||
: true
|
||
return matchesStatus && matchesType && matchesPriority && matchesSearch
|
||
})
|
||
})
|
||
|
||
const adminUsers = computed(() => {
|
||
return users.value.filter(user => user.is_admin)
|
||
})
|
||
|
||
// Nouvelles fonctions pour le modal de détails
|
||
function showTicketDetails(ticket) {
|
||
selectedTicket.value = ticket
|
||
showTicketDetailsModal.value = true
|
||
}
|
||
|
||
function openImageModal(imageUrl) {
|
||
selectedImageUrl.value = getMediaUrl(imageUrl)
|
||
showImageModal.value = true
|
||
}
|
||
|
||
function getMediaUrl(path) {
|
||
if (!path) return ''
|
||
return path.startsWith('http') ? path : `http://localhost:8000${path}`
|
||
}
|
||
|
||
// Nouvelles fonctions pour les filtres et actions rapides
|
||
function setQuickFilter(filterType) {
|
||
switch (filterType) {
|
||
case 'urgent':
|
||
ticketFilters.value.priority = 'urgent'
|
||
ticketFilters.value.status = ''
|
||
ticketFilters.value.type = ''
|
||
break
|
||
case 'unassigned':
|
||
ticketFilters.value.assigned_to = null
|
||
ticketFilters.value.status = 'open'
|
||
break
|
||
case 'recent':
|
||
ticketFilters.value.status = 'open'
|
||
ticketFilters.value.priority = ''
|
||
break
|
||
}
|
||
}
|
||
|
||
function clearFilters() {
|
||
ticketFilters.value = {
|
||
status: '',
|
||
type: '',
|
||
priority: '',
|
||
search: ''
|
||
}
|
||
}
|
||
|
||
function quickStatusUpdate(ticket) {
|
||
// Logique pour mettre à jour rapidement le statut
|
||
const nextStatus = getNextStatus(ticket.status)
|
||
if (nextStatus) {
|
||
updateTicketStatus(ticket.id, nextStatus)
|
||
}
|
||
}
|
||
|
||
function getNextStatus(currentStatus) {
|
||
const statusFlow = {
|
||
'open': 'in_progress',
|
||
'in_progress': 'resolved',
|
||
'resolved': 'closed',
|
||
'closed': 'open'
|
||
}
|
||
return statusFlow[currentStatus]
|
||
}
|
||
|
||
function getNextStatusLabel(currentStatus) {
|
||
const statusLabels = {
|
||
'open': '🟡 Mettre en cours',
|
||
'in_progress': '🟢 Marquer résolu',
|
||
'resolved': '⚫ Fermer',
|
||
'closed': '🔴 Réouvrir'
|
||
}
|
||
return statusLabels[currentStatus] || 'Mettre à jour'
|
||
}
|
||
|
||
async function updateTicketStatus(ticketId, newStatus) {
|
||
try {
|
||
await axios.put(`/api/tickets/${ticketId}/admin`, { status: newStatus })
|
||
await fetchTickets()
|
||
toast.success(`Statut mis à jour vers ${getStatusLabel(newStatus)}`)
|
||
} catch (error) {
|
||
toast.error('Erreur lors de la mise à jour du statut')
|
||
console.error('Error updating ticket status:', error)
|
||
}
|
||
}
|
||
|
||
function getAssignedAdminName(adminId) {
|
||
const admin = users.value.find(user => user.id === adminId)
|
||
return admin ? admin.full_name : 'Admin inconnu'
|
||
}
|
||
|
||
function formatRelativeDate(date) {
|
||
const now = new Date()
|
||
const ticketDate = new Date(date)
|
||
const diffTime = Math.abs(now - ticketDate)
|
||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||
|
||
if (diffDays === 1) return 'Aujourd\'hui'
|
||
if (diffDays === 2) return 'Hier'
|
||
if (diffDays <= 7) return `Il y a ${diffDays - 1} jours`
|
||
if (diffDays <= 30) return `Il y a ${Math.floor(diffDays / 7)} semaines`
|
||
return formatDate(date)
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await Promise.all([fetchDashboard(), fetchUsers(), fetchSettings(), fetchInformations(), fetchTickets()])
|
||
loading.value = false
|
||
})
|
||
|
||
// Watch for cleanup modal
|
||
watch(showCleanupModal, (newValue) => {
|
||
if (newValue) {
|
||
checkOrphanedFiles()
|
||
}
|
||
})
|
||
|
||
// Watch for information modal
|
||
watch(showInformationModal, (newValue) => {
|
||
if (!newValue) {
|
||
resetInformationForm()
|
||
}
|
||
})
|
||
|
||
// Watch for ticket edit modal
|
||
watch(showTicketEditModal, (newValue) => {
|
||
if (!newValue) {
|
||
editingTicket.value = {
|
||
id: null,
|
||
title: '',
|
||
description: '',
|
||
ticket_type: 'bug',
|
||
priority: 'medium',
|
||
status: 'open',
|
||
assigned_to: '',
|
||
admin_notes: ''
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Amélioration de l'affichage des descriptions longues */
|
||
.line-clamp-3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Style pour la description dans le modal */
|
||
.modal-description {
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.modal-description::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.modal-description::-webkit-scrollbar-track {
|
||
background: #f1f5f9;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.modal-description::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.modal-description::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
|
||
/* Amélioration de l'affichage des tickets */
|
||
.ticket-row {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.ticket-row:hover {
|
||
background-color: #f9fafb;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Amélioration de l'affichage des descriptions */
|
||
.ticket-description {
|
||
max-height: 4rem;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.ticket-description::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 1.5rem;
|
||
background: linear-gradient(transparent, #f9fafb);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Amélioration des modals */
|
||
.modal-overlay {
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
/* Amélioration de l'affichage des images */
|
||
.ticket-screenshot {
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.ticket-screenshot:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
/* Styles pour les cartes de tickets */
|
||
.ticket-card {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.ticket-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
/* Animation pour les badges */
|
||
.badge-animate {
|
||
animation: badgePulse 2s infinite;
|
||
}
|
||
|
||
@keyframes badgePulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
/* Styles pour les filtres */
|
||
.filter-input {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.filter-input:focus {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
/* Styles pour les boutons de filtres rapides */
|
||
.quick-filter-btn {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.quick-filter-btn:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Styles pour les statistiques */
|
||
.stats-number {
|
||
animation: countUp 0.8s ease-out;
|
||
}
|
||
|
||
@keyframes countUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Responsive design */
|
||
@media (max-width: 768px) {
|
||
.ticket-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.filter-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|