@escalated-dev/escalated 0.2.1 → 0.3.5

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

@@ -25,47 +25,48 @@ function submit() {
 
 <template>
     <EscalatedLayout :title="policy ? 'Edit SLA Policy' : 'New SLA Policy'">
-        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+        <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" />
+                <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>
             <div>
-                <label class="block text-sm font-medium text-gray-700">Description</label>
-                <textarea v-model="form.description" rows="2" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm"></textarea>
+                <label class="block text-sm font-medium text-neutral-300">Description</label>
+                <textarea v-model="form.description" rows="2" 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>
             <div>
-                <h3 class="mb-2 text-sm font-medium text-gray-700">First Response Hours (by priority)</h3>
-                <div class="grid grid-cols-2 gap-2">
+                <h3 class="mb-2 text-sm font-medium text-neutral-300">First Response Hours (by priority)</h3>
+                <div class="grid grid-cols-2 gap-3">
                     <div v-for="p in priorities" :key="p">
-                        <label class="text-xs capitalize text-gray-500">{{ p }}</label>
-                        <input v-model.number="form.first_response_hours[p]" type="number" step="0.5" min="0" class="w-full rounded border-gray-300 text-sm" />
+                        <label class="text-xs capitalize text-neutral-400">{{ p }}</label>
+                        <input v-model.number="form.first_response_hours[p]" type="number" step="0.5" min="0" class="w-full rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
                     </div>
                 </div>
             </div>
             <div>
-                <h3 class="mb-2 text-sm font-medium text-gray-700">Resolution Hours (by priority)</h3>
-                <div class="grid grid-cols-2 gap-2">
+                <h3 class="mb-2 text-sm font-medium text-neutral-300">Resolution Hours (by priority)</h3>
+                <div class="grid grid-cols-2 gap-3">
                     <div v-for="p in priorities" :key="p">
-                        <label class="text-xs capitalize text-gray-500">{{ p }}</label>
-                        <input v-model.number="form.resolution_hours[p]" type="number" step="0.5" min="0" class="w-full rounded border-gray-300 text-sm" />
+                        <label class="text-xs capitalize text-neutral-400">{{ p }}</label>
+                        <input v-model.number="form.resolution_hours[p]" type="number" step="0.5" min="0" class="w-full rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
                     </div>
                 </div>
             </div>
             <label class="flex items-center gap-2">
-                <input v-model="form.business_hours_only" type="checkbox" class="rounded border-gray-300" />
-                <span class="text-sm text-gray-700">Business hours only</span>
+                <input v-model="form.business_hours_only" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
+                <span class="text-sm text-neutral-300">Business hours only</span>
             </label>
             <label class="flex items-center gap-2">
-                <input v-model="form.is_default" type="checkbox" class="rounded border-gray-300" />
-                <span class="text-sm text-gray-700">Default policy</span>
+                <input v-model="form.is_default" type="checkbox" class="rounded border-white/20 bg-neutral-900 text-white focus:ring-white/10" />
+                <span class="text-sm text-neutral-300">Default policy</span>
             </label>
             <label class="flex items-center gap-2">
-                <input v-model="form.is_active" type="checkbox" class="rounded border-gray-300" />
-                <span class="text-sm text-gray-700">Active</span>
+                <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">
                     {{ policy ? 'Update' : 'Create' }}
                 </button>
             </div>

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

@@ -14,34 +14,42 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="SLA Policies">
         <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.sla-policies.create')" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+            <Link :href="route('escalated.admin.sla-policies.create')"
+                  class="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">
                 Add Policy
             </Link>
         </div>
-        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Default</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Business Hours</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Tickets</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+        <div 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">Name</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Default</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Business Hours</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Tickets</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Active</th>
+                        <th class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-gray-200">
-                    <tr v-for="policy in policies" :key="policy.id">
-                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ policy.name }}</td>
-                        <td class="px-4 py-3 text-sm">{{ policy.is_default ? 'Yes' : 'No' }}</td>
-                        <td class="px-4 py-3 text-sm">{{ policy.business_hours_only ? 'Yes' : 'No' }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ policy.tickets_count }}</td>
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-if="!policies?.length">
+                        <td colspan="6" class="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="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                            <p class="text-sm text-neutral-500">No SLA policies yet</p>
+                            <p class="mt-1 text-xs text-neutral-600">Define response and resolution time targets</p>
+                        </td>
+                    </tr>
+                    <tr v-for="policy in policies" :key="policy.id" class="transition-colors hover:bg-white/[0.03]">
+                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ policy.name }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ policy.is_default ? 'Yes' : 'No' }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ policy.business_hours_only ? 'Yes' : 'No' }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ policy.tickets_count }}</td>
                         <td class="px-4 py-3 text-sm">
