@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/components/TagSelect.vue

@@ -7,14 +7,17 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue']);
-const dark = inject('esc-dark', computed(() => false));
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 const search = ref('');
 
 const filteredTags = computed(() => {
     if (!search.value) return props.tags;
     const q = search.value.toLowerCase();
-    return props.tags.filter(t => t.name.toLowerCase().includes(q));
+    return props.tags.filter((t) => t.name.toLowerCase().includes(q));
 });
 
 function toggle(tagId) {
@@ -35,17 +38,45 @@ function isSelected(tagId) {
 
 <template>
     <div>
-        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Tags</label>
-        <input v-model="search" type="text" placeholder="Filter tags..."
-               :class="['mb-2 w-full rounded-md border px-2 py-1 text-xs focus:outline-none',
-                        dark ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']" />
+        <label
+            :class="['mb-1 block text-xs font-medium', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-600']"
+            >Tags</label
+        >
+        <input
+            v-model="search"
+            type="text"
+            placeholder="Filter tags..."
+            :class="[
+                'mb-2 w-full rounded-md border px-2 py-1 text-xs focus:outline-none',
+                dark
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+                    : 'border-gray-300 focus:border-blue-500',
+            ]"
+        />
         <div class="flex flex-wrap gap-1">
-            <button v-for="tag in filteredTags" :key="tag.id" @click="toggle(tag.id)"
-                    :class="['rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
-                             dark
-                                 ? (isSelected(tag.id) ? 'bg-white/[0.12] text-white ring-1 ring-white/20' : 'bg-white/[0.04] text-neutral-500 hover:bg-white/[0.08]')
-                                 : (isSelected(tag.id) ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300' : 'bg-gray-100 text-gray-600 hover:bg-gray-200')]"
-                    :style="tag.color ? { backgroundColor: isSelected(tag.id) ? tag.color + '33' : undefined, color: isSelected(tag.id) ? tag.color : undefined } : {}">
+            <button
+                v-for="tag in filteredTags"
+                :key="tag.id"
+                :class="[
+                    'rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
+                    dark
+                        ? isSelected(tag.id)
+                            ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-border-input)]'
+                            : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-active)]'
+                        : isSelected(tag.id)
+                          ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300'
+                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+                ]"
+                :style="
+                    tag.color
+                        ? {
+                              backgroundColor: isSelected(tag.id) ? tag.color + '33' : undefined,
+                              color: isSelected(tag.id) ? tag.color : undefined,
+                          }
+                        : {}
+                "
+                @click="toggle(tag.id)"
+            >
                 {{ tag.name }}
             </button>
         </div>

package/src/components/TicketFilters.vue

