@escalated-dev/escalated 0.6.0 → 0.7.1

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

@@ -14,40 +14,93 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="Departments">
         <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.departments.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">
+            <Link
+                :href="route('escalated.admin.departments.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 Department
             </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]">
+        <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-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">Tickets</th>
-                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Agents</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 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)]"
+                        >
+                            Tickets
+                        </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-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-white/[0.04]">
-                    <tr v-for="dept in departments" :key="dept.id" class="transition-colors hover:bg-white/[0.03]">
-                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ dept.name }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ dept.tickets_count }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ dept.agents_count }}</td>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr
+                        v-for="dept in departments"
+                        :key="dept.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)]">
+                            {{ dept.name }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ dept.tickets_count }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ dept.agents_count }}</td>
                         <td class="px-4 py-3 text-sm">
-                            <span :class="dept.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ dept.is_active ? 'Yes' : 'No' }}</span>
+                            <span :class="dept.is_active ? 'text-emerald-400' : 'text-[var(--esc-panel-text-muted)]'">{{
+                                dept.is_active ? 'Yes' : 'No'
+                            }}</span>
                         </td>
                         <td class="px-4 py-3 text-right text-sm">
-                            <Link :href="route('escalated.admin.departments.edit', dept.id)" class="text-neutral-300 hover:text-white">Edit</Link>
-                            <button @click="destroy(dept.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
+                            <Link
+                                :href="route('escalated.admin.departments.edit', dept.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(dept.id)">
+                                Delete
+                            </button>
                         </td>
                     </tr>
                     <tr v-if="!departments?.length">
                         <td colspan="5" 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="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" /></svg>
-                            <p class="text-sm text-neutral-500">No departments yet</p>
-                            <p class="mt-1 text-xs text-neutral-600">Create your first department to organize tickets</p>
+                            <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="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No departments yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create your first department to organize tickets
+                            </p>
                         </td>
                     </tr>
                 </tbody>

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

@@ -14,10 +14,18 @@ const form = useForm({
     is_active: props.rule?.is_active ?? true,
 });
 
