105 lines
4.7 KiB
Vue
105 lines
4.7 KiB
Vue
<script setup>
|
|
import AdminLayout from '@/Layouts/AdminLayout.vue'
|
|
import { Head, Link, router } from '@inertiajs/vue3'
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
logs: Object,
|
|
templates: Array,
|
|
filters: Object,
|
|
})
|
|
|
|
const form = ref({
|
|
status: props.filters?.status || '',
|
|
to: props.filters?.to || '',
|
|
subject: props.filters?.subject || '',
|
|
template_id: props.filters?.template_id || '',
|
|
date_from: props.filters?.date_from || '',
|
|
date_to: props.filters?.date_to || '',
|
|
})
|
|
|
|
function applyFilters() {
|
|
router.get(route('admin.email-logs.index'), {
|
|
...form.value,
|
|
}, { preserveState: true, preserveScroll: true })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AdminLayout title="Email Logs">
|
|
<Head title="Email Logs" />
|
|
|
|
<div class="mb-4">
|
|
<h1 class="text-xl font-semibold text-gray-800">Email Logs</h1>
|
|
<div class="mt-3 grid grid-cols-1 md:grid-cols-6 gap-2">
|
|
<select v-model="form.status" class="input">
|
|
<option value="">All statuses</option>
|
|
<option value="queued">Queued</option>
|
|
<option value="sending">Sending</option>
|
|
<option value="sent">Sent</option>
|
|
<option value="failed">Failed</option>
|
|
<option value="bounced">Bounced</option>
|
|
<option value="deferred">Deferred</option>
|
|
</select>
|
|
<input v-model="form.to" placeholder="To email" class="input" />
|
|
<input v-model="form.subject" placeholder="Subject" class="input" />
|
|
<select v-model="form.template_id" class="input">
|
|
<option value="">All templates</option>
|
|
<option v-for="t in templates" :key="t.id" :value="t.id">{{ t.name }}</option>
|
|
</select>
|
|
<input v-model="form.date_from" type="date" class="input" />
|
|
<input v-model="form.date_to" type="date" class="input" />
|
|
</div>
|
|
<div class="mt-2">
|
|
<button @click="applyFilters" class="px-3 py-1.5 text-xs rounded border bg-gray-50 hover:bg-gray-100">Filter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl border bg-white/60 backdrop-blur-sm shadow-sm">
|
|
<div class="overflow-auto">
|
|
<table class="min-w-full text-sm">
|
|
<thead class="bg-gray-50 text-gray-600">
|
|
<tr>
|
|
<th class="text-left p-2">Date</th>
|
|
<th class="text-left p-2">Status</th>
|
|
<th class="text-left p-2">To</th>
|
|
<th class="text-left p-2">Subject</th>
|
|
<th class="text-left p-2">Template</th>
|
|
<th class="text-left p-2">Duration</th>
|
|
<th class="text-left p-2">\#</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="log in logs.data" :key="log.id" class="border-t">
|
|
<td class="p-2 whitespace-nowrap">{{ new Date(log.created_at).toLocaleString() }}</td>
|
|
<td class="p-2"><span class="inline-flex items-center px-2 py-0.5 rounded text-xs border" :class="{
|
|
'bg-green-50 text-green-700 border-green-200': log.status === 'sent',
|
|
'bg-amber-50 text-amber-700 border-amber-200': log.status === 'queued' || log.status === 'sending',
|
|
'bg-red-50 text-red-700 border-red-200': log.status === 'failed',
|
|
}">{{ log.status }}</span></td>
|
|
<td class="p-2 truncate max-w-[220px]">
|
|
{{ log.to_email || (Array.isArray(log.to_recipients) && log.to_recipients.length ? log.to_recipients.join(', ') : '-') }}
|
|
</td>
|
|
<td class="p-2 truncate max-w-[320px]">{{ log.subject }}</td>
|
|
<td class="p-2 truncate max-w-[220px]">{{ log.template?.name || '-' }}</td>
|
|
<td class="p-2">{{ log.duration_ms ? log.duration_ms + ' ms' : '-' }}</td>
|
|
<td class="p-2"><Link :href="route('admin.email-logs.show', log.id)" class="text-indigo-600 hover:underline">Open</Link></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-2 border-t text-xs text-gray-600 flex items-center justify-between">
|
|
<div>Showing {{ logs.from }}-{{ logs.to }} of {{ logs.total }}</div>
|
|
<div class="flex gap-2">
|
|
<Link v-for="link in logs.links" :key="link.url || link.label" :href="link.url || '#'" :class="['px-2 py-1 rounded border text-xs', { 'bg-indigo-600 text-white border-indigo-600': link.active, 'pointer-events-none opacity-50': !link.url } ]" v-html="link.label" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.input { width: 100%; border-radius: 0.375rem; border: 1px solid #d1d5db; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
|
|
.input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1; }
|
|
</style>
|