@escalated-dev/escalated 0.7.0 → 0.8.0

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

@@ -1,109 +1,110 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { Link, router } from '@inertiajs/vue3';
-
-defineProps({ departments: Array });
-
-function destroy(id) {
-    if (confirm('Delete this department?')) {
-        router.delete(route('escalated.admin.departments.destroy', id));
-    }
-}
-</script>
-
-<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-[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-[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)]"
-                        >
-                            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-[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-[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-[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-[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>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ departments: Array });
+
+function destroy(id) {
+    if (confirm('Delete this department?')) {
+        router.delete(route('escalated.admin.departments.destroy', id));
+    }
+}
+</script>
+
+<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-[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-[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)]"
+                        >
+                            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-[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-[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-[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-[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>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -1,157 +1,157 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm } from '@inertiajs/vue3';
-
-const props = defineProps({ rule: { type: Object, default: null } });
-
-const form = useForm({
-    name: props.rule?.name || '',
-    description: props.rule?.description || '',
-    trigger_type: props.rule?.trigger_type || 'time_based',
-    conditions: props.rule?.conditions || [{ field: '', value: '' }],
-    actions: props.rule?.actions || [{ type: '', value: '' }],
-    order: props.rule?.order ?? 0,
-    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 submit() {
-    if (props.rule) {
-        form.put(route('escalated.admin.escalation-rules.update', props.rule.id));
-    } else {
-        form.post(route('escalated.admin.escalation-rules.store'));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="rule ? 'Edit Escalation Rule' : 'New Escalation Rule'">
-        <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)]">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>
-                </select>
-            </div>
-            <div>
-                <div class="mb-2 flex items-center justify-between">
-                    <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-[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>
-                        <option value="age_hours">Age (hours)</option>
-                        <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-[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-[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-[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-[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-[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-[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-[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>
-        </form>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({ rule: { type: Object, default: null } });
+
+const form = useForm({
+    name: props.rule?.name || '',
+    description: props.rule?.description || '',
+    trigger_type: props.rule?.trigger_type || 'time_based',
+    conditions: props.rule?.conditions || [{ field: '', value: '' }],
+    actions: props.rule?.actions || [{ type: '', value: '' }],
+    order: props.rule?.order ?? 0,
+    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 submit() {
+    if (props.rule) {
+        form.put(route('escalated.admin.escalation-rules.update', props.rule.id));
+    } else {
+        form.post(route('escalated.admin.escalation-rules.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="rule ? 'Edit Escalation Rule' : 'New Escalation Rule'">
+        <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)]">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>
+                </select>
+            </div>
+            <div>
+                <div class="mb-2 flex items-center justify-between">
+                    <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-[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>
+                        <option value="age_hours">Age (hours)</option>
+                        <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-[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-[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-[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-[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-[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-[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-[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>
+        </form>
+    </EscalatedLayout>
+</template>