@escalated-dev/escalated 0.2.1

package/src/pages/Admin/EscalationRules/Form.vue

@@ -0,0 +1,95 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({ rule: { type: Object, default: null } });
+
+const form = useForm({
+    name: props.rule?.name || '',
+    description: props.rule?.description || '',
+    trigger_type: props.rule?.trigger_type || 'time_based',
+    conditions: props.rule?.conditions || [{ field: '', value: '' }],
+    actions: props.rule?.actions || [{ type: '', value: '' }],
+    order: props.rule?.order ?? 0,
+    is_active: props.rule?.is_active ?? true,
+});
+
+function addCondition() { form.conditions.push({ field: '', value: '' }); }
+function removeCondition(idx) { form.conditions.splice(idx, 1); }
+function addAction() { form.actions.push({ type: '', value: '' }); }
+function removeAction(idx) { form.actions.splice(idx, 1); }
+
+function submit() {
+    if (props.rule) {
+        form.put(route('escalated.admin.escalation-rules.update', props.rule.id));
+    } else {
+        form.post(route('escalated.admin.escalation-rules.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="rule ? 'Edit Escalation Rule' : 'New Escalation Rule'">
+        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Name</label>
+                <input v-model="form.name" type="text" required class="mt-1 w-full rounded-lg border-gray-300 shadow-sm" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Trigger Type</label>
+                <select v-model="form.trigger_type" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                    <option value="time_based">Time Based</option>
+                    <option value="sla_breach">SLA Breach</option>
+                    <option value="priority_based">Priority Based</option>
+                </select>
+            </div>
+            <div>
+                <div class="mb-2 flex items-center justify-between">
+                    <label class="text-sm font-medium text-gray-700">Conditions</label>
+                    <button type="button" @click="addCondition" class="text-sm text-indigo-600">+ Add</button>
+                </div>
+                <div v-for="(cond, idx) in form.conditions" :key="idx" class="mb-2 flex gap-2">
+                    <select v-model="cond.field" class="w-1/2 rounded border-gray-300 text-sm">
+                        <option value="status">Status</option>
+                        <option value="priority">Priority</option>
+                        <option value="assigned">Assignment</option>
+                        <option value="age_hours">Age (hours)</option>
+                        <option value="no_response_hours">No Response (hours)</option>
+                        <option value="sla_breached">SLA Breached</option>
+                    </select>
+                    <input v-model="cond.value" class="w-1/2 rounded border-gray-300 text-sm" placeholder="Value" />
+                    <button type="button" @click="removeCondition(idx)" class="text-red-500">&times;</button>
+                </div>
+            </div>
+            <div>
+                <div class="mb-2 flex items-center justify-between">
+                    <label class="text-sm font-medium text-gray-700">Actions</label>
+                    <button type="button" @click="addAction" class="text-sm text-indigo-600">+ Add</button>
+                </div>
+                <div v-for="(action, idx) in form.actions" :key="idx" class="mb-2 flex gap-2">
+                    <select v-model="action.type" class="w-1/2 rounded border-gray-300 text-sm">
+                        <option value="escalate">Escalate</option>
+                        <option value="change_priority">Change Priority</option>
+                        <option value="assign_to">Assign To</option>
+                        <option value="change_department">Change Department</option>
+                    </select>
+                    <input v-model="action.value" class="w-1/2 rounded border-gray-300 text-sm" placeholder="Value" />
+                    <button type="button" @click="removeAction(idx)" class="text-red-500">&times;</button>
+                </div>
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Order</label>
+                <input v-model.number="form.order" type="number" min="0" class="mt-1 w-24 rounded-lg border-gray-300 shadow-sm" />
+            </div>
+            <label class="flex items-center gap-2">
+                <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300" />
+                <span class="text-sm text-gray-700">Active</span>
+            </label>
+            <div class="flex justify-end">
+                <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                    {{ rule ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ rules: Array });
+
+function destroy(id) {
+    if (confirm('Delete this escalation rule?')) {
+        router.delete(route('escalated.admin.escalation-rules.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Escalation Rules">
+        <div class="mb-4 flex justify-end">
+            <Link :href="route('escalated.admin.escalation-rules.create')" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                Add Rule
+            </Link>
+        </div>
+        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Order</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Trigger</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
+                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                    <tr v-for="rule in rules" :key="rule.id">
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ rule.order }}</td>
+                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ rule.name }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ rule.trigger_type }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span :class="rule.is_active ? 'text-green-600' : 'text-gray-400'">{{ rule.is_active ? 'Yes' : 'No' }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link :href="route('escalated.admin.escalation-rules.edit', rule.id)" class="text-indigo-600 hover:text-indigo-900">Edit</Link>
+                            <button @click="destroy(rule.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Reports.vue

@@ -0,0 +1,52 @@
+<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 py-1.5 text-sm', period_days === d ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50']">
+                Last {{ d }} days
+            </button>
+        </div>
+        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
+            <StatsCard title="Total Tickets" :value="total_tickets" color="indigo" />
+            <StatsCard title="Resolved" :value="resolved_tickets" color="green" />
+            <StatsCard title="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
+            <StatsCard title="SLA Breaches" :value="sla_breach_count" color="red" />
+        </div>
+        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div class="rounded-lg border border-gray-200 bg-white p-4">
+                <h3 class="mb-3 text-sm font-medium text-gray-700">By Status</h3>
+                <div v-for="(count, status) in by_status" :key="status" class="mb-2 flex items-center justify-between">
+                    <span class="text-sm capitalize text-gray-600">{{ status.replace('_', ' ') }}</span>
+                    <span class="text-sm font-medium text-gray-900">{{ count }}</span>
+                </div>
+            </div>
+            <div class="rounded-lg border border-gray-200 bg-white p-4">
+                <h3 class="mb-3 text-sm font-medium text-gray-700">By Priority</h3>
+                <div v-for="(count, priority) in by_priority" :key="priority" class="mb-2 flex items-center justify-between">
+                    <span class="text-sm capitalize text-gray-600">{{ priority }}</span>
+                    <span class="text-sm font-medium text-gray-900">{{ count }}</span>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/SlaPolicies/Form.vue

@@ -0,0 +1,74 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps({ policy: { type: Object, default: null }, priorities: Array });
+
+const form = useForm({
+    name: props.policy?.name || '',
+    description: props.policy?.description || '',
+    is_default: props.policy?.is_default ?? false,
+    first_response_hours: props.policy?.first_response_hours || {},
+    resolution_hours: props.policy?.resolution_hours || {},
+    business_hours_only: props.policy?.business_hours_only ?? false,
+    is_active: props.policy?.is_active ?? true,
+});
+
+function submit() {
+    if (props.policy) {
+        form.put(route('escalated.admin.sla-policies.update', props.policy.id));
+    } else {
+        form.post(route('escalated.admin.sla-policies.store'));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="policy ? 'Edit SLA Policy' : 'New SLA Policy'">
+        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Name</label>
+                <input v-model="form.name" type="text" required class="mt-1 w-full rounded-lg border-gray-300 shadow-sm" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea v-model="form.description" rows="2" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm"></textarea>
+            </div>
+            <div>
+                <h3 class="mb-2 text-sm font-medium text-gray-700">First Response Hours (by priority)</h3>
+                <div class="grid grid-cols-2 gap-2">
+                    <div v-for="p in priorities" :key="p">
+                        <label class="text-xs capitalize text-gray-500">{{ p }}</label>
+                        <input v-model.number="form.first_response_hours[p]" type="number" step="0.5" min="0" class="w-full rounded border-gray-300 text-sm" />
+                    </div>
+                </div>
+            </div>
+            <div>
+                <h3 class="mb-2 text-sm font-medium text-gray-700">Resolution Hours (by priority)</h3>
+                <div class="grid grid-cols-2 gap-2">
+                    <div v-for="p in priorities" :key="p">
+                        <label class="text-xs capitalize text-gray-500">{{ p }}</label>
+                        <input v-model.number="form.resolution_hours[p]" type="number" step="0.5" min="0" class="w-full rounded border-gray-300 text-sm" />
+                    </div>
+                </div>
+            </div>
+            <label class="flex items-center gap-2">
+                <input v-model="form.business_hours_only" type="checkbox" class="rounded border-gray-300" />
+                <span class="text-sm text-gray-700">Business hours only</span>
+            </label>
+            <label class="flex items-center gap-2">
+                <input v-model="form.is_default" type="checkbox" class="rounded border-gray-300" />
+                <span class="text-sm text-gray-700">Default policy</span>
+            </label>
+            <label class="flex items-center gap-2">
+                <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300" />
+                <span class="text-sm text-gray-700">Active</span>
+            </label>
+            <div class="flex justify-end">
+                <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                    {{ policy ? 'Update' : 'Create' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+defineProps({ policies: Array });
+
+function destroy(id) {
+    if (confirm('Delete this SLA policy?')) {
+        router.delete(route('escalated.admin.sla-policies.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="SLA Policies">
+        <div class="mb-4 flex justify-end">
+            <Link :href="route('escalated.admin.sla-policies.create')" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                Add Policy
+            </Link>
+        </div>
+        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Default</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Business Hours</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Tickets</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
+                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                    <tr v-for="policy in policies" :key="policy.id">
+                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ policy.name }}</td>
+                        <td class="px-4 py-3 text-sm">{{ policy.is_default ? 'Yes' : 'No' }}</td>
+                        <td class="px-4 py-3 text-sm">{{ policy.business_hours_only ? 'Yes' : 'No' }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ policy.tickets_count }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span :class="policy.is_active ? 'text-green-600' : 'text-gray-400'">{{ policy.is_active ? 'Yes' : 'No' }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <Link :href="route('escalated.admin.sla-policies.edit', policy.id)" class="text-indigo-600 hover:text-indigo-900">Edit</Link>
+                            <button @click="destroy(policy.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+defineProps({ tags: Array });
+
+const showForm = ref(false);
+const editingTag = ref(null);
+
+const form = useForm({ name: '', color: '#6B7280' });
+
+function createTag() {
+    form.post(route('escalated.admin.tags.store'), {
+        onSuccess: () => { form.reset(); showForm.value = false; },
+    });
+}
+
+function startEdit(tag) {
+    editingTag.value = tag.id;
+    form.name = tag.name;
+    form.color = tag.color;
+}
+
+function updateTag(id) {
+    form.put(route('escalated.admin.tags.update', id), {
+        onSuccess: () => { editingTag.value = null; form.reset(); },
+    });
+}
+
+function destroy(id) {
+    if (confirm('Delete this tag?')) {
+        router.delete(route('escalated.admin.tags.destroy', id));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Tags">
+        <div class="mb-4 flex justify-end">
+            <button @click="showForm = !showForm" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+                {{ showForm ? 'Cancel' : 'Add Tag' }}
+            </button>
+        </div>
+        <form v-if="showForm" @submit.prevent="createTag" class="mb-6 flex items-end gap-3 rounded-lg border border-gray-200 bg-white p-4">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Name</label>
+                <input v-model="form.name" type="text" required class="mt-1 rounded-lg border-gray-300 shadow-sm" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Color</label>
+                <input v-model="form.color" type="color" class="mt-1 h-10 w-16 rounded border-gray-300" />
+            </div>
+            <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Create</button>
+        </form>
+        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Color</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Tickets</th>
+                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                    <tr v-for="tag in tags" :key="tag.id">
+                        <td class="px-4 py-3"><span class="inline-block h-4 w-4 rounded-full" :style="{ backgroundColor: tag.color }"></span></td>
+                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ tag.name }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ tag.tickets_count }}</td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <button @click="startEdit(tag)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
+                            <button @click="destroy(tag.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/Dashboard.vue

@@ -0,0 +1,51 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatsCard from '../../components/StatsCard.vue';
+import TicketList from '../../components/TicketList.vue';
+
+defineProps({
+    stats: Object,
+    recentTickets: Array,
+});
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Dashboard">
+        <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
+            <StatsCard title="Open Tickets" :value="stats.open" color="indigo" />
+            <StatsCard title="My Assigned" :value="stats.my_assigned" color="indigo" />
+            <StatsCard title="Unassigned" :value="stats.unassigned" color="yellow" />
+            <StatsCard title="SLA Breached" :value="stats.sla_breached" color="red" />
+            <StatsCard title="Resolved Today" :value="stats.resolved_today" color="green" />
+        </div>
+        <h2 class="mb-4 text-lg font-semibold text-gray-900">Recent Tickets</h2>
+        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Reference</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Subject</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Requester</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Status</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Priority</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Assignee</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200">
+                    <tr v-for="ticket in recentTickets" :key="ticket.id" class="hover:bg-gray-50">
+                        <td class="px-4 py-3 text-sm">
+                            <a :href="route('escalated.agent.tickets.show', ticket.reference)" class="font-medium text-indigo-600 hover:text-indigo-900">{{ ticket.reference }}</a>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-900">{{ ticket.subject }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ ticket.requester?.name }}</td>
+                        <td class="px-4 py-3 text-sm">
+                            <span :class="['inline-flex rounded-full px-2 py-0.5 text-xs font-medium', { 'bg-blue-100 text-blue-800': ticket.status === 'open', 'bg-green-100 text-green-800': ticket.status === 'resolved', 'bg-red-100 text-red-800': ticket.status === 'escalated' }]">{{ ticket.status }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ ticket.priority }}</td>
+                        <td class="px-4 py-3 text-sm text-gray-500">{{ ticket.assignee?.name || 'Unassigned' }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/TicketIndex.vue

@@ -0,0 +1,21 @@
+<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,
+});
+</script>
+
+<template>
+    <EscalatedLayout title="Ticket Queue">
+        <div class="mb-6">
+            <TicketFilters :filters="filters" :route="route('escalated.agent.tickets.index')" :departments="departments" :tags="tags" show-assignee />
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.agent.tickets" show-assignee />
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/TicketShow.vue

@@ -0,0 +1,108 @@
+<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>