@escalated-dev/escalated 0.3.5 → 0.4.0

package/src/pages/Admin/Reports.vue

@@ -1,66 +1,101 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import StatsCard from '../../components/StatsCard.vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    period_days: Number,
-    total_tickets: Number,
-    resolved_tickets: Number,
-    avg_first_response_hours: Number,
-    sla_breach_count: Number,
-    by_status: Object,
-    by_priority: Object,
-});
-
-function changePeriod(days) {
-    router.get(route('escalated.admin.reports'), { days }, { preserveState: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Reports">
-        <div class="mb-6 flex gap-2">
-            <button v-for="d in [7, 30, 90]" :key="d" @click="changePeriod(d)"
-                    :class="['rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all', period_days === d
-                        ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-black/20'
-                        : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200']">
-                Last {{ d }} days
-            </button>
-        </div>
-        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
-            <StatsCard label="Total Tickets" :value="total_tickets" color="indigo" />
-            <StatsCard label="Resolved" :value="resolved_tickets" color="green" />
-            <StatsCard label="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
-            <StatsCard label="SLA Breaches" :value="sla_breach_count" color="red" />
-        </div>
-        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Status</h3>
-                <template v-if="by_status && Object.keys(by_status).length">
-                    <div v-for="(count, status) in by_status" :key="status" class="mb-2.5 flex items-center justify-between">
-                        <span class="text-sm capitalize text-neutral-400">{{ status.replace('_', ' ') }}</span>
-                        <span class="text-sm font-semibold text-white">{{ count }}</span>
-                    </div>
-                </template>
-                <div v-else class="flex flex-col items-center py-6 text-center">
-                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
-                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
-                </div>
-            </div>
-            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Priority</h3>
-                <template v-if="by_priority && Object.keys(by_priority).length">
-                    <div v-for="(count, priority) in by_priority" :key="priority" class="mb-2.5 flex items-center justify-between">
-                        <span class="text-sm capitalize text-neutral-400">{{ priority }}</span>
-                        <span class="text-sm font-semibold text-white">{{ count }}</span>
-                    </div>
-                </template>
-                <div v-else class="flex flex-col items-center py-6 text-center">
-                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>
-                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
-                </div>
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatsCard from '../../components/StatsCard.vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    period_days: Number,
+    total_tickets: Number,
+    resolved_tickets: Number,
+    avg_first_response_hours: Number,
+    sla_breach_count: Number,
+    by_status: Object,
+    by_priority: Object,
+    csat: { type: Object, default: () => ({}) },
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports'), { days }, { preserveState: true });
+}
+
+function renderStars(rating) {
+    return Array.from({ length: 5 }, (_, i) => i < Math.round(rating) ? 'filled' : 'empty');
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Reports">
+        <div class="mb-6 flex gap-2">
+            <button v-for="d in [7, 30, 90]" :key="d" @click="changePeriod(d)"
+                    :class="['rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all', period_days === d
+                        ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-black/20'
+                        : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200']">
+                Last {{ d }} days
+            </button>
+        </div>
+        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <StatsCard label="Total Tickets" :value="total_tickets" color="indigo" />
+            <StatsCard label="Resolved" :value="resolved_tickets" color="green" />
+            <StatsCard label="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
+            <StatsCard label="SLA Breaches" :value="sla_breach_count" color="red" />
+        </div>
+        <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Status</h3>
+                <template v-if="by_status && Object.keys(by_status).length">
+                    <div v-for="(count, status) in by_status" :key="status" class="mb-2.5 flex items-center justify-between">
+                        <span class="text-sm capitalize text-neutral-400">{{ status.replace('_', ' ') }}</span>
+                        <span class="text-sm font-semibold text-white">{{ count }}</span>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
+                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
+                </div>
+            </div>
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Priority</h3>
+                <template v-if="by_priority && Object.keys(by_priority).length">
+                    <div v-for="(count, priority) in by_priority" :key="priority" class="mb-2.5 flex items-center justify-between">
+                        <span class="text-sm capitalize text-neutral-400">{{ priority }}</span>
+                        <span class="text-sm font-semibold text-white">{{ count }}</span>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>
+                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
+                </div>
+            </div>
+            <!-- CSAT -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                <h3 class="mb-4 text-sm font-semibold text-neutral-200">Customer Satisfaction</h3>
+                <template v-if="csat?.total > 0">
+                    <div class="mb-3 flex items-center gap-2">
+                        <div class="flex items-center gap-0.5">
+                            <svg v-for="(star, i) in renderStars(csat.average)" :key="i"
+                                 class="h-5 w-5" :class="star === 'filled' ? 'text-amber-400' : 'text-neutral-700'"
+                                 fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                            </svg>
+                        </div>
+                        <span class="text-lg font-bold text-white">{{ csat.average }}</span>
+                        <span class="text-sm text-neutral-500">({{ csat.total }} ratings)</span>
+                    </div>
+                    <div v-if="csat.breakdown && Object.keys(csat.breakdown).length" class="space-y-1.5">
+                        <div v-for="rating in [5, 4, 3, 2, 1]" :key="rating" class="flex items-center gap-2">
+                            <span class="w-3 text-xs text-neutral-500">{{ rating }}</span>
+                            <div class="h-2 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
+                                <div class="h-full rounded-full bg-amber-400" :style="{ width: `${csat.total ? ((csat.breakdown[rating] || 0) / csat.total) * 100 : 0}%` }"></div>
+                            </div>
+                            <span class="w-6 text-right text-xs text-neutral-500">{{ csat.breakdown[rating] || 0 }}</span>
+                        </div>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg class="mb-2 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg>
+                    <p class="text-sm text-neutral-500">No ratings for this period</p>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -1,22 +1,39 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import TicketList from '../../../components/TicketList.vue';
-import TicketFilters from '../../../components/TicketFilters.vue';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-    departments: Array,
-    tags: Array,
-    agents: Array,
-});
-</script>
-
-<template>
-    <EscalatedLayout title="All Tickets">
-        <div class="mb-6">
-            <TicketFilters :filters="filters" :route="route('escalated.admin.tickets.index')" :departments="departments" :tags="tags" show-assignee />
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.admin.tickets" show-assignee />
-    </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';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+    agents: Array,
+});
+
+const page = usePage();
+const selectedIds = ref([]);
+
+function applyQuickFilter(filter) {
+    router.get(route('escalated.admin.tickets.index'), filter, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="All Tickets">
+        <div class="mb-4">
+            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
+        </div>
+        <div class="mb-6">
+            <TicketFilters :filters="filters" :route="route('escalated.admin.tickets.index')" :departments="departments" :tags="tags" :agents="agents" show-assignee show-following />
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.admin.tickets" show-assignee
+                    selectable v-model:selected-ids="selectedIds" />
+        <BulkActionBar :selected-ids="selectedIds" :bulk-route="route('escalated.admin.tickets.bulk')"
+                       :agents="agents" :departments="departments" @clear="selectedIds = []" />
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Tickets/Show.vue

@@ -1,109 +1,145 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import StatusBadge from '../../../components/StatusBadge.vue';
-import PriorityBadge from '../../../components/PriorityBadge.vue';
-import ReplyThread from '../../../components/ReplyThread.vue';
-import ReplyComposer from '../../../components/ReplyComposer.vue';
-import TicketSidebar from '../../../components/TicketSidebar.vue';
-import AttachmentList from '../../../components/AttachmentList.vue';
-import { router, useForm, usePage } from '@inertiajs/vue3';
-import { ref } from 'vue';
-
-const props = defineProps({
-    ticket: Object,
-    departments: Array,
-    tags: Array,
-    cannedResponses: Array,
-    agents: Array,
-});
-
-const page = usePage();
-const activeTab = ref('reply');
-
-const statusForm = useForm({ status: '' });
-const priorityForm = useForm({ priority: '' });
-const assignForm = useForm({ agent_id: '' });
-
-function changeStatus(status) {
-    statusForm.status = status;
-    statusForm.post(route('escalated.admin.tickets.status', props.ticket.reference), { preserveScroll: true });
-}
-
-function changePriority(priority) {
-    priorityForm.priority = priority;
-    priorityForm.post(route('escalated.admin.tickets.priority', props.ticket.reference), { preserveScroll: true });
-}
-
-function assignToMe() {
-    assignForm.agent_id = page.props.auth.user.id;
-    assignForm.post(route('escalated.admin.tickets.assign', props.ticket.reference), { preserveScroll: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="ticket.subject">
-        <div class="mb-5 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
-            <StatusBadge :status="ticket.status" />
-            <PriorityBadge :priority="ticket.priority" />
-            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
-            <div class="ml-auto flex gap-2">
-                <button v-if="!ticket.assigned_to" @click="assignToMe"
-                        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">
-                    Assign to Me
-                </button>
-                <select @change="changeStatus($event.target.value); $event.target.value = ''"
-                        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">
-                    <option value="">Change Status...</option>
-                    <option value="in_progress">In Progress</option>
-                    <option value="waiting_on_customer">Waiting on Customer</option>
-                    <option value="resolved">Resolved</option>
-                    <option value="closed">Closed</option>
-                </select>
-                <select @change="changePriority($event.target.value); $event.target.value = ''"
-                        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">
-                    <option value="">Change Priority...</option>
-                    <option value="low">Low</option>
-                    <option value="medium">Medium</option>
-                    <option value="high">High</option>
-                    <option value="urgent">Urgent</option>
-                    <option value="critical">Critical</option>
-                </select>
-            </div>
-        </div>
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-            <div class="lg:col-span-2 space-y-6">
-                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
-                    <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
-                </div>
-                <div>
-                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
-                        <button @click="activeTab = 'reply'"
-                                :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']">
-                            Reply
-                        </button>
-                        <button @click="activeTab = 'note'"
-                                :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']">
-                            Internal Note
-                        </button>
-                    </div>
-                    <ReplyComposer v-if="activeTab === 'reply'"
-                                   :action="route('escalated.admin.tickets.reply', ticket.reference)"
-                                   :canned-responses="cannedResponses" />
-                    <ReplyComposer v-else
-                                   :action="route('escalated.admin.tickets.note', ticket.reference)"
-                                   placeholder="Write an internal note..."
-                                   submit-label="Add Note" />
-                </div>
-                <div>
-                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
-                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
-                </div>
-            </div>
-            <div>
-                <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
-            </div>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import StatusBadge from '../../../components/StatusBadge.vue';
+import PriorityBadge from '../../../components/PriorityBadge.vue';
+import ReplyThread from '../../../components/ReplyThread.vue';
+import ReplyComposer from '../../../components/ReplyComposer.vue';
+import TicketSidebar from '../../../components/TicketSidebar.vue';
+import AttachmentList from '../../../components/AttachmentList.vue';
+import MacroDropdown from '../../../components/MacroDropdown.vue';
+import FollowButton from '../../../components/FollowButton.vue';
+import PresenceIndicator from '../../../components/PresenceIndicator.vue';
+import PinnedNotes from '../../../components/PinnedNotes.vue';
+import KeyboardShortcutHelp from '../../../components/KeyboardShortcutHelp.vue';
+import { useKeyboardShortcuts } from '../../../composables/useKeyboardShortcuts';
+import { router, useForm, usePage } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    ticket: Object,
+    departments: Array,
+    tags: Array,
+    cannedResponses: Array,
+    agents: Array,
+    macros: { type: Array, default: () => [] },
+    is_following: { type: Boolean, default: false },
+    followers_count: { type: Number, default: 0 },
+});
+
+const page = usePage();
+const activeTab = ref('reply');
+const showShortcutHelp = ref(false);
+const replyComposerRef = ref(null);
+const statusSelectRef = ref(null);
+const prioritySelectRef = ref(null);
+
+const statusForm = useForm({ status: '' });
+const priorityForm = useForm({ priority: '' });
+const assignForm = useForm({ agent_id: '' });
+
+function changeStatus(status) {
+    statusForm.status = status;
+    statusForm.post(route('escalated.admin.tickets.status', props.ticket.reference), { preserveScroll: true });
+}
+
+function changePriority(priority) {
+    priorityForm.priority = priority;
+    priorityForm.post(route('escalated.admin.tickets.priority', props.ticket.reference), { preserveScroll: true });
+}
+
+function assignToMe() {
+    assignForm.agent_id = page.props.auth.user.id;
+    assignForm.post(route('escalated.admin.tickets.assign', props.ticket.reference), { preserveScroll: true });
+}
+
+function toggleFollow() {
+    router.post(route('escalated.admin.tickets.follow', props.ticket.reference), {}, { preserveScroll: true });
+}
+
+// Keyboard shortcuts
+useKeyboardShortcuts({
+    'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
+    'n': () => { activeTab.value = 'note'; },
+    's': () => { statusSelectRef.value?.focus(); },
+    'p': () => { prioritySelectRef.value?.focus(); },
+    'f': () => { toggleFollow(); },
+    '?': () => { showShortcutHelp.value = true; },
+});
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mb-5 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
+            <StatusBadge :status="ticket.status" />
+            <PriorityBadge :priority="ticket.priority" />
+            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
+            <PresenceIndicator :ticket-reference="ticket.reference" route-prefix="escalated.admin" />
+            <div class="ml-auto flex items-center gap-2">
+                <FollowButton :is-following="is_following" :followers-count="followers_count"
+                              :action="route('escalated.admin.tickets.follow', ticket.reference)" />
+                <MacroDropdown v-if="macros.length" :macros="macros"
+                               :action="route('escalated.admin.tickets.macro', ticket.reference)" />
+                <button v-if="!ticket.assigned_to" @click="assignToMe"
+                        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">
+                    Assign to Me
+                </button>
+                <select ref="statusSelectRef" @change="changeStatus($event.target.value); $event.target.value = ''"
+                        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">
+                    <option value="">Change Status...</option>
+                    <option value="in_progress">In Progress</option>
+                    <option value="waiting_on_customer">Waiting on Customer</option>
+                    <option value="resolved">Resolved</option>
+                    <option value="closed">Closed</option>
+                </select>
+                <select ref="prioritySelectRef" @change="changePriority($event.target.value); $event.target.value = ''"
+                        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">
+                    <option value="">Change Priority...</option>
+                    <option value="low">Low</option>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                    <option value="urgent">Urgent</option>
+                    <option value="critical">Critical</option>
+                </select>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div class="lg:col-span-2 space-y-6">
+                <PinnedNotes v-if="ticket.pinned_notes?.length" :notes="ticket.pinned_notes"
+                             :ticket-reference="ticket.reference" route-prefix="escalated.admin" />
+                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
+                    <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+                </div>
+                <div>
+                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
+                        <button @click="activeTab = 'reply'"
+                                :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']">
+                            Reply
+                        </button>
+                        <button @click="activeTab = 'note'"
+                                :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']">
+                            Internal Note
+                        </button>
+                    </div>
+                    <ReplyComposer v-if="activeTab === 'reply'" ref="replyComposerRef"
+                                   :action="route('escalated.admin.tickets.reply', ticket.reference)"
+                                   :canned-responses="cannedResponses" />
+                    <ReplyComposer v-else
+                                   :action="route('escalated.admin.tickets.note', ticket.reference)"
+                                   placeholder="Write an internal note..."
+                                   submit-label="Add Note" />
+                </div>
+                <div>
+                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
+                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id"
+                                 :ticket-reference="ticket.reference" route-prefix="escalated.admin" pinnable />
+                </div>
+            </div>
+            <div>
+                <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
+            </div>
+        </div>
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />
+    </EscalatedLayout>
+</template>