@escalated-dev/escalated 0.5.0 → 0.7.0

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

@@ -11,17 +11,31 @@ 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));
+const activePlugins = computed(() => props.plugins.filter((p) => p.is_active));
+const inactivePlugins = computed(() => props.plugins.filter((p) => !p.is_active));
 
-function togglePlugin(plugin) {
-    router.post(route('escalated.admin.plugins.toggle', plugin.id), {}, {
-        preserveScroll: true,
-    });
+function activate(slug) {
+    router.post(
+        route('escalated.admin.plugins.activate', slug),
+        {},
+        {
+            preserveScroll: true,
+        },
+    );
+}
+
+function deactivate(slug) {
+    router.post(
+        route('escalated.admin.plugins.deactivate', slug),
+        {},
+        {
+            preserveScroll: true,
+        },
+    );
 }
 
 function confirmDelete(plugin) {
-    confirmingDelete.value = plugin.id;
+    confirmingDelete.value = plugin.slug;
 }
 
 function cancelDelete() {
@@ -29,9 +43,11 @@ function cancelDelete() {
 }
 
 function deletePlugin(plugin) {
-    router.delete(route('escalated.admin.plugins.destroy', plugin.id), {
+    router.delete(route('escalated.admin.plugins.destroy', plugin.slug), {
         preserveScroll: true,
-        onSuccess: () => { confirmingDelete.value = null; },
+        onSuccess: () => {
+            confirmingDelete.value = null;
+        },
     });
 }
 
@@ -44,23 +60,27 @@ function handleUpload(event) {
     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 = '';
+    router.post(
+        route('escalated.admin.plugins.upload'),
+        { plugin: 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';
+    if (plugin.is_active) return 'bg-emerald-500';
     return 'bg-neutral-600';
 }
 
 function statusLabel(plugin) {
-    return plugin.active ? 'Active' : 'Inactive';
+    return plugin.is_active ? 'Active' : 'Inactive';
 }
 </script>
 
@@ -69,24 +89,35 @@ function statusLabel(plugin) {
         <!-- Header -->
         <div class="mb-6 flex items-center justify-between">
             <div>
-                <p class="text-sm text-neutral-400">
+                <p class="text-sm text-[var(--esc-panel-text-tertiary)]">
                     {{ 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">
+                <button
+                    :disabled="uploading"
+                    class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                    @click="triggerUpload"
+                >
                     <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" />
+                            <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" />
+                            <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>
@@ -95,49 +126,111 @@ function statusLabel(plugin) {
         </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" />
+        <div
+            v-if="!plugins?.length"
+            class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] px-6 py-16 text-center"
+        >
+            <svg
+                class="mx-auto mb-4 h-12 w-12 text-[var(--esc-panel-text-muted)]"
+                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>
+            <h3 class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">No plugins installed</h3>
+            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                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
+                v-for="plugin in plugins"
+                :key="plugin.slug"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5 transition-colors hover:bg-[var(--esc-panel-surface)]"
+            >
                 <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']">
+                            <h3 class="text-sm font-semibold text-[var(--esc-panel-text)]">{{ plugin.name }}</h3>
+                            <span
+                                :class="[
+                                    'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-semibold',
+                                    plugin.is_active
+                                        ? 'bg-emerald-500/10 text-emerald-400'
+                                        : 'bg-neutral-500/10 text-[var(--esc-panel-text-muted)]',
+                                ]"
+                            >
                                 <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>
+                            <span v-if="plugin.version" class="text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >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">
+                        <p v-if="plugin.description" class="mt-1 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ plugin.description }}
+                        </p>
+                        <div class="mt-2 flex flex-wrap items-center gap-4 text-xs text-[var(--esc-panel-text-muted)]">
                             <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
+                                    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
+                                    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>
+                                <a
+                                    :href="plugin.homepage"
+                                    target="_blank"
+                                    rel="noopener"
+                                    class="hover:text-[var(--esc-panel-text-tertiary)]"
+                                    >{{ 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
+                                    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>
@@ -145,17 +238,27 @@ function statusLabel(plugin) {
 
                         <!-- 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
+                                v-if="plugin.provides.menu_items"
+                                class="rounded bg-[var(--esc-panel-hover)] px-2 py-0.5 text-[10px] text-[var(--esc-panel-text-muted)]"
+                            >
+                                {{ 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">
+                            <span
+                                v-if="plugin.provides.widgets"
+                                class="rounded bg-[var(--esc-panel-hover)] px-2 py-0.5 text-[10px] text-[var(--esc-panel-text-muted)]"
+                            >
                                 {{ 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
+                                v-if="plugin.provides.page_components"
+                                class="rounded bg-[var(--esc-panel-hover)] px-2 py-0.5 text-[10px] text-[var(--esc-panel-text-muted)]"
+                            >
+                                {{ plugin.provides.page_components }} page component{{
+                                    plugin.provides.page_components !== 1 ? 's' : ''
+                                }}
                             </span>
                         </div>
                     </div>
@@ -163,32 +266,59 @@ function statusLabel(plugin) {
                     <!-- 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
+                            :class="[
+                                'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+                                plugin.is_active ? 'bg-emerald-500' : 'bg-neutral-700',
+                            ]"
+                            :title="plugin.is_active ? 'Deactivate' : 'Activate'"
+                            @click="plugin.is_active ? deactivate(plugin.slug) : activate(plugin.slug)"
+                        >
+                            <span
+                                :class="[
+                                    'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
+                                    plugin.is_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
+                        <!-- Delete (local plugins only) -->
+                        <template v-if="plugin.source !== 'composer'">
+                            <template v-if="confirmingDelete === plugin.slug">
+                                <button
+                                    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"
+                                    @click="deletePlugin(plugin)"
+                                >
+                                    Confirm
+                                </button>
+                                <button
+                                    class="rounded-lg border border-[var(--esc-panel-border-input)] px-3 py-1.5 text-xs font-medium text-[var(--esc-panel-text-tertiary)] transition-colors hover:bg-[var(--esc-panel-hover)]"
+                                    @click="cancelDelete"
+                                >
+                                    Cancel
+                                </button>
+                            </template>
+                            <button
+                                v-else
+                                class="rounded-lg border border-[var(--esc-panel-border)] p-1.5 text-[var(--esc-panel-text-muted)] transition-colors hover:border-rose-500/20 hover:bg-rose-500/5 hover:text-rose-400"
+                                title="Delete plugin"
+                                @click="confirmDelete(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>
                         </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>

package/src/pages/Admin/Reports/AgentMetrics.vue

@@ -0,0 +1,115 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import AgentPerformanceCard from '../../../components/AgentPerformanceCard.vue';
+import { router, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    period_days: Number,
+    agents: Array,
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.agents'), { days }, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Agent Performance Metrics">
+        <div class="mb-6 flex items-center justify-between">
+            <div class="flex gap-2">
+                <button
+                    v-for="d in [7, 30, 90]"
+                    :key="d"
+                    :class="[
+                        'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                        period_days === d
+                            ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
+                            : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
+                    ]"
+                    @click="changePeriod(d)"
+                >
+                    Last {{ d }} days
+                </button>
+            </div>
+            <Link
+                :href="route('escalated.admin.reports')"
+                class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+            >
+                &larr; Back to Reports
+            </Link>
+        </div>
+
+        <!-- Agent Table -->
+        <div class="mb-8 overflow-hidden rounded-xl border border-[var(--esc-panel-border)]">
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Agent
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Total Tickets
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Resolved
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Avg Response
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Avg Resolution
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-for="agent in agents" :key="agent.agent_id" class="hover:bg-[var(--esc-panel-hover)]">
+                        <td class="px-4 py-3">
+                            <div class="flex items-center gap-3">
+                                <div
+                                    class="flex h-8 w-8 items-center justify-center rounded-md bg-[var(--esc-panel-hover)] text-xs font-semibold text-[var(--esc-panel-text-tertiary)]"
+                                >
+                                    {{ agent.agent_name?.charAt(0)?.toUpperCase() || '?' }}
+                                </div>
+                                <span class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">{{
+                                    agent.agent_name
+                                }}</span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.total_tickets }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.resolved_tickets }}
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.avg_response_hours ?? '—' }}h
+                        </td>
+                        <td class="px-4 py-3 text-sm text-[var(--esc-panel-text-tertiary)]">
+                            {{ agent.avg_resolution_hours ?? '—' }}h
+                        </td>
+                    </tr>
+                    <tr v-if="!agents?.length">
+                        <td colspan="5" class="px-4 py-8 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                            No agent data for this period.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Agent Cards (visual) -->
+        <div v-if="agents?.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <AgentPerformanceCard v-for="agent in agents" :key="agent.agent_id" :agent="agent" />
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Reports/CsatReport.vue

@@ -0,0 +1,127 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import KpiCard from '../../../components/KpiCard.vue';
+import ChartWidget from '../../../components/ChartWidget.vue';
+import { router, Link } from '@inertiajs/vue3';
+
+const props = defineProps({
+    period_days: Number,
+    csat_average: Number,
+    response_rate: Number,
+    total_ratings: Number,
+    by_agent: Array,
+    over_time: Array,
+});
+
+function changePeriod(days) {
+    router.get(route('escalated.admin.reports.csat'), { days }, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Customer Satisfaction Report">
+        <div class="mb-6 flex items-center justify-between">
+            <div class="flex gap-2">
+                <button
+                    v-for="d in [7, 30, 90]"
+                    :key="d"
+                    :class="[
+                        'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                        period_days === d
+                            ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
+                            : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
+                    ]"
+                    @click="changePeriod(d)"
+                >
+                    Last {{ d }} days
+                </button>
+            </div>
+            <div class="flex items-center gap-3">
+                <Link
+                    :href="route('escalated.admin.settings.csat')"
+                    class="text-sm text-[var(--esc-panel-accent)] hover:text-[var(--esc-panel-accent)]"
+                >
+                    CSAT Settings
+                </Link>
+                <Link
+                    :href="route('escalated.admin.reports')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back to Reports
+                </Link>
+            </div>
+        </div>
+
+        <!-- KPIs -->
+        <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+            <KpiCard
+                label="Average Rating"
+                :value="csat_average || '—'"
+                :icon="'M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z'"
+            />
+            <KpiCard
+                label="Response Rate"
+                :value="`${response_rate}%`"
+                :icon="'M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z'"
+            />
+            <KpiCard
+                label="Total Ratings"
+                :value="total_ratings"
+                :icon="'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z'"
+            />
+        </div>
+
+        <!-- Charts -->
+        <div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2">
+            <ChartWidget title="CSAT Over Time" :data="over_time" color="amber" />
+
+            <!-- By Agent -->
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-5">
+                <h3 class="mb-4 text-sm font-semibold text-[var(--esc-panel-text-secondary)]">Ratings by Agent</h3>
+                <div v-if="by_agent?.length" class="space-y-3">
+                    <div v-for="agent in by_agent" :key="agent.agent_id" class="flex items-center justify-between">
+                        <div class="flex items-center gap-3">
+                            <div
+                                class="flex h-8 w-8 items-center justify-center rounded-md bg-[var(--esc-panel-hover)] text-xs font-semibold text-[var(--esc-panel-text-tertiary)]"
+                            >
+                                {{ agent.agent_name?.charAt(0)?.toUpperCase() || '?' }}
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                                    {{ agent.agent_name }}
+                                </div>
+                                <div class="text-xs text-[var(--esc-panel-text-muted)]">
+                                    {{ agent.total_ratings }} ratings
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <div class="flex items-center gap-0.5">
+                                <svg
+                                    v-for="n in 5"
+                                    :key="n"
+                                    class="h-3.5 w-3.5"
+                                    :class="
+                                        n <= Math.round(agent.avg_rating)
+                                            ? 'text-amber-400'
+                                            : 'text-[var(--esc-panel-text-muted)]'
+                                    "
+                                    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>
+                            </div>
+                            <span class="text-sm font-bold text-[var(--esc-panel-text)]">{{ agent.avg_rating }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="py-6 text-center text-sm text-[var(--esc-panel-text-muted)]">
+                    No agent ratings for this period.
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>