@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/PeriodSelector.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: Number, default: 30 },
+    options: { type: Array, default: () => [7, 30, 90, 365] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const showCustom = ref(false);
+const customStart = ref('');
+const customEnd = ref('');
+
+const isCustom = computed(() => !props.options.includes(props.modelValue));
+
+function selectPeriod(days) {
+    showCustom.value = false;
+    emit('update:modelValue', days);
+}
+
+function applyCustom() {
+    if (customStart.value && customEnd.value) {
+        const start = new Date(customStart.value);
+        const end = new Date(customEnd.value);
+        const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+        if (days > 0) {
+            emit('update:modelValue', days);
+            showCustom.value = false;
+        }
+    }
+}
+
+function formatLabel(days) {
+    if (days === 365) return '1y';
+    return `${days}d`;
+}
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <button
+            v-for="d in options"
+            :key="d"
+            :class="[
+                'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                modelValue === 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="selectPeriod(d)"
+        >
+            {{ formatLabel(d) }}
+        </button>
+        <div class="relative">
+            <button
+                :class="[
+                    'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                    isCustom
+                        ? '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="showCustom = !showCustom"
+            >
+                Custom
+            </button>
+            <div
+                v-if="showCustom"
+                class="absolute right-0 top-full z-10 mt-2 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4 shadow-xl"
+            >
+                <div class="flex flex-col gap-3">
+                    <label class="text-xs font-medium text-[var(--esc-panel-text-muted)]">
+                        Start
+                        <input
+                            v-model="customStart"
+                            type="date"
+                            class="mt-1 block w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm text-[var(--esc-panel-text)]"
+                        />
+                    </label>
+                    <label class="text-xs font-medium text-[var(--esc-panel-text-muted)]">
+                        End
+                        <input
+                            v-model="customEnd"
+                            type="date"
+                            class="mt-1 block w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm text-[var(--esc-panel-text)]"
+                        />
+                    </label>
+                    <button
+                        class="rounded-lg bg-[var(--esc-panel-accent)] px-4 py-1.5 text-sm font-medium text-white transition-all hover:opacity-90"
+                        @click="applyCustom"
+                    >
+                        Apply
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/PermissionMatrix.vue

@@ -1,107 +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>
+<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

@@ -1,129 +1,129 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-import { sanitizeHtml } from '../utils/sanitizeHtml';
-import { useI18n } from '../composables/useI18n';
-
-const props = defineProps({
-    notes: { type: Array, default: () => [] },
-    ticketReference: { type: String, required: true },
-    routePrefix: { type: String, required: true },
-});
-
-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;
-            },
-        },
-    );
-}
-
-function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    return date.toLocaleDateString(undefined, {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-    });
-}
-</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',
-        ]"
-    >
-        <!-- 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>
-            <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',
-                ]"
-            >
-                <!-- Note body -->
-                <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-[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
-                        :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>
-            </div>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
+import { useI18n } from '../composables/useI18n';
+
+const props = defineProps({
+    notes: { type: Array, default: () => [] },
+    ticketReference: { type: String, required: true },
+    routePrefix: { type: String, required: true },
+});
+
+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;
+            },
+        },
+    );
+}
+
+function formatDate(dateStr) {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+</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',
+        ]"
+    >
+        <!-- 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>
+            <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',
+                ]"
+            >
+                <!-- Note body -->
+                <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-[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
+                        :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>
+            </div>
+        </div>
+    </div>
+</template>