@escalated-dev/escalated 0.5.0 → 0.7.0

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

@@ -0,0 +1,114 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({
+    status: { type: Object, default: null },
+    categories: { type: Array, default: () => ['new', 'open', 'pending', 'on_hold', 'solved'] },
+});
+
+const categoryLabels = {
+    new: 'New',
+    open: 'Open',
+    pending: 'Pending',
+    on_hold: 'On-Hold',
+    solved: 'Solved',
+};
+
+const form = useForm({
+    label: props.status?.label || '',
+    category: props.status?.category || 'open',
+    color: props.status?.color || '#6b7280',
+    description: props.status?.description || '',
+    position: props.status?.position ?? 0,
+    is_default: props.status?.is_default ?? false,
+});
+
+function submit() {
+    if (props.status) {
+        form.put(route('escalated.admin.statuses.update', props.status.id));
+    } else {
+        form.post(route('escalated.admin.statuses.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="status ? 'Edit Status' : 'New Status'">
+        <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)]">Label</label>
+                <input
+                    v-model="form.label"
+                    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 v-if="form.errors.label" class="mt-1 text-sm text-rose-400">{{ form.errors.label }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Category</label>
+                <select
+                    v-model="form.category"
+                    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)]"
+                >
+                    <option v-for="cat in categories" :key="cat" :value="cat">{{ categoryLabels[cat] || cat }}</option>
+                </select>
+                <div v-if="form.errors.category" class="mt-1 text-sm text-rose-400">{{ form.errors.category }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Color</label>
+                <input
+                    v-model="form.color"
+                    type="color"
+                    class="mt-1 h-10 w-16 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)]"
+                />
+                <div v-if="form.errors.color" class="mt-1 text-sm text-rose-400">{{ form.errors.color }}</div>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Description</label>
+                <textarea
+                    v-model="form.description"
+                    rows="2"
+                    class="mt-1 w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                ></textarea>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-[var(--esc-panel-text-secondary)]">Position</label>
+                <input
+                    v-model.number="form.position"
+                    type="number"
+                    min="0"
+                    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>
+
+            <label class="flex items-center gap-2">
+                <input
+                    v-model="form.is_default"
+                    type="checkbox"
+                    class="rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] text-cyan-500 focus:ring-[var(--esc-panel-border-input)]"
+                />
+                <span class="text-sm text-[var(--esc-panel-text-secondary)]">Default status for this category</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"
+                >
+                    {{ status ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,153 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({
+    statuses: Array,
+    categories: Array,
+});
+
+const categoryLabels = {
+    new: 'New',
+    open: 'Open',
+    pending: 'Pending',
+    on_hold: 'On-Hold',
+    solved: 'Solved',
+};
+
+const groupedStatuses = computed(() => {
+    const groups = {};
+    for (const cat of props.categories || []) {
+        groups[cat] = (props.statuses || []).filter((s) => s.category === cat);
+    }
+    return groups;
+});
+
+function destroy(id) {
+    if (confirm('Delete this status?')) {
+        router.delete(route('escalated.admin.statuses.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Ticket Statuses">
+        <div class="mb-4 flex justify-end">
+            <Link
+                :href="route('escalated.admin.statuses.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 Status
+            </Link>
+        </div>
+
+        <div
+            v-if="!statuses?.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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+            </svg>
+            <p class="text-sm text-[var(--esc-panel-text-muted)]">No custom statuses yet</p>
+            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                Create sub-statuses to track ticket progress in detail
+            </p>
+        </div>
+
+        <div v-for="cat in categories" :key="cat" class="mb-6">
+            <h3 class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--esc-panel-text-tertiary)]">
+                {{ categoryLabels[cat] || cat }}
+            </h3>
+            <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)]"
+                            >
+                                Color
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Label
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Default
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Position
+                            </th>
+                            <th
+                                class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                            >
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                        <tr v-if="!groupedStatuses[cat]?.length">
+                            <td colspan="5" class="px-4 py-6 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                                No statuses in this category
+                            </td>
+                        </tr>
+                        <tr
+                            v-for="status in groupedStatuses[cat]"
+                            :key="status.id"
+                            class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                        >
+                            <td class="px-4 py-3">
+                                <span
+                                    class="inline-block h-4 w-4 rounded-full ring-1 ring-[var(--esc-panel-border-input)]"
+                                    :style="{ backgroundColor: status.color }"
+                                ></span>
+                            </td>
+                            <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                                {{ status.label }}
+                            </td>
+                            <td class="px-4 py-3 text-sm">
+                                <span
+                                    v-if="status.is_default"
+                                    class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-xs font-medium text-emerald-400 ring-1 ring-emerald-500/20"
+                                    >Default</span
+                                >
+                                <span v-else class="text-[var(--esc-panel-text-muted)]">-</span>
+                            </td>
+                            <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                                {{ status.position }}
+                            </td>
+                            <td class="px-4 py-3 text-right text-sm">
+                                <Link
+                                    :href="route('escalated.admin.statuses.edit', status.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(status.id)">
+                                    Delete
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -1,105 +1,191 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm, router } from '@inertiajs/vue3';
-import { ref } from 'vue';
-
-defineProps({ tags: Array });
-
-const showForm = ref(false);
-const editingTag = ref(null);
-
-const form = useForm({ name: '', color: '#06b6d4' });
-
-function createTag() {
-    form.post(route('escalated.admin.tags.store'), {
-        onSuccess: () => { form.reset(); showForm.value = false; },
-    });
-}
-
-function startEdit(tag) {
-    editingTag.value = tag.id;
-    form.name = tag.name;
-    form.color = tag.color;
-}
-
-function updateTag(id) {
-    form.put(route('escalated.admin.tags.update', id), {
-        onSuccess: () => { editingTag.value = null; form.reset(); },
-    });
-}
-
-function destroy(id) {
-    if (confirm('Delete this tag?')) {
-        router.delete(route('escalated.admin.tags.destroy', id));
-    }
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Tags">
-        <div class="mb-4 flex justify-end">
-            <button @click="showForm = !showForm"
-                    :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' : 'Add Tag' }}
-            </button>
-        </div>
-        <form v-if="showForm" @submit.prevent="createTag" class="mb-6 flex items-end gap-3 rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
-            <div>
-                <label class="block text-sm font-medium text-neutral-300">Name</label>
-                <input v-model="form.name" type="text" required class="mt-1 rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-neutral-300">Color</label>
-                <input v-model="form.color" type="color" class="mt-1 h-10 w-16 rounded-lg border border-white/10 bg-neutral-950" />
-            </div>
-            <button type="submit" :disabled="form.processing"
-                    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 disabled:opacity-50">
-                Create
-            </button>
-        </form>
-        <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">Color</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">Tickets</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="!tags?.length">
-                        <td colspan="4" 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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z" /></svg>
-                            <p class="text-sm text-neutral-500">No tags yet</p>
-                            <p class="mt-1 text-xs text-neutral-600">Create tags to categorize and filter tickets</p>
-                        </td>
-                    </tr>
-                    <tr v-for="tag in tags" :key="tag.id" class="transition-colors hover:bg-white/[0.03]">
-                        <td class="px-4 py-3">
-                            <span class="inline-block h-4 w-4 rounded-full ring-1 ring-white/10" :style="{ backgroundColor: tag.color }"></span>
-                        </td>
-                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">
-                            <template v-if="editingTag === tag.id">
-                                <form @submit.prevent="updateTag(tag.id)" class="flex items-center gap-2">
-                                    <input v-model="form.name" type="text" required class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
-                                    <input v-model="form.color" type="color" class="h-8 w-10 rounded border border-white/10 bg-neutral-950" />
-                                    <button type="submit" class="text-sm text-neutral-300 hover:text-white">Save</button>
-                                    <button type="button" @click="editingTag = null" class="text-sm text-neutral-400 hover:text-neutral-300">Cancel</button>
-                                </form>
-                            </template>
-                            <template v-else>{{ tag.name }}</template>
-                        </td>
-                        <td class="px-4 py-3 text-sm text-neutral-400">{{ tag.tickets_count }}</td>
-                        <td class="px-4 py-3 text-right text-sm">
-                            <button @click="startEdit(tag)" class="text-neutral-300 hover:text-white">Edit</button>
-                            <button @click="destroy(tag.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({ tags: Array });
+
+const showForm = ref(false);
+const editingTag = ref(null);
+
+const form = useForm({ name: '', color: '#06b6d4' });
+
+function createTag() {
+    form.post(route('escalated.admin.tags.store'), {
+        onSuccess: () => {
+            form.reset();
+            showForm.value = false;
+        },
+    });
+}
+
+function startEdit(tag) {
+    editingTag.value = tag.id;
+    form.name = tag.name;
+    form.color = tag.color;
+}
+
+function updateTag(id) {
+    form.put(route('escalated.admin.tags.update', id), {
+        onSuccess: () => {
+            editingTag.value = null;
+            form.reset();
+        },
+    });
+}
+
+function destroy(id) {
+    if (confirm('Delete this tag?')) {
+        router.delete(route('escalated.admin.tags.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Tags">
+        <div class="mb-4 flex justify-end">
+            <button
+                :class="
+                    showForm
+                        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]'
+                        : '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)]'
+                "
+                @click="showForm = !showForm"
+            >
+                {{ showForm ? 'Cancel' : 'Add Tag' }}
+            </button>
+        </div>
+        <form
+            v-if="showForm"
+            class="mb-6 flex items-end gap-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4"
+            @submit.prevent="createTag"
+        >
+            <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 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)]">Color</label>
+                <input
+                    v-model="form.color"
+                    type="color"
+                    class="mt-1 h-10 w-16 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)]"
+                />
+            </div>
+            <button
+                type="submit"
+                :disabled="form.processing"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+            >
+                Create
+            </button>
+        </form>
+        <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)]"
+                        >
+                            Color
+                        </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)]"
+                        >
+                            Tickets
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!tags?.length">
+                        <td colspan="4" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No tags yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Create tags to categorize and filter tickets
+                            </p>
+                        </td>
+                    </tr>
+                    <tr v-for="tag in tags" :key="tag.id" class="transition-colors hover:bg-[var(--esc-panel-hover)]">
+                        <td class="px-4 py-3">
+                            <span
+                                class="inline-block h-4 w-4 rounded-full ring-1 ring-[var(--esc-panel-border-input)]"
+                                :style="{ backgroundColor: tag.color }"
+                            ></span>
+                        </td>
+                        <td class="px-4 py-3 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            <template v-if="editingTag === tag.id">
+                                <form class="flex items-center gap-2" @submit.prevent="updateTag(tag.id)">
+                                    <input
+                                        v-model="form.name"
+                                        type="text"
+                                        required
+                                        class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1 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)]"
+                                    />
+                                    <input
+                                        v-model="form.color"
+                                        type="color"
+                                        class="h-8 w-10 rounded border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)]"
+                                    />
+                                    <button
+                                        type="submit"
+                                        class="text-sm text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                                    >
+                                        Save
+                                    </button>
+                                    <button
+                                        type="button"
+                                        class="text-sm text-[var(--esc-panel-text-tertiary)] hover:text-[var(--esc-panel-text-secondary)]"
+                                        @click="editingTag = null"
+                                    >
+                                        Cancel
+                                    </button>
+                                </form>
+                            </template>
+                            <template v-else>{{ tag.name }}</template>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">{{ tag.tickets_count }}</td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <button
+                                class="text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-text)]"
+                                @click="startEdit(tag)"
+                            >
+                                Edit
+                            </button>
+                            <button class="ml-3 text-rose-400 hover:text-rose-300" @click="destroy(tag.id)">
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>