@escalated-dev/escalated 0.2.1 → 0.3.5

package/src/components/PriorityBadge.vue

@@ -1,9 +1,21 @@
 <script setup>
+import { inject, computed } from 'vue';
+
 const props = defineProps({
     priority: { type: String, required: true },
 });
 
-const priorityConfig = {
+const escDark = inject('esc-dark', computed(() => false));
+
+const darkConfig = {
+    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
+    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
+};
+
+const lightConfig = {
     low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
     medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
     high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
@@ -11,7 +23,13 @@ const priorityConfig = {
     critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
 };
 
-const config = priorityConfig[props.priority] || { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+const config = computed(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fallback = escDark.value
+        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
+        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+    return map[props.priority] || fallback;
+});
 </script>
 
 <template>

package/src/components/ReplyComposer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, inject } from 'vue';
 import { router } from '@inertiajs/vue3';
 import FileDropzone from './FileDropzone.vue';
 
@@ -12,6 +12,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['submit']);
+const escDark = inject('esc-dark', computed(() => false));
 
 const body = ref('');
 const isNote = ref(false);
@@ -62,7 +63,55 @@ const buttonLabel = computed(() => {
 </script>
 
 <template>
-    <div class="rounded-lg border border-gray-200 bg-white p-4">
+    <!-- Dark mode -->
+    <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <div v-if="allowNotes" class="mb-3 flex gap-2">
+            <button @click="isNote = false"
+                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', !isNote ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+                Reply
+            </button>
+            <button @click="isNote = true"
+                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', isNote ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+                Internal Note
+            </button>
+        </div>
+
+        <div v-if="isNote" class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20">
+            This note is only visible to agents.
+        </div>
+
+        <textarea v-model="body" rows="4" :placeholder="placeholder"
+                  class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
+
+        <FileDropzone @files="handleFiles" class="mt-2" />
+
+        <div v-if="files.length" class="mt-2 space-y-1">
+            <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-400">
+                <span>{{ file.name }}</span>
+                <button @click="removeFile(i)" class="text-rose-400 hover:text-rose-300">&times;</button>
+            </div>
+        </div>
+
+        <div class="mt-3 flex items-center justify-between">
+            <div v-if="cannedResponses.length">
+                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
+                        class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400">
+                    <option value="">Canned responses...</option>
+                    <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
+                </select>
+            </div>
+            <div v-else></div>
+            <button @click="submit" :disabled="!body.trim() || submitting"
+                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                             isNote ? 'bg-amber-500 hover:bg-amber-400' : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
+                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-40']">
+                {{ buttonLabel }}
+            </button>
+        </div>
+    </div>
+
+    <!-- Light mode -->
+    <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
         <div v-if="allowNotes" class="mb-3 flex gap-2">
             <button @click="isNote = false"
                     :class="['rounded-md px-3 py-1 text-sm font-medium', !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100']">
@@ -91,7 +140,7 @@ const buttonLabel = computed(() => {
         </div>
 
         <div class="mt-3 flex items-center justify-between">
-            <div v-if="cannedResponses.length" class="relative">
+            <div v-if="cannedResponses.length">
                 <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
                         class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
                     <option value="">Canned responses...</option>

package/src/components/ReplyThread.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { inject, computed } from 'vue';
 import AttachmentList from './AttachmentList.vue';
 
 defineProps({
@@ -6,6 +7,8 @@ defineProps({
     currentUserId: { type: [Number, String], default: null },
 });
 
+const escDark = inject('esc-dark', computed(() => false));
+
 function formatDate(date) {
     return new Date(date).toLocaleString();
 }
@@ -14,17 +17,22 @@ function formatDate(date) {
 <template>
     <div class="space-y-4">
         <div v-for="reply in replies" :key="reply.id"
-             :class="['rounded-lg border p-4', reply.is_internal_note ? 'border-yellow-200 bg-yellow-50' : 'border-gray-200 bg-white']">
+             :class="['rounded-xl border p-4', escDark
+                 ? (reply.is_internal_note ? 'border-amber-500/20 bg-amber-500/5' : 'border-white/[0.06] bg-neutral-900/60')
+                 : (reply.is_internal_note ? 'border-yellow-200 bg-yellow-50' : 'border-gray-200 bg-white')]">
             <div class="mb-2 flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                    <span class="font-medium text-gray-900">{{ reply.author?.name || 'Unknown' }}</span>
-                    <span v-if="reply.is_internal_note" class="rounded bg-yellow-200 px-1.5 py-0.5 text-xs font-medium text-yellow-800">Internal Note</span>
+                    <span :class="['font-medium', escDark ? 'text-gray-200' : 'text-gray-900']">{{ reply.author?.name || 'Unknown' }}</span>
+                    <span v-if="reply.is_internal_note"
+                          :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-amber-500/15 text-amber-400' : 'bg-yellow-200 text-yellow-800']">
+                        Internal Note
+                    </span>
                 </div>
-                <span class="text-xs text-gray-500">{{ formatDate(reply.created_at) }}</span>
+                <span :class="['text-xs', escDark ? 'text-gray-500' : 'text-gray-500']">{{ formatDate(reply.created_at) }}</span>
             </div>
-            <div class="prose prose-sm max-w-none text-gray-700" v-html="reply.body"></div>
+            <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-gray-300' : 'text-gray-700']" v-html="reply.body"></div>
             <AttachmentList v-if="reply.attachments?.length" :attachments="reply.attachments" class="mt-3" />
         </div>
-        <div v-if="!replies?.length" class="py-8 text-center text-sm text-gray-500">No replies yet.</div>
+        <div v-if="!replies?.length" :class="['py-8 text-center text-sm', escDark ? 'text-gray-500' : 'text-gray-500']">No replies yet.</div>
     </div>
 </template>

package/src/components/SlaTimer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 
 const props = defineProps({
     dueAt: { type: String, default: null },
@@ -7,6 +7,8 @@ const props = defineProps({
     label: { type: String, default: 'Due' },
 });
 
+const dark = inject('esc-dark', computed(() => false));
+
 const timeRemaining = computed(() => {
     if (!props.dueAt) return null;
     const now = new Date();
@@ -24,19 +26,23 @@ const timeRemaining = computed(() => {
 });
 
 const statusClass = computed(() => {
-    if (props.breached || timeRemaining.value?.overdue) return 'border-red-300 bg-red-50 text-red-700';
+    if (props.breached || timeRemaining.value?.overdue) {
+        return dark ? 'border-rose-500/20 bg-rose-500/10 text-rose-400' : 'border-red-300 bg-red-50 text-red-700';
+    }
     const due = new Date(props.dueAt);
     const hoursLeft = (due - new Date()) / 3600000;
-    if (hoursLeft < 2) return 'border-yellow-300 bg-yellow-50 text-yellow-700';
-    return 'border-green-300 bg-green-50 text-green-700';
+    if (hoursLeft < 2) {
+        return dark ? 'border-amber-500/20 bg-amber-500/10 text-amber-400' : 'border-yellow-300 bg-yellow-50 text-yellow-700';
+    }
+    return dark ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400' : 'border-green-300 bg-green-50 text-green-700';
 });
 </script>
 
 <template>
-    <div v-if="dueAt" :class="['rounded-md border px-3 py-2 text-sm', statusClass]">
+    <div v-if="dueAt" :class="['rounded-lg border px-3 py-2 text-sm', statusClass]">
         <div class="font-medium">{{ label }}</div>
         <div class="text-xs">
-            <span v-if="breached">⚠ SLA Breached</span>
+            <span v-if="breached">SLA Breached</span>
             <span v-else>{{ timeRemaining?.text }}</span>
         </div>
     </div>

package/src/components/StatsCard.vue

@@ -1,25 +1,45 @@
 <script setup>
-defineProps({
-    label: { type: String, required: true },
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    label: { type: String, default: '' },
+    title: { type: String, default: '' },
     value: { type: [Number, String], required: true },
     trend: { type: String, default: null },
     color: { type: String, default: 'blue' },
 });
 
-const colorMap = {
+const escDark = inject('esc-dark', computed(() => false));
+const displayLabel = computed(() => props.label || props.title || '');
+
+const lightColorMap = {
     blue: 'bg-blue-50 text-blue-700',
+    indigo: 'bg-indigo-50 text-indigo-700',
     green: 'bg-green-50 text-green-700',
     red: 'bg-red-50 text-red-700',
     yellow: 'bg-yellow-50 text-yellow-700',
     gray: 'bg-gray-50 text-gray-700',
+    cyan: 'bg-cyan-50 text-cyan-700',
+    violet: 'bg-violet-50 text-violet-700',
+    amber: 'bg-amber-50 text-amber-700',
 };
 </script>
 
 <template>
-    <div class="rounded-lg border border-gray-200 bg-white p-4">
-        <div class="text-sm text-gray-500">{{ label }}</div>
+    <!-- Dark mode -->
+    <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+        <div class="text-[13px] font-medium text-neutral-500">{{ displayLabel }}</div>
+        <div class="mt-2 text-2xl font-bold tracking-tight text-white">{{ value }}</div>
+        <div v-if="trend" class="mt-2 inline-flex items-center rounded-full bg-white/[0.06] px-2 py-0.5 text-xs font-medium text-neutral-400">
+            {{ trend }}
+        </div>
+    </div>
+
+    <!-- Light mode -->
+    <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
+        <div class="text-sm text-gray-500">{{ displayLabel }}</div>
         <div class="mt-1 text-2xl font-bold text-gray-900">{{ value }}</div>
-        <div v-if="trend" :class="['mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium', colorMap[color] || colorMap.blue]">
+        <div v-if="trend" :class="['mt-1 inline-block rounded-full px-2 py-0.5 text-xs font-medium', lightColorMap[color] || lightColorMap.blue]">
             {{ trend }}
         </div>
     </div>

package/src/components/StatusBadge.vue

@@ -1,9 +1,24 @@
 <script setup>
+import { inject, computed } from 'vue';
+
 const props = defineProps({
     status: { type: String, required: true },
 });
 
-const statusConfig = {
+const escDark = inject('esc-dark', computed(() => false));
+
+const darkConfig = {
+    open: { label: 'Open', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    in_progress: { label: 'In Progress', color: 'bg-violet-500/10 text-violet-400 ring-1 ring-violet-500/20' },
+    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
+    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    escalated: { label: 'Escalated', color: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20' },
+    resolved: { label: 'Resolved', color: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' },
+    closed: { label: 'Closed', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    reopened: { label: 'Reopened', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+};
+
+const lightConfig = {
     open: { label: 'Open', color: 'bg-blue-100 text-blue-800' },
     in_progress: { label: 'In Progress', color: 'bg-purple-100 text-purple-800' },
     waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-yellow-100 text-yellow-800' },
@@ -14,7 +29,14 @@ const statusConfig = {
     reopened: { label: 'Reopened', color: 'bg-blue-100 text-blue-800' },
 };
 
-const config = statusConfig[props.status] || { label: props.status, color: 'bg-gray-100 text-gray-800' };
+const fallback = { label: props.status, color: 'bg-gray-100 text-gray-800' };
+const darkFallback = { label: props.status, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' };
+
+const config = computed(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fb = escDark.value ? darkFallback : fallback;
+    return map[props.status] || fb;
+});
 </script>
 
 <template>

package/src/components/TagSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 const props = defineProps({
     tags: { type: Array, required: true },
@@ -7,6 +7,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue']);
+const dark = inject('esc-dark', computed(() => false));
 
 const search = ref('');
 
@@ -34,13 +35,16 @@ function isSelected(tagId) {
 
 <template>
     <div>
-        <label class="mb-1 block text-xs font-medium text-gray-600">Tags</label>
+        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Tags</label>
         <input v-model="search" type="text" placeholder="Filter tags..."
-               class="mb-2 w-full rounded-md border border-gray-300 px-2 py-1 text-xs focus:border-blue-500 focus:outline-none" />
+               :class="['mb-2 w-full rounded-md border px-2 py-1 text-xs focus:outline-none',
+                        dark ? '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 focus:border-blue-500']" />
         <div class="flex flex-wrap gap-1">
             <button v-for="tag in filteredTags" :key="tag.id" @click="toggle(tag.id)"
                     :class="['rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
-                             isSelected(tag.id) ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300' : 'bg-gray-100 text-gray-600 hover:bg-gray-200']"
+                             dark
+                                 ? (isSelected(tag.id) ? 'bg-white/[0.12] text-white ring-1 ring-white/20' : 'bg-white/[0.04] text-neutral-500 hover:bg-white/[0.08]')
+                                 : (isSelected(tag.id) ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300' : 'bg-gray-100 text-gray-600 hover:bg-gray-200')]"
                     :style="tag.color ? { backgroundColor: isSelected(tag.id) ? tag.color + '33' : undefined, color: isSelected(tag.id) ? tag.color : undefined } : {}">
                 {{ tag.name }}
             </button>

package/src/components/TicketFilters.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from 'vue';
+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'] },
@@ -10,6 +10,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue']);
+const escDark = inject('esc-dark', computed(() => false));
 
 const filters = reactive({
     status: props.modelValue.status || '',
@@ -22,29 +23,34 @@ const filters = reactive({
 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="rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none" />
-
-        <select v-model="filters.status" class="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+        <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="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+        <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="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+        <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="rounded-md border border-gray-300 px-2 py-1.5 text-sm">
+        <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>

package/src/components/TicketList.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { inject, computed } from 'vue';
 import StatusBadge from './StatusBadge.vue';
 import PriorityBadge from './PriorityBadge.vue';
 import { Link } from '@inertiajs/vue3';
@@ -8,10 +9,52 @@ defineProps({
     routePrefix: { type: String, default: 'escalated.customer.tickets' },
     showAssignee: { type: Boolean, default: false },
 });
+
+const escDark = inject('esc-dark', computed(() => false));
 </script>
 
 <template>
-    <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
+    <!-- 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>
@@ -26,7 +69,7 @@ defineProps({
             <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">
+                        <Link :href="route(`${routePrefix}.show`, ticket.reference)" class="text-indigo-600 hover:text-indigo-900">
                             {{ ticket.reference }}
                         </Link>
                     </td>

package/src/components/TicketSidebar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { inject, computed } from 'vue';
 import StatusBadge from './StatusBadge.vue';
 import PriorityBadge from './PriorityBadge.vue';
 import SlaTimer from './SlaTimer.vue';
@@ -15,32 +16,38 @@ defineProps({
 });
 
 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'
+);
 </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>
+        <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="text-gray-500">Status</dt>
+                    <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="text-gray-500">Priority</dt>
+                    <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="text-gray-500">Reference</dt>
-                    <dd class="font-mono text-xs">{{ ticket.reference }}</dd>
+                    <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="text-gray-500">Department</dt>
-                    <dd>{{ ticket.department.name }}</dd>
+                    <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="text-gray-500">Created</dt>
-                    <dd>{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
+                    <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>
@@ -52,18 +59,18 @@ const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status'])
                       :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">
+        <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="rounded-lg border border-gray-200 bg-white p-4">
+        <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="rounded-lg border border-gray-200 bg-white p-4">
-            <h3 class="mb-3 text-sm font-semibold text-gray-900">Activity</h3>
+        <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>

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>