@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/components/KpiCard.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    label: { type: String, required: true },
+    value: { type: [Number, String], required: true },
+    trend: { type: Number, default: null },
+    icon: { type: String, default: null },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+</script>
+
+<template>
+    <div
+        :class="[
+            'rounded-xl border p-5',
+            escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+        ]"
+    >
+        <div class="flex items-start justify-between">
+            <div>
+                <div :class="['text-[13px] font-medium', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                    {{ label }}
+                </div>
+                <div :class="['mt-2 text-2xl font-bold tracking-tight', escDark ? 'text-white' : 'text-gray-900']">
+                    {{ value }}
+                </div>
+            </div>
+            <div
+                v-if="icon"
+                :class="[
+                    'flex h-10 w-10 items-center justify-center rounded-lg',
+                    escDark ? 'bg-white/[0.04]' : 'bg-gray-100',
+                ]"
+            >
+                <svg
+                    :class="['h-5 w-5', escDark ? 'text-neutral-500' : 'text-gray-400']"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" :d="icon" />
+                </svg>
+            </div>
+        </div>
+        <div v-if="trend !== null && trend !== 0" class="mt-3 flex items-center gap-1">
+            <svg
+                v-if="trend > 0"
+                :class="['h-4 w-4', escDark ? 'text-emerald-400' : 'text-emerald-500']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
+            </svg>
+            <svg
+                v-else
+                :class="['h-4 w-4', escDark ? 'text-red-400' : 'text-red-500']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25" />
+            </svg>
+            <span
+                :class="[
+                    'text-xs font-medium',
+                    trend > 0
+                        ? escDark
+                            ? 'text-emerald-400'
+                            : 'text-emerald-600'
+                        : escDark
+                          ? 'text-red-400'
+                          : 'text-red-600',
+                ]"
+            >
+                {{ Math.abs(trend) }}%
+            </span>
+        </div>
+    </div>
+</template>

package/src/components/MacroDropdown.vue

@@ -7,20 +7,27 @@ const props = defineProps({
     action: { type: String, required: true },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const open = ref(false);
 const processing = ref(false);
 
 function applyMacro(macroId) {
     if (processing.value) return;
     processing.value = true;
-    router.post(props.action, { macro_id: macroId }, {
-        preserveScroll: true,
-        onFinish: () => {
-            processing.value = false;
-            open.value = false;
+    router.post(
+        props.action,
+        { macro_id: macroId },
+        {
+            preserveScroll: true,
+            onFinish: () => {
+                processing.value = false;
+                open.value = false;
+            },
         },
-    });
+    );
 }
 
 function toggle() {
@@ -35,17 +42,33 @@ function close() {
 <template>
     <div class="relative">
         <!-- Trigger button -->
-        <button @click="toggle"
-                :class="['inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                         escDark
-                             ? 'border border-white/10 bg-white/[0.03] text-neutral-300 hover:bg-white/[0.06]'
-                             : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50']"
-                :disabled="processing">
+        <button
+            :class="[
+                'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                escDark
+                    ? 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]'
+                    : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+            ]"
+            :disabled="processing"
+            aria-label="Apply macro"
+            :aria-expanded="open"
+            @click="toggle"
+        >
             <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.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+                <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>
             Apply Macro
-            <svg :class="['h-4 w-4 transition-transform', open && 'rotate-180']" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <svg
+                :class="['h-4 w-4 transition-transform', open && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                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>
@@ -54,32 +77,69 @@ function close() {
         <div v-if="open" class="fixed inset-0 z-30" @click="close"></div>
 
         <!-- Dropdown -->
-        <Transition enter-active-class="transition duration-100 ease-out" enter-from-class="scale-95 opacity-0" enter-to-class="scale-100 opacity-100"
-                    leave-active-class="transition duration-75 ease-in" leave-from-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0">
-            <div v-if="open"
-                 :class="['absolute right-0 z-40 mt-1 w-64 overflow-hidden rounded-xl border shadow-xl',
-                          escDark ? 'border-white/[0.06] bg-neutral-900' : 'border-gray-200 bg-white']">
-                <div :class="['px-3 py-2 text-xs font-semibold uppercase tracking-wider',
-                              escDark ? 'text-neutral-500' : 'text-gray-500']">
+        <Transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="scale-95 opacity-0"
+            enter-to-class="scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="scale-100 opacity-100"
+            leave-to-class="scale-95 opacity-0"
+        >
+            <div
+                v-if="open"
+                :class="[
+                    'absolute right-0 z-40 mt-1 w-64 overflow-hidden rounded-xl border shadow-xl',
+                    escDark
+                        ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
+                        : 'border-gray-200 bg-white',
+                ]"
+            >
+                <div
+                    :class="[
+                        'px-3 py-2 text-xs font-semibold uppercase tracking-wider',
+                        escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                    ]"
+                >
                     Macros
                 </div>
