@escalated-dev/escalated 0.7.1 → 0.8.0

package/README.md

@@ -21,6 +21,7 @@
 </h1>
 
 [![Tests](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml/badge.svg)](https://github.com/escalated-dev/escalated/actions/workflows/run-tests.yml)
+[![FOSSA Status](https://app.fossa.com/api/projects/custom%2B62107%2Fgithub.com%2Fescalated-dev%2Fescalated.svg?type=shield)](https://app.fossa.com/projects/custom%2B62107%2Fgithub.com%2Fescalated-dev%2Fescalated?ref=badge_shield)
 [![npm](https://img.shields.io/npm/v/@escalated-dev/escalated)](https://www.npmjs.com/package/@escalated-dev/escalated)
 [![Vue 3](https://img.shields.io/badge/vue-3.x-4FC08D?logo=vue.js&logoColor=white)](https://vuejs.org/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -343,13 +344,16 @@ Peer dependencies: `vue` ^3.3.0, `@inertiajs/vue3` ^1.0.0 || ^2.0.0
 
 ## Ecosystem
 
-This is the shared frontend for the Escalated support ticket system. Backend packages available for every major framework:
+This is the shared frontend for the Escalated support ticket system. Host framework packages and client SDKs available across the ecosystem:
 
 - **[Escalated for Laravel](https://github.com/escalated-dev/escalated-laravel)** — Laravel Composer package
 - **[Escalated for Rails](https://github.com/escalated-dev/escalated-rails)** — Ruby on Rails engine
 - **[Escalated for Django](https://github.com/escalated-dev/escalated-django)** — Django reusable app
 - **[Escalated for AdonisJS](https://github.com/escalated-dev/escalated-adonis)** — AdonisJS v6 package
+- **[Escalated for WordPress](https://github.com/escalated-dev/escalated-wordpress)** — WordPress plugin
 - **[Escalated for Filament](https://github.com/escalated-dev/escalated-filament)** — Filament v3 admin panel plugin
+- **[Escalated for React Native](https://github.com/escalated-dev/escalated-react-native)** — React Native SDK
+- **[Escalated for Flutter](https://github.com/escalated-dev/escalated-flutter)** — Flutter SDK
 - **[Shared Frontend](https://github.com/escalated-dev/escalated)** — Vue 3 + Inertia.js UI components (you are here)
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated \u00e2\u20ac\u201d the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",
@@ -32,6 +32,9 @@
     "@inertiajs/vue3": "^1.0.0 || ^2.0.0 || ^3.0.0",
     "vue": "^3.3.0"
   },
+  "dependencies": {
+    "@escalated-dev/locale": "github:escalated-dev/escalated-locale#v0.1.2"
+  },
   "scripts": {
     "test": "vitest run",
     "lint": "eslint src/ --max-warnings 0",
@@ -66,7 +69,7 @@
     "eslint": "^10.0.1",
     "eslint-plugin-storybook": "^10.2.12",
     "eslint-plugin-vue": "^10.8.0",
-    "happy-dom": "^15.0.0",
+    "happy-dom": "^20.9.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "playwright": "^1.50.0",
@@ -76,6 +79,6 @@
     "tailwindcss": "^3.4.0",
     "vitest": "^2.0.0",
     "vue": "^3.5.0",
-    "wait-on": "^8.0.0"
+    "wait-on": "^9.0.5"
   }
 }

package/src/components/EscalatedLayout.vue

@@ -128,6 +128,12 @@ const adminLinks = computed(() => {
             icon: 'M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z',
             position: 84,
         },
+        {
+            href: `${p}/admin/users`,
+            label: 'Users',
+            icon: 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z',
+            position: 83,
+        },
         {
             href: `${p}/admin/capacity`,
             label: 'Capacity',

package/src/components/SkillTagManager.vue

@@ -2,31 +2,35 @@
 import { ref, computed } from 'vue';
 
 const props = defineProps({
-    availableSkills: { type: Array, default: () => [] },
+    items: { type: Array, default: () => [] },
     modelValue: { type: Array, default: () => [] },
+    addLabel: { type: String, default: 'Add Item' },
+    emptyLabel: { type: String, default: 'No items selected' },
+    itemLabelKey: { type: String, default: 'name' },
+    itemValueKey: { type: String, default: 'id' },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const showDropdown = ref(false);
 
-const selectedSkills = computed(() => {
-    return props.availableSkills.filter((s) => props.modelValue.includes(s.id));
+const selectedItems = computed(() => {
+    return props.items.filter((item) => props.modelValue.includes(item[props.itemValueKey]));
 });
 
-const unselectedSkills = computed(() => {
-    return props.availableSkills.filter((s) => !props.modelValue.includes(s.id));
+const unselectedItems = computed(() => {
+    return props.items.filter((item) => !props.modelValue.includes(item[props.itemValueKey]));
 });
 
-function addSkill(skillId) {
-    emit('update:modelValue', [...props.modelValue, skillId]);
+function addItem(value) {
+    emit('update:modelValue', [...props.modelValue, value]);
     showDropdown.value = false;
 }
 
-function removeSkill(skillId) {
+function removeItem(value) {
     emit(
         'update:modelValue',
-        props.modelValue.filter((id) => id !== skillId),
+        props.modelValue.filter((id) => id !== value),
     );
 }
 </script>
@@ -36,42 +40,42 @@ function removeSkill(skillId) {
         <!-- Selected skill tags -->
         <div class="flex flex-wrap gap-1.5">
             <span
-                v-for="skill in selectedSkills"
-                :key="skill.id"
+                v-for="item in selectedItems"
+                :key="item[itemValueKey]"
                 class="inline-flex items-center gap-1 rounded-md bg-cyan-500/15 px-2 py-1 text-xs font-medium text-cyan-300 ring-1 ring-cyan-500/20"
             >
-                {{ skill.name }}
+                {{ item[itemLabelKey] }}
                 <button
-                    aria-label="Remove skill"
+                    :aria-label="`Remove ${item[itemLabelKey]}`"
                     class="ml-0.5 text-cyan-400 hover:text-cyan-200"
-                    @click="removeSkill(skill.id)"
+                    @click="removeItem(item[itemValueKey])"
                 >
                     &times;
                 </button>
             </span>
-            <span v-if="!selectedSkills.length" class="text-xs text-neutral-500">No skills assigned</span>
+            <span v-if="!selectedItems.length" class="text-xs text-neutral-500">{{ emptyLabel }}</span>
         </div>
 
         <!-- Add button / dropdown -->
         <div class="relative">
             <button
-                v-if="unselectedSkills.length"
+                v-if="unselectedItems.length"
                 class="rounded-lg border border-dashed border-white/[0.08] px-2 py-1 text-xs text-neutral-400 transition-colors hover:border-white/[0.15] hover:text-neutral-300"
                 @click="showDropdown = !showDropdown"
             >
-                + Add Skill
+                + {{ addLabel }}
             </button>
             <div
-                v-if="showDropdown && unselectedSkills.length"
+                v-if="showDropdown && unselectedItems.length"
                 class="absolute left-0 top-full z-10 mt-1 max-h-40 w-48 overflow-y-auto rounded-lg border border-white/[0.06] bg-neutral-900 py-1 shadow-xl"
             >
                 <button
-                    v-for="skill in unselectedSkills"
-                    :key="skill.id"
+                    v-for="item in unselectedItems"
+                    :key="item[itemValueKey]"
                     class="w-full px-3 py-1.5 text-left text-xs text-neutral-300 transition-colors hover:bg-white/[0.04]"
-                    @click="addSkill(skill.id)"
+                    @click="addItem(item[itemValueKey])"
                 >
-                    {{ skill.name }}
+                    {{ item[itemLabelKey] }}
                 </button>
             </div>
         </div>

package/src/composables/useI18n.js

@@ -1,80 +1,102 @@
-import { ref, computed } from 'vue';
-import locales from '../locales/index.js';
-
-const currentLocale = ref('en');
-const customMessages = ref({});
-
-function resolve(obj, path) {
-    return path.split('.').reduce((acc, key) => acc?.[key], obj);
-}
-
-function applyReplacements(str, replacements) {
-    if (!replacements) return str;
-    return Object.entries(replacements).reduce(
-        (result, [key, value]) => result.replace(new RegExp(`:${key}`, 'g'), value),
-        str,
-    );
-}
-
-export function setLocale(locale) {
-    currentLocale.value = locale;
-}
-
-export function getLocale() {
-    return currentLocale.value;
-}
-
-export function mergeMessages(locale, messages) {
-    customMessages.value = {
-        ...customMessages.value,
-        [locale]: deepMerge(customMessages.value[locale] || {}, messages),
-    };
-}
-
-function deepMerge(target, source) {
-    const result = { ...target };
-    for (const key of Object.keys(source)) {
-        if (
-            source[key] &&
-            typeof source[key] === 'object' &&
-            !Array.isArray(source[key]) &&
-            target[key] &&
-            typeof target[key] === 'object'
-        ) {
-            result[key] = deepMerge(target[key], source[key]);
-        } else {
-            result[key] = source[key];
-        }
-    }
-    return result;
-}
-
-export function useI18n() {
-    const locale = computed(() => currentLocale.value);
-
-    function t(key, replacements) {
-        const lang = currentLocale.value;
-
-        // Try custom messages for current locale
-        const custom = resolve(customMessages.value[lang], key);
-        if (typeof custom === 'string') return applyReplacements(custom, replacements);
-
-        // Try built-in messages for current locale
-        const msg = resolve(locales[lang], key);
-        if (typeof msg === 'string') return applyReplacements(msg, replacements);
-
-        // Fallback to English
-        if (lang !== 'en') {
-            const customEn = resolve(customMessages.value.en, key);
-            if (typeof customEn === 'string') return applyReplacements(customEn, replacements);
-
-            const fallback = resolve(locales.en, key);
-            if (typeof fallback === 'string') return applyReplacements(fallback, replacements);
-        }
-
-        // Return raw key
-        return key;
-    }
-
-    return { t, locale };
-}
+import { ref, computed } from 'vue';
+import overrideLocales from '../locales/index.js';
+
+// Central translations published from escalated-dev/escalated-locale.
+// This is the BASE layer. Local src/locales/*.json files in this repo are
+// loaded as OVERRIDES and win over the central source for any matching key.
+//
+// Until @escalated-dev/locale v0.1.0 ships its consolidated strings, this
+// import resolves to a stub object with the same shape. Local overrides
+// (src/locales/) preserve the current behavior so components keep rendering
+// the strings they always rendered. After Codex finishes consolidating
+// translations into the central package, the local override files can be
+// trimmed (or deleted entirely) and the central source becomes authoritative.
+import centralLocales from '@escalated-dev/locale';
+
+const currentLocale = ref('en');
+const customMessages = ref({});
+
+function resolve(obj, path) {
+    return path.split('.').reduce((acc, key) => acc?.[key], obj);
+}
+
+function applyReplacements(str, replacements) {
+    if (!replacements) return str;
+    return Object.entries(replacements).reduce(
+        (result, [key, value]) => result.replace(new RegExp(`:${key}`, 'g'), value),
+        str,
+    );
+}
+
+export function setLocale(locale) {
+    currentLocale.value = locale;
+}
+
+export function getLocale() {
+    return currentLocale.value;
+}
+
+export function mergeMessages(locale, messages) {
+    customMessages.value = {
+        ...customMessages.value,
+        [locale]: deepMerge(customMessages.value[locale] || {}, messages),
+    };
+}
+
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        if (
+            source[key] &&
+            typeof source[key] === 'object' &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === 'object'
+        ) {
+            result[key] = deepMerge(target[key], source[key]);
+        } else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}
+
+export function useI18n() {
+    const locale = computed(() => currentLocale.value);
+
+    function t(key, replacements) {
+        const lang = currentLocale.value;
+
+        // 1. Host-app supplied messages for the current locale (highest priority).
+        const custom = resolve(customMessages.value[lang], key);
+        if (typeof custom === 'string') return applyReplacements(custom, replacements);
+
+        // 2. Local plugin overrides for the current locale (src/locales/*.json).
+        //    These exist to let this repo win over the central source for any
+        //    string the plugin needs to phrase differently.
+        const override = resolve(overrideLocales[lang], key);
+        if (typeof override === 'string') return applyReplacements(override, replacements);
+
+        // 3. Central source for the current locale (@escalated-dev/locale).
+        //    This is the canonical base layer.
+        const central = resolve(centralLocales?.[lang], key);
+        if (typeof central === 'string') return applyReplacements(central, replacements);
+
+        // 4. English fallbacks, in the same priority order.
+        if (lang !== 'en') {
+            const customEn = resolve(customMessages.value.en, key);
+            if (typeof customEn === 'string') return applyReplacements(customEn, replacements);
+
+            const overrideEn = resolve(overrideLocales.en, key);
+            if (typeof overrideEn === 'string') return applyReplacements(overrideEn, replacements);
+
+            const centralEn = resolve(centralLocales?.en, key);
+            if (typeof centralEn === 'string') return applyReplacements(centralEn, replacements);
+        }
+
+        // Return raw key
+        return key;
+    }
+
+    return { t, locale };
+}

package/src/locales/README.md

@@ -0,0 +1,13 @@
+# Local locale overrides
+
+The JSON files in this directory (`en.json`, `de.json`, …) are **local overrides** that win over the central source published by [`@escalated-dev/locale`](https://github.com/escalated-dev/escalated-locale).
+
+The composable in `src/composables/useI18n.js` resolves keys in this order:
+
+1. Host-app `customMessages` for the current locale
+2. Local override (these JSON files) for the current locale
+3. Central source (`@escalated-dev/locale`) for the current locale
+4. Same three layers, but English fallback
+5. Raw key
+
+After the central package is populated with the canonical strings, files here can be trimmed to contain only the keys this plugin needs to phrase differently from the central source. Keys not present locally fall through to the central source unchanged.

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

@@ -1,15 +1,27 @@
 <script setup>
+import { computed } from 'vue';
 import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { useForm } from '@inertiajs/vue3';
+import SkillTagManager from '../../../components/SkillTagManager.vue';
+import { Link, useForm } from '@inertiajs/vue3';
 
 const props = defineProps({
     skill: { type: Object, default: null },
+    availableAgents: { type: Array, default: () => [] },
+    availableTags: { type: Array, default: () => [] },
+    availableDepartments: { type: Array, default: () => [] },
 });
 
 const form = useForm({
     name: props.skill?.name || '',
+    routing_tag_ids: props.skill?.routing_tag_ids || [],
+    routing_department_ids: props.skill?.routing_department_ids || [],
+    agents: props.skill?.agents?.length ? props.skill.agents.map((agent) => ({ ...agent })) : [],
 });
 
+const unassignedAgents = computed(() =>
+    props.availableAgents.filter((agent) => !form.agents.some((entry) => entry.user_id === agent.id)),
+);
+
 function submit() {
     if (props.skill) {
         form.put(route('escalated.admin.skills.update', props.skill.id));
@@ -17,11 +29,27 @@ function submit() {
         form.post(route('escalated.admin.skills.store'));
     }
 }
+
+function addAgent() {
+    const nextAgent = unassignedAgents.value[0];
+    if (!nextAgent) {
+        return;
+    }
+
+    form.agents.push({ user_id: nextAgent.id, proficiency: 3 });
+}
+
+function removeAgent(index) {
+    form.agents.splice(index, 1);
+}
 </script>
 
 <template>
     <EscalatedLayout :title="skill ? 'Edit Skill' : 'Create Skill'">
-        <form class="max-w-lg space-y-4" @submit.prevent="submit">
+        <form
+            class="mx-auto max-w-4xl 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
@@ -33,6 +61,118 @@ function submit() {
                 <p v-if="form.errors.name" class="mt-1 text-xs text-rose-400">{{ form.errors.name }}</p>
             </div>
 
+            <div class="grid gap-5 lg:grid-cols-2">
+                <div class="space-y-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4">
+                    <div>
+                        <h2 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Routing Rules</h2>
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            Match tickets by tag or department to require this skill during auto-assignment.
+                        </p>
+                    </div>
+                    <div>
+                        <label class="mb-2 block text-xs font-medium uppercase tracking-wide text-[var(--esc-panel-text-muted)]">
+                            Required Tags
+                        </label>
+                        <SkillTagManager
+                            v-model="form.routing_tag_ids"
+                            :items="availableTags"
+                            add-label="Add Tag"
+                            empty-label="No ticket tags mapped"
+                        />
+                        <p v-if="form.errors.routing_tag_ids" class="mt-1 text-xs text-rose-400">
+                            {{ form.errors.routing_tag_ids }}
+                        </p>
+                    </div>
+                    <div>
+                        <label class="mb-2 block text-xs font-medium uppercase tracking-wide text-[var(--esc-panel-text-muted)]">
+                            Departments
+                        </label>
+                        <SkillTagManager
+                            v-model="form.routing_department_ids"
+                            :items="availableDepartments"
+                            add-label="Add Department"
+                            empty-label="No departments mapped"
+                        />
+                        <p v-if="form.errors.routing_department_ids" class="mt-1 text-xs text-rose-400">
+                            {{ form.errors.routing_department_ids }}
+                        </p>
+                    </div>
+                </div>
+
+                <div class="space-y-3 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4">
+                    <div class="flex items-start justify-between gap-3">
+                        <div>
+                            <h2 class="text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Agent Proficiency</h2>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Assign eligible agents and tune their proficiency from 1 to 5.
+                            </p>
+                        </div>
+                        <button
+                            v-if="unassignedAgents.length"
+                            type="button"
+                            class="rounded-lg border border-dashed border-[var(--esc-panel-border-input)] px-3 py-1.5 text-xs font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                            @click="addAgent"
+                        >
+                            Add Agent
+                        </button>
+                    </div>
+
+                    <div v-if="form.agents.length" class="space-y-3">
+                        <div
+                            v-for="(agent, index) in form.agents"
+                            :key="`${agent.user_id}-${index}`"
+                            class="grid gap-3 rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-3 md:grid-cols-[minmax(0,1fr)_110px_auto]"
+                        >
+                            <div>
+                                <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--esc-panel-text-muted)]">
+                                    Agent
+                                </label>
+                                <select
+                                    v-model="agent.user_id"
+                                    class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                                >
+                                    <option
+                                        v-for="option in [...unassignedAgents, availableAgents.find((entry) => entry.id === agent.user_id)].filter(Boolean)"
+                                        :key="option.id"
+                                        :value="option.id"
+                                    >
+                                        {{ option.name }} · {{ option.email }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-[var(--esc-panel-text-muted)]">
+                                    Proficiency
+                                </label>
+                                <select
+                                    v-model="agent.proficiency"
+                                    class="w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-3 py-2 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]"
+                                >
+                                    <option :value="1">1</option>
+                                    <option :value="2">2</option>
+                                    <option :value="3">3</option>
+                                    <option :value="4">4</option>
+                                    <option :value="5">5</option>
+                                </select>
+                            </div>
+                            <div class="flex items-end">
+                                <button
+                                    type="button"
+                                    class="rounded-lg px-3 py-2 text-sm font-medium text-rose-300 transition-colors hover:bg-rose-500/10"
+                                    @click="removeAgent(index)"
+                                >
+                                    Remove
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-else class="rounded-lg border border-dashed border-[var(--esc-panel-border)] px-4 py-6 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                        No agents assigned yet.
+                    </div>
+                </div>
+            </div>
+
             <div class="flex gap-3">
                 <button
                     type="submit"
@@ -41,12 +181,12 @@ function submit() {
                 >
                     {{ skill ? 'Update' : 'Create' }}
                 </button>
-                <a
+                <Link
                     :href="route('escalated.admin.skills.index')"
                     class="rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-4 py-2 text-sm font-medium text-[var(--esc-panel-text-secondary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
                 >
                     Cancel
-                </a>
+                </Link>
             </div>
         </form>
     </EscalatedLayout>

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

@@ -33,7 +33,12 @@ function destroy(id) {
                         <th
                             class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
                         >
-                            Agents
+                            Routing
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Updated
                         </th>
                         <th
                             class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
@@ -44,7 +49,7 @@ function destroy(id) {
                 </thead>
                 <tbody class="divide-y divide-[var(--esc-panel-border)]">
                     <tr v-if="!skills?.length">
-                        <td colspan="3" class="px-4 py-12 text-center">
+                        <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"
@@ -73,7 +78,13 @@ function destroy(id) {
                             {{ skill.name }}
                         </td>
                         <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
-                            {{ skill.agents_count }}
+                            <div>{{ skill.agents_count }} agents</div>
+                            <div class="text-xs text-[var(--esc-panel-text-muted)]">
+                                {{ skill.routing_tags_count }} tags / {{ skill.routing_departments_count }} departments
+                            </div>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ skill.updated_at ? new Date(skill.updated_at).toLocaleDateString() : '-' }}
                         </td>
                         <td class="px-4 py-3 text-right text-sm">
                             <Link

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

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+
+const props = defineProps({
+    users: Object,
+    filters: { type: Object, default: () => ({}) },
+    currentUserId: { type: [Number, String], default: null },
+});
+
+const search = ref(props.filters?.search ?? '');
+
+function applySearch() {
+    router.get(
+        route('escalated.admin.users.index'),
+        { search: search.value },
+        { preserveState: true, preserveScroll: true },
+    );
+}
+
+function toggleRole(user, role) {
+    const value = role === 'admin' ? !user.is_admin : !user.is_agent;
+    router.patch(route('escalated.admin.users.role', user.id), { role, value }, { preserveScroll: true });
+}
+
+function isSelf(user) {
+    return props.currentUserId !== null && String(user.id) === String(props.currentUserId);
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Users">
+        <div class="mb-4 flex items-center justify-between gap-4">
+            <form class="flex-1 max-w-sm" @submit.prevent="applySearch">
+                <input
+                    v-model="search"
+                    type="search"
+                    placeholder="Search by name or email"
+                    class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-3 py-2 text-sm text-[var(--esc-panel-text)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-accent)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-accent)]"
+                />
+            </form>
+        </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)]"
+                        >
+                            User
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Email
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Admin
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Agent
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!users?.data?.length">
+                        <td colspan="4" class="px-4 py-12 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No users found.
+                        </td>
+                    </tr>
+                    <tr v-for="user in users?.data || []" :key="user.id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="whitespace-nowrap px-4 py-3 text-sm text-[var(--esc-panel-text)]">
+                            <span>{{ user.name || '—' }}</span>
+                            <span
+                                v-if="isSelf(user)"
+                                class="ml-2 rounded-full bg-[var(--esc-panel-accent)]/15 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--esc-panel-accent)]"
+                            >
+                                You
+                            </span>
+                        </td>
+                        <td class="whitespace-nowrap px-4 py-3 text-sm text-[var(--esc-panel-text-muted)]">
+                            {{ user.email }}
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                :disabled="isSelf(user) && user.is_admin"
+                                :title="isSelf(user) && user.is_admin ? 'You cannot remove your own admin role.' : ''"
+                                class="inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                                :class="user.is_admin ? 'bg-indigo-600' : 'bg-gray-300'"
+                                @click="toggleRole(user, 'admin')"
+                            >
+                                <span
+                                    class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                                    :class="user.is_admin ? 'translate-x-6' : 'translate-x-1'"
+                                />
+                            </button>
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                class="inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                                :class="user.is_agent ? 'bg-indigo-600' : 'bg-gray-300'"
+                                @click="toggleRole(user, 'agent')"
+                            >
+                                <span
+                                    class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                                    :class="user.is_agent ? 'translate-x-6' : 'translate-x-1'"
+                                />
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div v-if="users?.links?.length > 3" class="mt-4 flex items-center justify-end gap-1">
+            <template v-for="(link, idx) in users.links" :key="idx">
+                <button
+                    v-if="link.url"
+                    type="button"
+                    class="rounded-md px-3 py-1 text-sm"
+                    :class="
+                        link.active
+                            ? 'bg-[var(--esc-panel-accent)] text-white'
+                            : 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)]'
+                    "
+                    @click="router.get(link.url, {}, { preserveState: true, preserveScroll: true })"
+                    v-html="link.label"
+                />
+                <span
+                    v-else
+                    class="rounded-md px-3 py-1 text-sm text-[var(--esc-panel-text-muted)]/40"
+                    v-html="link.label"
+                />
+            </template>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/Index.vue

@@ -1,31 +1,56 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-import PluginSlot from '../../components/PluginSlot.vue';
-import { Link } from '@inertiajs/vue3';
-import { usePluginExtensions } from '../../composables/usePluginExtensions';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-});
-
-const { getPageComponents } = usePluginExtensions();
-</script>
-
-<template>
-    <EscalatedLayout title="My Tickets">
-        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
-        <div class="mb-6 flex items-center justify-between">
-            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
-            <Link
-                :href="route('escalated.customer.tickets.create')"
-                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
-            >
-                New Ticket
-            </Link>
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import { computed } from 'vue';
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { Link, usePage } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+});
+
+const { getPageComponents } = usePluginExtensions();
+const page = usePage();
+const isAdmin = computed(() => !!page.props.escalated?.is_admin);
+const isAgent = computed(() => !!page.props.escalated?.is_agent);
+const staffPanelHref = computed(() => {
+    const prefix = page.props.escalated?.prefix || 'support';
+    const base = prefix.startsWith('/') ? prefix : `/${prefix}`;
+    return isAdmin.value ? `${base}/admin/tickets` : `${base}/agent/tickets`;
+});
+const staffPanelLabel = computed(() => (isAdmin.value ? 'Open admin panel' : 'Open agent panel'));
+</script>
+
+<template>
+    <EscalatedLayout title="My Tickets">
+        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
+        <div
+            v-if="isAdmin || isAgent"
+            class="mb-4 flex items-center justify-between gap-4 rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm text-indigo-900"
+        >
+            <div>
+                <span class="font-medium">You're viewing your personal tickets.</span>
+                <span class="text-indigo-800/80"> Customer-submitted tickets live in the staff panel. </span>
+            </div>
+            <a
+                :href="staffPanelHref"
+                class="shrink-0 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700"
+            >
+                {{ staffPanelLabel }}
+            </a>
+        </div>
+        <div class="mb-6 flex items-center justify-between">
+            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
+            <Link
+                :href="route('escalated.customer.tickets.create')"
+                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+            >
+                New Ticket
+            </Link>
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
+    </EscalatedLayout>
+</template>

package/src/plugin.js

@@ -94,7 +94,7 @@ function darken(hex, percent) {
 }
 
 function scaleBorderRadius(radius, factor) {
-    const match = radius.match(/^([\d.]+)(.*)$/);
+    const match = radius.match(/^(\d+(?:\.\d+)?|\.\d+)([a-z%]*)$/i);
     if (!match) return radius;
     return `${(parseFloat(match[1]) * factor).toFixed(2)}${match[2] || 'rem'}`;
 }