@escalated-dev/escalated 0.3.5 → 0.5.0

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

@@ -0,0 +1,287 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+defineProps({ macros: Array });
+
+const showForm = ref(false);
+const editingMacro = ref(null);
+
+const form = useForm({
+    name: '',
+    description: '',
+    is_shared: false,
+    actions: [],
+});
+
+const actionTypes = [
+    { value: 'status', label: 'Set Status' },
+    { value: 'priority', label: 'Set Priority' },
+    { value: 'assign', label: 'Assign To' },
+    { value: 'tags', label: 'Add Tags' },
+    { value: 'department', label: 'Move to Department' },
+    { value: 'reply', label: 'Send Reply' },
+    { value: 'note', label: 'Add Internal Note' },
+];
+
+const statusOptions = ['open', 'in_progress', 'waiting_on_customer', 'resolved', 'closed'];
+const priorityOptions = ['low', 'medium', 'high', 'urgent', 'critical'];
+
+function addAction() {
+    form.actions.push({ type: 'status', value: '', order: form.actions.length });
+}
+
+function removeAction(index) {
+    form.actions.splice(index, 1);
+    form.actions.forEach((a, i) => { a.order = i; });
+}
+
+function moveAction(index, direction) {
+    const newIndex = index + direction;
+    if (newIndex < 0 || newIndex >= form.actions.length) return;
+    const temp = form.actions[index];
+    form.actions[index] = form.actions[newIndex];
+    form.actions[newIndex] = temp;
+    form.actions.forEach((a, i) => { a.order = i; });
+}
+
+function create() {
+    form.post(route('escalated.admin.macros.store'), {
+        onSuccess: () => { form.reset(); showForm.value = false; },
+    });
+}
+
+function startEdit(macro) {
+    editingMacro.value = macro.id;
+    form.name = macro.name;
+    form.description = macro.description || '';
+    form.is_shared = macro.is_shared || false;
+    form.actions = (macro.actions || []).map((a, i) => ({
+        type: a.type,
+        value: a.value || '',
+        order: a.order ?? i,
+    }));
+    showForm.value = true;
+}
+
+function update() {
+    form.put(route('escalated.admin.macros.update', editingMacro.value), {
+        onSuccess: () => { editingMacro.value = null; form.reset(); showForm.value = false; },
+    });
+}
+
+function destroy(id) {
+    if (confirm('Delete this macro? This cannot be undone.')) {
+        router.delete(route('escalated.admin.macros.destroy', id));
+    }
+}
+
+function cancelEdit() {
+    editingMacro.value = null;
+    form.reset();
+    showForm.value = false;
+}
+
+function handleSubmit() {
+    if (editingMacro.value) {
+        update();
+    } else {
+        create();
+    }
+}
+
+const inputClass = 'w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10';
+const selectClass = 'rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10';
+</script>
+
+<template>
+    <EscalatedLayout title="Macros">
+        <!-- Top bar -->
+        <div class="mb-4 flex items-center justify-between">
+            <p class="text-sm text-neutral-500">
+                Macros automate repetitive actions on tickets.
+            </p>
+            <button @click="showForm ? cancelEdit() : (showForm = true)"
+                    :class="showForm
+                        ? 'rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]'
+                        : 'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400'">
+                {{ showForm ? 'Cancel' : 'Create Macro' }}
+            </button>
+        </div>
+
+        <!-- Create/Edit form -->
+        <form v-if="showForm" @submit.prevent="handleSubmit" class="mb-6 space-y-4 rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-neutral-300">Name</label>
+                    <input v-model="form.name" type="text" required placeholder="e.g., Close & Thank"
+                           :class="inputClass" />
+                </div>
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-neutral-300">Description</label>
+                    <input v-model="form.description" type="text" placeholder="Optional description"
+                           :class="inputClass" />
+                </div>
+            </div>
+
+            <div class="flex items-center gap-3">
+                <label class="flex items-center gap-2">
+                    <input v-model="form.is_shared" type="checkbox"
+                           class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10" />
+                    <span class="text-sm text-neutral-300">Shared with all agents</span>
+                </label>
+            </div>
+
+            <!-- Action builder -->
+            <div>
+                <div class="mb-2 flex items-center justify-between">
+                    <label class="text-sm font-medium text-neutral-300">Actions</label>
+                    <button type="button" @click="addAction"
+                            class="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-neutral-400 transition-colors hover:bg-white/[0.06] hover:text-neutral-200">
+                        + Add Action
+                    </button>
+                </div>
+
+                <div v-if="!form.actions.length" class="rounded-lg border border-dashed border-white/10 px-4 py-6 text-center">
+                    <p class="text-sm text-neutral-600">No actions yet. Add actions to define what this macro does.</p>
+                </div>
+
+                <div v-else class="space-y-2">
+                    <div v-for="(action, index) in form.actions" :key="index"
+                         class="flex items-center gap-2 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                        <!-- Order controls -->
+                        <div class="flex flex-col gap-0.5">
+                            <button type="button" @click="moveAction(index, -1)"
+                                    :disabled="index === 0"
+                                    class="rounded p-0.5 text-neutral-600 transition-colors hover:bg-white/[0.06] hover:text-neutral-400 disabled:opacity-30">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+                                </svg>
+                            </button>
+                            <button type="button" @click="moveAction(index, 1)"
+                                    :disabled="index === form.actions.length - 1"
+                                    class="rounded p-0.5 text-neutral-600 transition-colors hover:bg-white/[0.06] hover:text-neutral-400 disabled:opacity-30">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <!-- Action number -->
+                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/[0.06] text-xs font-semibold text-neutral-500">
+                            {{ index + 1 }}
+                        </span>
+
+                        <!-- Type dropdown -->
+                        <select v-model="action.type" :class="selectClass">
+                            <option v-for="at in actionTypes" :key="at.value" :value="at.value">{{ at.label }}</option>
+                        </select>
+
+                        <!-- Value input (context-dependent) -->
+                        <select v-if="action.type === 'status'" v-model="action.value" :class="[selectClass, 'flex-1']">
+                            <option value="">Select status...</option>
+                            <option v-for="s in statusOptions" :key="s" :value="s">{{ s.replace(/_/g, ' ') }}</option>
+                        </select>
+
+                        <select v-else-if="action.type === 'priority'" v-model="action.value" :class="[selectClass, 'flex-1']">
+                            <option value="">Select priority...</option>
+                            <option v-for="p in priorityOptions" :key="p" :value="p">{{ p }}</option>
+                        </select>
+
+                        <input v-else-if="action.type === 'assign'" v-model="action.value" type="text"
+                               placeholder="Agent ID or email"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <input v-else-if="action.type === 'tags'" v-model="action.value" type="text"
+                               placeholder="Comma-separated tag names"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <input v-else-if="action.type === 'department'" v-model="action.value" type="text"
+                               placeholder="Department ID or name"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <textarea v-else-if="action.type === 'reply' || action.type === 'note'"
+                                  v-model="action.value" rows="2"
+                                  :placeholder="action.type === 'reply' ? 'Reply message...' : 'Note content...'"
+                                  :class="[inputClass, 'flex-1']">
+                        </textarea>
+
+                        <input v-else v-model="action.value" type="text" placeholder="Value"
+                               :class="[inputClass, 'flex-1']" />
+
+                        <!-- Remove -->
+                        <button type="button" @click="removeAction(index)"
+                                class="shrink-0 rounded-lg p-1.5 text-neutral-600 transition-colors hover:bg-rose-500/10 hover:text-rose-400">
+                            <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="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Submit -->
+            <div class="flex justify-end">
+                <button type="submit" :disabled="form.processing"
+                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
+                    {{ editingMacro ? 'Update Macro' : 'Create Macro' }}
+                </button>
+            </div>
+        </form>
+
+        <!-- Macros table -->
+        <div class="overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/60">
+            <table class="min-w-full divide-y divide-white/[0.06]">
+                <thead>
+                    <tr class="bg-white/[0.02]">
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Name</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Description</th>
+                        <th class="px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Actions</th>
+                        <th class="px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Shared</th>
+                        <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Creator</th>
+                        <th class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-neutral-500"></th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-white/[0.04]">
+                    <tr v-if="!macros?.length">
+                        <td colspan="6" class="px-4 py-12 text-center">
+                            <svg class="mx-auto mb-3 h-8 w-8 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                            </svg>
+                            <p class="text-sm text-neutral-500">No macros yet</p>
+                            <p class="mt-1 text-xs text-neutral-600">Create macros to automate repetitive ticket actions</p>
+                        </td>
+                    </tr>
+                    <tr v-for="macro in macros" :key="macro.id" class="transition-colors hover:bg-white/[0.03]">
+                        <td class="px-4 py-3">
+                            <span class="text-sm font-medium text-neutral-200">{{ macro.name }}</span>
+                        </td>
+                        <td class="px-4 py-3">
+                            <span class="text-sm text-neutral-400">{{ macro.description || '--' }}</span>
+                        </td>
+                        <td class="px-4 py-3 text-center">
+                            <span class="inline-flex items-center rounded-full bg-white/[0.06] px-2 py-0.5 text-xs font-medium text-neutral-400 ring-1 ring-white/[0.06]">
+                                {{ macro.actions?.length || 0 }}
+                            </span>
+                        </td>
+                        <td class="px-4 py-3 text-center">
+                            <span v-if="macro.is_shared"
+                                  class="inline-flex items-center rounded-full bg-cyan-500/10 px-2 py-0.5 text-xs font-medium text-cyan-400 ring-1 ring-cyan-500/20">
+                                Shared
+                            </span>
+                            <span v-else class="text-xs text-neutral-600">Private</span>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-neutral-400">
+                            {{ macro.creator?.name || macro.user?.name || '--' }}
+                        </td>
+                        <td class="px-4 py-3 text-right text-sm">
+                            <button @click="startEdit(macro)" class="text-neutral-300 hover:text-white">Edit</button>
+                            <button @click="destroy(macro.id)" class="ml-3 text-rose-400 hover:text-rose-300">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +1,197 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router } from '@inertiajs/vue3';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    plugins: { type: Array, default: () => [] },
+});
+
+const confirmingDelete = ref(null);
+const uploading = ref(false);
+const fileInput = ref(null);
+
+const activePlugins = computed(() => props.plugins.filter(p => p.active));
+const inactivePlugins = computed(() => props.plugins.filter(p => !p.active));
+
+function togglePlugin(plugin) {
+    router.post(route('escalated.admin.plugins.toggle', plugin.id), {}, {
+        preserveScroll: true,
+    });
+}
+
+function confirmDelete(plugin) {
+    confirmingDelete.value = plugin.id;
+}
+
+function cancelDelete() {
+    confirmingDelete.value = null;
+}
+
+function deletePlugin(plugin) {
+    router.delete(route('escalated.admin.plugins.destroy', plugin.id), {
+        preserveScroll: true,
+        onSuccess: () => { confirmingDelete.value = null; },
+    });
+}
+
+function triggerUpload() {
+    fileInput.value?.click();
+}
+
+function handleUpload(event) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    uploading.value = true;
+    router.post(route('escalated.admin.plugins.upload'), { file }, {
+        forceFormData: true,
+        preserveScroll: true,
+        onFinish: () => {
+            uploading.value = false;
+            if (fileInput.value) fileInput.value.value = '';
+        },
+    });
+}
+
+function statusColor(plugin) {
+    if (plugin.active) return 'bg-emerald-500';
+    return 'bg-neutral-600';
+}
+
+function statusLabel(plugin) {
+    return plugin.active ? 'Active' : 'Inactive';
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Plugins">
+        <!-- Header -->
+        <div class="mb-6 flex items-center justify-between">
+            <div>
+                <p class="text-sm text-neutral-400">
+                    {{ activePlugins.length }} active, {{ inactivePlugins.length }} inactive
+                </p>
+            </div>
+            <div>
+                <input ref="fileInput" type="file" accept=".zip" class="hidden" @change="handleUpload" />
+                <button @click="triggerUpload" :disabled="uploading"
+                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
+                    <span v-if="uploading" class="flex items-center gap-2">
+                        <svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                        </svg>
+                        Uploading...
+                    </span>
+                    <span v-else class="flex items-center gap-2">
+                        <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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+                        </svg>
+                        Upload Plugin
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Empty state -->
+        <div v-if="!plugins?.length" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 px-6 py-16 text-center">
+            <svg class="mx-auto mb-4 h-12 w-12 text-neutral-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z" />
+            </svg>
+            <h3 class="text-sm font-medium text-neutral-300">No plugins installed</h3>
+            <p class="mt-1 text-xs text-neutral-500">Upload a plugin ZIP to extend Escalated with custom functionality.</p>
+        </div>
+
+        <!-- Plugin cards -->
+        <div v-else class="space-y-3">
+            <div v-for="plugin in plugins" :key="plugin.id"
+                 class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5 transition-colors hover:bg-neutral-900/80">
+                <div class="flex items-start justify-between gap-4">
+                    <!-- Plugin info -->
+                    <div class="min-w-0 flex-1">
+                        <div class="flex items-center gap-3">
+                            <h3 class="text-sm font-semibold text-white">{{ plugin.name }}</h3>
+                            <span :class="['inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-semibold',
+                                           plugin.active
+                                               ? 'bg-emerald-500/10 text-emerald-400'
+                                               : 'bg-neutral-500/10 text-neutral-500']">
+                                <span :class="['h-1.5 w-1.5 rounded-full', statusColor(plugin)]"></span>
+                                {{ statusLabel(plugin) }}
+                            </span>
+                            <span v-if="plugin.version" class="text-[11px] text-neutral-600">v{{ plugin.version }}</span>
+                        </div>
+                        <p v-if="plugin.description" class="mt-1 text-sm text-neutral-400">{{ plugin.description }}</p>
+                        <div class="mt-2 flex flex-wrap items-center gap-4 text-xs text-neutral-600">
+                            <span v-if="plugin.author" class="flex items-center gap-1">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                                </svg>
+                                {{ plugin.author }}
+                            </span>
+                            <span v-if="plugin.homepage" class="flex items-center gap-1">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+                                </svg>
+                                <a :href="plugin.homepage" target="_blank" rel="noopener" class="hover:text-neutral-400">{{ plugin.homepage }}</a>
+                            </span>
+                            <span v-if="plugin.installed_at" class="flex items-center gap-1">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                                </svg>
+                                Installed {{ plugin.installed_at }}
+                            </span>
+                        </div>
+
+                        <!-- Provided extensions summary -->
+                        <div v-if="plugin.provides" class="mt-3 flex flex-wrap gap-2">
+                            <span v-if="plugin.provides.menu_items"
+                                  class="rounded bg-white/[0.04] px-2 py-0.5 text-[10px] text-neutral-500">
+                                {{ plugin.provides.menu_items }} menu item{{ plugin.provides.menu_items !== 1 ? 's' : '' }}
+                            </span>
+                            <span v-if="plugin.provides.widgets"
+                                  class="rounded bg-white/[0.04] px-2 py-0.5 text-[10px] text-neutral-500">
+                                {{ plugin.provides.widgets }} widget{{ plugin.provides.widgets !== 1 ? 's' : '' }}
+                            </span>
+                            <span v-if="plugin.provides.page_components"
+                                  class="rounded bg-white/[0.04] px-2 py-0.5 text-[10px] text-neutral-500">
+                                {{ plugin.provides.page_components }} page component{{ plugin.provides.page_components !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="flex shrink-0 items-center gap-2">
+                        <!-- Toggle active/inactive -->
+                        <button @click="togglePlugin(plugin)"
+                                :class="['relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+                                         plugin.active ? 'bg-emerald-500' : 'bg-neutral-700']"
+                                :title="plugin.active ? 'Deactivate' : 'Activate'">
+                            <span :class="['pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
+                                           plugin.active ? 'translate-x-5' : 'translate-x-0']" />
+                        </button>
+
+                        <!-- Delete -->
+                        <template v-if="confirmingDelete === plugin.id">
+                            <button @click="deletePlugin(plugin)"
+                                    class="rounded-lg bg-rose-500/20 px-3 py-1.5 text-xs font-medium text-rose-400 transition-colors hover:bg-rose-500/30">
+                                Confirm
+                            </button>
+                            <button @click="cancelDelete"
+                                    class="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-neutral-400 transition-colors hover:bg-white/[0.04]">
+                                Cancel
+                            </button>
+                        </template>
+                        <button v-else @click="confirmDelete(plugin)"
+                                class="rounded-lg border border-white/[0.06] p-1.5 text-neutral-600 transition-colors hover:border-rose-500/20 hover:bg-rose-500/5 hover:text-rose-400"
+                                title="Delete plugin">
+                            <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Plugins.vue

@@ -0,0 +1,129 @@
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import { useForm, usePage, router } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+const props = defineProps({ plugins: Array });
+const page = usePage();
+
+const flash = computed(() => ({
+    success: page.props.flash?.success,
+    error: page.props.flash?.error,
+}));
+
+const uploadForm = useForm({
+    plugin: null,
+});
+
+function onFileChange(e) {
+    uploadForm.plugin = e.target.files[0];
+}
+
+function submitUpload() {
+    uploadForm.post(route('escalated.admin.plugins.upload'), {
+        forceFormData: true,
+        onSuccess: () => {
+            uploadForm.reset();
+        },
+    });
+}
+
+function activate(slug) {
+    router.post(route('escalated.admin.plugins.activate', slug));
+}
+
+function deactivate(slug) {
+    router.post(route('escalated.admin.plugins.deactivate', slug));
+}
+
+function deletePlugin(slug) {
+    if (confirm('Are you sure you want to delete this plugin? This cannot be undone.')) {
+        router.delete(route('escalated.admin.plugins.destroy', slug));
+    }
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Plugins">
+        <div class="mx-auto max-w-4xl space-y-6">
+            <!-- Flash messages -->
+            <div v-if="flash.success" class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">
+                {{ flash.success }}
+            </div>
+            <div v-if="flash.error" class="rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+                {{ flash.error }}
+            </div>
+
+            <!-- Upload Plugin -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
+                <h3 class="mb-4 text-sm font-semibold text-white">Upload Plugin</h3>
+                <form @submit.prevent="submitUpload" class="flex items-end gap-4">
+                    <div class="flex-1">
+                        <label class="block text-sm font-medium text-neutral-200">Plugin ZIP File</label>
+                        <input type="file" accept=".zip" @change="onFileChange"
+                               class="mt-2 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1 file:text-sm file:text-neutral-300 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10" />
+                        <p v-if="uploadForm.errors.plugin" class="mt-1 text-xs text-red-400">{{ uploadForm.errors.plugin }}</p>
+                    </div>
+                    <button type="submit" :disabled="uploadForm.processing || !uploadForm.plugin"
+                            class="shrink-0 rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400 disabled:opacity-50">
+                        {{ uploadForm.processing ? 'Uploading...' : 'Upload' }}
+                    </button>
+                </form>
+            </div>
+
+            <!-- Plugin List -->
+            <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-6">
+                <h3 class="mb-5 text-sm font-semibold text-white">Installed Plugins</h3>
+
+                <div v-if="!plugins || plugins.length === 0" class="py-8 text-center text-sm text-neutral-500">
+                    No plugins installed yet.
+                </div>
+
+                <div v-else class="divide-y divide-white/[0.06]">
+                    <div v-for="plugin in plugins" :key="plugin.slug" class="flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0">
+                        <!-- Plugin info -->
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center gap-2.5">
+                                <span class="text-sm font-medium text-white">{{ plugin.name }}</span>
+                                <span class="rounded bg-white/[0.06] px-1.5 py-0.5 text-[10px] font-medium text-neutral-500">
+                                    v{{ plugin.version }}
+                                </span>
+                                <span :class="[
+                                    'rounded px-1.5 py-0.5 text-[10px] font-medium',
+                                    plugin.source === 'composer'
+                                        ? 'bg-violet-500/10 text-violet-400'
+                                        : 'bg-cyan-500/10 text-cyan-400'
+                                ]">
+                                    {{ plugin.source }}
+                                </span>
+                            </div>
+                            <p v-if="plugin.description" class="mt-1 text-xs text-neutral-500">{{ plugin.description }}</p>
+                            <p class="mt-1 text-xs text-neutral-600">by {{ plugin.author }}</p>
+                        </div>
+
+                        <!-- Actions -->
+                        <div class="flex shrink-0 items-center gap-2">
+                            <!-- Active status toggle -->
+                            <button v-if="plugin.is_active" @click="deactivate(plugin.slug)"
+                                    class="rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-400 transition-colors hover:bg-emerald-500/20">
+                                Active
+                            </button>
+                            <button v-else @click="activate(plugin.slug)"
+                                    class="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-neutral-500 transition-colors hover:bg-white/[0.08] hover:text-neutral-300">
+                                Inactive
+                            </button>
+
+                            <!-- Delete (local only) -->
+                            <button v-if="plugin.source === 'local'" @click="deletePlugin(plugin.slug)"
+                                    class="rounded-lg border border-white/10 bg-white/[0.04] p-1.5 text-neutral-600 transition-colors hover:border-red-500/20 hover:bg-red-500/10 hover:text-red-400">
+                                <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>