@escalated-dev/escalated 0.3.5 → 0.5.0

package/src/components/TicketSidebar.vue

@@ -1,77 +1,99 @@
-<script setup>
-import { inject, computed } from 'vue';
-import StatusBadge from './StatusBadge.vue';
-import PriorityBadge from './PriorityBadge.vue';
-import SlaTimer from './SlaTimer.vue';
-import AssigneeSelect from './AssigneeSelect.vue';
-import TagSelect from './TagSelect.vue';
-import ActivityTimeline from './ActivityTimeline.vue';
-
-defineProps({
-    ticket: { type: Object, required: true },
-    agents: { type: Array, default: () => [] },
-    tags: { type: Array, default: () => [] },
-    activities: { type: Array, default: () => [] },
-    editable: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const cardClass = computed(() => escDark.value
-    ? 'rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4'
-    : 'rounded-lg border border-gray-200 bg-white p-4'
-);
-</script>
-
-<template>
-    <aside class="space-y-4">
-        <div :class="cardClass">
-            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Details</h3>
-            <dl class="space-y-2 text-sm">
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Status</dt>
-                    <dd><StatusBadge :status="ticket.status" /></dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Priority</dt>
-                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Reference</dt>
-                    <dd :class="['font-mono text-xs', escDark ? 'text-white' : '']">{{ ticket.reference }}</dd>
-                </div>
-                <div v-if="ticket.department" class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Department</dt>
-                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ ticket.department.name }}</dd>
-                </div>
-                <div class="flex justify-between">
-                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Created</dt>
-                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
-                </div>
-            </dl>
-        </div>
-
-        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
-            <SlaTimer v-if="ticket.first_response_due_at" :due-at="ticket.first_response_due_at"
-                      :breached="ticket.sla_first_response_breached" label="First Response" />
-            <SlaTimer v-if="ticket.resolution_due_at" :due-at="ticket.resolution_due_at"
-                      :breached="ticket.sla_resolution_breached" label="Resolution" />
-        </div>
-
-        <div v-if="editable && agents.length" :class="cardClass">
-            <AssigneeSelect :agents="agents" :model-value="ticket.assigned_to"
-                            @update:model-value="emit('assign', $event)" />
-        </div>
-
-        <div v-if="editable && tags.length" :class="cardClass">
-            <TagSelect :tags="tags" :model-value="(ticket.tags || []).map(t => t.id)"
-                       @update:model-value="emit('tags', $event)" />
-        </div>
-
-        <div v-if="activities.length" :class="cardClass">
-            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Activity</h3>
-            <ActivityTimeline :activities="activities" />
-        </div>
-    </aside>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+import StatusBadge from './StatusBadge.vue';
+import PriorityBadge from './PriorityBadge.vue';
+import SlaTimer from './SlaTimer.vue';
+import AssigneeSelect from './AssigneeSelect.vue';
+import TagSelect from './TagSelect.vue';
+import ActivityTimeline from './ActivityTimeline.vue';
+
+defineProps({
+    ticket: { type: Object, required: true },
+    agents: { type: Array, default: () => [] },
+    tags: { type: Array, default: () => [] },
+    activities: { type: Array, default: () => [] },
+    editable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['assign', 'tags', 'priority', 'department', 'status']);
+const escDark = inject('esc-dark', computed(() => false));
+
+const cardClass = computed(() => escDark.value
+    ? 'rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4'
+    : 'rounded-lg border border-gray-200 bg-white p-4'
+);
+
+function renderStars(rating) {
+    return Array.from({ length: 5 }, (_, i) => i < rating ? 'filled' : 'empty');
+}
+</script>
+
+<template>
+    <aside class="space-y-4">
+        <div :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Details</h3>
+            <dl class="space-y-2 text-sm">
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Status</dt>
+                    <dd><StatusBadge :status="ticket.status" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Priority</dt>
+                    <dd><PriorityBadge :priority="ticket.priority" /></dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Reference</dt>
+                    <dd :class="['font-mono text-xs', escDark ? 'text-white' : '']">{{ ticket.reference }}</dd>
+                </div>
+                <div v-if="ticket.department" class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Department</dt>
+                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ ticket.department.name }}</dd>
+                </div>
+                <div class="flex justify-between">
+                    <dt :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Created</dt>
+                    <dd :class="escDark ? 'text-neutral-300' : ''">{{ new Date(ticket.created_at).toLocaleDateString() }}</dd>
+                </div>
+            </dl>
+        </div>
+
+        <!-- Satisfaction Rating (read-only) -->
+        <div v-if="ticket.satisfaction_rating" :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Customer Satisfaction</h3>
+            <div class="flex items-center gap-1">
+                <svg v-for="(star, i) in renderStars(ticket.satisfaction_rating.rating)" :key="i"
+                     class="h-5 w-5" :class="star === 'filled' ? 'text-amber-400' : (escDark ? 'text-neutral-700' : 'text-gray-300')"
+                     fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+                <span :class="['ml-2 text-sm font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                    {{ ticket.satisfaction_rating.rating }}/5
+                </span>
+            </div>
+            <p v-if="ticket.satisfaction_rating.comment" :class="['mt-2 text-xs italic', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                "{{ ticket.satisfaction_rating.comment }}"
+            </p>
+        </div>
+
+        <div v-if="ticket.first_response_due_at || ticket.resolution_due_at" class="space-y-2">
+            <SlaTimer v-if="ticket.first_response_due_at" :due-at="ticket.first_response_due_at"
+                      :breached="ticket.sla_first_response_breached" label="First Response" />
+            <SlaTimer v-if="ticket.resolution_due_at" :due-at="ticket.resolution_due_at"
+                      :breached="ticket.sla_resolution_breached" label="Resolution" />
+        </div>
+
+        <div v-if="editable && agents.length" :class="cardClass">
+            <AssigneeSelect :agents="agents" :model-value="ticket.assigned_to"
+                            @update:model-value="emit('assign', $event)" />
+        </div>
+
+        <div v-if="editable && tags.length" :class="cardClass">
+            <TagSelect :tags="tags" :model-value="(ticket.tags || []).map(t => t.id)"
+                       @update:model-value="emit('tags', $event)" />
+        </div>
+
+        <div v-if="activities.length" :class="cardClass">
+            <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-white' : 'text-gray-900']">Activity</h3>
+            <ActivityTimeline :activities="activities" />
+        </div>
+    </aside>
+</template>