-                            <span :class="policy.is_active ? 'text-green-600' : 'text-gray-400'">{{ policy.is_active ? 'Yes' : 'No' }}</span>
+                            <span :class="policy.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ policy.is_active ? 'Yes' : 'No' }}</span>
                         </td>
                         <td class="px-4 py-3 text-right text-sm">
-                            <Link :href="route('escalated.admin.sla-policies.edit', policy.id)" class="text-indigo-600 hover:text-indigo-900">Edit</Link>
-                            <button @click="destroy(policy.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                            <Link :href="route('escalated.admin.sla-policies.edit', policy.id)" class="text-neutral-300 hover:text-white">Edit</Link>
+                            <button @click="destroy(policy.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
                         </td>
                     </tr>
                 </tbody>

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

@@ -8,7 +8,7 @@ defineProps({ tags: Array });
 const showForm = ref(false);
 const editingTag = ref(null);
 
-const form = useForm({ name: '', color: '#6B7280' });
+const form = useForm({ name: '', color: '#06b6d4' });
 
 function createTag() {
     form.post(route('escalated.admin.tags.store'), {
@@ -38,39 +38,64 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="Tags">
         <div class="mb-4 flex justify-end">
-            <button @click="showForm = !showForm" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+            <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 Tag' }}
             </button>
         </div>
-        <form v-if="showForm" @submit.prevent="createTag" class="mb-6 flex items-end gap-3 rounded-lg border border-gray-200 bg-white p-4">
+        <form v-if="showForm" @submit.prevent="createTag" class="mb-6 flex items-end gap-3 rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
             <div>
-                <label class="block text-sm font-medium text-gray-700">Name</label>
-                <input v-model="form.name" type="text" required class="mt-1 rounded-lg border-gray-300 shadow-sm" />
+                <label class="block text-sm font-medium text-neutral-300">Name</label>
+                <input v-model="form.name" type="text" required class="mt-1 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>
             <div>
-                <label class="block text-sm font-medium text-gray-700">Color</label>
-                <input v-model="form.color" type="color" class="mt-1 h-10 w-16 rounded border-gray-300" />
+                <label class="block text-sm font-medium text-neutral-300">Color</label>
+                <input v-model="form.color" type="color" class="mt-1 h-10 w-16 rounded-lg border border-white/10 bg-neutral-950" />
             </div>
-            <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Create</button>
+            <button type="submit" :disabled="form.processing"
+                    class="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>
         </form>
-        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Color</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Tickets</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+        <div 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">Color</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Name</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Tickets</th>
+                        <th class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Actions</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-gray-200">
-                    <tr v-for="tag in tags" :key="tag.id">
-                        <td class="px-4 py-3"><span class="inline-block h-4 w-4 rounded-full" :style="{ backgroundColor: tag.color }"></span></td>
-                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ tag.name }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ tag.tickets_count }}</td>
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-if="!tags?.length">
+                        <td colspan="4" class="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="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z" /></svg>
+                            <p class="text-sm text-neutral-500">No tags yet</p>
+                            <p class="mt-1 text-xs text-neutral-600">Create tags to categorize and filter tickets</p>
+                        </td>
+                    </tr>
+                    <tr v-for="tag in tags" :key="tag.id" class="transition-colors hover:bg-white/[0.03]">
+                        <td class="px-4 py-3">
+                            <span class="inline-block h-4 w-4 rounded-full ring-1 ring-white/10" :style="{ backgroundColor: tag.color }"></span>
+                        </td>
+                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">
+                            <template v-if="editingTag === tag.id">
+                                <form @submit.prevent="updateTag(tag.id)" class="flex items-center gap-2">
+                                    <input v-model="form.name" type="text" required class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
+                                    <input v-model="form.color" type="color" class="h-8 w-10 rounded border border-white/10 bg-neutral-950" />
+                                    <button type="submit" class="text-sm text-neutral-300 hover:text-white">Save</button>
+                                    <button type="button" @click="editingTag = null" class="text-sm text-neutral-400 hover:text-neutral-300">Cancel</button>
+                                </form>
+                            </template>
+                            <template v-else>{{ tag.name }}</template>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ tag.tickets_count }}</td>
                         <td class="px-4 py-3 text-right text-sm">
