@escalated-dev/escalated 0.7.0 → 0.8.0

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>

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

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