@escalated-dev/escalated 0.2.1 → 0.3.5

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>

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

@@ -14,32 +14,40 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="Departments">
         <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.departments.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.departments.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 Department
             </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">Tickets</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Agents</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">Tickets</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Agents</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="dept in departments" :key="dept.id">
-                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ dept.name }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ dept.tickets_count }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ dept.agents_count }}</td>
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-for="dept in departments" :key="dept.id" class="transition-colors hover:bg-white/[0.03]">
+                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ dept.name }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ dept.tickets_count }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ dept.agents_count }}</td>
                         <td class="px-4 py-3 text-sm">
-                            <span :class="dept.is_active ? 'text-green-600' : 'text-gray-400'">{{ dept.is_active ? 'Yes' : 'No' }}</span>
+                            <span :class="dept.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ dept.is_active ? 'Yes' : 'No' }}</span>
                         </td>
                         <td class="px-4 py-3 text-right text-sm">
-                            <Link :href="route('escalated.admin.departments.edit', dept.id)" class="text-indigo-600 hover:text-indigo-900">Edit</Link>
-                            <button @click="destroy(dept.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                            <Link :href="route('escalated.admin.departments.edit', dept.id)" class="text-neutral-300 hover:text-white">Edit</Link>
+                            <button @click="destroy(dept.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
+                        </td>
+                    </tr>
+                    <tr v-if="!departments?.length">
+                        <td colspan="5" 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="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" /></svg>
+                            <p class="text-sm text-neutral-500">No departments yet</p>
+                            <p class="mt-1 text-xs text-neutral-600">Create your first department to organize tickets</p>
                         </td>
                     </tr>
                 </tbody>

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

@@ -30,14 +30,14 @@ function submit() {
 
 <template>
     <EscalatedLayout :title="rule ? 'Edit Escalation Rule' : 'New Escalation Rule'">
-        <form @submit.prevent="submit" class="mx-auto max-w-lg space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+        <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">Trigger Type</label>
-                <select v-model="form.trigger_type" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
+                <label class="block text-sm font-medium text-neutral-300">Trigger Type</label>
+                <select v-model="form.trigger_type" 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">
                     <option value="time_based">Time Based</option>
                     <option value="sla_breach">SLA Breach</option>
                     <option value="priority_based">Priority Based</option>
@@ -45,11 +45,11 @@ function submit() {
             </div>
             <div>
                 <div class="mb-2 flex items-center justify-between">
-                    <label class="text-sm font-medium text-gray-700">Conditions</label>
-                    <button type="button" @click="addCondition" class="text-sm text-indigo-600">+ Add</button>
+                    <label class="text-sm font-medium text-neutral-300">Conditions</label>
+                    <button type="button" @click="addCondition" class="text-sm text-neutral-300 hover:text-white">+ Add</button>
                 </div>
                 <div v-for="(cond, idx) in form.conditions" :key="idx" class="mb-2 flex gap-2">
-                    <select v-model="cond.field" class="w-1/2 rounded border-gray-300 text-sm">
+                    <select v-model="cond.field" class="w-1/2 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">
                         <option value="status">Status</option>
                         <option value="priority">Priority</option>
                         <option value="assigned">Assignment</option>
@@ -57,36 +57,37 @@ function submit() {
                         <option value="no_response_hours">No Response (hours)</option>
                         <option value="sla_breached">SLA Breached</option>
                     </select>
-                    <input v-model="cond.value" class="w-1/2 rounded border-gray-300 text-sm" placeholder="Value" />
-                    <button type="button" @click="removeCondition(idx)" class="text-red-500">&times;</button>
+                    <input v-model="cond.value" class="w-1/2 rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" placeholder="Value" />
+                    <button type="button" @click="removeCondition(idx)" class="text-rose-400 hover:text-rose-300">&times;</button>
                 </div>
             </div>
             <div>
                 <div class="mb-2 flex items-center justify-between">
-                    <label class="text-sm font-medium text-gray-700">Actions</label>
-                    <button type="button" @click="addAction" class="text-sm text-indigo-600">+ Add</button>
+                    <label class="text-sm font-medium text-neutral-300">Actions</label>
+                    <button type="button" @click="addAction" class="text-sm text-neutral-300 hover:text-white">+ Add</button>
                 </div>
                 <div v-for="(action, idx) in form.actions" :key="idx" class="mb-2 flex gap-2">
-                    <select v-model="action.type" class="w-1/2 rounded border-gray-300 text-sm">
+                    <select v-model="action.type" class="w-1/2 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">
                         <option value="escalate">Escalate</option>
                         <option value="change_priority">Change Priority</option>
                         <option value="assign_to">Assign To</option>
                         <option value="change_department">Change Department</option>
                     </select>
-                    <input v-model="action.value" class="w-1/2 rounded border-gray-300 text-sm" placeholder="Value" />
-                    <button type="button" @click="removeAction(idx)" class="text-red-500">&times;</button>
+                    <input v-model="action.value" class="w-1/2 rounded-lg border border-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" placeholder="Value" />
+                    <button type="button" @click="removeAction(idx)" class="text-rose-400 hover:text-rose-300">&times;</button>
                 </div>
             </div>
             <div>
-                <label class="block text-sm font-medium text-gray-700">Order</label>
-                <input v-model.number="form.order" type="number" min="0" class="mt-1 w-24 rounded-lg border-gray-300 shadow-sm" />
+                <label class="block text-sm font-medium text-neutral-300">Order</label>
+                <input v-model.number="form.order" type="number" min="0" class="mt-1 w-24 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>
             <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">
                     {{ rule ? 'Update' : 'Create' }}
                 </button>
             </div>

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

@@ -14,32 +14,40 @@ function destroy(id) {
 <template>
     <EscalatedLayout title="Escalation Rules">
         <div class="mb-4 flex justify-end">
-            <Link :href="route('escalated.admin.escalation-rules.create')" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+            <Link :href="route('escalated.admin.escalation-rules.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 Rule
             </Link>
         </div>
-        <div class="overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Order</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Name</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Trigger</th>
-                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Active</th>
-                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500">Actions</th>
+        <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">Order</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">Trigger</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="rule in rules" :key="rule.id">
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ rule.order }}</td>
-                        <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ rule.name }}</td>
-                        <td class="px-4 py-3 text-sm text-gray-500">{{ rule.trigger_type }}</td>
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-if="!rules?.length">
+                        <td colspan="5" 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="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>
+                            <p class="text-sm text-neutral-500">No escalation rules yet</p>
+                            <p class="mt-1 text-xs text-neutral-600">Set up automatic escalation for overdue tickets</p>
+                        </td>
+                    </tr>
+                    <tr v-for="rule in rules" :key="rule.id" class="transition-colors hover:bg-white/[0.03]">
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ rule.order }}</td>
+                        <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ rule.name }}</td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">{{ rule.trigger_type }}</td>
                         <td class="px-4 py-3 text-sm">
