@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/pages/Admin/Tickets/Show.vue

@@ -12,6 +12,7 @@ import PresenceIndicator from '../../../components/PresenceIndicator.vue';
 import PinnedNotes from '../../../components/PinnedNotes.vue';
 import KeyboardShortcutHelp from '../../../components/KeyboardShortcutHelp.vue';
 import PluginSlot from '../../../components/PluginSlot.vue';
+import SnoozeButton from '../../../components/SnoozeButton.vue';
 import { useKeyboardShortcuts } from '../../../composables/useKeyboardShortcuts';
 import { usePluginExtensions } from '../../../composables/usePluginExtensions';
 import { router, useForm, usePage } from '@inertiajs/vue3';
@@ -26,6 +27,7 @@ const props = defineProps({
     macros: { type: Array, default: () => [] },
     is_following: { type: Boolean, default: false },
     followers_count: { type: Number, default: 0 },
+    is_snoozed: { type: Boolean, default: false },
 });
 
 const page = usePage();
@@ -62,12 +64,25 @@ const { getPageComponents } = usePluginExtensions();
 
 // Keyboard shortcuts
 useKeyboardShortcuts({
-    'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
-    'n': () => { activeTab.value = 'note'; },
-    's': () => { statusSelectRef.value?.focus(); },
-    'p': () => { prioritySelectRef.value?.focus(); },
-    'f': () => { toggleFollow(); },
-    '?': () => { showShortcutHelp.value = true; },
+    r: () => {
+        activeTab.value = 'reply';
+        replyComposerRef.value?.$el?.querySelector('textarea')?.focus();
+    },
+    n: () => {
+        activeTab.value = 'note';
+    },
+    s: () => {
+        statusSelectRef.value?.focus();
+    },
+    p: () => {
+        prioritySelectRef.value?.focus();
+    },
+    f: () => {
+        toggleFollow();
+    },
+    '?': () => {
+        showShortcutHelp.value = true;
+    },
 });
 </script>
 