-function addCondition() { form.conditions.push({ field: '', value: '' }); }
-function removeCondition(idx) { form.conditions.splice(idx, 1); }
-function addAction() { form.actions.push({ type: '', value: '' }); }
-function removeAction(idx) { form.actions.splice(idx, 1); }
+function addCondition() {
+    form.conditions.push({ field: '', value: '' });
+}
+function removeCondition(idx) {
+    form.conditions.splice(idx, 1);
+}
+function addAction() {
+    form.actions.push({ type: '', value: '' });
+}
+function removeAction(idx) {
+    form.actions.splice(idx, 1);
+}
 
 function submit() {
     if (props.rule) {
@@ -30,14 +38,25 @@ function submit() {
 
 <template>
     <EscalatedLayout :title="rule ? 'Edit Escalation Rule' : 'New Escalation Rule'">
-        <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">
+        <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-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" />
+                <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-neutral-300">Trigger Type</label>
-                <select v-model="form.trigger_type" 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">
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Trigger Type</label>
+                <select
+                    v-model="form.trigger_type"
+                    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)]"
+                >
                     <option value="time_based">Time Based</option>
                     <option value="sla_breach">SLA Breach</option>
                     <option value="priority_based">Priority Based</option>
@@ -45,11 +64,20 @@ function submit() {
             </div>
             <div>
                 <div class="mb-2 flex items-center justify-between">
-                    <label class="text-sm font-medium text-neutral-300">Conditions</label>
-                    <button type="button" @click="addCondition" class="text-sm text-neutral-300 hover:text-white">+ Add</button>
+                    <label class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">Conditions</label>
+                    <button
+                        type="button"
+                        class="text-sm text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                        @click="addCondition"
+                    >
+                        + Add
+                    </button>
                 </div>
                 <div v-for="(cond, idx) in form.conditions" :key="idx" class="mb-2 flex gap-2">
-                    <select v-model="cond.field" class="w-1/2 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">
+                    <select
+                        v-model="cond.field"
+                        class="w-1/2 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)]"
+                    >
                         <option value="status">Status</option>
                         <option value="priority">Priority</option>
                         <option value="assigned">Assignment</option>
@@ -57,37 +85,70 @@ function submit() {
                         <option value="no_response_hours">No Response (hours)</option>
                         <option value="sla_breached">SLA Breached</option>
                     </select>
-                    <input v-model="cond.value" class="w-1/2 rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" placeholder="Value" />
-                    <button type="button" @click="removeCondition(idx)" class="text-rose-400 hover:text-rose-300">&times;</button>
+                    <input
+                        v-model="cond.value"
+                        class="w-1/2 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)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                        placeholder="Value"
+                    />
+                    <button type="button" class="text-rose-400 hover:text-rose-300" @click="removeCondition(idx)">
+                        &times;
+                    </button>
                 </div>
             </div>
             <div>
                 <div class="mb-2 flex items-center justify-between">
-                    <label class="text-sm font-medium text-neutral-300">Actions</label>
-                    <button type="button" @click="addAction" class="text-sm text-neutral-300 hover:text-white">+ Add</button>
+                    <label class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">Actions</label>
+                    <button
+                        type="button"
+                        class="text-sm text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                        @click="addAction"
+                    >
+                        + Add
+                    </button>
                 </div>
                 <div v-for="(action, idx) in form.actions" :key="idx" class="mb-2 flex gap-2">
-                    <select v-model="action.type" class="w-1/2 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">
+                    <select
+                        v-model="action.type"
+                        class="w-1/2 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)]"
+                    >
                         <option value="escalate">Escalate</option>
                         <option value="change_priority">Change Priority</option>
                         <option value="assign_to">Assign To</option>
                         <option value="change_department">Change Department</option>
                     </select>
-                    <input v-model="action.value" class="w-1/2 rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" placeholder="Value" />
-                    <button type="button" @click="removeAction(idx)" class="text-rose-400 hover:text-rose-300">&times;</button>
+                    <input
+                        v-model="action.value"
+                        class="w-1/2 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)] placeholder-gray-500 focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                        placeholder="Value"
+                    />
+                    <button type="button" class="text-rose-400 hover:text-rose-300" @click="removeAction(idx)">
+                        &times;
+                    </button>
                 </div>
             </div>
             <div>
-                <label class="block text-sm font-medium text-neutral-300">Order</label>
-                <input v-model.number="form.order" type="number" min="0" class="mt-1 w-24 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" />
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Order</label>
+                <input
+                    v-model.number="form.order"
+                    type="number"
+                    min="0"
+                    class="mt-1 w-24 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>
             <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>
+                <input
+                    v-model="form.is_active"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-[var(--esc-panel-text)] 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-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">
+                <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"
+                >
                     {{ rule ? 'Update' : 'Create' }}
                 </button>
             </div>

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

@@ -1,57 +1,178 @@
 <script setup>
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
 import { Link, router } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
 
-defineProps({ rules: Array });
+const props = defineProps({ rules: Array });
+
+const selectedCategory = ref('');
+const collapsedCategories = ref({});
 
 function destroy(id) {
     if (confirm('Delete this escalation rule?')) {
         router.delete(route('escalated.admin.escalation-rules.destroy', id));
     }
 }
+
+const categories = computed(() => {
+    const cats = new Set();
+    (props.rules || []).forEach((r) => cats.add(r.category || 'Uncategorized'));
+    return Array.from(cats).sort();
+});
+
+const filteredRules = computed(() => {
+    if (!selectedCategory.value) return props.rules || [];
+    return (props.rules || []).filter((r) => (r.category || 'Uncategorized') === selectedCategory.value);
+});
+
+const groupedRules = computed(() => {
+    const groups = {};
+    filteredRules.value.forEach((rule) => {
+        const cat = rule.category || 'Uncategorized';
+        if (!groups[cat]) groups[cat] = [];
+        groups[cat].push(rule);
+    });
+    return groups;
+});
+
+function toggleCategory(cat) {
+    collapsedCategories.value[cat] = !collapsedCategories.value[cat];
+}
 </script>
 
 <template>
     <EscalatedLayout title="Escalation Rules">
-        <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.escalation-rules.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">
+        <div class="mb-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <select
+                    v-model="selectedCategory"
+                    class="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)]"
+                >
+                    <option value="">All Categories</option>
+                    <option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
+                </select>
+            </div>
+            <Link
+                :href="route('escalated.admin.escalation-rules.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 Rule
             </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">Order</th>
-                        <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">Trigger</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="!rules?.length">
-                        <td colspan="5" 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="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>
-                            <p class="text-sm text-neutral-500">No escalation rules yet</p>
-                            <p class="mt-1 text-xs text-neutral-600">Set up automatic escalation for overdue tickets</p>
-                        </td>
-                    </tr>
-                    <tr v-for="rule in rules" :key="rule.id" class="transition-colors hover:bg-white/[0.03]">
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ rule.order }}</td>
-                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ rule.name }}</td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ rule.trigger_type }}</td>
-                        <td class="px-4 py-3 text-sm">
-                            <span :class="rule.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ rule.is_active ? 'Yes' : 'No' }}</span>
-                        </td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <Link :href="route('escalated.admin.escalation-rules.edit', rule.id)" class="text-neutral-300 hover:text-white">Edit</Link>
-                            <button @click="destroy(rule.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+
+        <div
+            v-if="!rules?.length"
+            class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] 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="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
+                />
+            </svg>
+            <p class="text-sm text-[var(--esc-panel-text-muted)]">No escalation rules yet</p>
+            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                Set up automatic escalation for overdue tickets
+            </p>
+        </div>
+
+        <!-- Grouped by category -->
+        <div v-for="(catRules, category) in groupedRules" :key="category" class="mb-4">
+            <button
+                class="mb-2 flex w-full items-center gap-2 text-sm font-semibold text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                @click="toggleCategory(category)"
+            >
+                <svg
+                    :class="[
+                        'h-4 w-4 text-[var(--esc-panel-text-muted)] transition-transform',
+                        !collapsedCategories[category] && 'rotate-90',
+                    ]"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                </svg>
+                {{ category }}
+                <span class="text-xs text-[var(--esc-panel-text-muted)]">({{ catRules.length }})</span>
+            </button>
+
+            <div
+                v-if="!collapsedCategories[category]"
+                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)]"
+                            >
+                                Order
+                            </th>
+                            <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)]"
+                            >
+                                Trigger
+                            </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-for="rule in catRules"
+                            :key="rule.id"
+                            class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                        >
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ rule.order }}</td>
+                            <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                                {{ rule.name }}
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ rule.trigger_type }}
+                            </td>
+                            <td class="px-4 py-3 text-sm">
+                                <span
+                                    :class="rule.is_active ? 'text-emerald-400' : 'text-[var(--esc-panel-text-muted)]'"
+                                    >{{ rule.is_active ? 'Yes' : 'No' }}</span
+                                >
+                            </td>
+                            <td class="px-4 py-3 text-right text-sm">
+                                <Link
+                                    :href="route('escalated.admin.escalation-rules.edit', rule.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(rule.id)">
+                                    Delete
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </EscalatedLayout>
 </template>

