@escalated-dev/escalated 0.2.1 → 0.4.0

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

@@ -14,32 +14,40 @@ 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-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+            <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">
                 Add Department
             </Link>
         </div>
-        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Tickets</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Agents</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+        <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">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>
                 </thead>
-                <tbody class="divide-y divide-gray-200">
-                    <tr v-for="dept in departments" :key="dept.id">
-                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ dept.name }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ dept.tickets_count }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ dept.agents_count }}</td>
+                <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>
                         <td class="px-4 py-3 text-sm">
-                            <span :class="dept.is_active ? 'text-green-600' : 'text-gray-400'">{{ dept.is_active ? 'Yes' : 'No' }}</span>
+                            <span :class="dept.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ 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-indigo-600 hover:text-indigo-900">Edit</Link>
-                            <button @click="destroy(dept.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                            <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>
+                        </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>
                         </td>
                     </tr>
                 </tbody>

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

@@ -30,14 +30,14 @@ function submit() {
 
 <template>
     <EscalatedLayout :title="rule ? 'Edit Escalation Rule' : 'New Escalation Rule'">
-        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+        <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-gray-700">Name</label>
-                <input v-model="form.name" type="text" required class="mt-1 w-full rounded-lg border-gray-300 shadow-sm" />
+                <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-gray-700">Trigger Type</label>
-                <select v-model="form.trigger_type" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                <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">
                     <option value="time_based">Time Based</option>
                     <option value="sla_breach">SLA Breach</option>
                     <option value="priority_based">Priority Based</option>
@@ -45,11 +45,11 @@ function submit() {
             </div>
             <div>
                 <div class="mb-2 flex items-center justify-between">
-                    <label class="text-sm font-medium text-gray-700">Conditions</label>
-                    <button type="button" @click="addCondition" class="text-sm text-indigo-600">+ Add</button>
+                    <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>
                 </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 border-gray-300 text-sm">
+                    <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">
                         <option value="status">Status</option>
                         <option value="priority">Priority</option>
                         <option value="assigned">Assignment</option>
@@ -57,36 +57,37 @@ 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 border-gray-300 text-sm" placeholder="Value" />
-                    <button type="button" @click="removeCondition(idx)" class="text-red-500">&times;</button>
+                    <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>
                 </div>
             </div>
             <div>
                 <div class="mb-2 flex items-center justify-between">
-                    <label class="text-sm font-medium text-gray-700">Actions</label>
-                    <button type="button" @click="addAction" class="text-sm text-indigo-600">+ Add</button>
+                    <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>
                 </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 border-gray-300 text-sm">
+                    <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">
                         <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 border-gray-300 text-sm" placeholder="Value" />
-                    <button type="button" @click="removeAction(idx)" class="text-red-500">&times;</button>
+                    <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>
                 </div>
             </div>
             <div>
-                <label class="block text-sm font-medium text-gray-700">Order</label>
-                <input v-model.number="form.order" type="number" min="0" class="mt-1 w-24 rounded-lg border-gray-300 shadow-sm" />
+                <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" />
             </div>
             <label class="flex items-center gap-2">
-                <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300" />
-                <span class="text-sm text-gray-700">Active</span>
+                <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-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                <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">
                     {{ rule ? 'Update' : 'Create' }}
                 </button>
             </div>

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

@@ -14,32 +14,40 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="Escalation Rules">
         <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.escalation-rules.create')" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+            <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">
                 Add Rule
             </Link>
         </div>
-        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Order</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Trigger</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+        <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-gray-200">
-                    <tr v-for="rule in rules" :key="rule.id">
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ rule.order }}</td>
-                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ rule.name }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ rule.trigger_type }}</td>
+                <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-green-600' : 'text-gray-400'">{{ rule.is_active ? 'Yes' : 'No' }}</span>
+                            <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-indigo-600 hover:text-indigo-900">Edit</Link>
-                            <button @click="destroy(rule.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                            <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>

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