@@ -76,31 +91,79 @@ useKeyboardShortcuts({
         <!-- Plugin: ticket show header slot -->
         <PluginSlot slot="ticket.show.header" :components="getPageComponents('ticket.show', 'header')" />
 
+        <!-- Snoozed banner (visible only when ticket is snoozed) -->
+        <div
+            v-if="ticket.is_snoozed || (ticket.snoozed_until && new Date(ticket.snoozed_until) > new Date())"
+            class="mb-4 flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium border border-amber-500/20 bg-amber-500/10 text-amber-300"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                    fill-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.828a1 1 0 101.415-1.414L11 9.586V6z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+            <span
+                >Snoozed until
+                {{
+                    new Date(ticket.snoozed_until).toLocaleString(undefined, {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                        hour: 'numeric',
+                        minute: '2-digit',
+                    })
+                }}</span
+            >
+        </div>
+
         <div class="mb-5 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
+            <span class="text-sm font-mono font-medium text-[var(--esc-panel-text)]">{{ ticket.reference }}</span>
             <StatusBadge :status="ticket.status" />
             <PriorityBadge :priority="ticket.priority" />
-            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
+            <span class="text-sm text-[var(--esc-panel-text-muted)]">by {{ ticket.requester?.name }}</span>
             <PresenceIndicator :ticket-reference="ticket.reference" route-prefix="escalated.admin" />
             <div class="ml-auto flex items-center gap-2">
-                <FollowButton :is-following="is_following" :followers-count="followers_count"
-                              :action="route('escalated.admin.tickets.follow', ticket.reference)" />
-                <MacroDropdown v-if="macros.length" :macros="macros"
-                               :action="route('escalated.admin.tickets.macro', ticket.reference)" />
-                <button v-if="!ticket.assigned_to" @click="assignToMe"
-                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
+                <FollowButton
+                    :is-following="is_following"
+                    :followers-count="followers_count"
+                    :action="route('escalated.admin.tickets.follow', ticket.reference)"
+                />
+                <MacroDropdown
+                    v-if="macros.length"
+                    :macros="macros"
+                    :action="route('escalated.admin.tickets.macro', ticket.reference)"
+                />
+                <button
+                    v-if="!ticket.assigned_to"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+                    @click="assignToMe"
+                >
                     Assign to Me
                 </button>
-                <select ref="statusSelectRef" @change="changeStatus($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
+                <SnoozeButton :ticket="ticket" route-prefix="escalated.admin" />
+                <select
+                    ref="statusSelectRef"
+                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                    @change="
+                        changeStatus($event.target.value);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Change Status...</option>
                     <option value="in_progress">In Progress</option>
                     <option value="waiting_on_customer">Waiting on Customer</option>
                     <option value="resolved">Resolved</option>
                     <option value="closed">Closed</option>
                 </select>
-                <select ref="prioritySelectRef" @change="changePriority($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
+                <select
+                    ref="prioritySelectRef"
+                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                    @change="
+                        changePriority($event.target.value);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Change Priority...</option>
                     <option value="low">Low</option>
                     <option value="medium">Medium</option>
@@ -114,35 +177,65 @@ useKeyboardShortcuts({
         </div>
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
             <div class="lg:col-span-2 space-y-6">
-                <PinnedNotes v-if="ticket.pinned_notes?.length" :notes="ticket.pinned_notes"
-                             :ticket-reference="ticket.reference" route-prefix="escalated.admin" />
-                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
+                <PinnedNotes
+                    v-if="ticket.pinned_notes?.length"
+                    :notes="ticket.pinned_notes"
+                    :ticket-reference="ticket.reference"
+                    route-prefix="escalated.admin"
+                />
+                <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+                    <p class="whitespace-pre-wrap text-sm text-[var(--esc-panel-text-secondary)]">
+                        {{ ticket.description }}
+                    </p>
                     <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
                 </div>
                 <div>
-                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
-                        <button @click="activeTab = 'reply'"
-                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
+                    <div class="mb-4 flex gap-4 border-b border-[var(--esc-panel-border)]">
+                        <button
+                            :class="[
+                                'pb-2 text-sm font-medium transition-colors',
+                                activeTab === 'reply'
+                                    ? 'border-b-2 border-[var(--esc-panel-accent)] text-[var(--esc-panel-text)]'
+                                    : 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]',
+                            ]"
+                            @click="activeTab = 'reply'"
+                        >
                             Reply
                         </button>
-                        <button @click="activeTab = 'note'"
-                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
+                        <button
+                            :class="[
+                                'pb-2 text-sm font-medium transition-colors',
+                                activeTab === 'note'
+                                    ? 'border-b-2 border-amber-500 text-amber-400'
+                                    : 'text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]',
+                            ]"
+                            @click="activeTab = 'note'"
+                        >
                             Internal Note
                         </button>
                     </div>
-                    <ReplyComposer v-if="activeTab === 'reply'" ref="replyComposerRef"
-                                   :action="route('escalated.admin.tickets.reply', ticket.reference)"
-                                   :canned-responses="cannedResponses" />
-                    <ReplyComposer v-else
-                                   :action="route('escalated.admin.tickets.note', ticket.reference)"
-                                   placeholder="Write an internal note..."
-                                   submit-label="Add Note" />
+                    <ReplyComposer
+                        v-if="activeTab === 'reply'"
+                        ref="replyComposerRef"
+                        :action="route('escalated.admin.tickets.reply', ticket.reference)"
+                        :canned-responses="cannedResponses"
+                    />
+                    <ReplyComposer
+                        v-else
+                        :action="route('escalated.admin.tickets.note', ticket.reference)"
+                        placeholder="Write an internal note..."
+                        submit-label="Add Note"
+                    />
                 </div>
                 <div>
-                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
-                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id"
-                                 :ticket-reference="ticket.reference" route-prefix="escalated.admin" pinnable />
+                    <h2 class="mb-4 text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Conversation</h2>
+                    <ReplyThread
+                        :replies="ticket.replies || []"
+                        :current-user-id="page.props.auth?.user?.id"
+                        :ticket-reference="ticket.reference"
+                        route-prefix="escalated.admin"
+                        pinnable
+                    />
                 </div>
             </div>
             <div class="space-y-6">

package/src/pages/Admin/Webhooks/DeliveryLog.vue

@@ -0,0 +1,120 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({
+    webhook: Object,
+    deliveries: Object,
+});
+
+const expandedId = ref(null);
+
+function retry(deliveryId) {
+    router.post(route('escalated.admin.webhooks.retry', deliveryId), {}, { preserveScroll: true });
+}
+
+function togglePayload(id) {
+    expandedId.value = expandedId.value === id ? null : id;
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="`Webhook Delivery Log - ${webhook.url}`">
+        <div class="mb-4">
+            <a
+                :href="route('escalated.admin.webhooks.index')"
+                class="text-sm text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                &larr; Back to Webhooks
+            </a>
+        </div>
+
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Event
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Status
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Attempts
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Timestamp
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!deliveries?.data?.length">
+                        <td colspan="5" class="px-4 py-12 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No deliveries yet.
+                        </td>
+                    </tr>
+                    <template v-for="delivery in deliveries?.data" :key="delivery.id">
+                        <tr class="transition-colors hover:bg-[var(--esc-panel-hover)]">
+                            <td class="px-4 py-3 text-sm font-mono text-[var(--esc-panel-text-secondary)]">
+                                {{ delivery.event }}
+                            </td>
+                            <td class="px-4 py-3 text-sm">
+                                <span
+                                    :class="
+                                        delivery.response_code >= 200 && delivery.response_code < 300
+                                            ? 'text-emerald-400'
+                                            : 'text-rose-400'
+                                    "
+                                >
+                                    {{ delivery.response_code || 'Failed' }}
+                                </span>
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ delivery.attempts }}
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ delivery.created_at }}
+                            </td>
+                            <td class="px-4 py-3 text-right text-sm">
+                                <button
+                                    class="text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                                    @click="togglePayload(delivery.id)"
+                                >
+                                    {{ expandedId === delivery.id ? 'Hide' : 'Payload' }}
+                                </button>
+                                <button
+                                    class="ml-3 text-[var(--esc-panel-accent)] hover:text-cyan-300"
+                                    @click="retry(delivery.id)"
+                                >
+                                    Retry
+                                </button>
+                            </td>
+                        </tr>
+                        <tr v-if="expandedId === delivery.id">
+                            <td colspan="5" class="bg-[var(--esc-panel-hover)] px-4 py-3">
+                                <pre
+                                    class="max-h-40 overflow-auto rounded-lg bg-[var(--esc-panel-surface-alt)] p-3 text-xs text-[var(--esc-panel-text-tertiary)]"
+                                    >{{ JSON.stringify(delivery.payload, null, 2) }}</pre
+                                >
+                            </td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Webhooks/Form.vue

