@escalated-dev/escalated 0.2.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escalated-dev/escalated",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Vue 3 + Inertia.js UI components for Escalated — the embeddable support ticket system",
   "author": "Escalated Dev <hello@escalated.dev>",
   "license": "MIT",

package/src/components/ActivityTimeline.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { computed, inject } from 'vue';
+
 defineProps({
     activities: { type: Array, required: true },
 });
 
+const dark = inject('esc-dark', computed(() => false));
+
 const typeLabels = {
     status_changed: 'changed status',
     assigned: 'assigned ticket',
@@ -51,12 +55,12 @@ function describeActivity(activity) {
 <template>
     <div class="space-y-3">
         <div v-for="activity in activities" :key="activity.id" class="flex gap-3 text-sm">
-            <div class="mt-1 h-2 w-2 flex-shrink-0 rounded-full bg-gray-400"></div>
+            <div :class="['mt-1 h-2 w-2 flex-shrink-0 rounded-full', dark ? 'bg-neutral-600' : 'bg-gray-400']"></div>
             <div class="flex-1">
-                <p class="text-gray-700">{{ describeActivity(activity) }}</p>
-                <p class="text-xs text-gray-400">{{ formatDate(activity.created_at) }}</p>
+                <p :class="dark ? 'text-neutral-300' : 'text-gray-700'">{{ describeActivity(activity) }}</p>
+                <p :class="['text-xs', dark ? 'text-neutral-600' : 'text-gray-400']">{{ formatDate(activity.created_at) }}</p>
             </div>
         </div>
-        <div v-if="!activities?.length" class="py-4 text-center text-sm text-gray-500">No activity yet.</div>
+        <div v-if="!activities?.length" :class="['py-4 text-center text-sm', dark ? 'text-neutral-600' : 'text-gray-500']">No activity yet.</div>
     </div>
 </template>

package/src/components/AssigneeSelect.vue

@@ -1,17 +1,21 @@
 <script setup>
+import { computed, inject } from 'vue';
+
 defineProps({
     agents: { type: Array, required: true },
     modelValue: { type: [Number, String], default: null },
 });
 
 const emit = defineEmits(['update:modelValue']);
+const dark = inject('esc-dark', computed(() => false));
 </script>
 
 <template>
     <div>
-        <label class="mb-1 block text-xs font-medium text-gray-600">Assigned To</label>
+        <label :class="['mb-1 block text-xs font-medium', dark ? 'text-neutral-500' : 'text-gray-600']">Assigned To</label>
         <select :value="modelValue" @change="emit('update:modelValue', $event.target.value || null)"
-                class="w-full rounded-md border border-gray-300 px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none">
+                :class="['w-full rounded-md border px-2 py-1.5 text-sm focus:outline-none',
+                         dark ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']">
             <option value="">Unassigned</option>
             <option v-for="agent in agents" :key="agent.id" :value="agent.id">{{ agent.name }}</option>
         </select>

package/src/components/AttachmentList.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { computed, inject } from 'vue';
+
 defineProps({
     attachments: { type: Array, required: true },
 });
 
+const dark = inject('esc-dark', computed(() => false));
+
 function formatSize(bytes) {
     if (bytes < 1024) return bytes + ' B';
     if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
@@ -20,12 +24,14 @@ function iconForMime(mime) {
 <template>
     <div class="space-y-1">
         <div v-for="attachment in attachments" :key="attachment.id"
-             class="flex items-center gap-2 rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm">
+             :class="['flex items-center gap-2 rounded-lg border px-3 py-2 text-sm',
+                      dark ? 'border-white/[0.06] bg-white/[0.03]' : 'border-gray-200 bg-gray-50']">
             <span>{{ iconForMime(attachment.mime_type) }}</span>
-            <a :href="attachment.url" target="_blank" class="flex-1 truncate font-medium text-blue-600 hover:underline">
+            <a :href="attachment.url" target="_blank"
+               :class="['flex-1 truncate font-medium hover:underline', dark ? 'text-white' : 'text-blue-600']">
                 {{ attachment.original_filename }}
             </a>
-            <span class="text-xs text-gray-400">{{ formatSize(attachment.size) }}</span>
+            <span :class="['text-xs', dark ? 'text-neutral-500' : 'text-gray-400']">{{ formatSize(attachment.size) }}</span>
         </div>
     </div>
 </template>

package/src/components/BulkActionBar.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    selectedIds: { type: Array, required: true },
+    bulkRoute: { type: String, required: true },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['clear']);
+const escDark = inject('esc-dark', computed(() => false));
+const processing = ref(false);
+
+function performAction(action, value) {
+    if (!props.selectedIds.length || processing.value) return;
+    processing.value = true;
+    router.post(props.bulkRoute, {
+        ticket_ids: props.selectedIds,
+        action,
+        value,
+    }, {
+        preserveScroll: true,
+        onSuccess: () => emit('clear'),
+        onFinish: () => { processing.value = false; },
+    });
+}
+
+const statusOptions = [
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'waiting_on_customer', label: 'Waiting on Customer' },
+    { value: 'resolved', label: 'Resolved' },
+    { value: 'closed', label: 'Closed' },
+];
+
+const priorityOptions = [
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'urgent', label: 'Urgent' },
+    { value: 'critical', label: 'Critical' },
+];
+
+const selectClass = computed(() => escDark.value
+    ? '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'
+    : 'rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none'
+);
+</script>
+
+<template>
+    <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="translate-y-full opacity-0" enter-to-class="translate-y-0 opacity-100"
+                leave-active-class="transition-all duration-150 ease-in" leave-from-class="translate-y-0 opacity-100" leave-to-class="translate-y-full opacity-0">
+        <div v-if="selectedIds.length > 0"
+             :class="['fixed bottom-0 left-0 right-0 z-50 border-t px-6 py-3',
+                       escDark ? 'border-white/[0.06] bg-neutral-950/95 backdrop-blur-xl' : 'border-gray-200 bg-white/95 backdrop-blur-xl shadow-lg']">
+            <div class="mx-auto flex max-w-7xl items-center gap-4">
+                <span :class="['text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                    {{ selectedIds.length }} ticket{{ selectedIds.length !== 1 ? 's' : '' }} selected
+                </span>
+
+                <select @change="performAction('status', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Status...</option>
+                    <option v-for="o in statusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+
+                <select @change="performAction('priority', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Priority...</option>
+                    <option v-for="o in priorityOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+
+                <select v-if="agents.length" @change="performAction('assign', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Assign to...</option>
+                    <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
+                </select>
+
+                <select v-if="departments.length" @change="performAction('department', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
+                    <option value="">Department...</option>
+                    <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+                </select>
+
+                <button @click="performAction('delete', null)"
+                        :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                                 escDark ? 'bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 hover:bg-rose-500/25' : 'bg-red-50 text-red-600 ring-1 ring-red-200 hover:bg-red-100']"
+                        :disabled="processing">
+                    Delete
+                </button>
+
+                <button @click="emit('clear')"
+                        :class="['ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                                 escDark ? 'text-neutral-400 hover:bg-white/[0.04] hover:text-neutral-200' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700']">
+                    Deselect All
+                </button>
+            </div>
+        </div>
+    </Transition>
+</template>