-                            <span :class="rule.is_active ? 'text-green-600' : 'text-gray-400'">{{ rule.is_active ? 'Yes' : 'No' }}</span>
+                            <span :class="rule.is_active ? 'text-emerald-400' : 'text-neutral-500'">{{ rule.is_active ? 'Yes' : 'No' }}</span>
                         </td>
                         <td class="px-4 py-3 text-right text-sm">
-                            <Link :href="route('escalated.admin.escalation-rules.edit', rule.id)" class="text-indigo-600 hover:text-indigo-900">Edit</Link>
-                            <button @click="destroy(rule.id)" class="ml-3 text-red-600 hover:text-red-900">Delete</button>
+                            <Link :href="route('escalated.admin.escalation-rules.edit', rule.id)" class="text-neutral-300 hover:text-white">Edit</Link>
+                            <button @click="destroy(rule.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
                         </td>
                     </tr>
                 </tbody>

package/src/pages/Admin/Reports.vue

@@ -22,31 +22,45 @@ function changePeriod(days) {
     <EscalatedLayout title="Reports">
         <div class="mb-6 flex gap-2">
             <button v-for="d in [7, 30, 90]" :key="d" @click="changePeriod(d)"
-                    :class="['rounded-lg px-3 py-1.5 text-sm', period_days === d ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50']">
+                    :class="['rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all', period_days === d
+                        ? 'bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-black/20'
+                        : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200']">
                 Last {{ d }} days
             </button>
         </div>
         <div class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4">
-            <StatsCard title="Total Tickets" :value="total_tickets" color="indigo" />
-            <StatsCard title="Resolved" :value="resolved_tickets" color="green" />
-            <StatsCard title="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
-            <StatsCard title="SLA Breaches" :value="sla_breach_count" color="red" />
+            <StatsCard label="Total Tickets" :value="total_tickets" color="indigo" />
+            <StatsCard label="Resolved" :value="resolved_tickets" color="green" />
+            <StatsCard label="Avg First Response" :value="`${avg_first_response_hours}h`" color="yellow" />
+            <StatsCard label="SLA Breaches" :value="sla_breach_count" color="red" />
         </div>
         <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-                <h3 class="mb-3 text-sm font-medium text-gray-700">By Status</h3>
-                <div v-for="(count, status) in by_status" :key="status" class="mb-2 flex items-center justify-between">
-                    <span class="text-sm capitalize text-gray-600">{{ status.replace('_', ' ') }}</span>
-                    <span class="text-sm font-medium text-gray-900">{{ count }}</span>
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Status</h3>
+                <template v-if="by_status && Object.keys(by_status).length">
+                    <div v-for="(count, status) in by_status" :key="status" class="mb-2.5 flex items-center justify-between">
+                        <span class="text-sm capitalize text-neutral-400">{{ status.replace('_', ' ') }}</span>
+                        <span class="text-sm font-semibold text-white">{{ count }}</span>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg class="mb-2 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="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
+                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
                 </div>
             </div>
-            <div class="rounded-lg border border-gray-200 bg-white p-4">
-                <h3 class="mb-3 text-sm font-medium text-gray-700">By Priority</h3>
-                <div v-for="(count, priority) in by_priority" :key="priority" class="mb-2 flex items-center justify-between">
-                    <span class="text-sm capitalize text-gray-600">{{ priority }}</span>
-                    <span class="text-sm font-medium text-gray-900">{{ count }}</span>
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+                <h3 class="mb-4 text-sm font-semibold text-neutral-200">By Priority</h3>
+                <template v-if="by_priority && Object.keys(by_priority).length">
+                    <div v-for="(count, priority) in by_priority" :key="priority" class="mb-2.5 flex items-center justify-between">
+                        <span class="text-sm capitalize text-neutral-400">{{ priority }}</span>
+                        <span class="text-sm font-semibold text-white">{{ count }}</span>
+                    </div>
+                </template>
+                <div v-else class="flex flex-col items-center py-6 text-center">
+                    <svg class="mb-2 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="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>
+                    <p class="text-sm text-neutral-500">No ticket data for this period</p>
                 </div>
             </div>
         </div>
     </EscalatedLayout>
-</template>
+</template>

package/src/pages/Admin/Settings.vue

@@ -0,0 +1,260 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import { useForm, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({ settings: Object });
+const page = usePage();
+
+const form = useForm({
+    guest_tickets_enabled: props.settings.guest_tickets_enabled,
+    allow_customer_close: props.settings.allow_customer_close,
+    auto_close_resolved_after_days: props.settings.auto_close_resolved_after_days,
+    max_attachments_per_reply: props.settings.max_attachments_per_reply,
+    max_attachment_size_kb: props.settings.max_attachment_size_kb,
+    ticket_reference_prefix: props.settings.ticket_reference_prefix,
+    inbound_email_enabled: props.settings.inbound_email_enabled ?? false,
+    inbound_email_adapter: props.settings.inbound_email_adapter ?? 'mailgun',
+    inbound_email_address: props.settings.inbound_email_address ?? '',
+    mailgun_signing_key: props.settings.mailgun_signing_key ?? '',
+    postmark_inbound_token: props.settings.postmark_inbound_token ?? '',
+    ses_region: props.settings.ses_region ?? '',
+    ses_topic_arn: props.settings.ses_topic_arn ?? '',
+    imap_host: props.settings.imap_host ?? '',
+    imap_port: props.settings.imap_port ?? 993,
+    imap_encryption: props.settings.imap_encryption ?? 'ssl',
+    imap_username: props.settings.imap_username ?? '',
+    imap_password: props.settings.imap_password ?? '',
+    imap_mailbox: props.settings.imap_mailbox ?? 'INBOX',
+});
+
+const webhookBaseUrl = computed(() => {
+    const prefix = page.props.escalated?.prefix || 'support';
+    const origin = typeof window !== 'undefined' ? window.location.origin : '';
+    return `${origin}/${prefix}/inbound`;
+});
+
+function submit() {
+    form.post(route('escalated.admin.settings.update'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Settings">
+        <form @submit.prevent="submit" class="mx-auto max-w-2xl space-y-6">
+            <!-- General -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
+                <h3 class="mb-5 text-sm font-semibold text-white">General</h3>
+                <div class="space-y-5">
+                    <label class="flex items-center justify-between">
+                        <div>
+                            <span class="text-sm font-medium text-neutral-200">Guest Tickets</span>
+                            <p class="mt-0.5 text-xs text-neutral-500">Allow visitors to submit tickets without signing in</p>
+                        </div>
+                        <button type="button" @click="form.guest_tickets_enabled = !form.guest_tickets_enabled"
+                                :class="['relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+                                         form.guest_tickets_enabled ? 'bg-emerald-500' : 'bg-neutral-700']">
+                            <span :class="['pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
+                                           form.guest_tickets_enabled ? 'translate-x-5' : 'translate-x-0']" />
+                        </button>
+                    </label>
+
+                    <label class="flex items-center justify-between">
+                        <div>
+                            <span class="text-sm font-medium text-neutral-200">Allow Customer Close</span>
+                            <p class="mt-0.5 text-xs text-neutral-500">Let customers close their own tickets</p>
+                        </div>
+                        <button type="button" @click="form.allow_customer_close = !form.allow_customer_close"
+                                :class="['relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+                                         form.allow_customer_close ? 'bg-emerald-500' : 'bg-neutral-700']">
+                            <span :class="['pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
+                                           form.allow_customer_close ? 'translate-x-5' : 'translate-x-0']" />
+                        </button>
+                    </label>
+
+                    <div>
+                        <label class="block text-sm font-medium text-neutral-200">Auto-close resolved tickets after</label>
+                        <p class="mt-0.5 text-xs text-neutral-500">Days after resolution before auto-closing (0 to disable)</p>
+                        <div class="mt-2 flex items-center gap-2">
+                            <input v-model.number="form.auto_close_resolved_after_days" type="number" min="0" max="365"
+                                   class="w-24 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" />
+                            <span class="text-sm text-neutral-500">days</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Limits -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
+                <h3 class="mb-5 text-sm font-semibold text-white">Limits</h3>
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-neutral-200">Max attachments per reply</label>
+                        <input v-model.number="form.max_attachments_per_reply" type="number" min="1" max="20"
+                               class="mt-2 w-24 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-neutral-200">Max attachment size</label>
+                        <div class="mt-2 flex items-center gap-2">
+                            <input v-model.number="form.max_attachment_size_kb" type="number" min="512" max="102400" step="512"
+                                   class="w-32 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" />
+                            <span class="text-sm text-neutral-500">KB ({{ Math.round(form.max_attachment_size_kb / 1024) }} MB)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tickets -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
+                <h3 class="mb-5 text-sm font-semibold text-white">Tickets</h3>
+                <div class="space-y-5">
+                    <div>
+                        <label class="block text-sm font-medium text-neutral-200">Reference Prefix</label>
+                        <p class="mt-0.5 text-xs text-neutral-500">Prefix for ticket references (e.g. ESC produces ESC-00001)</p>
+                        <input v-model="form.ticket_reference_prefix" type="text" maxlength="10"
+                               class="mt-2 w-32 rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 uppercase focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Inbound Email -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
+                <h3 class="mb-5 text-sm font-semibold text-white">Inbound Email</h3>
+                <div class="space-y-5">
+                    <label class="flex items-center justify-between">
+                        <div>
+                            <span class="text-sm font-medium text-neutral-200">Inbound Email</span>
+                            <p class="mt-0.5 text-xs text-neutral-500">Allow creating and replying to tickets via email</p>
+                        </div>
+                        <button type="button" @click="form.inbound_email_enabled = !form.inbound_email_enabled"
+                                :class="['relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+                                         form.inbound_email_enabled ? 'bg-emerald-500' : 'bg-neutral-700']">
+                            <span :class="['pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
+                                           form.inbound_email_enabled ? 'translate-x-5' : 'translate-x-0']" />
+                        </button>
+                    </label>
+
+                    <template v-if="form.inbound_email_enabled">
+                        <div>
+                            <label class="block text-sm font-medium text-neutral-200">Email Provider</label>
+                            <p class="mt-0.5 text-xs text-neutral-500">How inbound emails are received</p>
+                            <select v-model="form.inbound_email_adapter"
+                                    class="mt-2 w-48 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">
+                                <option value="mailgun">Mailgun</option>
+                                <option value="postmark">Postmark</option>
+                                <option value="ses">AWS SES</option>
+                                <option value="imap">IMAP</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-neutral-200">Support Email Address</label>
+                            <p class="mt-0.5 text-xs text-neutral-500">The email address customers will send emails to (e.g. support@example.com)</p>
+                            <input v-model="form.inbound_email_address" type="email" placeholder="support@example.com"
+                                   class="mt-2 w-full max-w-sm 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>
+
+                        <!-- Mailgun -->
+                        <template v-if="form.inbound_email_adapter === 'mailgun'">
+                            <div>
+                                <label class="block text-sm font-medium text-neutral-200">Signing Key</label>
+                                <input v-model="form.mailgun_signing_key" type="password"
+                                       class="mt-2 w-full max-w-sm 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-neutral-200">Webhook URL</label>
+                                <p class="mt-0.5 text-xs text-neutral-500">Configure this URL in your Mailgun dashboard</p>
+                                <input :value="`${webhookBaseUrl}/mailgun`" type="text" readonly
+                                       class="mt-2 w-full max-w-lg rounded-lg border border-white/10 bg-neutral-950/50 px-3 py-2 text-sm text-neutral-400 select-all cursor-default focus:outline-none" />
+                            </div>
+                        </template>
+
+                        <!-- Postmark -->
+                        <template v-if="form.inbound_email_adapter === 'postmark'">
+                            <div>
+                                <label class="block text-sm font-medium text-neutral-200">Inbound Token</label>
+                                <input v-model="form.postmark_inbound_token" type="password"
+                                       class="mt-2 w-full max-w-sm 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-neutral-200">Webhook URL</label>
+                                <p class="mt-0.5 text-xs text-neutral-500">Configure this URL in your Postmark server settings</p>
+                                <input :value="`${webhookBaseUrl}/postmark`" type="text" readonly
+                                       class="mt-2 w-full max-w-lg rounded-lg border border-white/10 bg-neutral-950/50 px-3 py-2 text-sm text-neutral-400 select-all cursor-default focus:outline-none" />
+                            </div>
+                        </template>
+
+                        <!-- AWS SES -->
+                        <template v-if="form.inbound_email_adapter === 'ses'">
+                            <div>
+                                <label class="block text-sm font-medium text-neutral-200">Region</label>
+                                <input v-model="form.ses_region" type="text" placeholder="us-east-1"
+                                       class="mt-2 w-48 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-neutral-200">Topic ARN</label>
+                                <input v-model="form.ses_topic_arn" type="text" placeholder="arn:aws:sns:us-east-1:123456789:ses-inbound"
+                                       class="mt-2 w-full max-w-lg 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-neutral-200">Webhook URL</label>
+                                <p class="mt-0.5 text-xs text-neutral-500">Configure this URL as your SNS subscription endpoint</p>
+                                <input :value="`${webhookBaseUrl}/ses`" type="text" readonly
+                                       class="mt-2 w-full max-w-lg rounded-lg border border-white/10 bg-neutral-950/50 px-3 py-2 text-sm text-neutral-400 select-all cursor-default focus:outline-none" />
+                            </div>
+                        </template>
+
+                        <!-- IMAP -->
+                        <template v-if="form.inbound_email_adapter === 'imap'">
+                            <div>
+                                <label class="block text-sm font-medium text-neutral-200">Host</label>
+                                <input v-model="form.imap_host" type="text" placeholder="imap.example.com"
+                                       class="mt-2 w-full max-w-sm 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 class="flex items-end gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-neutral-200">Port</label>
+                                    <input v-model.number="form.imap_port" type="number" min="1" max="65535"
+                                           class="mt-2 w-24 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-neutral-200">Encryption</label>
+                                    <select v-model="form.imap_encryption"
+                                            class="mt-2 w-28 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">
+                                        <option value="ssl">SSL</option>
+                                        <option value="tls">TLS</option>
+                                        <option value="none">None</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-neutral-200">Username</label>
+                                <input v-model="form.imap_username" type="text"
+                                       class="mt-2 w-full max-w-sm 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-neutral-200">Password</label>
+                                <input v-model="form.imap_password" type="password"
+                                       class="mt-2 w-full max-w-sm 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-neutral-200">Mailbox</label>
+                                <input v-model="form.imap_mailbox" type="text" placeholder="INBOX"
+                                       class="mt-2 w-48 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>
+                        </template>
+                    </template>
+                </div>
+            </div>
+
+            <!-- Submit -->
+            <div class="flex items-center justify-end gap-3">
+                <span v-if="form.recentlySuccessful" class="text-sm text-emerald-400">Saved.</span>
+                <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">
+                    {{ form.processing ? 'Saving...' : 'Save Settings' }}
+                </button>
+            </div>
+        </form>
+    </EscalatedLayout>
+</template>