@@ -0,0 +1,287 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+defineProps({ macros: Array });
+
+const showForm = ref(false);
+const editingMacro = ref(null);
+
+const form = useForm({
+    name: '',
+    description: '',
+    is_shared: false,
+    actions: [],
+});
+
+const actionTypes = [
+    { value: 'status', label: 'Set Status' },
+    { value: 'priority', label: 'Set Priority' },
+    { value: 'assign', label: 'Assign To' },
+    { value: 'tags', label: 'Add Tags' },
+    { value: 'department', label: 'Move to Department' },
+    { value: 'reply', label: 'Send Reply' },
+    { value: 'note', label: 'Add Internal Note' },
+];
+
+const statusOptions = ['open', 'in_progress', 'waiting_on_customer', 'resolved', 'closed'];
+const priorityOptions = ['low', 'medium', 'high', 'urgent', 'critical'];
+
+function addAction() {
+    form.actions.push({ type: 'status', value: '', order: form.actions.length });
+}
+
+function removeAction(index) {
+    form.actions.splice(index, 1);
+    form.actions.forEach((a, i) => { a.order = i; });
+}
+
+function moveAction(index, direction) {
+    const newIndex = index + direction;
+    if (newIndex < 0 || newIndex >= form.actions.length) return;
+    const temp = form.actions[index];
+    form.actions[index] = form.actions[newIndex];
+    form.actions[newIndex] = temp;
+    form.actions.forEach((a, i) => { a.order = i; });
+}
+
+function create() {
+    form.post(route('escalated.admin.macros.store'), {
+        onSuccess: () => { form.reset(); showForm.value = false; },
+    });
+}
+
+function startEdit(macro) {
+    editingMacro.value = macro.id;
+    form.name = macro.name;
+    form.description = macro.description || '';
+    form.is_shared = macro.is_shared || false;
+    form.actions = (macro.actions || []).map((a, i) => ({
+        type: a.type,
+        value: a.value || '',
+        order: a.order ?? i,
+    }));
+    showForm.value = true;
+}
+
+function update() {
+    form.put(route('escalated.admin.macros.update', editingMacro.value), {
+        onSuccess: () => { editingMacro.value = null; form.reset(); showForm.value = false; },
+    });
+}
+
+function destroy(id) {
+    if (confirm('Delete this macro? This cannot be undone.')) {
+        router.delete(route('escalated.admin.macros.destroy', id));
+    }
+}
+
+function cancelEdit() {
+    editingMacro.value = null;
+    form.reset();
+    showForm.value = false;
+}
+
+function handleSubmit() {
+    if (editingMacro.value) {
+        update();
+    } else {
+        create();
+    }
+}
+
+const inputClass = 'w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10';
+const selectClass = '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';
+</script>
+
+<template>
+    <EscalatedLayout title="Macros">
+        <!-- Top bar -->
+        <div class="mb-4 flex items-center justify-between">
+            <p class="text-sm text-neutral-500">
+                Macros automate repetitive actions on tickets.
+            </p>
+            <button @click="showForm ? cancelEdit() : (showForm = true)"
+                    :class="showForm
+                        ? 'rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]'
+                        : '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'">
+                {{ showForm ? 'Cancel' : 'Create Macro' }}
+            </button>
+        </div>
+
+        <!-- Create/Edit form -->
+        <form v-if="showForm" @submit.prevent="handleSubmit" class="mb-6 space-y-4 rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-neutral-300">Name</label>
+                    <input v-model="form.name" type="text" required placeholder="e.g., Close & Thank"
+                           :class="inputClass" />
+                </div>
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-neutral-300">Description</label>
+                    <input v-model="form.description" type="text" placeholder="Optional description"
+                           :class="inputClass" />
+                </div>
+            </div>
+
+            <div class="flex items-center gap-3">
+                <label class="flex items-center gap-2">
+                    <input v-model="form.is_shared" type="checkbox"
+                           class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10" />
+                    <span class="text-sm text-neutral-300">Shared with all agents</span>
+                </label>
+            </div>
+
+            <!-- Action builder -->
+            <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="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-neutral-400 transition-colors hover:bg-white/[0.06] hover:text-neutral-200">
+                        + Add Action
+                    </button>
+                </div>
+
+                <div v-if="!form.actions.length" class="rounded-lg border border-dashed border-white/10 px-4 py-6 text-center">
+                    <p class="text-sm text-neutral-600">No actions yet. Add actions to define what this macro does.</p>
+                </div>
+
+                <div v-else class="space-y-2">
+                    <div v-for="(action, index) in form.actions" :key="index"
+                         class="flex items-center gap-2 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                        <!-- Order controls -->
+                        <div class="flex flex-col gap-0.5">
+                            <button type="button" @click="moveAction(index, -1)"
+                                    :disabled="index === 0"
+                                    class="rounded p-0.5 text-neutral-600 transition-colors hover:bg-white/[0.06] hover:text-neutral-400 disabled:opacity-30">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+                                </svg>
+                            </button>
+                            <button type="button" @click="moveAction(index, 1)"
+                                    :disabled="index === form.actions.length - 1"
+                                    class="rounded p-0.5 text-neutral-600 transition-colors hover:bg-white/[0.06] hover:text-neutral-400 disabled:opacity-30">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <!-- Action number -->
+                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/[0.06] text-xs font-semibold text-neutral-500">
+                            {{ index + 1 }}
+                        </span>
+
+                        <!-- Type dropdown -->
+                        <select v-model="action.type" :class="selectClass">
+                            <option v-for="at in actionTypes" :key="at.value" :value="at.value">{{ at.label }}</option>
+                        </select>
+
+                        <!-- Value input (context-dependent) -->
+                        <select v-if="action.type === 'status'" v-model="action.value" :class="[selectClass, 'flex-1']">
+                            <option value="">Select status...</option>
+                            <option v-for="s in statusOptions" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
+                        </select>
+
+                        <select v-else-if="action.type === 'priority'" v-model="action.value" :class="[selectClass, 'flex-1']">
+                            <option value="">Select priority...</option>
+                            <option v-for="p in priorityOptions" :key="p" :value="p">{{ p }}</option>
+                        </select>
+
+                        <input v-else-if="action.type === 'assign'" v-model="action.value" type="text"
+                               placeholder="Agent ID or email"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <input v-else-if="action.type === 'tags'" v-model="action.value" type="text"
+                               placeholder="Comma-separated tag names"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <input v-else-if="action.type === 'department'" v-model="action.value" type="text"
+                               placeholder="Department ID or name"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <textarea v-else-if="action.type === 'reply' || action.type === 'note'"
+                                  v-model="action.value" rows="2"
+                                  :placeholder="action.type === 'reply' ? 'Reply message...' : 'Note content...'"
+                                  :class="[inputClass, 'flex-1']">
+                        </textarea>
+
+                        <input v-else v-model="action.value" type="text" placeholder="Value"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <!-- Remove -->
+                        <button type="button" @click="removeAction(index)"
+                                class="shrink-0 rounded-lg p-1.5 text-neutral-600 transition-colors hover:bg-rose-500/10 hover:text-rose-400">
+                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Submit -->
+            <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">
+                    {{ editingMacro ? 'Update Macro' : 'Create Macro' }}
+                </button>
+            </div>
+        </form>
+
+        <!-- Macros table -->
+        <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">Description</th>
+                        <th class="px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Actions</th>
+                        <th class="px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Shared</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Creator</th>
+                        <th class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-neutral-500"></th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-if="!macros?.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="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                            </svg>
+                            <p class="text-sm text-neutral-500">No macros yet</p>
+                            <p class="mt-1 text-xs text-neutral-600">Create macros to automate repetitive ticket actions</p>
+                        </td>
+                    </tr>
+                    <tr v-for="macro in macros" :key="macro.id" class="transition-colors hover:bg-white/[0.03]">
+                        <td class="px-4 py-3">
+                            <span class="text-sm font-medium text-neutral-200">{{ macro.name }}</span>
+                        </td>
+                        <td class="px-4 py-3">
+                            <span class="text-sm text-neutral-400">{{ macro.description || '--' }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-center">
+                            <span class="inline-flex items-center rounded-full bg-white/[0.06] px-2 py-0.5 text-xs font-medium text-neutral-400 ring-1 ring-white/[0.06]">
+                                {{ macro.actions?.length || 0 }}
+                            </span>
+                        </td>
+                        <td class="px-4 py-3 text-center">
+                            <span v-if="macro.is_shared"
+                                  class="inline-flex items-center rounded-full bg-cyan-500/10 px-2 py-0.5 text-xs font-medium text-cyan-400 ring-1 ring-cyan-500/20">
+                                Shared
+                            </span>
+                            <span v-else class="text-xs text-neutral-600">Private</span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">
+                            {{ macro.creator?.name || macro.user?.name || '--' }}
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <button @click="startEdit(macro)" class="text-neutral-300 hover:text-white">Edit</button>
+                            <button @click="destroy(macro.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>