@escalated-dev/escalated 0.7.0 → 0.8.0

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

@@ -1,122 +1,122 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-
-defineProps({ roles: Array });
-
-function destroy(role) {
-    if (role.is_system) return;
-    if (confirm('Delete this role?')) {
-        router.delete(route('escalated.admin.roles.destroy', role.id));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Agent Roles">
-        <div class="mb-4 flex justify-end">
-            <Link
-                :href="route('escalated.admin.roles.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 Role
-            </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)]"
-                        >
-                            Name
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Description
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Users
-                        </th>
-                        <th
-                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
-                        >
-                            Type
-                        </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="!roles?.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="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
-                                />
-                            </svg>
-                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No roles defined yet</p>
-                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
-                                Create roles with specific permissions to control agent access
-                            </p>
-                        </td>
-                    </tr>
-                    <tr
-                        v-for="role in roles"
-                        :key="role.id"
-                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
-                    >
-                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
-                            {{ role.name }}
-                        </td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
-                            {{ role.description || '-' }}
-                        </td>
-                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ role.users_count }}</td>
-                        <td class="px-4 py-3 text-sm">
-                            <span
-                                v-if="role.is_system"
-                                class="inline-flex items-center rounded-full bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400 ring-1 ring-amber-500/20"
-                                >System</span
-                            >
-                            <span
-                                v-else
-                                class="inline-flex items-center rounded-full bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs font-medium text-[var(--esc-panel-text-secondary)]"
-                                >Custom</span
-                            >
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <Link
-                                :href="route('escalated.admin.roles.edit', role.id)"
-                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
-                            >
-                                Edit
-                            </Link>
-                            <button
-                                v-if="!role.is_system"
-                                class="ml-3 text-rose-400 hover:text-rose-300"
-                                @click="destroy(role)"
-                            >
-                                Delete
-                            </button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ roles: Array });
+
+function destroy(role) {
+    if (role.is_system) return;
+    if (confirm('Delete this role?')) {
+        router.delete(route('escalated.admin.roles.destroy', role.id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Roles">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.roles.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 Role
+            </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)]"
+                        >
+                            Name
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Description
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Users
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Type
+                        </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="!roles?.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="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No roles defined yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create roles with specific permissions to control agent access
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="role in roles"
+                        :key="role.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            {{ role.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ role.description || '-' }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ role.users_count }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                v-if="role.is_system"
+                                class="inline-flex items-center rounded-full bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400 ring-1 ring-amber-500/20"
+                                >System</span
+                            >
+                            <span
+                                v-else
+                                class="inline-flex items-center rounded-full bg-[var(--esc-panel-hover)] px-2 py-0.5 text-xs font-medium text-[var(--esc-panel-text-secondary)]"
+                                >Custom</span
+                            >
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.roles.edit', role.id)"
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                            >
+                                Edit
+                            </Link>
+                            <button
+                                v-if="!role.is_system"
+                                class="ml-3 text-rose-400 hover:text-rose-300"
+                                @click="destroy(role)"
+                            >
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Settings/CsatSettings.vue

@@ -1,165 +1,165 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm, Link } from '@inertiajs/vue3';
-
-const props = defineProps({
-    settings: Object,
-});
-
-const form = useForm({
-    csat_question_text: props.settings?.csat_question_text || 'How would you rate your support experience?',
-    csat_scale: props.settings?.csat_scale || '1-5',
-    csat_delivery_trigger: props.settings?.csat_delivery_trigger || 'on_resolve',
-    csat_delay_hours: props.settings?.csat_delay_hours || 0,
-});
-
-function submit() {
-    form.post(route('escalated.admin.settings.csat.update'));
-}
-</script>
-
-<template>
-    <EscalatedLayout title="CSAT Survey Settings">
-        <div class="mx-auto max-w-2xl">
-            <div class="mb-6">
-                <Link
-                    :href="route('escalated.admin.settings')"
-                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
-                >
-                    &larr; Back to Settings
-                </Link>
-            </div>
-
-            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
-                <h2 class="mb-6 text-lg font-semibold text-[var(--esc-panel-text-secondary)]">
-                    Customer Satisfaction Survey
-                </h2>
-
-                <form class="space-y-6" @submit.prevent="submit">
-                    <!-- Question Text -->
-                    <div>
-                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                            >Survey Question</label
-                        >
-                        <textarea
-                            v-model="form.csat_question_text"
-                            rows="3"
-                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]/40"
-                            placeholder="How would you rate your support experience?"
-                        ></textarea>
-                        <p v-if="form.errors.csat_question_text" class="mt-1 text-xs text-red-400">
-                            {{ form.errors.csat_question_text }}
-                        </p>
-                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
-                            This question will be shown to customers after their ticket is resolved.
-                        </p>
-                    </div>
-
-                    <!-- Rating Scale -->
-                    <div>
-                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                            >Rating Scale</label
-                        >
-                        <div class="flex gap-3">
-                            <label
-                                :class="[
-                                    'flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-3 transition-all',
-                                    form.csat_scale === '1-3'
-                                        ? 'border-[var(--esc-panel-accent)]/40 bg-[var(--esc-panel-accent)]/10 text-[var(--esc-panel-accent)]'
-                                        : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:border-[var(--esc-panel-border-input)]',
-                                ]"
-                            >
-                                <input v-model="form.csat_scale" type="radio" value="1-3" class="sr-only" />
-                                <span class="text-sm font-medium">1-3 Scale</span>
-                                <span class="text-xs text-[var(--esc-panel-text-muted)]">(Simple)</span>
-                            </label>
-                            <label
-                                :class="[
-                                    'flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-3 transition-all',
-                                    form.csat_scale === '1-5'
-                                        ? 'border-[var(--esc-panel-accent)]/40 bg-[var(--esc-panel-accent)]/10 text-[var(--esc-panel-accent)]'
-                                        : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:border-[var(--esc-panel-border-input)]',
-                                ]"
-                            >
-                                <input v-model="form.csat_scale" type="radio" value="1-5" class="sr-only" />
-                                <span class="text-sm font-medium">1-5 Scale</span>
-                                <span class="text-xs text-[var(--esc-panel-text-muted)]">(Detailed)</span>
-                            </label>
-                        </div>
-                        <p v-if="form.errors.csat_scale" class="mt-1 text-xs text-red-400">
-                            {{ form.errors.csat_scale }}
-                        </p>
-                    </div>
-
-                    <!-- Delivery Trigger -->
-                    <div>
-                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                            >Delivery Trigger</label
-                        >
-                        <select
-                            v-model="form.csat_delivery_trigger"
-                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]/40"
-                        >
-                            <option value="on_resolve">On ticket resolution</option>
-                            <option value="delayed">Delayed after resolution</option>
-                            <option value="manual">Manual only</option>
-                        </select>
-                        <p v-if="form.errors.csat_delivery_trigger" class="mt-1 text-xs text-red-400">
-                            {{ form.errors.csat_delivery_trigger }}
-                        </p>
-                    </div>
-
-                    <!-- Delay Hours (shown only for delayed trigger) -->
-                    <div v-if="form.csat_delivery_trigger === 'delayed'">
-                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
-                            >Delay (hours)</label
-                        >
-                        <input
-                            v-model.number="form.csat_delay_hours"
-                            type="number"
-                            min="0"
-                            max="168"
-                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]/40"
-                        />
-                        <p v-if="form.errors.csat_delay_hours" class="mt-1 text-xs text-red-400">
-                            {{ form.errors.csat_delay_hours }}
-                        </p>
-                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
-                            How many hours after resolution to send the survey (max 168 = 7 days).
-                        </p>
-                    </div>
-
-                    <!-- Submit -->
-                    <div class="pt-2">
-                        <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-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-opacity hover:opacity-90 disabled:opacity-50"
-                        >
-                            Save Settings
-                        </button>
-                    </div>
-                </form>
-            </div>
-
-            <!-- Preview -->
-            <div class="mt-6 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
-                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Preview</h3>
-                <div
-                    class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-6 text-center"
-                >
-                    <p class="mb-4 text-sm text-[var(--esc-panel-text-secondary)]">{{ form.csat_question_text }}</p>
-                    <div class="flex items-center justify-center gap-2">
-                        <button
-                            v-for="n in form.csat_scale === '1-3' ? 3 : 5"
-                            :key="n"
-                            class="flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--esc-panel-border)] text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-colors hover:border-amber-500/40 hover:bg-amber-500/10 hover:text-amber-400"
-                        >
-                            {{ n }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    settings: Object,
+});
+
+const form = useForm({
+    csat_question_text: props.settings?.csat_question_text || 'How would you rate your support experience?',
+    csat_scale: props.settings?.csat_scale || '1-5',
+    csat_delivery_trigger: props.settings?.csat_delivery_trigger || 'on_resolve',
+    csat_delay_hours: props.settings?.csat_delay_hours || 0,
+});
+
+function submit() {
+    form.post(route('escalated.admin.settings.csat.update'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="CSAT Survey Settings">
+        <div class="mx-auto max-w-2xl">
+            <div class="mb-6">
+                <Link
+                    :href="route('escalated.admin.settings')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back to Settings
+                </Link>
+            </div>
+
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h2 class="mb-6 text-lg font-semibold text-[var(--esc-panel-text-secondary)]">
+                    Customer Satisfaction Survey
+                </h2>
+
+                <form class="space-y-6" @submit.prevent="submit">
+                    <!-- Question Text -->
+                    <div>
+                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Survey Question</label
+                        >
+                        <textarea
+                            v-model="form.csat_question_text"
+                            rows="3"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]/40"
+                            placeholder="How would you rate your support experience?"
+                        ></textarea>
+                        <p v-if="form.errors.csat_question_text" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.csat_question_text }}
+                        </p>
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            This question will be shown to customers after their ticket is resolved.
+                        </p>
+                    </div>
+
+                    <!-- Rating Scale -->
+                    <div>
+                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Rating Scale</label
+                        >
+                        <div class="flex gap-3">
+                            <label
+                                :class="[
+                                    'flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-3 transition-all',
+                                    form.csat_scale === '1-3'
+                                        ? 'border-[var(--esc-panel-accent)]/40 bg-[var(--esc-panel-accent)]/10 text-[var(--esc-panel-accent)]'
+                                        : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:border-[var(--esc-panel-border-input)]',
+                                ]"
+                            >
+                                <input v-model="form.csat_scale" type="radio" value="1-3" class="sr-only" />
+                                <span class="text-sm font-medium">1-3 Scale</span>
+                                <span class="text-xs text-[var(--esc-panel-text-muted)]">(Simple)</span>
+                            </label>
+                            <label
+                                :class="[
+                                    'flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-3 transition-all',
+                                    form.csat_scale === '1-5'
+                                        ? 'border-[var(--esc-panel-accent)]/40 bg-[var(--esc-panel-accent)]/10 text-[var(--esc-panel-accent)]'
+                                        : 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:border-[var(--esc-panel-border-input)]',
+                                ]"
+                            >
+                                <input v-model="form.csat_scale" type="radio" value="1-5" class="sr-only" />
+                                <span class="text-sm font-medium">1-5 Scale</span>
+                                <span class="text-xs text-[var(--esc-panel-text-muted)]">(Detailed)</span>
+                            </label>
+                        </div>
+                        <p v-if="form.errors.csat_scale" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.csat_scale }}
+                        </p>
+                    </div>
+
+                    <!-- Delivery Trigger -->
+                    <div>
+                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Delivery Trigger</label
+                        >
+                        <select
+                            v-model="form.csat_delivery_trigger"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]/40"
+                        >
+                            <option value="on_resolve">On ticket resolution</option>
+                            <option value="delayed">Delayed after resolution</option>
+                            <option value="manual">Manual only</option>
+                        </select>
+                        <p v-if="form.errors.csat_delivery_trigger" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.csat_delivery_trigger }}
+                        </p>
+                    </div>
+
+                    <!-- Delay Hours (shown only for delayed trigger) -->
+                    <div v-if="form.csat_delivery_trigger === 'delayed'">
+                        <label class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            >Delay (hours)</label
+                        >
+                        <input
+                            v-model.number="form.csat_delay_hours"
+                            type="number"
+                            min="0"
+                            max="168"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]/40"
+                        />
+                        <p v-if="form.errors.csat_delay_hours" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.csat_delay_hours }}
+                        </p>
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            How many hours after resolution to send the survey (max 168 = 7 days).
+                        </p>
+                    </div>
+
+                    <!-- Submit -->
+                    <div class="pt-2">
+                        <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-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-opacity hover:opacity-90 disabled:opacity-50"
+                        >
+                            Save Settings
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Preview -->
+            <div class="mt-6 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Preview</h3>
+                <div
+                    class="rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] p-6 text-center"
+                >
+                    <p class="mb-4 text-sm text-[var(--esc-panel-text-secondary)]">{{ form.csat_question_text }}</p>
+                    <div class="flex items-center justify-center gap-2">
+                        <button
+                            v-for="n in form.csat_scale === '1-3' ? 3 : 5"
+                            :key="n"
+                            class="flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--esc-panel-border)] text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-colors hover:border-amber-500/40 hover:bg-amber-500/10 hover:text-amber-400"
+                        >
+                            {{ n }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>