@escalated-dev/escalated 0.6.0 → 0.7.0

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

@@ -1,39 +1,91 @@
-<script setup>
-import { ref } from 'vue';
-import { usePage, router } from '@inertiajs/vue3';
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import TicketList from '../../../components/TicketList.vue';
-import TicketFilters from '../../../components/TicketFilters.vue';
-import QuickFilters from '../../../components/QuickFilters.vue';
-import BulkActionBar from '../../../components/BulkActionBar.vue';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-    departments: Array,
-    tags: Array,
-    agents: Array,
-});
-
-const page = usePage();
-const selectedIds = ref([]);
-
-function applyQuickFilter(filter) {
-    router.get(route('escalated.admin.tickets.index'), filter, { preserveState: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout title="All Tickets">
-        <div class="mb-4">
-            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
-        </div>
-        <div class="mb-6">
-            <TicketFilters :filters="filters" :route="route('escalated.admin.tickets.index')" :departments="departments" :tags="tags" :agents="agents" show-assignee show-following />
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.admin.tickets" show-assignee
-                    selectable v-model:selected-ids="selectedIds" />
-        <BulkActionBar :selected-ids="selectedIds" :bulk-route="route('escalated.admin.tickets.bulk')"
-                       :agents="agents" :departments="departments" @clear="selectedIds = []" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import { ref } from 'vue';
+import { usePage, router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import TicketList from '../../../components/TicketList.vue';
+import TicketFilters from '../../../components/TicketFilters.vue';
+import QuickFilters from '../../../components/QuickFilters.vue';
+import BulkActionBar from '../../../components/BulkActionBar.vue';
+import KeyboardShortcutHelp from '../../../components/KeyboardShortcutHelp.vue';
+import PluginSlot from '../../../components/PluginSlot.vue';
+import { useKeyboardShortcuts } from '../../../composables/useKeyboardShortcuts';
+import { usePluginExtensions } from '../../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+    agents: Array,
+});
+
+const page = usePage();
+const selectedIds = ref([]);
+const ticketListRef = ref(null);
+const showShortcutHelp = ref(false);
+
+useKeyboardShortcuts({
+    j: () => {
+        ticketListRef.value?.moveDown();
+    },
+    k: () => {
+        ticketListRef.value?.moveUp();
+    },
+    x: () => {
+        ticketListRef.value?.toggleSelectFocused();
+    },
+    Enter: () => {
+        ticketListRef.value?.openFocused();
+    },
+    '?': () => {
+        showShortcutHelp.value = true;
+    },
+});
+
+const { getPageComponents } = usePluginExtensions();
+
+function applyQuickFilter(filter) {
+    router.get(route('escalated.admin.tickets.index'), filter, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="All Tickets">
+        <div class="mb-4">
+            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
+        </div>
+        <PluginSlot
+            slot="ticket.list.before_filters"
+            :components="getPageComponents('ticket.list', 'before_filters')"
+        />
+        <div class="mb-6">
+            <TicketFilters
+                :filters="filters"
+                :route="route('escalated.admin.tickets.index')"
+                :departments="departments"
+                :tags="tags"
+                :agents="agents"
+                show-assignee
+                show-following
+            />
+        </div>
+        <TicketList
+            ref="ticketListRef"
+            v-model:selected-ids="selectedIds"
+            :tickets="tickets"
+            route-prefix="escalated.admin.tickets"
+            :columns="['reference', 'subject', 'requester', 'status', 'priority', 'assignee', 'updated']"
+            selectable
+            navigable
+        />
+        <BulkActionBar
+            :selected-ids="selectedIds"
+            :bulk-route="route('escalated.admin.tickets.bulk')"
+            :agents="agents"
+            :departments="departments"
+            @clear="selectedIds = []"
+        />
+        <PluginSlot slot="ticket.list.footer" :components="getPageComponents('ticket.list', 'footer')" />
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="list" />
+    </EscalatedLayout>
+</template>

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

@@ -62,12 +62,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>
 
@@ -77,30 +90,51 @@ useKeyboardShortcuts({
         <PluginSlot slot="ticket.show.header" :components="getPageComponents('ticket.show', 'header')" />
 
         <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">
+                <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 +148,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>