@escalated-dev/escalated 0.3.5 → 0.4.0

package/src/components/SatisfactionRating.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    existingRating: { type: Object, default: null },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+const hoveredStar = ref(0);
+const selectedRating = ref(props.existingRating?.rating || 0);
+const comment = ref(props.existingRating?.comment || '');
+const processing = ref(false);
+const submitted = ref(false);
+
+const isReadOnly = computed(() => !!props.existingRating);
+
+const displayRating = computed(() => {
+    if (isReadOnly.value) return props.existingRating.rating;
+    if (hoveredStar.value > 0) return hoveredStar.value;
+    return selectedRating.value;
+});
+
+const ratingLabels = ['', 'Terrible', 'Poor', 'Okay', 'Good', 'Excellent'];
+
+function selectStar(star) {
+    if (isReadOnly.value) return;
+    selectedRating.value = star;
+}
+
+function hoverStar(star) {
+    if (isReadOnly.value) return;
+    hoveredStar.value = star;
+}
+
+function leaveStars() {
+    hoveredStar.value = 0;
+}
+
+function submit() {
+    if (!selectedRating.value || processing.value || isReadOnly.value) return;
+    processing.value = true;
+    router.post(props.action, {
+        rating: selectedRating.value,
+        comment: comment.value || null,
+    }, {
+        preserveScroll: true,
+        onSuccess: () => {
+            submitted.value = true;
+        },
+        onFinish: () => {
+            processing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <div :class="['rounded-xl border p-5',
+                  escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white']">
+        <h3 :class="['text-sm font-semibold',
+                      escDark ? 'text-neutral-200' : 'text-gray-900']">
+            {{ isReadOnly ? 'Customer Rating' : 'How was your experience?' }}
+        </h3>
+
+        <!-- Stars -->
+        <div class="mt-3 flex items-center gap-1" @mouseleave="leaveStars">
+            <button v-for="star in 5" :key="star"
+                    @click="selectStar(star)"
+                    @mouseenter="hoverStar(star)"
+                    :disabled="isReadOnly"
+                    :class="['transition-transform', !isReadOnly && 'hover:scale-110', isReadOnly && 'cursor-default']">
+                <!-- Filled star -->
+                <svg v-if="star <= displayRating" class="h-7 w-7" viewBox="0 0 24 24" fill="currentColor"
+                     :class="escDark ? 'text-amber-400' : 'text-yellow-400'">
+                    <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" />
+                </svg>
+                <!-- Empty star -->
+                <svg v-else class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
+                     :class="escDark ? 'text-neutral-600' : 'text-gray-300'">
+                    <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>
+            </button>
+            <span v-if="displayRating > 0"
+                  :class="['ml-2 text-sm font-medium',
+                           escDark ? 'text-neutral-400' : 'text-gray-500']">
+                {{ ratingLabels[displayRating] }}
+            </span>
+        </div>
+
+        <!-- Comment -->
+        <div v-if="!isReadOnly" class="mt-4">
+            <textarea v-model="comment" rows="3"
+                      placeholder="Any additional feedback? (optional)"
+                      :class="['w-full rounded-lg border px-3 py-2 text-sm focus:outline-none',
+                               escDark
+                                   ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-1 focus:ring-white/10'
+                                   : 'border-gray-300 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500']">
+            </textarea>
+        </div>
+
+        <!-- Read-only comment display -->
+        <div v-if="isReadOnly && existingRating.comment" class="mt-3">
+            <p :class="['text-sm italic', escDark ? 'text-neutral-400' : 'text-gray-600']">
+                "{{ existingRating.comment }}"
+            </p>
+        </div>
+
+        <!-- Submit -->
+        <div v-if="!isReadOnly" class="mt-3">
+            <div v-if="submitted"
+                 :class="['rounded-lg px-3 py-2 text-sm font-medium',
+                          escDark ? 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' : 'bg-green-50 text-green-700']">
+                Thank you for your feedback!
+            </div>
+            <button v-else @click="submit"
+                    :disabled="!selectedRating || processing"
+                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                             escDark
+                                 ? 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400'
+                                 : 'bg-blue-600 hover:bg-blue-700',
+                             (!selectedRating || processing) && 'cursor-not-allowed opacity-40']">
+                Submit Rating
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/TicketFilters.vue

