@escalated-dev/escalated 0.7.1 → 0.9.0

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,138 @@ 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 +201,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/Tickets/Index.vue

@@ -1,126 +1,126 @@
-<script setup>
-import { ref } from 'vue';
-import { usePage, router } from '@inertiajs/vue3';
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import TicketList from '../../../components/TicketList.vue';
-import TicketFilters from '../../../components/TicketFilters.vue';
-import QuickFilters from '../../../components/QuickFilters.vue';
-import BulkActionBar from '../../../components/BulkActionBar.vue';
-import KeyboardShortcutHelp from '../../../components/KeyboardShortcutHelp.vue';
-import PluginSlot from '../../../components/PluginSlot.vue';
-import SavedViewSidebar from '../../../components/SavedViewSidebar.vue';
-import SaveViewDialog from '../../../components/SaveViewDialog.vue';
-import { useKeyboardShortcuts } from '../../../composables/useKeyboardShortcuts';
-import { usePluginExtensions } from '../../../composables/usePluginExtensions';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-    departments: Array,
-    tags: Array,
-    agents: Array,
-    savedViews: { type: Array, default: () => [] },
-});
-
-const page = usePage();
-const selectedIds = ref([]);
-const ticketListRef = ref(null);
-const showShortcutHelp = ref(false);
-const showSaveDialog = ref(false);
-const ticketFiltersRef = ref(null);
-
-useKeyboardShortcuts({
-    j: () => {
-        ticketListRef.value?.moveDown();
-    },
-    k: () => {
-        ticketListRef.value?.moveUp();
-    },
-    x: () => {
-        ticketListRef.value?.toggleSelectFocused();
-    },
-    Enter: () => {
-        ticketListRef.value?.openFocused();
-    },
-    '?': () => {
-        showShortcutHelp.value = true;
-    },
-});
-
-const { getPageComponents } = usePluginExtensions();
-
-function applyQuickFilter(filter) {
-    router.get(route('escalated.admin.tickets.index'), filter, { preserveState: true });
-}
-
-function onViewSaved() {
-    router.reload({ only: ['savedViews'] });
-}
-</script>
-
-<template>
-    <EscalatedLayout title="All Tickets">
-        <div class="flex gap-6">
-            <!-- Saved Views Sidebar -->
-            <aside v-if="savedViews && savedViews.length" class="hidden w-52 shrink-0 lg:block">
-                <div class="sticky top-4">
-                    <h3 class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400">Views</h3>
-                    <SavedViewSidebar
-                        :saved-views="savedViews"
-                        :current-filters="filters"
-                        :route="route('escalated.admin.tickets.index')"
-                    />
-                </div>
-            </aside>
-
-            <!-- Main content -->
-            <div class="min-w-0 flex-1">
-                <div class="mb-4">
-                    <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
-                </div>
-                <PluginSlot
-                    slot="ticket.list.before_filters"
-                    :components="getPageComponents('ticket.list', 'before_filters')"
-                />
-                <div class="mb-6">
-                    <TicketFilters
-                        ref="ticketFiltersRef"
-                        :filters="filters"
-                        :route="route('escalated.admin.tickets.index')"
-                        :departments="departments"
-                        :tags="tags"
-                        :agents="agents"
-                        show-assignee
-                        show-following
-                        @save-view="showSaveDialog = true"
-                    />
-                </div>
-                <TicketList
-                    ref="ticketListRef"
-                    v-model:selected-ids="selectedIds"
-                    :tickets="tickets"
-                    route-prefix="escalated.admin.tickets"
-                    :columns="['reference', 'subject', 'requester', 'status', 'priority', 'assignee', 'updated']"
-                    selectable
-                    navigable
-                />
-                <BulkActionBar
-                    :selected-ids="selectedIds"
-                    :bulk-route="route('escalated.admin.tickets.bulk')"
-                    :agents="agents"
-                    :departments="departments"
-                    @clear="selectedIds = []"
-                />
-                <PluginSlot slot="ticket.list.footer" :components="getPageComponents('ticket.list', 'footer')" />
-            </div>
-        </div>
-
-        <SaveViewDialog
-            :show="showSaveDialog"
-            :filters="ticketFiltersRef?.filterData || filters"
-            @close="showSaveDialog = false"
-            @saved="onViewSaved"
-        />
-        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="list" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import { ref } from 'vue';
+import { usePage, router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import TicketList from '../../../components/TicketList.vue';
+import TicketFilters from '../../../components/TicketFilters.vue';
+import QuickFilters from '../../../components/QuickFilters.vue';
+import BulkActionBar from '../../../components/BulkActionBar.vue';
+import KeyboardShortcutHelp from '../../../components/KeyboardShortcutHelp.vue';
+import PluginSlot from '../../../components/PluginSlot.vue';
+import SavedViewSidebar from '../../../components/SavedViewSidebar.vue';
+import SaveViewDialog from '../../../components/SaveViewDialog.vue';
+import { useKeyboardShortcuts } from '../../../composables/useKeyboardShortcuts';
+import { usePluginExtensions } from '../../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+    agents: Array,
+    savedViews: { type: Array, default: () => [] },
+});
+
+const page = usePage();
+const selectedIds = ref([]);
+const ticketListRef = ref(null);
+const showShortcutHelp = ref(false);
+const showSaveDialog = ref(false);
+const ticketFiltersRef = ref(null);
+
+useKeyboardShortcuts({
+    j: () => {
+        ticketListRef.value?.moveDown();
+    },
+    k: () => {
+        ticketListRef.value?.moveUp();
+    },
+    x: () => {
+        ticketListRef.value?.toggleSelectFocused();
+    },
+    Enter: () => {
+        ticketListRef.value?.openFocused();
+    },
+    '?': () => {
+        showShortcutHelp.value = true;
+    },
+});
+
+const { getPageComponents } = usePluginExtensions();
+
+function applyQuickFilter(filter) {
+    router.get(route('escalated.admin.tickets.index'), filter, { preserveState: true });
+}
+
+function onViewSaved() {
+    router.reload({ only: ['savedViews'] });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="All Tickets">
+        <div class="flex gap-6">
+            <!-- Saved Views Sidebar -->
+            <aside v-if="savedViews && savedViews.length" class="hidden w-52 shrink-0 lg:block">
+                <div class="sticky top-4">
+                    <h3 class="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400">Views</h3>
+                    <SavedViewSidebar
+                        :saved-views="savedViews"
+                        :current-filters="filters"
+                        :route="route('escalated.admin.tickets.index')"
+                    />
+                </div>
+            </aside>
+
+            <!-- Main content -->
+            <div class="min-w-0 flex-1">
+                <div class="mb-4">
+                    <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
+                </div>
+                <PluginSlot
+                    slot="ticket.list.before_filters"
+                    :components="getPageComponents('ticket.list', 'before_filters')"
+                />
+                <div class="mb-6">
+                    <TicketFilters
+                        ref="ticketFiltersRef"
+                        :filters="filters"
+                        :route="route('escalated.admin.tickets.index')"
+                        :departments="departments"
+                        :tags="tags"
+                        :agents="agents"
+                        show-assignee
+                        show-following
+                        @save-view="showSaveDialog = true"
+                    />
+                </div>
+                <TicketList
+                    ref="ticketListRef"
+                    v-model:selected-ids="selectedIds"
+                    :tickets="tickets"
+                    route-prefix="escalated.admin.tickets"
+                    :columns="['reference', 'subject', 'requester', 'status', 'priority', 'assignee', 'updated']"
+                    selectable
+                    navigable
+                />
+                <BulkActionBar
+                    :selected-ids="selectedIds"
+                    :bulk-route="route('escalated.admin.tickets.bulk')"
+                    :agents="agents"
+                    :departments="departments"
+                    @clear="selectedIds = []"
+                />
+                <PluginSlot slot="ticket.list.footer" :components="getPageComponents('ticket.list', 'footer')" />
+            </div>
+        </div>
+
+        <SaveViewDialog
+            :show="showSaveDialog"
+            :filters="ticketFiltersRef?.filterData || filters"
+            @close="showSaveDialog = false"
+            @saved="onViewSaved"
+        />
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="list" />
+    </EscalatedLayout>
+</template>