@escalated-dev/escalated 0.7.0 → 0.8.0

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/Users/Index.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+
+const props = defineProps({
+    users: Object,
+    filters: { type: Object, default: () => ({}) },
+    currentUserId: { type: [Number, String], default: null },
+});
+
+const search = ref(props.filters?.search ?? '');
+
+function applySearch() {
+    router.get(
+        route('escalated.admin.users.index'),
+        { search: search.value },
+        { preserveState: true, preserveScroll: true },
+    );
+}
+
+function toggleRole(user, role) {
+    const value = role === 'admin' ? !user.is_admin : !user.is_agent;
+    router.patch(route('escalated.admin.users.role', user.id), { role, value }, { preserveScroll: true });
+}
+
+function isSelf(user) {
+    return props.currentUserId !== null && String(user.id) === String(props.currentUserId);
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Users">
+        <div class="mb-4 flex items-center justify-between gap-4">
+            <form class="flex-1 max-w-sm" @submit.prevent="applySearch">
+                <input
+                    v-model="search"
+                    type="search"
+                    placeholder="Search by name or email"
+                    class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-3 py-2 text-sm text-[var(--esc-panel-text)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-accent)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]"
+                />
+            </form>
+        </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)]"
+                        >
+                            User
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Email
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Admin
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Agent
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!users?.data?.length">
+                        <td colspan="4" class="px-4 py-12 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No users found.
+                        </td>
+                    </tr>
+                    <tr v-for="user in users?.data || []" :key="user.id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="whitespace-nowrap px-4 py-3 text-sm text-[var(--esc-panel-text)]">
+                            <span>{{ user.name || '—' }}</span>
+                            <span
+                                v-if="isSelf(user)"
+                                class="ml-2 rounded-full bg-[var(--esc-panel-accent)]/15 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-accent)]"
+                            >
+                                You
+                            </span>
+                        </td>
+                        <td class="whitespace-nowrap px-4 py-3 text-sm text-[var(--esc-panel-text-muted)]">
+                            {{ user.email }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                :disabled="isSelf(user) && user.is_admin"
+                                :title="isSelf(user) && user.is_admin ? 'You cannot remove your own admin role.' : ''"
+                                class="inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                                :class="user.is_admin ? 'bg-indigo-600' : 'bg-gray-300'"
+                                @click="toggleRole(user, 'admin')"
+                            >
+                                <span
+                                    class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                                    :class="user.is_admin ? 'translate-x-6' : 'translate-x-1'"
+                                />
+                            </button>
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                class="inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                                :class="user.is_agent ? 'bg-indigo-600' : 'bg-gray-300'"
+                                @click="toggleRole(user, 'agent')"
+                            >
+                                <span
+                                    class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                                    :class="user.is_agent ? 'translate-x-6' : 'translate-x-1'"
+                                />
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div v-if="users?.links?.length > 3" class="mt-4 flex items-center justify-end gap-1">
+            <template v-for="(link, idx) in users.links" :key="idx">
+                <button
+                    v-if="link.url"
+                    type="button"
+                    class="rounded-md px-3 py-1 text-sm"
+                    :class="
+                        link.active
+                            ? 'bg-[var(--esc-panel-accent)] text-white'
+                            : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)]'
+                    "
+                    @click="router.get(link.url, {}, { preserveState: true, preserveScroll: true })"
+                    v-html="link.label"
+                />
+                <span
+                    v-else
+                    class="rounded-md px-3 py-1 text-sm text-[var(--esc-panel-text-muted)]/40"
+                    v-html="link.label"
+                />
+            </template>
+        </div>
+    </EscalatedLayout>
+</template>

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>