@@ -0,0 +1,110 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    webhook: { type: Object, default: null },
+    availableEvents: { type: Array, default: () => [] },
+});
+
+const form = useForm({
+    url: props.webhook?.url || '',
+    events: props.webhook?.events || [],
+    secret: props.webhook?.secret || '',
+    active: props.webhook?.active ?? true,
+});
+
+function toggleEvent(event) {
+    const idx = form.events.indexOf(event);
+    if (idx >= 0) {
+        form.events.splice(idx, 1);
+    } else {
+        form.events.push(event);
+    }
+}
+
+function submit() {
+    if (props.webhook) {
+        form.put(route('escalated.admin.webhooks.update', props.webhook.id));
+    } else {
+        form.post(route('escalated.admin.webhooks.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="webhook ? 'Edit Webhook' : 'Create Webhook'">
+        <form class="max-w-lg space-y-4" @submit.prevent="submit">
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">URL</label>
+                <input
+                    v-model="form.url"
+                    type="url"
+                    required
+                    placeholder="https://example.com/webhook"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <p v-if="form.errors.url" class="mt-1 text-xs text-rose-400">{{ form.errors.url }}</p>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                    >Secret (for HMAC signing)</label
+                >
+                <input
+                    v-model="form.secret"
+                    type="text"
+                    placeholder="Optional secret key"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+            </div>
+
+            <div>
+                <label class="mb-2 block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Events</label>
+                <div class="grid grid-cols-2 gap-2">
+                    <label
+                        v-for="event in availableEvents"
+                        :key="event"
+                        class="flex items-center gap-2 text-sm text-[var(--esc-panel-text-secondary)]"
+                    >
+                        <input
+                            type="checkbox"
+                            :checked="form.events.includes(event)"
+                            class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-cyan-500 focus:ring-cyan-500/20"
+                            @change="toggleEvent(event)"
+                        />
+                        {{ event }}
+                    </label>
+                </div>
+                <p v-if="form.errors.events" class="mt-1 text-xs text-rose-400">{{ form.errors.events }}</p>
+            </div>
+
+            <div>
+                <label class="flex items-center gap-2 text-sm text-[var(--esc-panel-text-secondary)]">
+                    <input
+                        v-model="form.active"
+                        type="checkbox"
+                        class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-cyan-500 focus:ring-cyan-500/20"
+                    />
+                    Active
+                </label>
+            </div>
+
+            <div class="flex gap-3">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                >
+                    {{ webhook ? 'Update' : 'Create' }}
+                </button>
+                <a
+                    :href="route('escalated.admin.webhooks.index')"
+                    class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                >
+                    Cancel
+                </a>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Webhooks/Index.vue

@@ -0,0 +1,136 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ webhooks: Array });
+
+function destroy(id) {
+    if (confirm('Delete this webhook?')) {
+        router.delete(route('escalated.admin.webhooks.destroy', id));
+    }
+}
+
+function lastDeliveryStatus(webhook) {
+    const last = webhook.deliveries?.[0];
+    if (!last) return null;
+    return last.response_code;
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Webhooks">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.webhooks.create')"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+            >
+                Add Webhook
+            </Link>
+        </div>
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            URL
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Events
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Active
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Last Status
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!webhooks?.length">
+                        <td colspan="5" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.86-9.86a4.5 4.5 0 00-6.364 0l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No webhooks configured</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Set up webhooks to send event notifications to external services
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="webhook in webhooks"
+                        :key="webhook.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td
+                            class="px-4 py-3 text-sm font-mono text-[var(--esc-panel-text-secondary)] max-w-xs truncate"
+                        >
+                            {{ webhook.url }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ (webhook.events || []).length }} events
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                            <span :class="webhook.active ? 'text-emerald-400' : 'text-[var(--esc-panel-text-muted)]'">{{
+                                webhook.active ? 'Yes' : 'No'
+                            }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                v-if="lastDeliveryStatus(webhook)"
+                                :class="
+                                    lastDeliveryStatus(webhook) >= 200 && lastDeliveryStatus(webhook) < 300
+                                        ? 'text-emerald-400'
+                                        : 'text-rose-400'
+                                "
+                            >
+                                {{ lastDeliveryStatus(webhook) }}
+                            </span>
+                            <span v-else class="text-[var(--esc-panel-text-muted)]">&mdash;</span>
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.webhooks.deliveries', webhook.id)"
+                                class="text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                            >
+                                Log
+                            </Link>
+                            <Link
+                                :href="route('escalated.admin.webhooks.edit', webhook.id)"
+                                class="ml-3 text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                Edit
+                            </Link>
+                            <button class="ml-3 text-rose-400 hover:text-rose-300" @click="destroy(webhook.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>