@escalated-dev/escalated 0.7.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();
@@ -89,6 +91,32 @@ 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-[var(--esc-panel-text)]">{{ ticket.reference }}</span>
             <StatusBadge :status="ticket.status" />
@@ -113,6 +141,7 @@ useKeyboardShortcuts({
                 >
                     Assign to Me
                 </button>
+                <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)]"

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

@@ -1,120 +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>
+<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

@@ -1,110 +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>
+<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>