-                <div class="max-h-64 overflow-y-auto">
-                    <div v-if="!macros.length"
-                         :class="['px-3 py-4 text-center text-sm', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                <div class="max-h-64 overflow-y-auto" role="menu">
+                    <div
+                        v-if="!macros.length"
+                        :class="[
+                            'px-3 py-4 text-center text-sm',
+                            escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400',
+                        ]"
+                    >
                         No macros available
                     </div>
-                    <button v-for="macro in macros" :key="macro.id"
-                            @click="applyMacro(macro.id)"
-                            :disabled="processing"
-                            :class="['flex w-full flex-col px-3 py-2.5 text-left transition-colors',
-                                     escDark
-                                         ? 'hover:bg-white/[0.04] disabled:opacity-50'
-                                         : 'hover:bg-gray-50 disabled:opacity-50']">
-                        <span :class="['text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                    <button
+                        v-for="macro in macros"
+                        :key="macro.id"
+                        role="menuitem"
+                        :disabled="processing"
+                        :class="[
+                            'flex w-full flex-col px-3 py-2.5 text-left transition-colors',
+                            escDark
+                                ? 'hover:bg-[var(--esc-panel-hover)] disabled:opacity-50'
+                                : 'hover:bg-gray-50 disabled:opacity-50',
+                        ]"
+                        @click="applyMacro(macro.id)"
+                    >
+                        <span
+                            :class="[
+                                'text-sm font-medium',
+                                escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900',
+                            ]"
+                        >
                             {{ macro.name }}
                         </span>
-                        <span v-if="macro.description"
-                              :class="['mt-0.5 text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                        <span
+                            v-if="macro.description"
+                            :class="[
+                                'mt-0.5 text-xs',
+                                escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                            ]"
+                        >
                             {{ macro.description }}
                         </span>
                     </button>

package/src/components/PermissionMatrix.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    permissions: {
+        type: Object,
+        required: true,
+    },
+    modelValue: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const groups = computed(() => Object.keys(props.permissions || {}));
+
+const actions = ['view', 'create', 'edit', 'delete'];
+
+function getPermission(group, action) {
+    const perms = props.permissions[group] || [];
+    return perms.find((p) => p.slug === `${group.toLowerCase()}.${action}` || p.slug.endsWith(`.${action}`));
+}
+
+function isChecked(permissionId) {
+    return props.modelValue.includes(permissionId);
+}
+
+function toggle(permissionId) {
+    if (!permissionId) return;
+    const updated = isChecked(permissionId)
+        ? props.modelValue.filter((id) => id !== permissionId)
+        : [...props.modelValue, permissionId];
+    emit('update:modelValue', updated);
+}
+
+function toggleGroup(group) {
+    const groupPerms = (props.permissions[group] || []).map((p) => p.id);
+    const allChecked = groupPerms.every((id) => props.modelValue.includes(id));
+
+    let updated;
+    if (allChecked) {
+        updated = props.modelValue.filter((id) => !groupPerms.includes(id));
+    } else {
+        const newIds = groupPerms.filter((id) => !props.modelValue.includes(id));
+        updated = [...props.modelValue, ...newIds];
+    }
+    emit('update:modelValue', updated);
+}
+
+function isGroupAllChecked(group) {
+    const groupPerms = (props.permissions[group] || []).map((p) => p.id);
+    return groupPerms.length > 0 && groupPerms.every((id) => props.modelValue.includes(id));
+}
+</script>
+
+<template>
+    <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">
+                        Group
+                    </th>
+                    <th
+                        v-for="action in actions"
+                        :key="action"
+                        class="px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-neutral-500"
+                    >
+                        {{ action }}
+                    </th>
+                    <th
+                        class="px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-neutral-500"
+                    >
+                        All
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-white/[0.04]">
+                <tr v-for="group in groups" :key="group" class="transition-colors hover:bg-white/[0.03]">
+                    <td class="px-4 py-3 text-sm font-medium text-neutral-200">{{ group }}</td>
+                    <td v-for="action in actions" :key="action" class="px-4 py-3 text-center">
+                        <template v-if="getPermission(group, action)">
+                            <input
+                                type="checkbox"
+                                :checked="isChecked(getPermission(group, action).id)"
+                                :aria-label="group + ' ' + action + ' permission'"
+                                class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                                @change="toggle(getPermission(group, action).id)"
+                            />
+                        </template>
+                        <span v-else class="text-neutral-600">-</span>
+                    </td>
+                    <td class="px-4 py-3 text-center">
+                        <input
+                            type="checkbox"
+                            :checked="isGroupAllChecked(group)"
+                            class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                            @change="toggleGroup(group)"
+                        />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