package/src/pages/Admin/Import/Connect.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    platform: String,
+    display_name: String,
+    credential_fields: { type: Array, default: () => [] },
+});
+
+const credentials = ref({});
+const testing = ref(false);
+const testResult = ref(null);
+
+props.credential_fields.forEach((f) => {
+    credentials.value[f.name] = '';
+});
+
+async function testConnection() {
+    testing.value = true;
+    testResult.value = null;
+
+    try {
+        const response = await fetch(route('escalated.admin.import.test-connection', props.platform), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
+            },
+            body: JSON.stringify({ credentials: credentials.value }),
+        });
+
+        const data = await response.json();
+        testResult.value = data.success ? 'success' : data.error || 'Connection failed';
+    } catch (e) {
+        testResult.value = 'Connection failed: ' + e.message;
+    } finally {
+        testing.value = false;
+    }
+}
+
+function proceed() {
+    // Credentials already stored server-side after successful test connection
+    router.get(route('escalated.admin.import.mapping', props.platform));
+}
+</script>
+
+<template>
+    <div class="mx-auto max-w-lg space-y-6">
+        <div>
+            <h2 class="text-lg font-semibold text-[var(--esc-panel-text)]">Connect to {{ display_name }}</h2>
+            <p class="mt-1 text-sm text-[var(--esc-panel-text-secondary)]">
+                Enter your {{ display_name }} credentials to connect.
+            </p>
+        </div>
+
+        <div class="space-y-4 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+            <div v-for="field in credential_fields" :key="field.name">
+                <label class="mb-1 block text-sm font-medium text-[var(--esc-panel-text)]">{{ field.label }}</label>
+                <input
+                    v-model="credentials[field.name]"
+                    :type="field.type || 'text'"
+                    :placeholder="field.help || ''"
+                    class="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="field.help" class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">{{ field.help }}</p>
+            </div>
+        </div>
+
+        <!-- Test connection -->
+        <div class="flex items-center gap-4">
+            <button
+                :disabled="testing"
+                class="rounded-lg border border-[var(--esc-panel-border)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text)] hover:bg-[var(--esc-panel-hover)]"
+                @click="testConnection"
+            >
+                {{ testing ? 'Testing...' : 'Test Connection' }}
+            </button>
+
+            <span v-if="testResult === 'success'" class="text-sm text-green-400">Connected successfully</span>
+            <span v-else-if="testResult" class="text-sm text-red-400">{{ testResult }}</span>
+        </div>
+
+        <!-- Proceed -->
+        <div class="flex justify-end">
+            <button
+                :disabled="testResult !== 'success'"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-6 py-2 text-sm font-medium text-white disabled:opacity-50"
+                @click="proceed"
+            >
+                Next: Configure Mappings
+            </button>
+        </div>
+    </div>
+</template>