@escalated-dev/escalated 0.2.1 → 0.4.0

package/src/components/TicketList.vue

@@ -1,51 +1,193 @@
-<script setup>
-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 },
-});
-</script>
-
-<template>
-    <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">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(`.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>

package/src/components/TicketSidebar.vue

@@ -1,70 +1,99 @@
-<script setup>
-import StatusBadge from './StatusBadge.vue';
-import PriorityBadge from './PriorityBadge.vue';
-import SlaTimer from './SlaTimer.vue';
-import AssigneeSelect from './AssigneeSelect.vue';
-import TagSelect from './TagSelect.vue';
-import ActivityTimeline from './ActivityTimeline.vue';
-
-defineProps({
-    ticket: { type: Object, required: true },
-    agents: { type: Array, default: () => [] },
-    tags: { type: Array, default: () => [] },
-    activities: { type: Array, default: () => [] },
-    editable: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status']);
-</script>
-
-<template>
-    <aside class="space-y-4">
-        <div class="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 class="mb-3 text-sm font-semibold text-gray-900">Details</h3>
-            <dl class="space-y-2 text-sm">
-                <div class="flex justify-between">
-                    <dt class="text-gray-500">Status</dt>
-                    <dd><StatusBadge :status="ticket.status" /></dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt class="text-gray-500">Priority</dt>
-                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt class="text-gray-500">Reference</dt>
-                    <dd class="font-mono text-xs">{{ ticket.reference }}</dd>
-                </div>
-                <div v-if="ticket.department" class="flex justify-between">
-                    <dt class="text-gray-500">Department</dt>
-                    <dd>{{ ticket.department.name }}</dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt class="text-gray-500">Created</dt>
-                    <dd>{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
-                </div>
-            </dl>
-        </div>
-
-        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
-            <SlaTimer v-if="ticket.first_response_due_at" :due-at="ticket.first_response_due_at"
-                      :breached="ticket.sla_first_response_breached" label="First Response" />
-            <SlaTimer v-if="ticket.resolution_due_at" :due-at="ticket.resolution_due_at"
-                      :breached="ticket.sla_resolution_breached" label="Resolution" />
-        </div>
-
-        <div v-if="editable && agents.length" class="rounded-lg border border-gray-200 bg-white p-4">
-            <AssigneeSelect :agents="agents" :model-value="ticket.assigned_to"
-                            @update:model-value="emit('assign', $event)" />
-        </div>
-
-        <div v-if="editable && tags.length" class="rounded-lg border border-gray-200 bg-white p-4">
-            <TagSelect :tags="tags" :model-value="(ticket.tags || []).map(t => t.id)"
-                       @update:model-value="emit('tags', $event)" />
-        </div>
-
-        <div v-if="activities.length" class="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 class="mb-3 text-sm font-semibold text-gray-900">Activity</h3>
-            <ActivityTimeline :activities="activities" />
-        </div>
-    </aside>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+import StatusBadge from './StatusBadge.vue';
+import PriorityBadge from './PriorityBadge.vue';
+import SlaTimer from './SlaTimer.vue';
+import AssigneeSelect from './AssigneeSelect.vue';
+import TagSelect from './TagSelect.vue';
+import ActivityTimeline from './ActivityTimeline.vue';
+
+defineProps({
+    ticket: { type: Object, required: true },
+    agents: { type: Array, default: () => [] },
+    tags: { type: Array, default: () => [] },
+    activities: { type: Array, default: () => [] },
+    editable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status']);
+const escDark = inject('esc-dark', computed(() => false));
+
+const cardClass = computed(() => escDark.value
+    ? 'rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4'
+    : 'rounded-lg border border-gray-200 bg-white p-4'
+);
+
+function renderStars(rating) {
+    return Array.from({ length: 5 }, (_, i) => i < rating ? 'filled' : 'empty');
+}
+</script>
+
+<template>
+    <aside class="space-y-4">
+        <div :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Details</h3>
+            <dl class="space-y-2 text-sm">
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Status</dt>
+                    <dd><StatusBadge :status="ticket.status" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Priority</dt>
+                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Reference</dt>
+                    <dd :class="['font-mono text-xs', escDark ? 'text-white' : '']">{{ ticket.reference }}</dd>
+                </div>
+                <div v-if="ticket.department" class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Department</dt>
+                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ ticket.department.name }}</dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Created</dt>
+                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
+                </div>
+            </dl>
+        </div>
+
+        <!-- Satisfaction Rating (read-only) -->
+        <div v-if="ticket.satisfaction_rating" :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Customer Satisfaction</h3>
+            <div class="flex items-center gap-1">
+                <svg v-for="(star, i) in renderStars(ticket.satisfaction_rating.rating)" :key="i"
+                     class="h-5 w-5" :class="star === 'filled' ? 'text-amber-400' : (escDark ? 'text-neutral-700' : 'text-gray-300')"
+                     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>
+                <span :class="['ml-2 text-sm font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                    {{ ticket.satisfaction_rating.rating }}/5
+                </span>
+            </div>
+            <p v-if="ticket.satisfaction_rating.comment" :class="['mt-2 text-xs italic', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                "{{ ticket.satisfaction_rating.comment }}"
+            </p>
+        </div>
+
+        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
+            <SlaTimer v-if="ticket.first_response_due_at" :due-at="ticket.first_response_due_at"
+                      :breached="ticket.sla_first_response_breached" label="First Response" />
+            <SlaTimer v-if="ticket.resolution_due_at" :due-at="ticket.resolution_due_at"
+                      :breached="ticket.sla_resolution_breached" label="Resolution" />
+        </div>
+
+        <div v-if="editable && agents.length" :class="cardClass">
+            <AssigneeSelect :agents="agents" :model-value="ticket.assigned_to"
+                            @update:model-value="emit('assign', $event)" />
+        </div>
+
+        <div v-if="editable && tags.length" :class="cardClass">
+            <TagSelect :tags="tags" :model-value="(ticket.tags || []).map(t => t.id)"
+                       @update:model-value="emit('tags', $event)" />
+        </div>
+
+        <div v-if="activities.length" :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Activity</h3>
+            <ActivityTimeline :activities="activities" />
+        </div>
+    </aside>
+</template>

package/src/composables/useKeyboardShortcuts.js

@@ -0,0 +1,46 @@
+import { onMounted, onUnmounted, unref } from 'vue';
+
+/**
+ * Composable for registering keyboard shortcuts.
+ *
+ * @param {Object} shortcuts - Map of key to handler function, e.g. { 'r': () => {}, 'n': () => {} }
+ * @param {Object} options - Optional configuration
+ * @param {import('vue').Ref<boolean>} options.enabled - Ref controlling whether shortcuts are active (default: true)
+ */
+export function useKeyboardShortcuts(shortcuts, options = {}) {
+    const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+
+    function handleKeydown(event) {
+        // Check if shortcuts are enabled
+        if (options.enabled !== undefined && !unref(options.enabled)) {
+            return;
+        }
+
+        // Skip when focus is inside form elements or contenteditable
+        const target = event.target;
+        if (target && (ignoredTags.has(target.tagName) || target.isContentEditable)) {
+            return;
+        }
+
+        // Skip if modifier keys are held (allow shift for ? and similar)
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+
+        const key = event.key;
+        const handler = shortcuts[key];
+
+        if (handler && typeof handler === 'function') {
+            event.preventDefault();
+            handler(event);
+        }
+    }
+
+    onMounted(() => {
+        document.addEventListener('keydown', handleKeydown);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener('keydown', handleKeydown);
+    });
+}

package/src/index.js

@@ -5,11 +5,19 @@ export { EscalatedPlugin } from './plugin'
 export { default as ActivityTimeline } from './components/ActivityTimeline.vue'
 export { default as AssigneeSelect } from './components/AssigneeSelect.vue'
 export { default as AttachmentList } from './components/AttachmentList.vue'
+export { default as BulkActionBar } from './components/BulkActionBar.vue'
 export { default as EscalatedLayout } from './components/EscalatedLayout.vue'
 export { default as FileDropzone } from './components/FileDropzone.vue'
+export { default as FollowButton } from './components/FollowButton.vue'
+export { default as KeyboardShortcutHelp } from './components/KeyboardShortcutHelp.vue'
+export { default as MacroDropdown } from './components/MacroDropdown.vue'
+export { default as PinnedNotes } from './components/PinnedNotes.vue'
+export { default as PresenceIndicator } from './components/PresenceIndicator.vue'
 export { default as PriorityBadge } from './components/PriorityBadge.vue'
+export { default as QuickFilters } from './components/QuickFilters.vue'
 export { default as ReplyComposer } from './components/ReplyComposer.vue'
 export { default as ReplyThread } from './components/ReplyThread.vue'
+export { default as SatisfactionRating } from './components/SatisfactionRating.vue'
 export { default as SlaTimer } from './components/SlaTimer.vue'
 export { default as StatsCard } from './components/StatsCard.vue'
 export { default as StatusBadge } from './components/StatusBadge.vue'
@@ -17,3 +25,6 @@ export { default as TagSelect } from './components/TagSelect.vue'
 export { default as TicketFilters } from './components/TicketFilters.vue'
 export { default as TicketList } from './components/TicketList.vue'
 export { default as TicketSidebar } from './components/TicketSidebar.vue'
+
+// Composables
+export { useKeyboardShortcuts } from './composables/useKeyboardShortcuts'

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

@@ -24,34 +24,46 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="Canned Responses">
         <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">
+            <button @click="showForm = !showForm"
+                    :class="showForm
+                        ? 'rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]'
+                        : 'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400'">
                 {{ showForm ? 'Cancel' : 'Add Response' }}
             </button>
         </div>
-        <form v-if="showForm" @submit.prevent="create" class="mb-6 space-y-3 rounded-lg border border-gray-200 bg-white p-4">
-            <input v-model="form.title" type="text" placeholder="Title" required class="w-full rounded-lg border-gray-300 shadow-sm" />
-            <textarea v-model="form.body" rows="4" placeholder="Response body..." required class="w-full rounded-lg border-gray-300 shadow-sm"></textarea>
-            <div class="flex gap-3">
-                <input v-model="form.category" type="text" placeholder="Category (optional)" class="rounded-lg border-gray-300 shadow-sm" />
+        <form v-if="showForm" @submit.prevent="create" class="mb-6 space-y-3 rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+            <input v-model="form.title" type="text" placeholder="Title" required
+                   class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
+            <textarea v-model="form.body" rows="4" placeholder="Response body..." required
+                      class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
+            <div class="flex items-center gap-3">
+                <input v-model="form.category" type="text" placeholder="Category (optional)"
+                       class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
                 <label class="flex items-center gap-2">
-                    <input v-model="form.is_shared" type="checkbox" class="rounded border-gray-300" />
-                    <span class="text-sm text-gray-700">Shared</span>
+                    <input v-model="form.is_shared" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
+                    <span class="text-sm text-neutral-300">Shared</span>
                 </label>
-                <button type="submit" :disabled="form.processing" class="ml-auto rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Create</button>
+                <button type="submit" :disabled="form.processing"
+                        class="ml-auto rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
+                    Create
+                </button>
             </div>
         </form>
         <div class="space-y-3">
-            <div v-for="resp in responses" :key="resp.id" class="rounded-lg border border-gray-200 bg-white p-4">
+            <div v-if="!responses?.length" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 px-4 py-12 text-center">
+                <svg class="mx-auto mb-3 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="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
+                <p class="text-sm text-neutral-500">No canned responses yet</p>
+                <p class="mt-1 text-xs text-neutral-600">Create reusable templates for common replies</p>
+            </div>
+            <div v-for="resp in responses" :key="resp.id" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4 transition-colors hover:bg-gray-900/80">
                 <div class="mb-2 flex items-center justify-between">
-                    <div>
-                        <span class="font-medium text-gray-900">{{ resp.title }}</span>
-                        <span v-if="resp.category" class="ml-2 rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{{ resp.category }}</span>
-                    </div>
-                    <div>
-                        <button @click="destroy(resp.id)" class="text-sm text-red-600 hover:text-red-900">Delete</button>
+                    <div class="flex items-center gap-2">
+                        <span class="font-medium text-neutral-200">{{ resp.title }}</span>
+                        <span v-if="resp.category" class="rounded-md bg-white/[0.06] px-2 py-0.5 text-xs text-neutral-400 ring-1 ring-white/[0.06]">{{ resp.category }}</span>
                     </div>
+                    <button @click="destroy(resp.id)" class="text-sm text-rose-400 hover:text-rose-300">Delete</button>
                 </div>
-                <p class="text-sm text-gray-600">{{ resp.body }}</p>
+                <p class="text-sm text-neutral-400">{{ resp.body }}</p>
             </div>
         </div>
     </EscalatedLayout>

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

@@ -22,26 +22,27 @@ function submit() {
 
 <template>
     <EscalatedLayout :title="department ? 'Edit Department' : 'New Department'">
-        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-5 rounded-xl border border-white/[0.06] bg-neutral-900/60 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 v-if="form.errors.name" class="mt-1 text-sm text-red-600">{{ form.errors.name }}</div>
+                <label class="block text-sm font-medium text-neutral-300">Name</label>
+                <input v-model="form.name" type="text" required class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
+                <div v-if="form.errors.name" class="mt-1 text-sm text-rose-400">{{ form.errors.name }}</div>
             </div>
             <div>
-                <label class="block text-sm font-medium text-gray-700">Slug</label>
-                <input v-model="form.slug" type="text" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm" placeholder="Auto-generated if empty" />
+                <label class="block text-sm font-medium text-neutral-300">Slug</label>
+                <input v-model="form.slug" type="text" placeholder="Auto-generated if empty" class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
             </div>
             <div>
-                <label class="block text-sm font-medium text-gray-700">Description</label>
-                <textarea v-model="form.description" rows="3" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm"></textarea>
+                <label class="block text-sm font-medium text-neutral-300">Description</label>
+                <textarea v-model="form.description" rows="3" class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
             </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>
+                <input v-model="form.is_active" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
+                <span class="text-sm text-neutral-300">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">
+                <button type="submit" :disabled="form.processing"
+                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
                     {{ department ? 'Update' : 'Create' }}
                 </button>
             </div>