@@ -1,58 +1,69 @@
-<script setup>
-import { inject, computed, reactive, watch } from 'vue';
-
-const props = defineProps({
-    statuses: { type: Array, default: () => ['open', 'in_progress', 'waiting_on_customer', 'waiting_on_agent', 'escalated', 'resolved', 'closed'] },
-    priorities: { type: Array, default: () => ['low', 'medium', 'high', 'urgent', 'critical'] },
-    agents: { type: Array, default: () => [] },
-    departments: { type: Array, default: () => [] },
-    modelValue: { type: Object, default: () => ({}) },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const filters = reactive({
-    status: props.modelValue.status || '',
-    priority: props.modelValue.priority || '',
-    assigned_to: props.modelValue.assigned_to || '',
-    department_id: props.modelValue.department_id || '',
-    search: props.modelValue.search || '',
-});
-
-watch(filters, (val) => {
-    emit('update:modelValue', { ...val });
-}, { deep: true });
-
-const inputClass = computed(() => escDark.value
-    ? 'rounded-lg border border-white/10 bg-gray-900 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
-    : 'rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none'
-);
-
-const selectClass = computed(() => escDark.value
-    ? 'rounded-lg border border-white/10 bg-gray-900 px-2 py-1.5 text-sm text-gray-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
-    : 'rounded-md border border-gray-300 px-2 py-1.5 text-sm'
-);
-</script>
-
-<template>
-    <div class="flex flex-wrap items-center gap-3">
-        <input v-model="filters.search" type="text" placeholder="Search tickets..." :class="inputClass" />
-        <select v-model="filters.status" :class="selectClass">
-            <option value="">All Statuses</option>
-            <option v-for="s in statuses" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
-        </select>
-        <select v-model="filters.priority" :class="selectClass">
-            <option value="">All Priorities</option>
-            <option v-for="p in priorities" :key="p" :value="p">{{ p }}</option>
-        </select>
-        <select v-if="agents.length" v-model="filters.assigned_to" :class="selectClass">
-            <option value="">All Agents</option>
-            <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
-        </select>
-        <select v-if="departments.length" v-model="filters.department_id" :class="selectClass">
-            <option value="">All Departments</option>
-            <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
-        </select>
-    </div>
-</template>
+<script setup>
+import { inject, computed, reactive, watch } from 'vue';
+
+const props = defineProps({
+    statuses: { type: Array, default: () => ['open', 'in_progress', 'waiting_on_customer', 'waiting_on_agent', 'escalated', 'resolved', 'closed'] },
+    priorities: { type: Array, default: () => ['low', 'medium', 'high', 'urgent', 'critical'] },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+    modelValue: { type: Object, default: () => ({}) },
+    showFollowing: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const escDark = inject('esc-dark', computed(() => false));
+
+const filters = reactive({
+    status: props.modelValue.status || '',
+    priority: props.modelValue.priority || '',
+    assigned_to: props.modelValue.assigned_to || '',
+    department_id: props.modelValue.department_id || '',
+    search: props.modelValue.search || '',
+    following: props.modelValue.following || '',
+});
+
+watch(filters, (val) => {
+    emit('update:modelValue', { ...val });
+}, { deep: true });
+
+const inputClass = computed(() => escDark.value
+    ? 'rounded-lg border border-white/10 bg-gray-900 px-3 py-1.5 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
+    : 'rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none'
+);
+
+const selectClass = computed(() => escDark.value
+    ? 'rounded-lg border border-white/10 bg-gray-900 px-2 py-1.5 text-sm text-gray-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
+    : 'rounded-md border border-gray-300 px-2 py-1.5 text-sm'
+);
+
+const checkboxClass = computed(() => escDark.value
+    ? 'h-4 w-4 rounded border-white/20 bg-neutral-950 text-cyan-500 focus:ring-cyan-500/20'
+    : 'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500'
+);
+</script>
+
+<template>
+    <div class="flex flex-wrap items-center gap-3">
+        <input v-model="filters.search" type="text" placeholder="Search tickets..." :class="inputClass" />
+        <select v-model="filters.status" :class="selectClass">
+            <option value="">All Statuses</option>
+            <option v-for="s in statuses" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
+        </select>
+        <select v-model="filters.priority" :class="selectClass">
+            <option value="">All Priorities</option>
+            <option v-for="p in priorities" :key="p" :value="p">{{ p }}</option>
+        </select>
+        <select v-if="agents.length" v-model="filters.assigned_to" :class="selectClass">
+            <option value="">All Agents</option>
+            <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
+        </select>
+        <select v-if="departments.length" v-model="filters.department_id" :class="selectClass">
+            <option value="">All Departments</option>
+            <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+        </select>
+        <label v-if="showFollowing" class="flex items-center gap-2">
+            <input v-model="filters.following" type="checkbox" true-value="1" false-value="" :class="checkboxClass" />
+            <span :class="['text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">Following</span>
+        </label>
+    </div>
+</template>

package/src/components/TicketList.vue

@@ -1,94 +1,193 @@
-<script setup>
-import { inject, computed } from 'vue';
-import StatusBadge from './StatusBadge.vue';
-import PriorityBadge from './PriorityBadge.vue';
-import { Link } from '@inertiajs/vue3';
-
-defineProps({
-    tickets: { type: Object, required: true },
-    routePrefix: { type: String, default: 'escalated.customer.tickets' },
-    showAssignee: { type: Boolean, default: false },
-});
-
-const escDark = inject('esc-dark', computed(() => false));
-</script>
-
-<template>
-    <!-- Dark mode -->
-    <div v-if="escDark" class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
-        <table class="min-w-full divide-y divide-white/[0.06]">
-            <thead>
-                <tr class="bg-white/[0.02]">
-                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Reference</th>
-                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Subject</th>
-                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Status</th>
-                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Priority</th>
-                    <th v-if="showAssignee" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Assignee</th>
-                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Created</th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-white/[0.04]">
-                <tr v-for="ticket in tickets.data" :key="ticket.id" class="transition-colors hover:bg-white/[0.03]">
-                    <td class="whitespace-nowrap px-4 py-3 text-sm font-medium">
-                        <Link :href="route(`${routePrefix}.show`, ticket.reference)" class="text-white hover:text-neutral-300">
-                            {{ ticket.reference }}
-                        </Link>
-                    </td>
-                    <td class="px-4 py-3 text-sm text-neutral-300">{{ ticket.subject }}</td>
-                    <td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
-                    <td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
-                    <td v-if="showAssignee" class="px-4 py-3 text-sm text-neutral-500">
-                        {{ ticket.assignee?.name || 'Unassigned' }}
-                    </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-neutral-600">
-                        {{ new Date(ticket.created_at).toLocaleDateString() }}
-                    </td>
-                </tr>
-                <tr v-if="!tickets.data?.length">
-                    <td :colspan="showAssignee ? 6 : 5" class="px-4 py-8 text-center text-sm text-neutral-600">
-                        No tickets found.
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    <!-- Light mode -->
-    <div v-else 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">Status</th>
-                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Priority</th>
-                    <th v-if="showAssignee" class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Assignee</th>
-                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Created</th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-200">
-                <tr v-for="ticket in tickets.data" :key="ticket.id" class="hover:bg-gray-50">
-                    <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-900">
-                        <Link :href="route(`${routePrefix}.show`, ticket.reference)" class="text-indigo-600 hover:text-indigo-900">
-                            {{ ticket.reference }}
-                        </Link>
-                    </td>
-                    <td class="px-4 py-3 text-sm text-gray-900">{{ ticket.subject }}</td>
-                    <td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
-                    <td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
-                    <td v-if="showAssignee" class="px-4 py-3 text-sm text-gray-500">
-                        {{ ticket.assignee?.name || 'Unassigned' }}
-                    </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
-                        {{ new Date(ticket.created_at).toLocaleDateString() }}
-                    </td>
-                </tr>
-                <tr v-if="!tickets.data?.length">
-                    <td :colspan="showAssignee ? 6 : 5" class="px-4 py-8 text-center text-sm text-gray-500">
-                        No tickets found.
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
+<script setup>
+import { inject, computed, ref } from 'vue';
+import StatusBadge from './StatusBadge.vue';
+import PriorityBadge from './PriorityBadge.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    tickets: { type: Object, required: true },
+    routePrefix: { type: String, default: 'escalated.customer.tickets' },
+    showAssignee: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    selectedIds: { type: Array, default: () => [] },
+    assignRoute: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:selectedIds']);
+const escDark = inject('esc-dark', computed(() => false));
+
+const allSelected = computed(() => {
+    if (!props.tickets.data?.length) return false;
+    return props.tickets.data.every(t => props.selectedIds.includes(t.id));
+});
+
+function toggleAll() {
+    if (allSelected.value) {
+        emit('update:selectedIds', []);
+    } else {
+        emit('update:selectedIds', props.tickets.data.map(t => t.id));
+    }
+}
+
+function toggleOne(id) {
+    const ids = [...props.selectedIds];
+    const idx = ids.indexOf(id);
+    if (idx >= 0) ids.splice(idx, 1);
+    else ids.push(id);
+    emit('update:selectedIds', ids);
+}
+
+function timeAgo(date) {
+    if (!date) return '';
+    const diff = Date.now() - new Date(date).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+}
+
+function slaClass(ticket) {
+    if (ticket.sla_first_response_breached || ticket.sla_resolution_breached) return 'bg-rose-500';
+    if (ticket.first_response_due_at || ticket.resolution_due_at) {
+        const due = ticket.resolution_due_at || ticket.first_response_due_at;
+        const mins = (new Date(due) - Date.now()) / 60000;
+        if (mins < 30) return 'bg-amber-500';
+        return 'bg-emerald-500';
+    }
+    return '';
+}
+
+function truncate(str, len = 60) {
+    if (!str) return '';
+    return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+const colCount = computed(() => {
+    let count = 5; // ref, subject, status, priority, created
+    if (props.selectable) count++;
+    if (props.showAssignee) count++;
+    return count;
+});
+</script>
+
+<template>
+    <!-- Dark mode -->
+    <div v-if="escDark" class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
+        <table class="min-w-full divide-y divide-white/[0.06]">
+            <thead>
+                <tr class="bg-white/[0.02]">
+                    <th v-if="selectable" class="w-10 px-3 py-3">
+                        <input type="checkbox" :checked="allSelected" @change="toggleAll"
+                               class="h-4 w-4 rounded border-white/20 bg-neutral-950 text-cyan-500 focus:ring-cyan-500/20" />
+                    </th>
+                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Reference</th>
+                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Subject</th>
+                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Requester</th>
+                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Status</th>
+                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Priority</th>
+                    <th v-if="showAssignee" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Assignee</th>
+                    <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Last Reply</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-white/[0.04]">
+                <tr v-for="ticket in tickets.data" :key="ticket.id" class="group transition-colors hover:bg-white/[0.03]">
+                    <td v-if="selectable" class="w-10 px-3 py-3">
+                        <input type="checkbox" :checked="selectedIds.includes(ticket.id)" @change="toggleOne(ticket.id)"
+                               class="h-4 w-4 rounded border-white/20 bg-neutral-950 text-cyan-500 focus:ring-cyan-500/20" />
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-medium">
+                        <div class="flex items-center gap-2">
+                            <span v-if="slaClass(ticket)" :class="['h-2 w-2 shrink-0 rounded-full', slaClass(ticket)]"></span>
+                            <Link :href="route(`${routePrefix}.show`, ticket.reference)" class="text-white hover:text-neutral-300">
+                                {{ ticket.reference }}
+                            </Link>
+                        </div>
+                    </td>
+                    <td class="px-4 py-3 text-sm text-neutral-300">{{ truncate(ticket.subject) }}</td>
+                    <td class="px-4 py-3 text-sm text-neutral-400">
+                        <div>{{ ticket.requester?.name || ticket.requester_name || 'Unknown' }}</div>
+                        <div class="truncate text-xs text-neutral-600" style="max-width: 150px">{{ ticket.requester?.email || ticket.requester_email || '' }}</div>
+                    </td>
+                    <td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
+                    <td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
+                    <td v-if="showAssignee" class="px-4 py-3 text-sm text-neutral-500">
+                        {{ ticket.assignee?.name || 'Unassigned' }}
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-neutral-600">
+                        <template v-if="ticket.latest_reply || ticket.last_reply_at">
+                            <div class="text-neutral-400">{{ timeAgo(ticket.latest_reply?.created_at || ticket.last_reply_at) }}</div>
+                            <div class="text-xs text-neutral-600">{{ ticket.latest_reply?.author?.name || ticket.last_reply_author || '' }}</div>
+                        </template>
+                        <span v-else class="text-neutral-700">—</span>
+                    </td>
+                </tr>
+                <tr v-if="!tickets.data?.length">
+                    <td :colspan="colCount" class="px-4 py-8 text-center text-sm text-neutral-600">
+                        No tickets found.
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Light mode -->
+    <div v-else 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 v-if="selectable" class="w-10 px-3 py-3">
+                        <input type="checkbox" :checked="allSelected" @change="toggleAll"
+                               class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
+                    </th>
+                    <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 v-if="showAssignee" class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Assignee</th>
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Last Reply</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200">
+                <tr v-for="ticket in tickets.data" :key="ticket.id" class="group hover:bg-gray-50">
+                    <td v-if="selectable" class="w-10 px-3 py-3">
+                        <input type="checkbox" :checked="selectedIds.includes(ticket.id)" @change="toggleOne(ticket.id)"
+                               class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-900">
+                        <div class="flex items-center gap-2">
+                            <span v-if="slaClass(ticket)" :class="['h-2 w-2 shrink-0 rounded-full', slaClass(ticket)]"></span>
+                            <Link :href="route(`${routePrefix}.show`, ticket.reference)" class="text-indigo-600 hover:text-indigo-900">
+                                {{ ticket.reference }}
+                            </Link>
+                        </div>
+                    </td>
+                    <td class="px-4 py-3 text-sm text-gray-900">{{ truncate(ticket.subject) }}</td>
+                    <td class="px-4 py-3 text-sm text-gray-500">
+                        <div>{{ ticket.requester?.name || ticket.requester_name || 'Unknown' }}</div>
+                        <div class="truncate text-xs text-gray-400" style="max-width: 150px">{{ ticket.requester?.email || ticket.requester_email || '' }}</div>
+                    </td>
+                    <td class="px-4 py-3"><StatusBadge :status="ticket.status" /></td>
+                    <td class="px-4 py-3"><PriorityBadge :priority="ticket.priority" /></td>
+                    <td v-if="showAssignee" class="px-4 py-3 text-sm text-gray-500">
+                        {{ ticket.assignee?.name || 'Unassigned' }}
+                    </td>
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                        <template v-if="ticket.latest_reply || ticket.last_reply_at">
+                            <div>{{ timeAgo(ticket.latest_reply?.created_at || ticket.last_reply_at) }}</div>
+                            <div class="text-xs text-gray-400">{{ ticket.latest_reply?.author?.name || ticket.last_reply_author || '' }}</div>
+                        </template>
+                        <span v-else class="text-gray-400">—</span>
+                    </td>
+                </tr>
+                <tr v-if="!tickets.data?.length">
+                    <td :colspan="colCount" class="px-4 py-8 text-center text-sm text-gray-500">
+                        No tickets found.
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>