@@ -1,69 +1,225 @@
-<script setup>
-import { inject, computed, reactive, watch } from 'vue';
-
-const props = defineProps({
-    statuses: { type: Array, default: () => ['open', 'in_progress', 'waiting_on_customer', 'waiting_on_agent', 'escalated', 'resolved', 'closed'] },
-    priorities: { type: Array, default: () => ['low', 'medium', 'high', 'urgent', 'critical'] },
-    agents: { type: Array, default: () => [] },
-    departments: { type: Array, default: () => [] },
-    modelValue: { type: Object, default: () => ({}) },
-    showFollowing: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const filters = reactive({
-    status: props.modelValue.status || '',
-    priority: props.modelValue.priority || '',
-    assigned_to: props.modelValue.assigned_to || '',
-    department_id: props.modelValue.department_id || '',
-    search: props.modelValue.search || '',
-    following: props.modelValue.following || '',
-});
-
-watch(filters, (val) => {
-    emit('update:modelValue', { ...val });
-}, { deep: true });
-
-const inputClass = computed(() => escDark.value
-    ? 'rounded-lg border border-white/10 bg-gray-900 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
-    : 'rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none'
-);
-
-const selectClass = computed(() => escDark.value
-    ? 'rounded-lg border border-white/10 bg-gray-900 px-2 py-1.5 text-sm text-gray-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
-    : 'rounded-md border border-gray-300 px-2 py-1.5 text-sm'
-);
-
-const checkboxClass = computed(() => escDark.value
-    ? 'h-4 w-4 rounded border-white/20 bg-neutral-950 text-cyan-500 focus:ring-cyan-500/20'
-    : 'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500'
-);
-</script>
-
-<template>
-    <div class="flex flex-wrap items-center gap-3">
-        <input v-model="filters.search" type="text" placeholder="Search tickets..." :class="inputClass" />
-        <select v-model="filters.status" :class="selectClass">
-            <option value="">All Statuses</option>
-            <option v-for="s in statuses" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
-        </select>
-        <select v-model="filters.priority" :class="selectClass">
-            <option value="">All Priorities</option>
-            <option v-for="p in priorities" :key="p" :value="p">{{ p }}</option>
-        </select>
-        <select v-if="agents.length" v-model="filters.assigned_to" :class="selectClass">
-            <option value="">All Agents</option>
-            <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
-        </select>
-        <select v-if="departments.length" v-model="filters.department_id" :class="selectClass">
-            <option value="">All Departments</option>
-            <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
-        </select>
-        <label v-if="showFollowing" class="flex items-center gap-2">
-            <input v-model="filters.following" type="checkbox" true-value="1" false-value="" :class="checkboxClass" />
-            <span :class="['text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">Following</span>
-        </label>
-    </div>
-</template>
+<script setup>
+import { inject, computed, reactive, ref, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
+import { TICKET_STATUSES, TICKET_PRIORITIES } from '../utils/constants';
+
+const props = defineProps({
+    statuses: {
+        type: Array,
+        default: () => TICKET_STATUSES,
+    },
+    priorities: { type: Array, default: () => TICKET_PRIORITIES },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+    tags: { type: Array, default: () => [] },
+    filters: { type: Object, default: () => ({}) },
+    route: { type: String, required: true },
+    modelValue: { type: Object, default: () => ({}) },
+    showFollowing: { type: Boolean, default: false },
+    showAssignee: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const initial = { ...props.filters, ...props.modelValue };
+
+const filterData = reactive({
+    status: initial.status || '',
+    priority: initial.priority || '',
+    assigned_to: initial.assigned_to || '',
+    department_id: initial.department_id || '',
+    search: initial.search || '',
+    following: initial.following || '',
+    created_after: initial.created_after || '',
+    created_before: initial.created_before || '',
+    tag: initial.tag || '',
+    has_attachments: initial.has_attachments || '',
+    requester: initial.requester || '',
+    ticket_type: initial.ticket_type || '',
+});
+
+const showAdvanced = ref(
+    !!(initial.created_after || initial.created_before || initial.tag || initial.has_attachments || initial.requester),
+);
+
+// Debounced watcher that navigates via Inertia router
+let debounceTimer = null;
+
+watch(
+    filterData,
+    (val) => {
+        emit('update:modelValue', { ...val });
+
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+        }
+        debounceTimer = setTimeout(() => {
+            // Strip empty values to keep the URL clean
+            const params = {};
+            for (const [key, value] of Object.entries(val)) {
+                if (value !== '' && value !== null && value !== undefined) {
+                    params[key] = value;
+                }
+            }
+            router.get(props.route, params, { preserveState: true, preserveScroll: true });
+        }, 300);
+    },
+    { deep: true },
+);
+
+const inputClass = computed(() =>
+    escDark.value
+        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+        : 'rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none',
+);
+
+const selectClass = computed(() =>
+    escDark.value
+        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] 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)]'
+        : 'rounded-md border border-gray-300 px-2 py-1.5 text-sm',
+);
+
+const checkboxClass = computed(() =>
+    escDark.value
+        ? 'h-4 w-4 rounded border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-accent)] focus:ring-[var(--esc-panel-accent)]/20'
+        : 'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500',
+);
+
+const toggleBtnClass = computed(() =>
+    escDark.value
+        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface)] px-3 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-surface-alt)] transition-colors'
+        : 'rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50 transition-colors',
+);
+
+const labelClass = computed(() =>
+    escDark.value ? 'text-xs font-medium text-[var(--esc-panel-text-tertiary)]' : 'text-xs font-medium text-gray-500',
+);
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div class="flex flex-wrap items-center gap-3">
+            <input
+                v-model="filterData.search"
+                type="text"
+                placeholder="Search tickets..."
+                aria-label="Search tickets"
+                :class="inputClass"
+            />
+            <button type="button" :class="toggleBtnClass" @click="showAdvanced = !showAdvanced">
+                {{ showAdvanced ? 'Simple' : 'Advanced' }}
+            </button>
+            <select v-model="filterData.status" aria-label="Filter by status" :class="selectClass">
+                <option value="">All Statuses</option>
+                <option v-for="s in statuses" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
+            </select>
+            <select v-model="filterData.priority" aria-label="Filter by priority" :class="selectClass">
+                <option value="">All Priorities</option>
+                <option v-for="p in priorities" :key="p" :value="p">{{ p }}</option>
+            </select>
+            <select v-model="filterData.ticket_type" aria-label="Filter by type" :class="selectClass">
+                <option value="">All Types</option>
+                <option value="question">Question</option>
+                <option value="problem">Problem</option>
+                <option value="incident">Incident</option>
+                <option value="task">Task</option>
+            </select>
+            <select
+                v-if="agents.length"
+                v-model="filterData.assigned_to"
+                aria-label="Filter by agent"
+                :class="selectClass"
+            >
+                <option value="">All Agents</option>
+                <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
+            </select>
+            <select
+                v-if="departments.length"
+                v-model="filterData.department_id"
+                aria-label="Filter by department"
+                :class="selectClass"
+            >
+                <option value="">All Departments</option>
+                <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+            </select>
+            <label v-if="showFollowing" class="flex items-center gap-2">
+                <input
+                    v-model="filterData.following"
+                    type="checkbox"
+                    true-value="1"
+                    false-value=""
+                    :class="checkboxClass"
+                />
+                <span :class="['text-sm', escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600']"
+                    >Following</span
+                >
+            </label>
+        </div>
+
+        <!-- Advanced filters -->
+        <div
+            v-if="showAdvanced"
+            class="flex flex-wrap items-end gap-4 rounded-lg border p-3"
+            :class="
+                escDark
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)]'
+                    : 'border-gray-200 bg-gray-50'
+            "
+        >
+            <div class="flex flex-col gap-1">
+                <label :class="labelClass">Created after</label>
+                <input
+                    v-model="filterData.created_after"
+                    type="date"
+                    aria-label="Created after date"
+                    :class="inputClass"
+                />
+            </div>
+            <div class="flex flex-col gap-1">
+                <label :class="labelClass">Created before</label>
+                <input
+                    v-model="filterData.created_before"
+                    type="date"
+                    aria-label="Created before date"
+                    :class="inputClass"
+                />
+            </div>
+            <div class="flex flex-col gap-1">
+                <label :class="labelClass">Tag</label>
+                <input
+                    v-model="filterData.tag"
+                    type="text"
+                    placeholder="Tag name..."
+                    aria-label="Filter by tag name"
+                    :class="inputClass"
+                />
+            </div>
+            <div class="flex flex-col gap-1">
+                <label :class="labelClass">Requester</label>
+                <input
+                    v-model="filterData.requester"
+                    type="text"
+                    placeholder="Name or email..."
+                    aria-label="Filter by requester"
+                    :class="inputClass"
+                />
+            </div>
+            <label class="flex items-center gap-2 self-center pt-4">
+                <input
+                    v-model="filterData.has_attachments"
+                    type="checkbox"
+                    true-value="1"
+                    false-value=""
+                    :class="checkboxClass"
+                />
+                <span :class="['text-sm', escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600']"
+                    >Has attachments</span
+                >
+            </label>
+        </div>
+    </div>
+</template>