package/src/components/PinnedNotes.vue

@@ -10,19 +10,26 @@ const props = defineProps({
     routePrefix: { type: String, required: true },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const { t } = useI18n();
 const processingId = ref(null);
 
 function unpinNote(note) {
     if (processingId.value) return;
     processingId.value = note.id;
-    router.post(route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, note.id]), {}, {
-        preserveScroll: true,
-        onFinish: () => {
-            processingId.value = null;
+    router.post(
+        route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, note.id]),
+        {},
+        {
+            preserveScroll: true,
+            onFinish: () => {
+                processingId.value = null;
+            },
         },
-    });
+    );
 }
 
 function formatDate(dateStr) {
@@ -39,48 +46,80 @@ function formatDate(dateStr) {
 </script>
 
 <template>
-    <div v-if="notes.length > 0"
-         :class="['rounded-xl border p-4',
-                  escDark
-                      ? 'border-amber-500/20 bg-amber-500/[0.06]'
-                      : 'border-amber-300 bg-amber-50']">
+    <div
+        v-if="notes.length > 0"
+        :class="[
+            'rounded-xl border p-4',
+            escDark ? 'border-amber-500/20 bg-amber-500/[0.06]' : 'border-amber-300 bg-amber-50',
+        ]"
+    >
         <!-- Header -->
         <div class="mb-3 flex items-center gap-2">
-            <svg :class="['h-4 w-4', escDark ? 'text-amber-400' : 'text-amber-600']"
-                 fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
+            <svg
+                :class="['h-4 w-4', escDark ? 'text-amber-400' : 'text-amber-600']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9"
+                />
             </svg>
-            <span :class="['text-xs font-semibold uppercase tracking-wider',
-                           escDark ? 'text-amber-400' : 'text-amber-700']">
+            <span
+                :class="[
+                    'text-xs font-semibold uppercase tracking-wider',
+                    escDark ? 'text-amber-400' : 'text-amber-700',
+                ]"
+            >
                 {{ t('pinned_notes.title') }}
             </span>
         </div>
 
         <!-- Notes list -->
         <div class="space-y-3">
-            <div v-for="note in notes" :key="note.id"
-                 :class="['rounded-lg border p-3',
-                          escDark
-                              ? 'border-amber-500/10 bg-amber-500/[0.04]'
-                              : 'border-amber-200 bg-white']">
+            <div
+                v-for="note in notes"
+                :key="note.id"
+                :class="[
+                    'rounded-lg border p-3',
+                    escDark ? 'border-amber-500/10 bg-amber-500/[0.04]' : 'border-amber-200 bg-white',
+                ]"
+            >
                 <!-- Note body -->
-                <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-neutral-200' : 'text-gray-800']" v-html="sanitizeHtml(note.body)"></div>
+                <div
+                    :class="[
+                        'prose prose-sm max-w-none',
+                        escDark ? 'prose-invert text-[var(--esc-panel-text-secondary)]' : 'text-gray-800',
+                    ]"
+                    v-html="sanitizeHtml(note.body)"
+                ></div>
 
                 <!-- Meta row -->
                 <div class="mt-2 flex items-center justify-between">
-                    <div :class="['flex items-center gap-2 text-xs',
-                                  escDark ? 'text-neutral-500' : 'text-gray-500']">
+                    <div
+                        :class="[
+                            'flex items-center gap-2 text-xs',
+                            escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                        ]"
+                    >
                         <span class="font-medium">{{ note.author?.name || 'Unknown' }}</span>
                         <span>&middot;</span>
                         <span>{{ formatDate(note.created_at) }}</span>
                     </div>
-                    <button @click="unpinNote(note)"
-                            :disabled="processingId === note.id"
-                            :class="['rounded-md px-2 py-1 text-xs font-medium transition-colors',
-                                     escDark
-                                         ? 'text-amber-400 hover:bg-amber-500/10 hover:text-amber-300'
-                                         : 'text-amber-600 hover:bg-amber-100 hover:text-amber-700',
-                                     processingId === note.id && 'opacity-50 cursor-not-allowed']">
+                    <button
+                        :disabled="processingId === note.id"
+                        :class="[
+                            'rounded-md px-2 py-1 text-xs font-medium transition-colors',
+                            escDark
+                                ? 'text-amber-400 hover:bg-amber-500/10 hover:text-amber-300'
+                                : 'text-amber-600 hover:bg-amber-100 hover:text-amber-700',
+                            processingId === note.id && 'opacity-50 cursor-not-allowed',
+                        ]"
+                        @click="unpinNote(note)"
+                    >
                         {{ t('pinned_notes.unpin') }}
                     </button>
                 </div>