package/src/components/EscalatedLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject } from 'vue';
+import { computed, inject, provide } from 'vue';
 import { usePage, Link } from '@inertiajs/vue3';
 
 const props = defineProps({
@@ -7,13 +7,7 @@ const props = defineProps({
 });
 
 const page = usePage();
-const staticLayout = inject('escalated-layout', null);
-const layoutResolver = inject('escalated-layout-resolver', null);
-
-const hostLayout = computed(() => {
-    if (layoutResolver) return layoutResolver();
-    return staticLayout;
-});
+const hostLayout = inject('escalated-layout', null);
 
 const isAgent = computed(() => page.props.escalated?.is_agent);
 const isAdmin = computed(() => page.props.escalated?.is_admin);
@@ -25,19 +19,25 @@ const prefix = computed(() => {
 const currentUrl = computed(() => page.url);
 const isAdminSection = computed(() => currentUrl.value?.includes('/admin'));
 const isAgentSection = computed(() => currentUrl.value?.includes('/agent'));
+const isDark = computed(() => isAdminSection.value || isAgentSection.value);
+
+provide('esc-dark', isDark);
 
 const adminLinks = computed(() => [
-    { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: 'chart' },
-    { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: 'grid' },
-    { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'clock' },
-    { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'arrow' },
-    { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: 'tag' },
-    { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: 'message' },
+    { href: `${prefix.value}/admin/reports`, label: 'Reports', icon: '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' },
+    { href: `${prefix.value}/admin/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' },
+    { href: `${prefix.value}/admin/departments`, label: 'Departments', icon: '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' },
+    { href: `${prefix.value}/admin/sla-policies`, label: 'SLA Policies', icon: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' },
+    { href: `${prefix.value}/admin/escalation-rules`, label: 'Escalation Rules', icon: 'M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12' },
+    { href: `${prefix.value}/admin/tags`, label: 'Tags', icon: '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' },
+    { href: `${prefix.value}/admin/canned-responses`, label: 'Canned Responses', icon: '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' },
+    { href: `${prefix.value}/admin/macros`, label: 'Macros', icon: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' },
+    { href: `${prefix.value}/admin/settings`, label: 'Settings', icon: 'M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.204-.107-.397.165-.71.505-.781.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894zM15 12a3 3 0 11-6 0 3 3 0 016 0z' },
 ]);
 
 const agentLinks = computed(() => [
-    { href: `${prefix.value}/agent`, label: 'Dashboard' },
-    { href: `${prefix.value}/agent/tickets`, label: 'Tickets' },
+    { href: `${prefix.value}/agent`, label: 'Dashboard', icon: 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25' },
+    { href: `${prefix.value}/agent/tickets`, label: 'Tickets', icon: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z' },
 ]);
 
 const userName = computed(() => page.props.auth?.user?.name || 'User');
@@ -50,146 +50,153 @@ function isActive(href) {
 </script>
 
 <template>
-    <!-- MODE 1: Host layout provided (customer pages within host app) -->
-    <component :is="hostLayout" v-if="hostLayout">
-        <template #header>
-            <div class="flex items-center justify-between">
-                <h2 class="esc-heading text-xl font-semibold leading-tight text-gray-800">{{ title }}</h2>
-                <nav class="flex items-center gap-4 text-sm">
-                    <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
-                    <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
-                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
-                </nav>
-            </div>
-        </template>
-
-        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-            <slot />
-        </div>
-    </component>
-
-    <!-- MODE 2: Admin standalone — dark sidebar layout -->
-    <div v-else-if="isAdminSection" class="esc-root flex min-h-screen bg-gray-950">
+    <!-- MODE 1: Admin — dark sidebar layout -->
+    <div v-if="isAdminSection" class="flex min-h-screen bg-black" style="color-scheme: dark">
         <!-- Sidebar -->
-        <aside class="fixed inset-y-0 left-0 z-30 flex w-64 flex-col border-r border-white/10 bg-gray-900">
+        <aside class="fixed inset-y-0 left-0 z-30 flex w-64 flex-col border-r border-white/[0.06] bg-neutral-950">
             <!-- Logo -->
-            <div class="flex h-16 items-center gap-3 px-6">
-                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 via-cyan-500 to-violet-500">
-                    <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+            <div class="flex h-16 items-center gap-3 px-5">
+                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/10">
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <defs><linearGradient id="esc-rainbow-admin" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="30%" stop-color="#eab308"/><stop offset="50%" stop-color="#22c55e"/><stop offset="70%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#8b5cf6"/></linearGradient></defs>
+                        <g transform="translate(12,12) scale(1.35) translate(-12,-12)"><polyline points="17 11 12 6 7 11" stroke="url(#esc-rainbow-admin)"/><polyline points="17 18 12 13 7 18" stroke="url(#esc-rainbow-admin)"/></g>
                     </svg>
                 </div>
-                <span class="text-lg font-bold text-white">Escalated</span>
-                <span class="rounded bg-white/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400">Admin</span>
+                <div>
+                    <span class="text-sm font-bold text-white tracking-wide">Escalated</span>
+                    <span class="ml-1.5 rounded bg-white/[0.08] px-1.5 py-0.5 text-[10px] font-semibold text-neutral-500">ADMIN</span>
+                </div>
             </div>
 
             <!-- Nav -->
-            <nav class="mt-2 flex-1 space-y-1 px-3">
+            <nav class="mt-1 flex-1 space-y-0.5 overflow-y-auto px-3">
                 <Link v-for="link in adminLinks" :key="link.href" :href="link.href"
-                      :class="['group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all',
+                      :class="['group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-all',
                                isActive(link.href)
-                                   ? 'bg-gradient-to-r from-orange-500/20 via-cyan-500/20 to-violet-500/20 text-white ring-1 ring-white/10'
-                                   : 'text-gray-400 hover:bg-white/5 hover:text-white']">
+                                   ? 'bg-white/[0.08] text-white'
+                                   : 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300']">
+                    <svg :class="['h-[18px] w-[18px] shrink-0', isActive(link.href) ? 'text-white' : 'text-neutral-600 group-hover:text-neutral-400']"
+                         fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
+                    </svg>
                     {{ link.label }}
                 </Link>
             </nav>
 
-            <!-- Bottom -->
-            <div class="border-t border-white/10 p-4">
+            <!-- Bottom section -->
+            <div class="border-t border-white/[0.06] p-3">
                 <Link v-if="isAgent" :href="`${prefix}/agent`"
-                      class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-white">
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" /></svg>
+                      class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-neutral-500 transition-colors hover:bg-white/[0.04] hover:text-neutral-300">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" /></svg>
                     Agent Panel
                 </Link>
                 <Link :href="prefix"
-                      class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-white">
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
+                      class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-neutral-500 transition-colors hover:bg-white/[0.04] hover:text-neutral-300">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
                     Back to App
                 </Link>
+
+                <!-- User -->
+                <div class="mt-2 flex items-center gap-3 rounded-lg bg-white/[0.03] px-3 py-2.5">
+                    <div class="flex h-7 w-7 items-center justify-center rounded-md bg-white/[0.08] text-xs font-semibold text-neutral-400">
+                        {{ userInitial }}
+                    </div>
+                    <span class="text-sm text-neutral-400">{{ userName }}</span>
+                </div>
             </div>
         </aside>
 
         <!-- Main content -->
         <div class="flex flex-1 flex-col pl-64">
             <!-- Top bar -->
-            <header class="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-white/10 bg-gray-900/80 px-6 backdrop-blur-xl">
-                <h1 class="text-lg font-semibold text-white">{{ title }}</h1>
-                <div class="flex items-center gap-3">
-                    <div class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-violet-500 text-xs font-bold text-white">
-                        {{ userInitial }}
-                    </div>
-                    <span class="text-sm text-gray-300">{{ userName }}</span>
-                </div>
+            <header class="sticky top-0 z-20 flex h-14 items-center border-b border-white/[0.06] bg-black/80 px-6 backdrop-blur-xl">
+                <h1 class="text-sm font-semibold text-white">{{ title }}</h1>
             </header>
 
             <!-- Page content -->
-            <main class="flex-1 p-4">
-                <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5">
-                    <slot />
-                </div>
+            <main class="flex-1 p-6">
+                <slot />
             </main>
         </div>
     </div>
 
-    <!-- MODE 3: Agent standalone — dark top-nav layout -->
-    <div v-else-if="isAgentSection" class="esc-root min-h-screen bg-gray-950">
+    <!-- MODE 2: Agent — dark top-nav layout -->
+    <div v-else-if="isAgentSection" class="min-h-screen bg-black" style="color-scheme: dark">
         <!-- Top nav -->
-        <nav class="sticky top-0 z-30 border-b border-white/10 bg-gray-900">
-            <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+        <nav class="sticky top-0 z-30 border-b border-white/[0.06] bg-neutral-950/95 backdrop-blur-xl">
+            <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
                 <!-- Left: branding -->
                 <div class="flex items-center gap-3">
-                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 via-cyan-500 to-violet-500">
-                        <svg class="h-4 w-4 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/10">
+                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <defs><linearGradient id="esc-rainbow-agent" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="30%" stop-color="#eab308"/><stop offset="50%" stop-color="#22c55e"/><stop offset="70%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#8b5cf6"/></linearGradient></defs>
+                            <g transform="translate(12,12) scale(1.35) translate(-12,-12)"><polyline points="17 11 12 6 7 11" stroke="url(#esc-rainbow-agent)"/><polyline points="17 18 12 13 7 18" stroke="url(#esc-rainbow-agent)"/></g>
                         </svg>
                     </div>
-                    <span class="text-lg font-bold text-white">Escalated</span>
+                    <span class="text-sm font-bold text-white tracking-wide">Escalated</span>
                 </div>
 
                 <!-- Center: nav links -->
                 <div class="flex items-center gap-1">
                     <Link v-for="link in agentLinks" :key="link.href" :href="link.href"
-                          :class="['rounded-lg px-4 py-2 text-sm font-medium transition-all',
+                          :class="['flex items-center gap-2 rounded-lg px-3.5 py-1.5 text-[13px] font-medium transition-all',
                                    isActive(link.href)
-                                       ? 'bg-gradient-to-r from-orange-500/20 via-cyan-500/20 to-violet-500/20 text-white ring-1 ring-white/10'
-                                       : 'text-gray-400 hover:bg-white/5 hover:text-white']">
+                                       ? 'bg-white/[0.08] text-white'
+                                       : 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300']">
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" :d="link.icon" />
+                        </svg>
                         {{ link.label }}
                     </Link>
                 </div>
 
-                <!-- Right: user + back -->
-                <div class="flex items-center gap-4">
-                    <div class="flex items-center gap-2">
-                        <div class="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-violet-500 text-xs font-bold text-white">
-                            {{ userInitial }}
-                        </div>
-                        <span class="text-sm text-gray-300">{{ userName }}</span>
-                    </div>
-                    <div class="h-5 w-px bg-white/10"></div>
+                <!-- Right: user + links -->
+                <div class="flex items-center gap-3">
                     <Link v-if="isAdmin" :href="`${prefix}/admin/reports`"
-                          class="text-sm text-gray-400 transition-colors hover:text-white">
+                          class="text-[13px] text-neutral-500 transition-colors hover:text-white">
                         Admin
                     </Link>
                     <Link :href="prefix"
-                          class="text-sm text-gray-400 transition-colors hover:text-white">
+                          class="text-[13px] text-neutral-500 transition-colors hover:text-white">
                         Back to App
                     </Link>
+                    <div class="ml-1 h-5 w-px bg-white/[0.08]"></div>
+                    <div class="flex items-center gap-2">
+                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-white/[0.08] text-[10px] font-semibold text-neutral-400">
+                            {{ userInitial }}
+                        </div>
+                        <span class="text-[13px] text-neutral-400">{{ userName }}</span>
+                    </div>
                 </div>
             </div>
-            <!-- Rainbow accent line -->
-            <div class="h-px bg-gradient-to-r from-orange-500 via-cyan-500 to-violet-500"></div>
         </nav>
 
         <!-- Page content -->
         <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5">
-                <slot />
-            </div>
+            <slot />
         </main>
     </div>
 
-    <!-- MODE 4: Customer standalone fallback (no host layout, not admin/agent) -->
-    <div v-else class="esc-root min-h-screen bg-gray-50">
+    <!-- MODE 3: Customer pages — use host app layout if provided -->
+    <component :is="hostLayout" v-else-if="hostLayout">
+        <template #header>
+            <div class="flex items-center justify-between">
+                <h2 class="text-xl font-semibold leading-tight text-gray-800">{{ title }}</h2>
+                <nav class="flex items-center gap-4 text-sm">
+                    <Link :href="prefix" class="text-gray-600 hover:text-gray-900">My Tickets</Link>
+                    <Link v-if="isAgent" :href="`${prefix}/agent`" class="text-gray-600 hover:text-gray-900">Agent Panel</Link>
+                    <Link v-if="isAdmin" :href="`${prefix}/admin/reports`" class="text-gray-600 hover:text-gray-900">Admin</Link>
+                </nav>
+            </div>
+        </template>
+
+        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+            <slot />
+        </div>
+    </component>
+
+    <!-- MODE 4: Customer standalone fallback (no host layout) -->
+    <div v-else class="min-h-screen bg-gray-50">
         <nav class="border-b border-gray-200 bg-white">
             <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                 <div class="flex h-14 items-center justify-between">

package/src/components/FileDropzone.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 const emit = defineEmits(['files']);
+const dark = inject('esc-dark', computed(() => false));
 
 const dragging = ref(false);
 const fileInput = ref(null);
@@ -27,10 +28,14 @@ function browse() {
 
 <template>
     <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
-         :class="['cursor-pointer rounded-md border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-                  dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400']"
+         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+                  dark
+                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
+                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
          @click="browse">
-        <p class="text-gray-500">Drop files here or <span class="font-medium text-blue-600">browse</span></p>
+        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
+            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
+        </p>
         <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
     </div>
 </template>

package/src/components/FollowButton.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    isFollowing: { type: Boolean, default: false },
+    followersCount: { type: Number, default: 0 },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+const following = ref(props.isFollowing);
+const count = ref(props.followersCount);
+const processing = ref(false);
+
+function toggle() {
+    if (processing.value) return;
+    processing.value = true;
+    router.post(props.action, {}, {
+        preserveScroll: true,
+        onSuccess: () => {
+            following.value = !following.value;
+            count.value += following.value ? 1 : -1;
+        },
+        onFinish: () => {
+            processing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <button @click="toggle"
+            :disabled="processing"
+            :class="['inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                     escDark
+                         ? (following
+                             ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20 hover:bg-cyan-500/25'
+                             : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200')
+                         : (following
+                             ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
+                             : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800'),
+                     processing && 'opacity-50 cursor-not-allowed']">
+        <!-- Eye icon -->
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <template v-if="following">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </template>
+            <template v-else>
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+            </template>
+        </svg>
+        {{ following ? 'Following' : 'Follow' }}
+        <span v-if="count > 0"
+              :class="['rounded-full px-1.5 py-0.5 text-xs',
+                       escDark
+                           ? 'bg-white/[0.06] text-neutral-400'
+                           : 'bg-gray-100 text-gray-500']">
+            {{ count }}
+        </span>
+    </button>
+</template>