-                            <button @click="startEdit(tag)" class="text-indigo-600 hover:text-indigo-900">Edit</button>
-                            <button @click="destroy(tag.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                            <button @click="startEdit(tag)" class="text-neutral-300 hover:text-white">Edit</button>
+                            <button @click="destroy(tag.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
                         </td>
                     </tr>
                 </tbody>

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

@@ -0,0 +1,22 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import TicketList from '../../../components/TicketList.vue';
+import TicketFilters from '../../../components/TicketFilters.vue';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+    agents: Array,
+});
+</script>
+
+<template>
+    <EscalatedLayout title="All Tickets">
+        <div class="mb-6">
+            <TicketFilters :filters="filters" :route="route('escalated.admin.tickets.index')" :departments="departments" :tags="tags" show-assignee />
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.admin.tickets" show-assignee />
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Tickets/Show.vue

@@ -0,0 +1,109 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import StatusBadge from '../../../components/StatusBadge.vue';
+import PriorityBadge from '../../../components/PriorityBadge.vue';
+import ReplyThread from '../../../components/ReplyThread.vue';
+import ReplyComposer from '../../../components/ReplyComposer.vue';
+import TicketSidebar from '../../../components/TicketSidebar.vue';
+import AttachmentList from '../../../components/AttachmentList.vue';
+import { router, useForm, usePage } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    ticket: Object,
+    departments: Array,
+    tags: Array,
+    cannedResponses: Array,
+    agents: Array,
+});
+
+const page = usePage();
+const activeTab = ref('reply');
+
+const statusForm = useForm({ status: '' });
+const priorityForm = useForm({ priority: '' });
+const assignForm = useForm({ agent_id: '' });
+
+function changeStatus(status) {
+    statusForm.status = status;
+    statusForm.post(route('escalated.admin.tickets.status', props.ticket.reference), { preserveScroll: true });
+}
+
+function changePriority(priority) {
+    priorityForm.priority = priority;
+    priorityForm.post(route('escalated.admin.tickets.priority', props.ticket.reference), { preserveScroll: true });
+}
+
+function assignToMe() {
+    assignForm.agent_id = page.props.auth.user.id;
+    assignForm.post(route('escalated.admin.tickets.assign', props.ticket.reference), { preserveScroll: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mb-5 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
+            <StatusBadge :status="ticket.status" />
+            <PriorityBadge :priority="ticket.priority" />
+            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
+            <div class="ml-auto flex gap-2">
+                <button v-if="!ticket.assigned_to" @click="assignToMe"
+                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
+                    Assign to Me
+                </button>
+                <select @change="changeStatus($event.target.value); $event.target.value = ''"
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
+                    <option value="">Change Status...</option>
+                    <option value="in_progress">In Progress</option>
+                    <option value="waiting_on_customer">Waiting on Customer</option>
+                    <option value="resolved">Resolved</option>
+                    <option value="closed">Closed</option>
+                </select>
+                <select @change="changePriority($event.target.value); $event.target.value = ''"
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
+                    <option value="">Change Priority...</option>
+                    <option value="low">Low</option>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                    <option value="urgent">Urgent</option>
+                    <option value="critical">Critical</option>
+                </select>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div class="lg:col-span-2 space-y-6">
+                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
+                    <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+                </div>
+                <div>
+                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
+                        <button @click="activeTab = 'reply'"
+                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
+                            Reply
+                        </button>
+                        <button @click="activeTab = 'note'"
+                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
+                            Internal Note
+                        </button>
+                    </div>
+                    <ReplyComposer v-if="activeTab === 'reply'"
+                                   :action="route('escalated.admin.tickets.reply', ticket.reference)"
+                                   :canned-responses="cannedResponses" />
+                    <ReplyComposer v-else
+                                   :action="route('escalated.admin.tickets.note', ticket.reference)"
+                                   placeholder="Write an internal note..."
+                                   submit-label="Add Note" />
+                </div>
+                <div>
+                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
+                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
+                </div>
+            </div>
+            <div>
+                <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/Dashboard.vue

@@ -1,7 +1,6 @@
 <script setup>
 import EscalatedLayout from '../../components/EscalatedLayout.vue';
 import StatsCard from '../../components/StatsCard.vue';
-import TicketList from '../../components/TicketList.vue';
 
 defineProps({
     stats: Object,
@@ -12,37 +11,50 @@ defineProps({
 <template>
     <EscalatedLayout title="Agent Dashboard">
         <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
-            <StatsCard title="Open Tickets" :value="stats.open" color="indigo" />
-            <StatsCard title="My Assigned" :value="stats.my_assigned" color="indigo" />
-            <StatsCard title="Unassigned" :value="stats.unassigned" color="yellow" />
-            <StatsCard title="SLA Breached" :value="stats.sla_breached" color="red" />
-            <StatsCard title="Resolved Today" :value="stats.resolved_today" color="green" />
+            <StatsCard label="Open Tickets" :value="stats.open" color="cyan" />
+            <StatsCard label="My Assigned" :value="stats.my_assigned" color="violet" />
+            <StatsCard label="Unassigned" :value="stats.unassigned" color="amber" />
+            <StatsCard label="SLA Breached" :value="stats.sla_breached" color="red" />
+            <StatsCard label="Resolved Today" :value="stats.resolved_today" color="green" />
         </div>
-        <h2 class="mb-4 text-lg font-semibold text-gray-900">Recent Tickets</h2>
-        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Reference</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Subject</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Requester</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Status</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Priority</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Assignee</th>
+        <h2 class="mb-4 text-lg font-semibold text-neutral-200">Recent Tickets</h2>
+        <div 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">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 class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Assignee</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-gray-200">
-                    <tr v-for="ticket in recentTickets" :key="ticket.id" class="hover:bg-gray-50">
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-for="ticket in recentTickets" :key="ticket.id" class="transition-colors hover:bg-white/[0.03]">
                         <td class="px-4 py-3 text-sm">
-                            <a :href="route('escalated.agent.tickets.show', ticket.reference)" class="font-medium text-indigo-600 hover:text-indigo-900">{{ ticket.reference }}</a>
+                            <a :href="route('escalated.agent.tickets.show', ticket.reference)" class="font-medium text-neutral-300 hover:text-white">{{ ticket.reference }}</a>
                         </td>
-                        <td class="px-4 py-3 text-sm text-gray-900">{{ ticket.subject }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ ticket.requester?.name }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-200">{{ ticket.subject }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ ticket.requester?.name }}</td>
                         <td class="px-4 py-3 text-sm">
-                            <span :class="['inline-flex rounded-full px-2 py-0.5 text-xs font-medium', { 'bg-blue-100 text-blue-800': ticket.status === 'open', 'bg-green-100 text-green-800': ticket.status === 'resolved', 'bg-red-100 text-red-800': ticket.status === 'escalated' }]">{{ ticket.status }}</span>
+                            <span :class="[
+                                'inline-flex rounded-full px-2 py-0.5 text-xs font-medium ring-1',
+                                {
+                                    'bg-cyan-500/10 text-white ring-cyan-500/20': ticket.status === 'open',
+                                    'bg-blue-500/10 text-blue-400 ring-blue-500/20': ticket.status === 'in_progress',
+                                    'bg-emerald-500/10 text-emerald-400 ring-emerald-500/20': ticket.status === 'resolved',
+                                    'bg-rose-500/10 text-rose-400 ring-rose-500/20': ticket.status === 'escalated',
+                                    'bg-amber-500/10 text-amber-400 ring-amber-500/20': ticket.status === 'waiting_on_customer',
+                                    'bg-gray-500/10 text-neutral-400 ring-gray-500/20': ticket.status === 'closed',
+                                }
+                            ]">{{ ticket.status }}</span>
                         </td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ ticket.priority }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ ticket.assignee?.name || 'Unassigned' }}</td>
+                        <td class="px-4 py-3 text-sm capitalize text-neutral-400">{{ ticket.priority }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ ticket.assignee?.name || 'Unassigned' }}</td>
+                    </tr>
+                    <tr v-if="!recentTickets?.length">
+                        <td colspan="6" class="px-4 py-8 text-center text-sm text-neutral-500">No recent tickets</td>
                     </tr>
                 </tbody>
             </table>

package/src/pages/Agent/TicketShow.vue

@@ -41,18 +41,18 @@ function assignToMe() {
 
 <template>
     <EscalatedLayout :title="ticket.subject">
-        <div class="mb-4 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-medium text-gray-500">{{ ticket.reference }}</span>
+        <div class="mb-5 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
             <StatusBadge :status="ticket.status" />
             <PriorityBadge :priority="ticket.priority" />
-            <span class="text-sm text-gray-500">by {{ ticket.requester?.name }}</span>
+            <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
             <div class="ml-auto flex gap-2">
                 <button v-if="!ticket.assigned_to" @click="assignToMe"
-                        class="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm text-white hover:bg-indigo-700">
+                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
                     Assign to Me
                 </button>
                 <select @change="changeStatus($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border-gray-300 text-sm">
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
                     <option value="">Change Status...</option>
                     <option value="in_progress">In Progress</option>
                     <option value="waiting_on_customer">Waiting on Customer</option>
@@ -60,7 +60,7 @@ function assignToMe() {
                     <option value="closed">Closed</option>
                 </select>
                 <select @change="changePriority($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border-gray-300 text-sm">
+                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
                     <option value="">Change Priority...</option>
                     <option value="low">Low</option>
                     <option value="medium">Medium</option>
@@ -72,18 +72,18 @@ function assignToMe() {
         </div>
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
             <div class="lg:col-span-2 space-y-6">
-                <div class="rounded-lg border border-gray-200 bg-white p-4">
-                    <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
+                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
                     <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
                 </div>
                 <div>
-                    <div class="mb-4 flex gap-4 border-b border-gray-200">
+                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
                         <button @click="activeTab = 'reply'"
-                                :class="['pb-2 text-sm font-medium', activeTab === 'reply' ? 'border-b-2 border-indigo-500 text-indigo-600' : 'text-gray-500']">
+                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
                             Reply
                         </button>
                         <button @click="activeTab = 'note'"
-                                :class="['pb-2 text-sm font-medium', activeTab === 'note' ? 'border-b-2 border-yellow-500 text-yellow-600' : 'text-gray-500']">
+                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
                             Internal Note
                         </button>
                     </div>
@@ -96,7 +96,7 @@ function assignToMe() {
                                    submit-label="Add Note" />
                 </div>
                 <div>
-                    <h2 class="mb-4 text-lg font-semibold text-gray-900">Conversation</h2>
+                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
                     <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
                 </div>
             </div>

package/src/pages/Customer/Show.vue

@@ -22,10 +22,10 @@ function reopenTicket() {
 <template>
     <EscalatedLayout :title="ticket.subject">
         <div class="mb-4 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-medium text-gray-500">{{ ticket.reference }}</span>
+            <span class="text-sm font-medium text-neutral-500">{{ ticket.reference }}</span>
             <StatusBadge :status="ticket.status" />
             <PriorityBadge :priority="ticket.priority" />
-            <span v-if="ticket.department" class="text-sm text-gray-500">{{ ticket.department.name }}</span>
+            <span v-if="ticket.department" class="text-sm text-neutral-500">{{ ticket.department.name }}</span>
             <div class="ml-auto flex gap-2">
                 <button v-if="ticket.status === 'resolved' || ticket.status === 'closed'"
                         @click="reopenTicket"