@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/pages/Admin/Skills/Form.vue

@@ -0,0 +1,53 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    skill: { type: Object, default: null },
+});
+
+const form = useForm({
+    name: props.skill?.name || '',
+});
+
+function submit() {
+    if (props.skill) {
+        form.put(route('escalated.admin.skills.update', props.skill.id));
+    } else {
+        form.post(route('escalated.admin.skills.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="skill ? 'Edit Skill' : 'Create Skill'">
+        <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)]">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    required
+                    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)] 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.name" class="mt-1 text-xs text-rose-400">{{ form.errors.name }}</p>
+            </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"
+                >
+                    {{ skill ? 'Update' : 'Create' }}
+                </button>
+                <a
+                    :href="route('escalated.admin.skills.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/Skills/Index.vue

@@ -0,0 +1,94 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ skills: Array });
+
+function destroy(id) {
+    if (confirm('Delete this skill?')) {
+        router.delete(route('escalated.admin.skills.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Skills">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.skills.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 Skill
+            </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)]"
+                        >
+                            Agents
+                        </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="!skills?.length">
+                        <td colspan="3" 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.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No skills yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create skills for agent routing
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="skill in skills"
+                        :key="skill.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)]">
+                            {{ skill.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ skill.agents_count }}
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.skills.edit', skill.id)"
+                                class="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(skill.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/SlaPolicies/Form.vue

@@ -1,75 +1,118 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm } from '@inertiajs/vue3';
-
-const props = defineProps({ policy: { type: Object, default: null }, priorities: Array });
-
-const form = useForm({
-    name: props.policy?.name || '',
-    description: props.policy?.description || '',
-    is_default: props.policy?.is_default ?? false,
-    first_response_hours: props.policy?.first_response_hours || {},
-    resolution_hours: props.policy?.resolution_hours || {},
-    business_hours_only: props.policy?.business_hours_only ?? false,
-    is_active: props.policy?.is_active ?? true,
-});
-
-function submit() {
-    if (props.policy) {
-        form.put(route('escalated.admin.sla-policies.update', props.policy.id));
-    } else {
-        form.post(route('escalated.admin.sla-policies.store'));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="policy ? 'Edit SLA Policy' : 'New SLA Policy'">
-        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-5 rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
-            <div>
-                <label class="block text-sm font-medium text-neutral-300">Name</label>
-                <input v-model="form.name" type="text" required class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-neutral-300">Description</label>
-                <textarea v-model="form.description" rows="2" class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
-            </div>
-            <div>
-                <h3 class="mb-2 text-sm font-medium text-neutral-300">First Response Hours (by priority)</h3>
-                <div class="grid grid-cols-2 gap-3">
-                    <div v-for="p in priorities" :key="p">
-                        <label class="text-xs capitalize text-neutral-400">{{ p }}</label>
-                        <input v-model.number="form.first_response_hours[p]" type="number" step="0.5" min="0" class="w-full rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
-                    </div>
-                </div>
-            </div>
-            <div>
-                <h3 class="mb-2 text-sm font-medium text-neutral-300">Resolution Hours (by priority)</h3>
-                <div class="grid grid-cols-2 gap-3">
-                    <div v-for="p in priorities" :key="p">
-                        <label class="text-xs capitalize text-neutral-400">{{ p }}</label>
-                        <input v-model.number="form.resolution_hours[p]" type="number" step="0.5" min="0" class="w-full rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
-                    </div>
-                </div>
-            </div>
-            <label class="flex items-center gap-2">
-                <input v-model="form.business_hours_only" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
-                <span class="text-sm text-neutral-300">Business hours only</span>
-            </label>
-            <label class="flex items-center gap-2">
-                <input v-model="form.is_default" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
-                <span class="text-sm text-neutral-300">Default policy</span>
-            </label>
-            <label class="flex items-center gap-2">
-                <input v-model="form.is_active" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
-                <span class="text-sm text-neutral-300">Active</span>
-            </label>
-            <div class="flex justify-end">
-                <button type="submit" :disabled="form.processing"
-                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
-                    {{ policy ? 'Update' : 'Create' }}
-                </button>
-            </div>
-        </form>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({ policy: { type: Object, default: null }, priorities: Array });
+
+const form = useForm({
+    name: props.policy?.name || '',
+    description: props.policy?.description || '',
+    is_default: props.policy?.is_default ?? false,
+    first_response_hours: props.policy?.first_response_hours || {},
+    resolution_hours: props.policy?.resolution_hours || {},
+    business_hours_only: props.policy?.business_hours_only ?? false,
+    is_active: props.policy?.is_active ?? true,
+});
+
+function submit() {
+    if (props.policy) {
+        form.put(route('escalated.admin.sla-policies.update', props.policy.id));
+    } else {
+        form.post(route('escalated.admin.sla-policies.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="policy ? 'Edit SLA Policy' : 'New SLA Policy'">
+        <form
+            class="mx-auto max-w-lg space-y-5 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6"
+            @submit.prevent="submit"
+        >
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Name</label>
+                <input
+                    v-model="form.name"
+                    type="text"
+                    required
+                    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)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Description</label>
+                <textarea
+                    v-model="form.description"
+                    rows="2"
+                    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)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                ></textarea>
+            </div>
+            <div>
+                <h3 class="mb-2 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                    First Response Hours (by priority)
+                </h3>
+                <div class="grid grid-cols-2 gap-3">
+                    <div v-for="p in priorities" :key="p">
+                        <label class="text-xs capitalize text-[var(--esc-panel-text-tertiary)]">{{ p }}</label>
+                        <input
+                            v-model.number="form.first_response_hours[p]"
+                            type="number"
+                            step="0.5"
+                            min="0"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 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)]"
+                        />
+                    </div>
+                </div>
+            </div>
+            <div>
+                <h3 class="mb-2 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                    Resolution Hours (by priority)
+                </h3>
+                <div class="grid grid-cols-2 gap-3">
+                    <div v-for="p in priorities" :key="p">
+                        <label class="text-xs capitalize text-[var(--esc-panel-text-tertiary)]">{{ p }}</label>
+                        <input
+                            v-model.number="form.resolution_hours[p]"
+                            type="number"
+                            step="0.5"
+                            min="0"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 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)]"
+                        />
+                    </div>
+                </div>
+            </div>
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.business_hours_only"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-white focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Business hours only</span>
+            </label>
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.is_default"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-white focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Default policy</span>
+            </label>
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.is_active"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-white focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Active</span>
+            </label>
+            <div class="flex justify-end">
+                <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 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"
+                >
+                    {{ policy ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -1,59 +1,120 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-
-defineProps({ policies: Array });
-
-function destroy(id) {
-    if (confirm('Delete this SLA policy?')) {
-        router.delete(route('escalated.admin.sla-policies.destroy', id));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout title="SLA Policies">
-        <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.sla-policies.create')"
-                  class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
-                Add Policy
-            </Link>
-        </div>
-        <div class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
-            <table class="min-w-full divide-y divide-white/[0.06]">
-                <thead>
-                    <tr class="bg-white/[0.02]">
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Name</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Default</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Business Hours</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Tickets</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Active</th>
-                        <th class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Actions</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-white/[0.04]">
-                    <tr v-if="!policies?.length">
-                        <td colspan="6" class="px-4 py-12 text-center">
-                            <svg class="mx-auto mb-3 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                            <p class="text-sm text-neutral-500">No SLA policies yet</p>
-                            <p class="mt-1 text-xs text-neutral-600">Define response and resolution time targets</p>
-                        </td>
-                    </tr>
-                    <tr v-for="policy in policies" :key="policy.id" class="transition-colors hover:bg-white/[0.03]">
-                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ policy.name }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ policy.is_default ? 'Yes' : 'No' }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ policy.business_hours_only ? 'Yes' : 'No' }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ policy.tickets_count }}</td>
-                        <td class="px-4 py-3 text-sm">
-                            <span :class="policy.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ policy.is_active ? 'Yes' : 'No' }}</span>
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <Link :href="route('escalated.admin.sla-policies.edit', policy.id)" class="text-neutral-300 hover:text-white">Edit</Link>
-                            <button @click="destroy(policy.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ policies: Array });
+
+function destroy(id) {
+    if (confirm('Delete this SLA policy?')) {
+        router.delete(route('escalated.admin.sla-policies.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="SLA Policies">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.sla-policies.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 Policy
+            </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)]"
+                        >
+                            Default
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Business Hours
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Tickets
+                        </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-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="!policies?.length">
+                        <td colspan="6" 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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No SLA policies yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Define response and resolution time targets
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="policy in policies"
+                        :key="policy.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)]">
+                            {{ policy.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ policy.is_default ? 'Yes' : 'No' }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ policy.business_hours_only ? 'Yes' : 'No' }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ policy.tickets_count }}
+                        </td>
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                :class="policy.is_active ? 'text-emerald-400' : 'text-[var(--esc-panel-text-muted)]'"
+                                >{{ policy.is_active ? 'Yes' : 'No' }}</span
+                            >
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link
+                                :href="route('escalated.admin.sla-policies.edit', policy.id)"
+                                class="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(policy.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>