89 lines
4.6 KiB
Vue
89 lines
4.6 KiB
Vue
<script setup>
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import AdminLayout from '@/Layouts/AdminLayout.vue';
|
|
import { format } from 'date-fns';
|
|
import { fr } from 'date-fns/locale';
|
|
|
|
const props = defineProps({
|
|
logs: Object // Paginated object
|
|
});
|
|
|
|
const formatDate = (dateString) => {
|
|
return format(new Date(dateString), 'PPP à HH:mm', { locale: fr });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Logs de connexion" />
|
|
<AdminLayout>
|
|
<template #header>Logs de connexion</template>
|
|
|
|
<div class="mb-6 flex justify-between items-center">
|
|
<h1 class="text-2xl font-serif font-black text-primary capitalize tracking-tight flex items-center gap-3">
|
|
<div class="w-1.5 h-8 bg-highlight rounded-full"></div>
|
|
Historique des Connexions
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-3xl shadow-sm border border-anthracite/5 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-neutral/50 border-b border-anthracite/5">
|
|
<tr>
|
|
<th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Utilisateur</th>
|
|
<th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Structure</th>
|
|
<th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Adresse IP</th>
|
|
<th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Date & Heure</th>
|
|
<th class="px-8 py-5 text-[10px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Appareil / Navigateur</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-anthracite/5">
|
|
<tr v-for="log in logs.data" :key="log.id" class="hover:bg-sand/30 transition-colors">
|
|
<td class="px-8 py-5">
|
|
<div class="font-bold text-primary">{{ log.user.name }}</div>
|
|
<div class="text-xs text-anthracite/50">{{ log.user.email }}</div>
|
|
</td>
|
|
<td class="px-8 py-5 text-xs font-bold text-anthracite">
|
|
{{ log.user.tenant ? log.user.tenant.name : 'Super Admin / Global' }}
|
|
</td>
|
|
<td class="px-8 py-5 text-xs font-mono text-anthracite/70">
|
|
{{ log.ip_address }}
|
|
</td>
|
|
<td class="px-8 py-5 text-xs font-bold text-anthracite">
|
|
{{ formatDate(log.login_at) }}
|
|
</td>
|
|
<td class="px-8 py-5 text-[10px] text-anthracite/50 max-w-xs truncate" :title="log.user_agent">
|
|
{{ log.user_agent }}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="logs.data.length === 0">
|
|
<td colspan="5" class="px-8 py-16 text-center text-anthracite/40 italic">
|
|
Aucun log de connexion trouvé.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Simple Pagination -->
|
|
<div v-if="logs.links.length > 3" class="px-8 py-4 bg-neutral/30 border-t border-anthracite/5 flex justify-center gap-2">
|
|
<Link
|
|
v-for="link in logs.links"
|
|
:key="link.label"
|
|
:href="link.url || '#'"
|
|
class="px-3 py-1 rounded-lg text-xs font-bold transition-all"
|
|
:class="[
|
|
link.active ? 'bg-primary text-white' : 'bg-white text-primary hover:bg-highlight hover:text-white',
|
|
!link.url ? 'opacity-50 cursor-not-allowed' : ''
|
|
]"
|
|
v-html="link.label"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 p-4 bg-highlight/10 border border-highlight/20 rounded-2xl text-xs text-[#3a2800]/60 font-medium">
|
|
<p><strong>Note :</strong> Les logs sont conservés pendant une période de 1 mois. Un nettoyage automatique est effectué quotidiennement.</p>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|