@escalated-dev/escalated 0.3.5 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/BulkActionBar.vue +97 -0
- package/src/components/EscalatedLayout.vue +220 -219
- package/src/components/FollowButton.vue +63 -0
- package/src/components/KeyboardShortcutHelp.vue +123 -0
- package/src/components/MacroDropdown.vue +90 -0
- package/src/components/PinnedNotes.vue +87 -0
- package/src/components/PresenceIndicator.vue +103 -0
- package/src/components/QuickFilters.vue +49 -0
- package/src/components/ReplyThread.vue +60 -38
- package/src/components/SatisfactionRating.vue +128 -0
- package/src/components/TicketFilters.vue +69 -58
- package/src/components/TicketList.vue +193 -94
- package/src/components/TicketSidebar.vue +99 -77
- package/src/composables/useKeyboardShortcuts.js +46 -0
- package/src/index.js +11 -0
- package/src/pages/Admin/Macros/Index.vue +287 -0
- package/src/pages/Admin/Reports.vue +101 -66
- package/src/pages/Admin/Tickets/Index.vue +39 -22
- package/src/pages/Admin/Tickets/Show.vue +145 -109
- package/src/pages/Agent/Dashboard.vue +156 -63
- package/src/pages/Agent/TicketIndex.vue +38 -21
- package/src/pages/Agent/TicketShow.vue +144 -108
- package/src/pages/Customer/Show.vue +63 -55
- package/src/pages/Guest/Show.vue +93 -86
|
@@ -1,63 +1,156 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
</
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import { Link } from '@inertiajs/vue3';
|
|
4
|
+
import EscalatedLayout from '../../components/EscalatedLayout.vue';
|
|
5
|
+
import StatsCard from '../../components/StatsCard.vue';
|
|
6
|
+
import StatusBadge from '../../components/StatusBadge.vue';
|
|
7
|
+
import PriorityBadge from '../../components/PriorityBadge.vue';
|
|
8
|
+
|
|
9
|
+
const props = defineProps({
|
|
10
|
+
stats: Object,
|
|
11
|
+
recentTickets: Array,
|
|
12
|
+
needsAttention: { type: Object, default: () => ({}) },
|
|
13
|
+
myPerformance: { type: Object, default: () => ({}) },
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
function timeAgo(date) {
|
|
17
|
+
if (!date) return '';
|
|
18
|
+
const diff = Date.now() - new Date(date).getTime();
|
|
19
|
+
const mins = Math.floor(diff / 60000);
|
|
20
|
+
if (mins < 60) return `${mins}m ago`;
|
|
21
|
+
const hrs = Math.floor(mins / 60);
|
|
22
|
+
if (hrs < 24) return `${hrs}h ago`;
|
|
23
|
+
const days = Math.floor(hrs / 24);
|
|
24
|
+
return `${days}d ago`;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function slaClass(ticket) {
|
|
28
|
+
if (ticket.sla_first_response_breached || ticket.sla_resolution_breached) return 'bg-rose-500';
|
|
29
|
+
if (ticket.first_response_due_at || ticket.resolution_due_at) {
|
|
30
|
+
const due = ticket.resolution_due_at || ticket.first_response_due_at;
|
|
31
|
+
const mins = (new Date(due) - Date.now()) / 60000;
|
|
32
|
+
if (mins < 30) return 'bg-amber-500';
|
|
33
|
+
return 'bg-emerald-500';
|
|
34
|
+
}
|
|
35
|
+
return '';
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function truncate(str, len = 50) {
|
|
39
|
+
if (!str) return '';
|
|
40
|
+
return str.length > len ? str.slice(0, len) + '...' : str;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const hasSlaBreaching = computed(() => needsAttention.value?.sla_breaching?.length > 0);
|
|
44
|
+
const hasUnassignedUrgent = computed(() => needsAttention.value?.unassigned_urgent?.length > 0);
|
|
45
|
+
const needsAttention = computed(() => props.needsAttention);
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<EscalatedLayout title="Agent Dashboard">
|
|
50
|
+
<!-- Stats row -->
|
|
51
|
+
<div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
|
|
52
|
+
<StatsCard label="Open Tickets" :value="stats.open" color="cyan" />
|
|
53
|
+
<StatsCard label="My Assigned" :value="stats.my_assigned" color="violet" />
|
|
54
|
+
<StatsCard label="Unassigned" :value="stats.unassigned" color="amber" />
|
|
55
|
+
<StatsCard label="SLA Breached" :value="stats.sla_breached" color="red" />
|
|
56
|
+
<StatsCard label="Resolved Today" :value="stats.resolved_today" color="green" />
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
60
|
+
<div class="lg:col-span-2 space-y-6">
|
|
61
|
+
<!-- Needs Attention -->
|
|
62
|
+
<div v-if="hasSlaBreaching || hasUnassignedUrgent">
|
|
63
|
+
<h2 class="mb-4 text-lg font-semibold text-neutral-200">Needs Attention</h2>
|
|
64
|
+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
65
|
+
<div v-if="hasSlaBreaching" class="rounded-xl border border-rose-500/20 bg-rose-500/5 p-4">
|
|
66
|
+
<h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-rose-400">
|
|
67
|
+
<span class="h-2 w-2 rounded-full bg-rose-500"></span>
|
|
68
|
+
SLA Breaching
|
|
69
|
+
</h3>
|
|
70
|
+
<div v-for="ticket in needsAttention.sla_breaching" :key="ticket.id" class="mb-2 last:mb-0">
|
|
71
|
+
<Link :href="route('escalated.agent.tickets.show', ticket.reference)"
|
|
72
|
+
class="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-white/[0.04]">
|
|
73
|
+
<span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
|
|
74
|
+
<span class="truncate text-neutral-300" style="max-width: 140px">{{ ticket.requester?.name }}</span>
|
|
75
|
+
</Link>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div v-if="hasUnassignedUrgent" class="rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
|
|
79
|
+
<h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-amber-400">
|
|
80
|
+
<span class="h-2 w-2 rounded-full bg-amber-500"></span>
|
|
81
|
+
Unassigned Urgent
|
|
82
|
+
</h3>
|
|
83
|
+
<div v-for="ticket in needsAttention.unassigned_urgent" :key="ticket.id" class="mb-2 last:mb-0">
|
|
84
|
+
<Link :href="route('escalated.agent.tickets.show', ticket.reference)"
|
|
85
|
+
class="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-white/[0.04]">
|
|
86
|
+
<span class="font-mono text-xs text-neutral-400">{{ ticket.reference }}</span>
|
|
87
|
+
<PriorityBadge :priority="ticket.priority" />
|
|
88
|
+
</Link>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<!-- Recent Tickets -->
|
|
95
|
+
<div>
|
|
96
|
+
<h2 class="mb-4 text-lg font-semibold text-neutral-200">Recent Tickets</h2>
|
|
97
|
+
<div class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
|
|
98
|
+
<table class="min-w-full divide-y divide-white/[0.06]">
|
|
99
|
+
<thead>
|
|
100
|
+
<tr class="bg-white/[0.02]">
|
|
101
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Reference</th>
|
|
102
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Subject</th>
|
|
103
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Requester</th>
|
|
104
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Status</th>
|
|
105
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Priority</th>
|
|
106
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Assignee</th>
|
|
107
|
+
<th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Last Reply</th>
|
|
108
|
+
</tr>
|
|
109
|
+
</thead>
|
|
110
|
+
<tbody class="divide-y divide-white/[0.04]">
|
|
111
|
+
<tr v-for="ticket in recentTickets" :key="ticket.id" class="transition-colors hover:bg-white/[0.03]">
|
|
112
|
+
<td class="whitespace-nowrap px-4 py-3 text-sm font-medium">
|
|
113
|
+
<div class="flex items-center gap-2">
|
|
114
|
+
<span v-if="slaClass(ticket)" :class="['h-2 w-2 shrink-0 rounded-full', slaClass(ticket)]"></span>
|
|
115
|
+
<Link :href="route('escalated.agent.tickets.show', ticket.reference)" class="text-white hover:text-neutral-300">
|
|
116
|
+
{{ ticket.reference }}
|
|
117
|
+
</Link>
|
|
118
|
+
</div>
|
|
119
|
+
</td>
|
|
120
|
+
<td class="px-4 py-3 text-sm text-neutral-300">{{ truncate(ticket.subject) }}</td>
|
|
121
|
+
<td class="px-4 py-3 text-sm text-neutral-400">{{ ticket.requester?.name }}</td>
|
|
122
|
+
<td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
|
|
123
|
+
<td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
|
|
124
|
+
<td class="px-4 py-3 text-sm text-neutral-500">{{ ticket.assignee?.name || 'Unassigned' }}</td>
|
|
125
|
+
<td class="whitespace-nowrap px-4 py-3 text-sm text-neutral-600">
|
|
126
|
+
<template v-if="ticket.latest_reply">
|
|
127
|
+
<div class="text-neutral-400">{{ timeAgo(ticket.latest_reply.created_at) }}</div>
|
|
128
|
+
<div class="text-xs text-neutral-600">{{ ticket.latest_reply.author?.name || '' }}</div>
|
|
129
|
+
</template>
|
|
130
|
+
<span v-else class="text-neutral-700">—</span>
|
|
131
|
+
</td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr v-if="!recentTickets?.length">
|
|
134
|
+
<td colspan="7" class="px-4 py-8 text-center text-sm text-neutral-500">No recent tickets</td>
|
|
135
|
+
</tr>
|
|
136
|
+
</tbody>
|
|
137
|
+
</table>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<!-- My Performance sidebar -->
|
|
143
|
+
<div class="space-y-4">
|
|
144
|
+
<div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
|
|
145
|
+
<h3 class="mb-4 text-sm font-semibold text-neutral-200">My Performance</h3>
|
|
146
|
+
<dl class="space-y-3">
|
|
147
|
+
<div class="flex items-center justify-between">
|
|
148
|
+
<dt class="text-sm text-neutral-500">Resolved This Week</dt>
|
|
149
|
+
<dd class="text-lg font-bold text-white">{{ myPerformance.resolved_this_week || 0 }}</dd>
|
|
150
|
+
</div>
|
|
151
|
+
</dl>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</EscalatedLayout>
|
|
156
|
+
</template>
|
|
@@ -1,21 +1,38 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue';
|
|
3
|
+
import { usePage, router } from '@inertiajs/vue3';
|
|
4
|
+
import EscalatedLayout from '../../components/EscalatedLayout.vue';
|
|
5
|
+
import TicketList from '../../components/TicketList.vue';
|
|
6
|
+
import TicketFilters from '../../components/TicketFilters.vue';
|
|
7
|
+
import QuickFilters from '../../components/QuickFilters.vue';
|
|
8
|
+
import BulkActionBar from '../../components/BulkActionBar.vue';
|
|
9
|
+
|
|
10
|
+
defineProps({
|
|
11
|
+
tickets: Object,
|
|
12
|
+
filters: Object,
|
|
13
|
+
departments: Array,
|
|
14
|
+
tags: Array,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const page = usePage();
|
|
18
|
+
const selectedIds = ref([]);
|
|
19
|
+
|
|
20
|
+
function applyQuickFilter(filter) {
|
|
21
|
+
router.get(route('escalated.agent.tickets.index'), filter, { preserveState: true });
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<template>
|
|
26
|
+
<EscalatedLayout title="Ticket Queue">
|
|
27
|
+
<div class="mb-4">
|
|
28
|
+
<QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
|
|
29
|
+
</div>
|
|
30
|
+
<div class="mb-6">
|
|
31
|
+
<TicketFilters :filters="filters" :route="route('escalated.agent.tickets.index')" :departments="departments" :tags="tags" show-assignee show-following />
|
|
32
|
+
</div>
|
|
33
|
+
<TicketList :tickets="tickets" route-prefix="escalated.agent.tickets" show-assignee
|
|
34
|
+
selectable v-model:selected-ids="selectedIds" />
|
|
35
|
+
<BulkActionBar :selected-ids="selectedIds" :bulk-route="route('escalated.agent.tickets.bulk')"
|
|
36
|
+
:departments="departments" @clear="selectedIds = []" />
|
|
37
|
+
</EscalatedLayout>
|
|
38
|
+
</template>
|
|
@@ -1,108 +1,144 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import EscalatedLayout from '../../components/EscalatedLayout.vue';
|
|
3
|
-
import StatusBadge from '../../components/StatusBadge.vue';
|
|
4
|
-
import PriorityBadge from '../../components/PriorityBadge.vue';
|
|
5
|
-
import ReplyThread from '../../components/ReplyThread.vue';
|
|
6
|
-
import ReplyComposer from '../../components/ReplyComposer.vue';
|
|
7
|
-
import TicketSidebar from '../../components/TicketSidebar.vue';
|
|
8
|
-
import AttachmentList from '../../components/AttachmentList.vue';
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
1
|
+
<script setup>
|
|
2
|
+
import EscalatedLayout from '../../components/EscalatedLayout.vue';
|
|
3
|
+
import StatusBadge from '../../components/StatusBadge.vue';
|
|
4
|
+
import PriorityBadge from '../../components/PriorityBadge.vue';
|
|
5
|
+
import ReplyThread from '../../components/ReplyThread.vue';
|
|
6
|
+
import ReplyComposer from '../../components/ReplyComposer.vue';
|
|
7
|
+
import TicketSidebar from '../../components/TicketSidebar.vue';
|
|
8
|
+
import AttachmentList from '../../components/AttachmentList.vue';
|
|
9
|
+
import MacroDropdown from '../../components/MacroDropdown.vue';
|
|
10
|
+
import FollowButton from '../../components/FollowButton.vue';
|
|
11
|
+
import PresenceIndicator from '../../components/PresenceIndicator.vue';
|
|
12
|
+
import PinnedNotes from '../../components/PinnedNotes.vue';
|
|
13
|
+
import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
|
|
14
|
+
import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
|
|
15
|
+
import { router, useForm, usePage } from '@inertiajs/vue3';
|
|
16
|
+
import { ref } from 'vue';
|
|
17
|
+
|
|
18
|
+
const props = defineProps({
|
|
19
|
+
ticket: Object,
|
|
20
|
+
departments: Array,
|
|
21
|
+
tags: Array,
|
|
22
|
+
cannedResponses: Array,
|
|
23
|
+
macros: { type: Array, default: () => [] },
|
|
24
|
+
is_following: { type: Boolean, default: false },
|
|
25
|
+
followers_count: { type: Number, default: 0 },
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
const page = usePage();
|
|
29
|
+
const activeTab = ref('reply');
|
|
30
|
+
const showShortcutHelp = ref(false);
|
|
31
|
+
const replyComposerRef = ref(null);
|
|
32
|
+
const statusSelectRef = ref(null);
|
|
33
|
+
const prioritySelectRef = ref(null);
|
|
34
|
+
|
|
35
|
+
const statusForm = useForm({ status: '' });
|
|
36
|
+
const priorityForm = useForm({ priority: '' });
|
|
37
|
+
const assignForm = useForm({ agent_id: '' });
|
|
38
|
+
|
|
39
|
+
function changeStatus(status) {
|
|
40
|
+
statusForm.status = status;
|
|
41
|
+
statusForm.post(route('escalated.agent.tickets.status', props.ticket.reference), { preserveScroll: true });
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function changePriority(priority) {
|
|
45
|
+
priorityForm.priority = priority;
|
|
46
|
+
priorityForm.post(route('escalated.agent.tickets.priority', props.ticket.reference), { preserveScroll: true });
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function assignToMe() {
|
|
50
|
+
assignForm.agent_id = page.props.auth.user.id;
|
|
51
|
+
assignForm.post(route('escalated.agent.tickets.assign', props.ticket.reference), { preserveScroll: true });
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function toggleFollow() {
|
|
55
|
+
router.post(route('escalated.agent.tickets.follow', props.ticket.reference), {}, { preserveScroll: true });
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Keyboard shortcuts
|
|
59
|
+
useKeyboardShortcuts({
|
|
60
|
+
'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
|
|
61
|
+
'n': () => { activeTab.value = 'note'; },
|
|
62
|
+
's': () => { statusSelectRef.value?.focus(); },
|
|
63
|
+
'p': () => { prioritySelectRef.value?.focus(); },
|
|
64
|
+
'f': () => { toggleFollow(); },
|
|
65
|
+
'?': () => { showShortcutHelp.value = true; },
|
|
66
|
+
});
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<template>
|
|
70
|
+
<EscalatedLayout :title="ticket.subject">
|
|
71
|
+
<div class="mb-5 flex flex-wrap items-center gap-3">
|
|
72
|
+
<span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
|
|
73
|
+
<StatusBadge :status="ticket.status" />
|
|
74
|
+
<PriorityBadge :priority="ticket.priority" />
|
|
75
|
+
<span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
|
|
76
|
+
<PresenceIndicator :ticket-reference="ticket.reference" route-prefix="escalated.agent" />
|
|
77
|
+
<div class="ml-auto flex items-center gap-2">
|
|
78
|
+
<FollowButton :is-following="is_following" :followers-count="followers_count"
|
|
79
|
+
:action="route('escalated.agent.tickets.follow', ticket.reference)" />
|
|
80
|
+
<MacroDropdown v-if="macros.length" :macros="macros"
|
|
81
|
+
:action="route('escalated.agent.tickets.macro', ticket.reference)" />
|
|
82
|
+
<button v-if="!ticket.assigned_to" @click="assignToMe"
|
|
83
|
+
class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
|
|
84
|
+
Assign to Me
|
|
85
|
+
</button>
|
|
86
|
+
<select ref="statusSelectRef" @change="changeStatus($event.target.value); $event.target.value = ''"
|
|
87
|
+
class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
|
|
88
|
+
<option value="">Change Status...</option>
|
|
89
|
+
<option value="in_progress">In Progress</option>
|
|
90
|
+
<option value="waiting_on_customer">Waiting on Customer</option>
|
|
91
|
+
<option value="resolved">Resolved</option>
|
|
92
|
+
<option value="closed">Closed</option>
|
|
93
|
+
</select>
|
|
94
|
+
<select ref="prioritySelectRef" @change="changePriority($event.target.value); $event.target.value = ''"
|
|
95
|
+
class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
|
|
96
|
+
<option value="">Change Priority...</option>
|
|
97
|
+
<option value="low">Low</option>
|
|
98
|
+
<option value="medium">Medium</option>
|
|
99
|
+
<option value="high">High</option>
|
|
100
|
+
<option value="urgent">Urgent</option>
|
|
101
|
+
<option value="critical">Critical</option>
|
|
102
|
+
</select>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
106
|
+
<div class="lg:col-span-2 space-y-6">
|
|
107
|
+
<PinnedNotes v-if="ticket.pinned_notes?.length" :notes="ticket.pinned_notes"
|
|
108
|
+
:ticket-reference="ticket.reference" route-prefix="escalated.agent" />
|
|
109
|
+
<div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
|
|
110
|
+
<p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
|
|
111
|
+
<AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
|
|
112
|
+
</div>
|
|
113
|
+
<div>
|
|
114
|
+
<div class="mb-4 flex gap-4 border-b border-white/[0.06]">
|
|
115
|
+
<button @click="activeTab = 'reply'"
|
|
116
|
+
:class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
|
|
117
|
+
Reply
|
|
118
|
+
</button>
|
|
119
|
+
<button @click="activeTab = 'note'"
|
|
120
|
+
:class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
|
|
121
|
+
Internal Note
|
|
122
|
+
</button>
|
|
123
|
+
</div>
|
|
124
|
+
<ReplyComposer v-if="activeTab === 'reply'" ref="replyComposerRef"
|
|
125
|
+
:action="route('escalated.agent.tickets.reply', ticket.reference)"
|
|
126
|
+
:canned-responses="cannedResponses" />
|
|
127
|
+
<ReplyComposer v-else
|
|
128
|
+
:action="route('escalated.agent.tickets.note', ticket.reference)"
|
|
129
|
+
placeholder="Write an internal note..."
|
|
130
|
+
submit-label="Add Note" />
|
|
131
|
+
</div>
|
|
132
|
+
<div>
|
|
133
|
+
<h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
|
|
134
|
+
<ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id"
|
|
135
|
+
:ticket-reference="ticket.reference" route-prefix="escalated.agent" pinnable />
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
<div>
|
|
139
|
+
<TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
<KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />
|
|
143
|
+
</EscalatedLayout>
|
|
144
|
+
</template>
|