@escalated-dev/escalated 0.4.0 → 0.6.0

package/src/locales/fr.json

@@ -0,0 +1,442 @@
+{
+  "nav": {
+    "admin": "Administration",
+    "admin_badge": "ADMIN",
+    "agent_panel": "Panneau agent",
+    "back_to_app": "Retour à l'application",
+    "my_tickets": "Mes tickets",
+    "dashboard": "Tableau de bord",
+    "tickets": "Tickets",
+    "reports": "Rapports",
+    "departments": "Départements",
+    "sla_policies": "Politiques SLA",
+    "escalation_rules": "Règles d'escalade",
+    "tags": "Étiquettes",
+    "canned_responses": "Réponses prédéfinies",
+    "macros": "Macros",
+    "api_tokens": "Jetons API",
+    "plugins": "Extensions",
+    "settings": "Paramètres"
+  },
+  "status": {
+    "open": "Ouvert",
+    "in_progress": "En cours",
+    "waiting_on_customer": "En attente du client",
+    "waiting_on_agent": "En attente de l'agent",
+    "escalated": "Escaladé",
+    "resolved": "Résolu",
+    "closed": "Fermé",
+    "reopened": "Rouvert"
+  },
+  "priority": {
+    "low": "Basse",
+    "medium": "Moyenne",
+    "high": "Haute",
+    "urgent": "Urgente",
+    "critical": "Critique"
+  },
+  "activity": {
+    "status_changed": "a changé le statut",
+    "assigned": "a assigné le ticket",
+    "unassigned": "a désassigné le ticket",
+    "priority_changed": "a changé la priorité",
+    "tag_added": "a ajouté une étiquette",
+    "tag_removed": "a retiré une étiquette",
+    "escalated": "a escaladé le ticket",
+    "sla_breached": "SLA dépassé",
+    "replied": "a répondu",
+    "note_added": "a ajouté une note",
+    "department_changed": "a changé le département",
+    "reopened": "a rouvert le ticket",
+    "resolved": "a résolu le ticket",
+    "closed": "a fermé le ticket",
+    "system": "Système",
+    "no_activity": "Aucune activité pour le moment.",
+    "to": "à",
+    "assigned_to": "assigné à"
+  },
+  "ticket": {
+    "reference": "Référence",
+    "subject": "Sujet",
+    "requester": "Demandeur",
+    "status": "Statut",
+    "priority": "Priorité",
+    "assignee": "Assigné à",
+    "last_reply": "Dernière réponse",
+    "unknown": "Inconnu",
+    "unassigned": "Non assigné",
+    "no_tickets": "Aucun ticket trouvé.",
+    "details": "Détails",
+    "department": "Département",
+    "created": "Créé",
+    "activity": "Activité",
+    "conversation": "Conversation",
+    "by": "par",
+    "assign_to_me": "M'assigner",
+    "close_ticket": "Fermer le ticket",
+    "reopen": "Rouvrir",
+    "all_tickets": "Tous les tickets",
+    "ticket_queue": "File d'attente des tickets",
+    "my_tickets": "Mes tickets",
+    "new_ticket": "Nouveau ticket",
+    "create_ticket": "Créer un ticket",
+    "submit_ticket": "Soumettre le ticket",
+    "no_replies": "Aucune réponse pour le moment.",
+    "ticket_closed_no_replies": "Ce ticket est fermé. Aucune réponse supplémentaire ne peut être ajoutée."
+  },
+  "bulk": {
+    "tickets_selected": ":count ticket(s) sélectionné(s)",
+    "status_placeholder": "Statut...",
+    "priority_placeholder": "Priorité...",
+    "assign_placeholder": "Assigner à...",
+    "department_placeholder": "Département...",
+    "delete": "Supprimer",
+    "deselect_all": "Tout désélectionner"
+  },
+  "filter": {
+    "search_tickets": "Rechercher des tickets...",
+    "all_statuses": "Tous les statuts",
+    "all_priorities": "Toutes les priorités",
+    "all_agents": "Tous les agents",
+    "all_departments": "Tous les départements",
+    "following": "Suivis"
+  },
+  "quick_filter": {
+    "my_tickets": "Mes tickets",
+    "unassigned": "Non assignés",
+    "urgent_plus": "Urgent+",
+    "sla_breaching": "SLA en dépassement",
+    "following": "Suivis"
+  },
+  "reply": {
+    "reply": "Répondre",
+    "internal_note": "Note interne",
+    "note_visibility": "Cette note est visible uniquement par les agents.",
+    "placeholder": "Saisissez votre réponse...",
+    "canned_responses": "Réponses prédéfinies...",
+    "add_note": "Ajouter une note",
+    "send_reply": "Envoyer la réponse",
+    "pinned": "Épinglé",
+    "unpin": "Désépingler",
+    "pin": "Épingler",
+    "write_internal_note": "Rédiger une note interne..."
+  },
+  "rating": {
+    "customer_rating": "Évaluation du client",
+    "how_was_experience": "Comment était votre expérience ?",
+    "terrible": "Terrible",
+    "poor": "Mauvaise",
+    "okay": "Correcte",
+    "good": "Bonne",
+    "excellent": "Excellente",
+    "feedback_placeholder": "Des commentaires supplémentaires ? (facultatif)",
+    "thank_you": "Merci pour votre retour !",
+    "submit_rating": "Soumettre l'évaluation",
+    "customer_satisfaction": "Satisfaction client"
+  },
+  "keyboard": {
+    "title": "Raccourcis clavier",
+    "list_view": "Vue liste",
+    "detail_view": "Vue détaillée",
+    "global": "Global",
+    "move_down": "Descendre",
+    "move_up": "Monter",
+    "toggle_select": "Basculer la sélection",
+    "open_ticket": "Ouvrir le ticket",
+    "reply": "Répondre",
+    "internal_note": "Note interne",
+    "change_status": "Changer le statut",
+    "change_priority": "Changer la priorité",
+    "follow_unfollow": "Suivre/Ne plus suivre",
+    "show_help": "Afficher cette aide",
+    "esc_to_close": "Appuyez sur Échap pour fermer"
+  },
+  "sla": {
+    "overdue": "En retard",
+    "breached": "SLA dépassé",
+    "first_response": "Première réponse",
+    "resolution": "Résolution"
+  },
+  "follow": {
+    "following": "Suivi",
+    "follow": "Suivre"
+  },
+  "file": {
+    "drop_or_browse": "Déposez les fichiers ici ou :link",
+    "browse": "parcourir"
+  },
+  "macro": {
+    "apply_macro": "Appliquer une macro",
+    "macros": "Macros",
+    "no_macros": "Aucune macro disponible"
+  },
+  "form": {
+    "name": "Nom",
+    "description": "Description",
+    "slug": "Identifiant",
+    "auto_generated": "Généré automatiquement si vide",
+    "active": "Actif",
+    "update": "Mettre à jour",
+    "create": "Créer",
+    "save": "Enregistrer",
+    "cancel": "Annuler",
+    "edit": "Modifier",
+    "delete": "Supprimer",
+    "actions": "Actions",
+    "order": "Ordre",
+    "value": "Valeur",
+    "yes": "Oui",
+    "no": "Non",
+    "confirm": "Confirmer",
+    "none": "Aucun",
+    "general": "Général",
+    "shared": "Partagé",
+    "private": "Privé",
+    "color": "Couleur",
+    "title": "Titre",
+    "copy": "Copier",
+    "dismiss": "Fermer",
+    "saved": "Enregistré.",
+    "saving": "Enregistrement...",
+    "creating": "Création...",
+    "submitting": "Envoi en cours...",
+    "sending": "Envoi...",
+    "uploading": "Téléversement...",
+    "copied": "Copié !",
+    "subject": "Sujet",
+    "priority": "Priorité",
+    "department": "Département",
+    "attachments": "Pièces jointes"
+  },
+  "presence": {
+    "also_viewing": "Consultent également : :names"
+  },
+  "pinned_notes": {
+    "title": "Notes épinglées",
+    "unpin": "Désépingler"
+  },
+  "admin": {
+    "settings": {
+      "title": "Paramètres",
+      "general": "Général",
+      "guest_tickets": "Tickets invités",
+      "guest_tickets_desc": "Permettre aux visiteurs de soumettre des tickets sans se connecter",
+      "allow_customer_close": "Autoriser la fermeture par le client",
+      "allow_customer_close_desc": "Permettre aux clients de fermer leurs propres tickets",
+      "auto_close": "Fermeture automatique des tickets résolus après",
+      "auto_close_desc": "Nombre de jours après la résolution avant la fermeture automatique (0 pour désactiver)",
+      "days": "jours",
+      "limits": "Limites",
+      "max_attachments": "Nombre maximal de pièces jointes par réponse",
+      "max_attachment_size": "Taille maximale des pièces jointes",
+      "tickets": "Tickets",
+      "reference_prefix": "Préfixe de référence",
+      "reference_prefix_desc": "Préfixe pour les références de tickets (ex. ESC produit ESC-00001)",
+      "inbound_email": "E-mail entrant",
+      "inbound_email_desc": "Permettre la création et la réponse aux tickets par e-mail",
+      "email_provider": "Fournisseur d'e-mail",
+      "email_provider_desc": "Mode de réception des e-mails entrants",
+      "support_email": "Adresse e-mail du support",
+      "support_email_desc": "L'adresse e-mail à laquelle les clients enverront leurs messages (ex. support@exemple.com)",
+      "signing_key": "Clé de signature",
+      "webhook_url": "URL du webhook",
+      "mailgun_webhook_desc": "Configurez cette URL dans votre tableau de bord Mailgun",
+      "inbound_token": "Jeton entrant",
+      "postmark_webhook_desc": "Configurez cette URL dans les paramètres de votre serveur Postmark",
+      "region": "Région",
+      "topic_arn": "ARN du sujet",
+      "ses_webhook_desc": "Configurez cette URL comme point de terminaison de votre abonnement SNS",
+      "host": "Hôte",
+      "port": "Port",
+      "encryption": "Chiffrement",
+      "username": "Nom d'utilisateur",
+      "password": "Mot de passe",
+      "mailbox": "Boîte de réception",
+      "save_settings": "Enregistrer les paramètres"
+    },
+    "reports": {
+      "title": "Rapports",
+      "last_days": ":count derniers jours",
+      "total_tickets": "Total des tickets",
+      "resolved": "Résolus",
+      "avg_first_response": "Temps moyen de première réponse",
+      "sla_breaches": "Dépassements SLA",
+      "by_status": "Par statut",
+      "by_priority": "Par priorité",
+      "no_data": "Aucune donnée de ticket pour cette période",
+      "no_ratings": "Aucune évaluation pour cette période",
+      "ratings_count": "(:count évaluations)"
+    },
+    "departments": {
+      "title": "Départements",
+      "add": "Ajouter un département",
+      "edit_title": "Modifier le département",
+      "new_title": "Nouveau département",
+      "tickets": "Tickets",
+      "agents": "Agents",
+      "no_departments": "Aucun département pour le moment",
+      "no_departments_desc": "Créez votre premier département pour organiser les tickets",
+      "confirm_delete": "Supprimer ce département ?"
+    },
+    "sla_policies": {
+      "title": "Politiques SLA",
+      "add": "Ajouter une politique",
+      "edit_title": "Modifier la politique SLA",
+      "new_title": "Nouvelle politique SLA",
+      "default": "Par défaut",
+      "business_hours": "Heures ouvrées",
+      "business_hours_only": "Heures ouvrées uniquement",
+      "default_policy": "Politique par défaut",
+      "first_response_hours": "Heures de première réponse (par priorité)",
+      "resolution_hours": "Heures de résolution (par priorité)",
+      "no_policies": "Aucune politique SLA pour le moment",
+      "no_policies_desc": "Définissez des objectifs de temps de réponse et de résolution",
+      "confirm_delete": "Supprimer cette politique SLA ?"
+    },
+    "escalation_rules": {
+      "title": "Règles d'escalade",
+      "add": "Ajouter une règle",
+      "edit_title": "Modifier la règle d'escalade",
+      "new_title": "Nouvelle règle d'escalade",
+      "trigger": "Déclencheur",
+      "trigger_type": "Type de déclencheur",
+      "time_based": "Basé sur le temps",
+      "sla_breach": "Dépassement SLA",
+      "priority_based": "Basé sur la priorité",
+      "conditions": "Conditions",
+      "add_short": "+ Ajouter",
+      "status": "Statut",
+      "priority": "Priorité",
+      "assignment": "Assignation",
+      "age_hours": "Ancienneté (heures)",
+      "no_response_hours": "Sans réponse (heures)",
+      "sla_breached": "SLA dépassé",
+      "escalate": "Escalader",
+      "change_priority": "Changer la priorité",
+      "assign_to": "Assigner à",
+      "change_department": "Changer le département",
+      "no_rules": "Aucune règle d'escalade pour le moment",
+      "no_rules_desc": "Configurez l'escalade automatique pour les tickets en retard",
+      "confirm_delete": "Supprimer cette règle d'escalade ?"
+    },
+    "canned_responses": {
+      "title": "Réponses prédéfinies",
+      "add": "Ajouter une réponse",
+      "title_placeholder": "Titre",
+      "body_placeholder": "Corps de la réponse...",
+      "category_placeholder": "Catégorie (facultatif)",
+      "no_responses": "Aucune réponse prédéfinie pour le moment",
+      "no_responses_desc": "Créez des modèles réutilisables pour les réponses courantes",
+      "confirm_delete": "Supprimer cette réponse prédéfinie ?"
+    },
+    "tags": {
+      "title": "Étiquettes",
+      "add": "Ajouter une étiquette",
+      "no_tags": "Aucune étiquette pour le moment",
+      "no_tags_desc": "Créez des étiquettes pour catégoriser et filtrer les tickets",
+      "confirm_delete": "Supprimer cette étiquette ?"
+    },
+    "macros": {
+      "title": "Macros",
+      "subtitle": "Les macros automatisent les actions répétitives sur les tickets.",
+      "create_macro": "Créer une macro",
+      "update_macro": "Mettre à jour la macro",
+      "shared_label": "Partagée avec tous les agents",
+      "add_action": "+ Ajouter une action",
+      "no_actions": "Aucune action pour le moment. Ajoutez des actions pour définir le comportement de cette macro.",
+      "set_status": "Définir le statut",
+      "set_priority": "Définir la priorité",
+      "assign_to": "Assigner à",
+      "add_tags": "Ajouter des étiquettes",
+      "move_to_department": "Déplacer vers le département",
+      "send_reply": "Envoyer une réponse",
+      "add_internal_note": "Ajouter une note interne",
+      "select_status": "Sélectionner le statut...",
+      "select_priority": "Sélectionner la priorité...",
+      "agent_placeholder": "Identifiant ou e-mail de l'agent",
+      "tags_placeholder": "Noms d'étiquettes séparés par des virgules",
+      "department_placeholder": "Identifiant ou nom du département",
+      "reply_placeholder": "Message de réponse...",
+      "note_placeholder": "Contenu de la note...",
+      "no_macros": "Aucune macro pour le moment",
+      "no_macros_desc": "Créez des macros pour automatiser les actions répétitives sur les tickets",
+      "creator": "Créateur",
+      "confirm_delete": "Supprimer cette macro ? Cette action est irréversible."
+    },
+    "api_tokens": {
+      "title": "Jetons API",
+      "subtitle": "Gérez les jetons API pour les applications de bureau et les intégrations externes.",
+      "create_token": "Créer un jeton",
+      "api_disabled": "L'API REST est actuellement désactivée. Définissez ESCALATED_API_ENABLED=true dans votre fichier .env pour l'activer.",
+      "token_created": "Jeton créé ! Copiez-le maintenant — il ne sera plus affiché.",
+      "new_token": "Nouveau jeton API",
+      "token_name": "Nom du jeton",
+      "token_name_placeholder": "ex. Application de bureau - Ordinateur professionnel",
+      "user": "Utilisateur",
+      "select_user": "Sélectionner un utilisateur...",
+      "abilities": "Permissions",
+      "expires_in": "Expire dans (jours)",
+      "no_expiration": "Laissez vide pour aucune expiration",
+      "last_used": "Dernière utilisation",
+      "expires": "Expire",
+      "never": "Jamais",
+      "expired": "Expiré",
+      "revoke": "Révoquer",
+      "no_tokens": "Aucun jeton API créé pour le moment.",
+      "confirm_revoke": "Êtes-vous sûr de vouloir révoquer ce jeton ? Cette action est irréversible."
+    },
+    "plugins": {
+      "title": "Extensions",
+      "upload": "Téléverser une extension",
+      "plugin_zip": "Fichier ZIP de l'extension",
+      "installed": "Extensions installées",
+      "no_plugins": "Aucune extension installée",
+      "no_plugins_alt": "Aucune extension installée pour le moment.",
+      "no_plugins_desc": "Téléversez un fichier ZIP d'extension pour enrichir Escalated avec des fonctionnalités personnalisées.",
+      "active": "Active",
+      "inactive": "Inactive",
+      "installed_date": "Installée le :date",
+      "menu_items": ":count élément(s) de menu",
+      "widgets": ":count widget(s)",
+      "page_components": ":count composant(s) de page",
+      "confirm_delete": "Êtes-vous sûr de vouloir supprimer cette extension ? Cette action est irréversible."
+    }
+  },
+  "agent": {
+    "dashboard": "Tableau de bord agent",
+    "open_tickets": "Tickets ouverts",
+    "my_assigned": "Mes assignations",
+    "unassigned": "Non assignés",
+    "sla_breached": "SLA dépassés",
+    "resolved_today": "Résolus aujourd'hui",
+    "needs_attention": "Nécessite une attention",
+    "sla_breaching": "SLA en dépassement",
+    "unassigned_urgent": "Non assignés urgents",
+    "recent_tickets": "Tickets récents",
+    "no_recent_tickets": "Aucun ticket récent",
+    "my_performance": "Ma performance",
+    "resolved_this_week": "Résolus cette semaine"
+  },
+  "guest": {
+    "submit_title": "Soumettre un ticket",
+    "submit_heading": "Soumettre un ticket de support",
+    "submit_desc": "Aucun compte nécessaire. Nous vous fournirons un lien pour suivre votre ticket.",
+    "sign_in_link": "Vous avez déjà un compte ? Connectez-vous",
+    "your_name": "Votre nom",
+    "email_address": "Adresse e-mail",
+    "bookmark_title": "Ajoutez cette page à vos favoris",
+    "bookmark_desc": "Ceci est votre lien privé pour consulter et répondre à ce ticket.",
+    "copy_link": "Copier le lien",
+    "write_reply": "Rédigez votre réponse..."
+  },
+  "customer": {
+    "replies": "Réponses",
+    "reply": "Répondre"
+  },
+  "common": {
+    "change_status": "Changer le statut...",
+    "change_priority": "Changer la priorité...",
+    "kb": "Ko",
+    "upload": "Téléverser"
+  }
+}

package/src/locales/index.js

@@ -0,0 +1,6 @@
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import de from './de.json';
+
+export default { en, es, fr, de };

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>