@escalated-dev/escalated 0.2.1 → 0.4.0

package/src/pages/Agent/TicketShow.vue

@@ -1,108 +1,144 @@
-<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,
-});
-
-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.agent.tickets.status', props.ticket.reference), { preserveScroll: true });
-}
-
-function changePriority(priority) {
-    priorityForm.priority = priority;
-    priorityForm.post(route('escalated.agent.tickets.priority', props.ticket.reference), { preserveScroll: true });
-}
-
-function assignToMe() {
-    assignForm.agent_id = page.props.auth.user.id;
-    assignForm.post(route('escalated.agent.tickets.assign', props.ticket.reference), { preserveScroll: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="ticket.subject">
-        <div class="mb-4 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-medium text-gray-500">{{ ticket.reference }}</span>
-            <StatusBadge :status="ticket.status" />
-            <PriorityBadge :priority="ticket.priority" />
-            <span class="text-sm text-gray-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-indigo-600 px-3 py-1.5 text-sm text-white hover:bg-indigo-700">
-                    Assign to Me
-                </button>
-                <select @change="changeStatus($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border-gray-300 text-sm">
-                    <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-gray-300 text-sm">
-                    <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-lg border border-gray-200 bg-white p-4">
-                    <p class="whitespace-pre-wrap text-sm text-gray-700">{{ 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-gray-200">
-                        <button @click="activeTab = 'reply'"
-                                :class="['pb-2 text-sm font-medium', activeTab === 'reply' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-gray-500']">
-                            Reply
-                        </button>
-                        <button @click="activeTab = 'note'"
-                                :class="['pb-2 text-sm font-medium', activeTab === 'note' ? 'border-b-2 border-yellow-500 text-yellow-600' : 'text-gray-500']">
-                            Internal Note
-                        </button>
-                    </div>
-                    <ReplyComposer v-if="activeTab === 'reply'"
-                                   :action="route('escalated.agent.tickets.reply', ticket.reference)"
-                                   :canned-responses="cannedResponses" />
-                    <ReplyComposer v-else
-                                   :action="route('escalated.agent.tickets.note', ticket.reference)"
-                                   placeholder="Write an internal note..."
-                                   submit-label="Add Note" />
-                </div>
-                <div>
-                    <h2 class="mb-4 text-lg font-semibold text-gray-900">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,
+    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.agent.tickets.status', props.ticket.reference), { preserveScroll: true });
+}
+
+function changePriority(priority) {
+    priorityForm.priority = priority;
+    priorityForm.post(route('escalated.agent.tickets.priority', props.ticket.reference), { preserveScroll: true });
+}
+
+function assignToMe() {
+    assignForm.agent_id = page.props.auth.user.id;
+    assignForm.post(route('escalated.agent.tickets.assign', props.ticket.reference), { preserveScroll: true });
+}
+
+function toggleFollow() {
+    router.post(route('escalated.agent.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.agent" />
+            <div class="ml-auto flex items-center gap-2">
+                <FollowButton :is-following="is_following" :followers-count="followers_count"
+                              :action="route('escalated.agent.tickets.follow', ticket.reference)" />
+                <MacroDropdown v-if="macros.length" :macros="macros"
+                               :action="route('escalated.agent.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.agent" />
+                <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.agent.tickets.reply', ticket.reference)"
+                                   :canned-responses="cannedResponses" />
+                    <ReplyComposer v-else
+                                   :action="route('escalated.agent.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.agent" pinnable />
+                </div>
+            </div>
+            <div>
+                <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
+            </div>
+        </div>
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/Show.vue

@@ -1,55 +1,63 @@
-<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 AttachmentList from '../../components/AttachmentList.vue';
-import { router, usePage } from '@inertiajs/vue3';
-
-const props = defineProps({ ticket: Object });
-const page = usePage();
-
-function closeTicket() {
-    router.post(route('escalated.customer.tickets.close', props.ticket.reference));
-}
-
-function reopenTicket() {
-    router.post(route('escalated.customer.tickets.reopen', props.ticket.reference));
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="ticket.subject">
-        <div class="mb-4 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-medium text-gray-500">{{ ticket.reference }}</span>
-            <StatusBadge :status="ticket.status" />
-            <PriorityBadge :priority="ticket.priority" />
-            <span v-if="ticket.department" class="text-sm text-gray-500">{{ ticket.department.name }}</span>
-            <div class="ml-auto flex gap-2">
-                <button v-if="ticket.status === 'resolved' || ticket.status === 'closed'"
-                        @click="reopenTicket"
-                        class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
-                    Reopen
-                </button>
-                <button v-if="ticket.status !== 'closed' && ticket.status !== 'resolved'"
-                        @click="closeTicket"
-                        class="rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">
-                    Close Ticket
-                </button>
-            </div>
-        </div>
-        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
-            <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
-            <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
-        </div>
-        <div class="mb-6">
-            <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
-            <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
-        </div>
-        <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
-            <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
-            <ReplyComposer :action="route('escalated.customer.tickets.reply', ticket.reference)" />
-        </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 AttachmentList from '../../components/AttachmentList.vue';
+import SatisfactionRating from '../../components/SatisfactionRating.vue';
+import { router, usePage } from '@inertiajs/vue3';
+
+const props = defineProps({ ticket: Object });
+const page = usePage();
+
+const isResolved = ['resolved', 'closed'].includes(props.ticket.status);
+
+function closeTicket() {
+    router.post(route('escalated.customer.tickets.close', props.ticket.reference));
+}
+
+function reopenTicket() {
+    router.post(route('escalated.customer.tickets.reopen', props.ticket.reference));
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mb-4 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-medium text-neutral-500">{{ ticket.reference }}</span>
+            <StatusBadge :status="ticket.status" />
+            <PriorityBadge :priority="ticket.priority" />
+            <span v-if="ticket.department" class="text-sm text-neutral-500">{{ ticket.department.name }}</span>
+            <div class="ml-auto flex gap-2">
+                <button v-if="ticket.status === 'resolved' || ticket.status === 'closed'"
+                        @click="reopenTicket"
+                        class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
+                    Reopen
+                </button>
+                <button v-if="ticket.status !== 'closed' && ticket.status !== 'resolved'"
+                        @click="closeTicket"
+                        class="rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">
+                    Close Ticket
+                </button>
+            </div>
+        </div>
+
+        <!-- CSAT Rating -->
+        <SatisfactionRating v-if="isResolved && !ticket.satisfaction_rating"
+                            :action="route('escalated.customer.tickets.rate', ticket.reference)" />
+
+        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+            <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
+            <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+        </div>
+        <div class="mb-6">
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
+            <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
+        </div>
+        <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
+            <ReplyComposer :action="route('escalated.customer.tickets.reply', ticket.reference)" />
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Guest/Create.vue

@@ -0,0 +1,97 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import FileDropzone from '../../components/FileDropzone.vue';
+import { useForm, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    departments: Array,
+    priorities: Array,
+});
+
+const form = useForm({
+    guest_name: '',
+    guest_email: '',
+    subject: '',
+    description: '',
+    priority: 'medium',
+    department_id: '',
+    attachments: [],
+});
+
+function submit() {
+    form.post(route('escalated.guest.tickets.store'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Submit a Ticket">
+        <div class="mx-auto max-w-2xl">
+            <div class="mb-6 text-center">
+                <h1 class="text-xl font-semibold text-gray-900">Submit a Support Ticket</h1>
+                <p class="mt-1 text-sm text-gray-500">No account needed. We'll give you a link to track your ticket.</p>
+                <Link :href="route('login')" class="mt-2 inline-block text-sm text-indigo-600 hover:text-indigo-700">
+                    Already have an account? Sign in
+                </Link>
+            </div>
+
+            <form @submit.prevent="submit" class="space-y-5 rounded-lg border border-gray-200 bg-white p-6">
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700">Your Name</label>
+                        <input v-model="form.guest_name" type="text" required
+                               class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+                        <div v-if="form.errors.guest_name" class="mt-1 text-sm text-red-600">{{ form.errors.guest_name }}</div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700">Email Address</label>
+                        <input v-model="form.guest_email" type="email" required
+                               class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+                        <div v-if="form.errors.guest_email" class="mt-1 text-sm text-red-600">{{ form.errors.guest_email }}</div>
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Subject</label>
+                    <input v-model="form.subject" type="text" required
+                           class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+                    <div v-if="form.errors.subject" class="mt-1 text-sm text-red-600">{{ form.errors.subject }}</div>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Description</label>
+                    <textarea v-model="form.description" rows="6" required
+                              class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
+                    <div v-if="form.errors.description" class="mt-1 text-sm text-red-600">{{ form.errors.description }}</div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700">Priority</label>
+                        <select v-model="form.priority" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                            <option v-for="p in priorities" :key="p" :value="p" class="capitalize">{{ p }}</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700">Department</label>
+                        <select v-model="form.department_id" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                            <option value="">General</option>
+                            <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Attachments</label>
+                    <FileDropzone v-model="form.attachments" />
+                </div>
+
+                <div class="flex justify-end">
+                    <button type="submit" :disabled="form.processing"
+                            class="rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                        {{ form.processing ? 'Submitting...' : 'Submit Ticket' }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Guest/Show.vue

@@ -0,0 +1,93 @@
+<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 AttachmentList from '../../components/AttachmentList.vue';
+import SatisfactionRating from '../../components/SatisfactionRating.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({ ticket: Object, token: String });
+
+const isResolved = ['resolved', 'closed'].includes(props.ticket.status);
+
+const replyForm = useForm({ body: '', attachments: [] });
+const showCopied = ref(false);
+
+function submitReply() {
+    replyForm.post(route('escalated.guest.tickets.reply', props.token), {
+        onSuccess: () => replyForm.reset(),
+    });
+}
+
+function copyLink() {
+    navigator.clipboard.writeText(window.location.href);
+    showCopied.value = true;
+    setTimeout(() => showCopied.value = false, 2000);
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mx-auto max-w-3xl">
+            <!-- Bookmark notice -->
+            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3">
+                <div class="flex items-start gap-3">
+                    <svg class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
+                    <div>
+                        <p class="text-sm font-medium text-amber-800">Bookmark this page</p>
+                        <p class="mt-0.5 text-xs text-amber-600">This is your private link to view and reply to this ticket.</p>
+                    </div>
+                    <button @click="copyLink"
+                            class="ml-auto shrink-0 rounded-md border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-700 hover:bg-amber-50">
+                        {{ showCopied ? 'Copied!' : 'Copy Link' }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Ticket header -->
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+                <span class="font-mono text-sm text-gray-500">{{ ticket.reference }}</span>
+                <StatusBadge :status="ticket.status" />
+                <PriorityBadge :priority="ticket.priority" />
+                <span v-if="ticket.department" class="text-sm text-gray-500">{{ ticket.department.name }}</span>
+            </div>
+
+            <!-- CSAT Rating -->
+            <SatisfactionRating v-if="isResolved && !ticket.satisfaction_rating"
+                                :action="route('escalated.guest.tickets.rate', token)" />
+
+            <!-- Description -->
+            <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+                <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
+                <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+            </div>
+
+            <!-- Replies -->
+            <div class="mb-6">
+                <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
+                <ReplyThread :replies="ticket.replies || []" />
+            </div>
+
+            <!-- Reply form -->
+            <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
+                <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
+                <form @submit.prevent="submitReply">
+                    <textarea v-model="replyForm.body" rows="4" required placeholder="Write your reply..."
+                              class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
+                    <div v-if="replyForm.errors.body" class="mt-1 text-sm text-red-600">{{ replyForm.errors.body }}</div>
+                    <div class="mt-3 flex justify-end">
+                        <button type="submit" :disabled="replyForm.processing"
+                                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                            {{ replyForm.processing ? 'Sending...' : 'Send Reply' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <div v-else class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-6 text-center text-sm text-gray-500">
+                This ticket is closed. No further replies can be added.
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>