package/src/composables/useKeyboardShortcuts.js

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

package/src/composables/usePluginExtensions.js

@@ -0,0 +1,67 @@
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+
+/**
+ * Composable for reading plugin extensions from Inertia shared props.
+ *
+ * The Laravel backend (escalated-laravel) shares plugin UI extensions via
+ * `$page.props.escalated.plugins`, which contains:
+ * - menuItems: Array of navigation items injected by plugins
+ * - dashboardWidgets: Array of widget definitions for the agent dashboard
+ * - pageComponents: Object mapping slot names to arrays of component definitions
+ *
+ * @returns {Object} Plugin extension data and helper functions
+ */
+export function usePluginExtensions() {
+    const page = usePage();
+
+    const pluginData = computed(() => page.props?.escalated?.plugins || {});
+
+    /**
+     * Menu items injected by plugins, sorted by position.
+     * Each item: { label, route, icon, position, permission, badge, submenu }
+     */
+    const menuItems = computed(() => {
+        const items = pluginData.value.menuItems || [];
+        return [...items].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Dashboard widgets injected by plugins, sorted by position.
+     * Each widget: { id, title, component, plugin, data, position, width }
+     */
+    const dashboardWidgets = computed(() => {
+        const widgets = pluginData.value.dashboardWidgets || [];
+        return [...widgets].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Get plugin components for a specific page slot, sorted by position.
+     *
+     * @param {string} pageName - The page name (e.g. 'dashboard', 'ticket.show')
+     * @param {string} slotName - The slot name (e.g. 'header', 'sidebar', 'footer')
+     * @returns {Array} Sorted array of component definitions for the given slot
+     */
+    function getPageComponents(pageName, slotName) {
+        const key = `${pageName}.${slotName}`;
+        const components = pluginData.value.pageComponents || {};
+        return [...(components[key] || [])].sort((a, b) => (a.position || 100) - (b.position || 100));
+    }
+
+    /**
+     * Check whether any plugins have registered extensions.
+     */
+    const hasPlugins = computed(() => {
+        return menuItems.value.length > 0
+            || dashboardWidgets.value.length > 0
+            || Object.keys(pluginData.value.pageComponents || {}).length > 0;
+    });
+
+    return {
+        pluginData,
+        menuItems,
+        dashboardWidgets,
+        getPageComponents,
+        hasPlugins,
+    };
+}

package/src/defineEscalatedPlugin.js

@@ -0,0 +1,50 @@
+/**
+ * Helper for plugin authors to define an Escalated plugin.
+ *
+ * Returns a Vue plugin object that registers components globally when installed.
+ *
+ * Usage in a plugin's main entry file:
+ *
+ *   import { defineEscalatedPlugin } from '@escalated-dev/escalated'
+ *   import SalesWidget from './Components/SalesWidget.vue'
+ *   import CustomSidebar from './Components/CustomSidebar.vue'
+ *
+ *   export default defineEscalatedPlugin({
+ *       name: 'my-plugin',
+ *       components: {
+ *           SalesWidget,
+ *           CustomSidebar,
+ *       },
+ *       setup(app) {
+ *           // Optional: run custom setup logic when the plugin is installed
+ *       },
+ *   })
+ *
+ * @param {Object} options
+ * @param {string} options.name - Plugin identifier
+ * @param {Object} [options.components] - Map of component name to component definition
+ * @param {Function} [options.setup] - Optional setup callback receiving the Vue app instance
+ * @returns {Object} A Vue plugin object with an install() method
+ */
+export function defineEscalatedPlugin(options = {}) {
+    return {
+        install(app) {
+            // Register all provided components globally
+            if (options.components) {
+                Object.entries(options.components).forEach(([name, component]) => {
+                    app.component(name, component);
+                });
+            }
+
+            // Run optional setup callback
+            if (typeof options.setup === 'function') {
+                options.setup(app);
+            }
+
+            // Provide the plugin name for debugging
+            if (options.name) {
+                app.provide(`escalated-plugin:${options.name}`, true);
+            }
+        },
+    };
+}

package/src/index.js

@@ -5,11 +5,20 @@ export { EscalatedPlugin } from './plugin'
 export { default as ActivityTimeline } from './components/ActivityTimeline.vue'
 export { default as AssigneeSelect } from './components/AssigneeSelect.vue'
 export { default as AttachmentList } from './components/AttachmentList.vue'
+export { default as BulkActionBar } from './components/BulkActionBar.vue'
 export { default as EscalatedLayout } from './components/EscalatedLayout.vue'
 export { default as FileDropzone } from './components/FileDropzone.vue'
+export { default as FollowButton } from './components/FollowButton.vue'
+export { default as KeyboardShortcutHelp } from './components/KeyboardShortcutHelp.vue'
+export { default as MacroDropdown } from './components/MacroDropdown.vue'
+export { default as PinnedNotes } from './components/PinnedNotes.vue'
+export { default as PluginSlot } from './components/PluginSlot.vue'
+export { default as PresenceIndicator } from './components/PresenceIndicator.vue'
 export { default as PriorityBadge } from './components/PriorityBadge.vue'
+export { default as QuickFilters } from './components/QuickFilters.vue'
 export { default as ReplyComposer } from './components/ReplyComposer.vue'
 export { default as ReplyThread } from './components/ReplyThread.vue'
+export { default as SatisfactionRating } from './components/SatisfactionRating.vue'
 export { default as SlaTimer } from './components/SlaTimer.vue'
 export { default as StatsCard } from './components/StatsCard.vue'
 export { default as StatusBadge } from './components/StatusBadge.vue'
@@ -17,3 +26,10 @@ export { default as TagSelect } from './components/TagSelect.vue'
 export { default as TicketFilters } from './components/TicketFilters.vue'
 export { default as TicketList } from './components/TicketList.vue'
 export { default as TicketSidebar } from './components/TicketSidebar.vue'
+
+// Composables
+export { useKeyboardShortcuts } from './composables/useKeyboardShortcuts'
+export { usePluginExtensions } from './composables/usePluginExtensions'
+
+// Plugin authoring helper
+export { defineEscalatedPlugin } from './defineEscalatedPlugin'

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

@@ -0,0 +1,217 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { useForm, usePage } from '@inertiajs/vue3';
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+
+const props = defineProps({
+    tokens: Array,
+    users: Array,
+    api_enabled: Boolean,
+});
+
+const dark = inject('esc-dark', computed(() => true));
+const page = usePage();
+const prefix = computed(() => {
+    const p = page.props.escalated?.prefix || 'support';
+    return p.startsWith('/') ? p : `/${p}`;
+});
+
+const showCreate = ref(false);
+const copiedToken = ref(null);
+
+const form = useForm({
+    name: '',
+    user_id: '',
+    abilities: ['agent'],
+    expires_in_days: null,
+});
+
+function createToken() {
+    form.post(`${prefix.value}/admin/api-tokens`, {
+        preserveScroll: true,
+        onSuccess: (page) => {
+            const flash = page.props.flash || {};
+            if (flash.plain_text_token) {
+                copiedToken.value = flash.plain_text_token;
+            }
+            form.reset();
+            showCreate.value = false;
+        },
+    });
+}
+
+function revokeToken(id) {
+    if (!confirm('Are you sure you want to revoke this token? This cannot be undone.')) return;
+    useForm({}).delete(`${prefix.value}/admin/api-tokens/${id}`, { preserveScroll: true });
+}
+
+function copyToken() {
+    if (copiedToken.value) {
+        navigator.clipboard.writeText(copiedToken.value);
+    }
+}
+
+function dismissToken() {
+    copiedToken.value = null;
+}
+
+function toggleAbility(ability) {
+    const idx = form.abilities.indexOf(ability);
+    if (idx >= 0) {
+        form.abilities.splice(idx, 1);
+    } else {
+        form.abilities.push(ability);
+    }
+}
+
+function formatDate(iso) {
+    if (!iso) return '—';
+    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="API Tokens">
+        <div class="space-y-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between">
+                <div>
+                    <h2 :class="dark ? 'text-white' : 'text-gray-900'" class="text-lg font-semibold">API Tokens</h2>
+                    <p :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="mt-1 text-sm">Manage API tokens for desktop apps and external integrations.</p>
+                </div>
+                <button @click="showCreate = true"
+                    :class="dark ? 'bg-white text-black hover:bg-neutral-200' : 'bg-gray-900 text-white hover:bg-gray-800'"
+                    class="rounded-lg px-4 py-2 text-sm font-medium transition-colors">
+                    Create Token
+                </button>
+            </div>
+
+            <!-- Not enabled warning -->
+            <div v-if="!api_enabled"
+                 :class="dark ? 'border-amber-500/30 bg-amber-500/10 text-amber-300' : 'border-amber-300 bg-amber-50 text-amber-800'"
+                 class="rounded-lg border p-4 text-sm">
+                The REST API is currently disabled. Set <code class="font-mono">ESCALATED_API_ENABLED=true</code> in your .env to enable it.
+            </div>
+
+            <!-- Copied token modal -->
+            <div v-if="copiedToken"
+                 :class="dark ? 'border-emerald-500/30 bg-emerald-500/10' : 'border-emerald-300 bg-emerald-50'"
+                 class="rounded-lg border p-4">
+                <p :class="dark ? 'text-emerald-300' : 'text-emerald-800'" class="text-sm font-medium">Token created! Copy it now — it won't be shown again.</p>
+                <div class="mt-2 flex items-center gap-2">
+                    <code :class="dark ? 'bg-black text-emerald-400' : 'bg-white text-emerald-700'"
+                          class="flex-1 rounded border px-3 py-2 text-xs font-mono break-all"
+                          :style="dark ? 'border-color: rgba(255,255,255,0.1)' : ''">{{ copiedToken }}</code>
+                    <button @click="copyToken"
+                        :class="dark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+                        class="rounded-lg px-3 py-2 text-sm font-medium transition-colors">Copy</button>
+                    <button @click="dismissToken"
+                        :class="dark ? 'text-neutral-500 hover:text-white' : 'text-gray-400 hover:text-gray-600'"
+                        class="px-2 py-2 text-sm transition-colors">Dismiss</button>
+                </div>
+            </div>
+
+            <!-- Create form -->
+            <div v-if="showCreate"
+                 :class="dark ? 'border-white/[0.06] bg-neutral-950' : 'border-gray-200 bg-white'"
+                 class="rounded-lg border p-5 space-y-4">
+                <h3 :class="dark ? 'text-white' : 'text-gray-900'" class="text-sm font-semibold">New API Token</h3>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Token Name</label>
+                        <input v-model="form.name" type="text" placeholder="e.g. Desktop App - Work Laptop"
+                            :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
+                            class="w-full rounded-lg border px-3 py-2 text-sm" />
+                    </div>
+                    <div>
+                        <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">User</label>
+                        <select v-model="form.user_id"
+                            :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
+                            class="w-full rounded-lg border px-3 py-2 text-sm">
+                            <option value="">Select user...</option>
+                            <option v-for="u in users" :key="u.id" :value="u.id">{{ u.name }} ({{ u.email }})</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div>
+                    <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Abilities</label>
+                    <div class="flex items-center gap-3">
+                        <label v-for="ability in ['agent', 'admin']" :key="ability"
+                            :class="dark ? 'text-neutral-300' : 'text-gray-700'"
+                            class="flex items-center gap-1.5 text-sm cursor-pointer">
+                            <input type="checkbox" :checked="form.abilities.includes(ability)" @change="toggleAbility(ability)"
+                                class="rounded border-neutral-600" />
+                            {{ ability }}
+                        </label>
+                    </div>
+                </div>
+
+                <div>
+                    <label :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="mb-1 block text-xs font-medium">Expires In (days)</label>
+                    <input v-model.number="form.expires_in_days" type="number" min="1" max="365" placeholder="Leave empty for no expiration"
+                        :class="dark ? 'border-white/[0.08] bg-white/[0.04] text-white' : 'border-gray-300 bg-white text-gray-900'"
+                        class="w-48 rounded-lg border px-3 py-2 text-sm" />
+                </div>
+
+                <div class="flex items-center gap-3 pt-2">
+                    <button @click="createToken" :disabled="form.processing || !form.name || !form.user_id"
+                        :class="dark ? 'bg-white text-black hover:bg-neutral-200 disabled:bg-neutral-700 disabled:text-neutral-500' : 'bg-gray-900 text-white hover:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500'"
+                        class="rounded-lg px-4 py-2 text-sm font-medium transition-colors">
+                        {{ form.processing ? 'Creating...' : 'Create Token' }}
+                    </button>
+                    <button @click="showCreate = false"
+                        :class="dark ? 'text-neutral-500 hover:text-white' : 'text-gray-500 hover:text-gray-900'"
+                        class="text-sm transition-colors">Cancel</button>
+                </div>
+            </div>
+
+            <!-- Tokens table -->
+            <div :class="dark ? 'border-white/[0.06]' : 'border-gray-200'" class="overflow-hidden rounded-lg border">
+                <table class="w-full text-sm">
+                    <thead :class="dark ? 'bg-white/[0.03] text-neutral-500' : 'bg-gray-50 text-gray-500'">
+                        <tr>
+                            <th class="px-4 py-3 text-left text-xs font-medium uppercase">Name</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium uppercase">User</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium uppercase">Abilities</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium uppercase">Last Used</th>
+                            <th class="px-4 py-3 text-left text-xs font-medium uppercase">Expires</th>
+                            <th class="px-4 py-3 text-right text-xs font-medium uppercase">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody :class="dark ? 'divide-white/[0.04]' : 'divide-gray-100'" class="divide-y">
+                        <tr v-for="token in tokens" :key="token.id"
+                            :class="[dark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50', token.is_expired ? 'opacity-50' : '']">
+                            <td :class="dark ? 'text-white' : 'text-gray-900'" class="px-4 py-3 font-medium">{{ token.name }}</td>
+                            <td :class="dark ? 'text-neutral-400' : 'text-gray-600'" class="px-4 py-3">{{ token.user_name }}</td>
+                            <td class="px-4 py-3">
+                                <span v-for="a in (token.abilities || [])" :key="a"
+                                    :class="dark ? 'bg-white/[0.06] text-neutral-300' : 'bg-gray-100 text-gray-700'"
+                                    class="mr-1 rounded px-1.5 py-0.5 text-xs">{{ a }}</span>
+                            </td>
+                            <td :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="px-4 py-3 text-xs">
+                                <template v-if="token.last_used_at">{{ formatDate(token.last_used_at) }}</template>
+                                <template v-else>Never</template>
+                            </td>
+                            <td :class="dark ? 'text-neutral-500' : 'text-gray-500'" class="px-4 py-3 text-xs">
+                                <span v-if="token.is_expired" class="text-rose-400">Expired</span>
+                                <template v-else-if="token.expires_at">{{ formatDate(token.expires_at) }}</template>
+                                <template v-else>Never</template>
+                            </td>
+                            <td class="px-4 py-3 text-right">
+                                <button @click="revokeToken(token.id)"
+                                    class="text-xs text-rose-400 hover:text-rose-300 transition-colors">Revoke</button>
+                            </td>
+                        </tr>
+                        <tr v-if="!tokens.length">
+                            <td colspan="6" :class="dark ? 'text-neutral-500' : 'text-gray-400'" class="px-4 py-8 text-center text-sm">
+                                No API tokens created yet.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>