package/src/components/TicketLinkPanel.vue

@@ -0,0 +1,193 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const links = ref([]);
+const searchTerm = ref('');
+const searchResults = ref([]);
+const linkType = ref('related');
+const loading = ref(false);
+const expanded = ref(true);
+let debounceTimer = null;
+
+const linkTypeLabels = {
+    problem_incident: 'Problem/Incident',
+    parent_child: 'Parent/Child',
+    related: 'Related',
+};
+
+onMounted(() => {
+    fetchLinks();
+});
+
+async function fetchLinks() {
+    try {
+        const response = await fetch(route('escalated.admin.tickets.links.index', props.ticketReference), {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            links.value = data.links || [];
+        }
+    } catch {
+        // silently ignore
+    }
+}
+
+watch(searchTerm, (val) => {
+    window.clearTimeout(debounceTimer);
+    if (!val || val.length < 2) {
+        searchResults.value = [];
+        return;
+    }
+    debounceTimer = window.setTimeout(() => searchTickets(val), 300);
+});
+
+async function searchTickets(term) {
+    loading.value = true;
+    try {
+        const response = await fetch(route('escalated.admin.tickets.merge-search', { q: term }), {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            searchResults.value = (data.tickets || []).filter((t) => t.reference !== props.ticketReference);
+        }
+    } catch {
+        // silently ignore
+    } finally {
+        loading.value = false;
+    }
+}
+
+function addLink(targetRef) {
+    router.post(
+        route('escalated.admin.tickets.links.store', props.ticketReference),
+        {
+            target_reference: targetRef,
+            link_type: linkType.value,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                searchTerm.value = '';
+                searchResults.value = [];
+                fetchLinks();
+            },
+        },
+    );
+}
+
+function removeLink(linkId) {
+    router.delete(route('escalated.admin.tickets.links.destroy', [props.ticketReference, linkId]), {
+        preserveScroll: true,
+        onSuccess: () => {
+            fetchLinks();
+        },
+    });
+}
+
+function groupedLinks() {
+    const groups = {};
+    for (const link of links.value) {
+        const type = link.link_type;
+        if (!groups[type]) groups[type] = [];
+        groups[type].push(link);
+    }
+    return groups;
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <button
+            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
+            @click="expanded = !expanded"
+        >
+            <span>Linked Tickets</span>
+            <svg
+                :class="['h-4 w-4 transition-transform text-neutral-500', expanded && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <!-- Grouped links -->
+            <div v-for="(groupLinks, type) in groupedLinks()" :key="type">
+                <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+                    {{ linkTypeLabels[type] || type }}
+                </p>
+                <div class="mt-1 space-y-1">
+                    <div
+                        v-for="link in groupLinks"
+                        :key="link.id"
+                        class="flex items-center justify-between rounded-lg bg-white/[0.02] px-2 py-1.5"
+                    >
+                        <div class="text-sm">
+                            <span class="font-mono text-xs text-neutral-400">{{ link.ticket.reference }}</span>
+                            <span class="ml-1 text-neutral-300">{{ link.ticket.subject }}</span>
+                        </div>
+                        <button
+                            aria-label="Remove link"
+                            class="text-rose-400 hover:text-rose-300 text-xs"
+                            @click="removeLink(link.id)"
+                        >
+                            Unlink
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="!links.length" class="text-xs text-neutral-500">No linked tickets.</div>
+
+            <!-- Add link form -->
+            <div class="border-t border-white/[0.06] pt-3">
+                <div class="flex gap-2 mb-2">
+                    <select
+                        v-model="linkType"
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-xs text-neutral-300 focus:border-white/20 focus:outline-none"
+                    >
+                        <option value="related">Related</option>
+                        <option value="problem_incident">Problem/Incident</option>
+                        <option value="parent_child">Parent/Child</option>
+                    </select>
+                </div>
+                <input
+                    v-model="searchTerm"
+                    type="text"
+                    placeholder="Search ticket to link..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-xs text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                />
+                <div v-if="loading" class="mt-2 text-xs text-neutral-500">Searching...</div>
+                <div v-else-if="searchResults.length" class="mt-2 max-h-32 space-y-1 overflow-y-auto">
+                    <button
+                        v-for="ticket in searchResults"
+                        :key="ticket.id"
+                        class="w-full rounded-lg px-2 py-1 text-left text-xs text-neutral-300 transition-colors hover:bg-white/[0.04]"
+                        @click="addLink(ticket.reference)"
+                    >
+                        <span class="font-mono text-neutral-400">{{ ticket.reference }}</span>
+                        <span class="ml-1">{{ ticket.subject }}</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>