@escalated-dev/escalated 0.8.0 → 0.9.0

package/src/components/ReportExportButton.vue

@@ -1,108 +1,108 @@
-<script setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-    exportUrl: { type: String, default: '' },
-    reportName: { type: String, default: 'report' },
-    periodDays: { type: Number, default: 30 },
-});
-
-const open = ref(false);
-const loading = ref(false);
-
-async function exportAs(format) {
-    loading.value = true;
-    try {
-        const separator = props.exportUrl.includes('?') ? '&' : '?';
-        const url = props.exportUrl ? `${props.exportUrl}${separator}format=${format}&days=${props.periodDays}` : '#';
-
-        if (!props.exportUrl) {
-            const data = { report: props.reportName, format, period_days: props.periodDays };
-            const blob = new Blob([format === 'json' ? JSON.stringify(data, null, 2) : 'No export URL configured'], {
-                type: format === 'json' ? 'application/json' : 'text/csv',
-            });
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = `${props.reportName}-${props.periodDays}d.${format}`;
-            a.click();
-            URL.revokeObjectURL(a.href);
-        } else {
-            const response = await fetch(url);
-            const blob = await response.blob();
-            const a = document.createElement('a');
-            a.href = URL.createObjectURL(blob);
-            a.download = `${props.reportName}-${props.periodDays}d.${format}`;
-            a.click();
-            URL.revokeObjectURL(a.href);
-        }
-    } finally {
-        loading.value = false;
-        open.value = false;
-    }
-}
-</script>
-
-<template>
-    <div class="relative">
-        <button
-            class="flex items-center gap-2 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3.5 py-1.5 text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-all hover:text-[var(--esc-panel-text-secondary)]"
-            @click="open = !open"
-        >
-            <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.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
-                />
-            </svg>
-            <span>Export</span>
-            <svg v-if="loading" class="h-3.5 w-3.5 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 12h4z" />
-            </svg>
-        </button>
-        <div
-            v-if="open"
-            class="absolute right-0 top-full z-10 mt-1 w-44 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-1 shadow-xl"
-        >
-            <button
-                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
-                @click="exportAs('csv')"
-            >
-                <svg
-                    class="h-4 w-4 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-                    />
-                </svg>
-                Export as CSV
-            </button>
-            <button
-                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
-                @click="exportAs('json')"
-            >
-                <svg
-                    class="h-4 w-4 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="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
-                    />
-                </svg>
-                Export as JSON
-            </button>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    exportUrl: { type: String, default: '' },
+    reportName: { type: String, default: 'report' },
+    periodDays: { type: Number, default: 30 },
+});
+
+const open = ref(false);
+const loading = ref(false);
+
+async function exportAs(format) {
+    loading.value = true;
+    try {
+        const separator = props.exportUrl.includes('?') ? '&' : '?';
+        const url = props.exportUrl ? `${props.exportUrl}${separator}format=${format}&days=${props.periodDays}` : '#';
+
+        if (!props.exportUrl) {
+            const data = { report: props.reportName, format, period_days: props.periodDays };
+            const blob = new Blob([format === 'json' ? JSON.stringify(data, null, 2) : 'No export URL configured'], {
+                type: format === 'json' ? 'application/json' : 'text/csv',
+            });
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = `${props.reportName}-${props.periodDays}d.${format}`;
+            a.click();
+            URL.revokeObjectURL(a.href);
+        } else {
+            const response = await fetch(url);
+            const blob = await response.blob();
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = `${props.reportName}-${props.periodDays}d.${format}`;
+            a.click();
+            URL.revokeObjectURL(a.href);
+        }
+    } finally {
+        loading.value = false;
+        open.value = false;
+    }
+}
+</script>
+
+<template>
+    <div class="relative">
+        <button
+            class="flex items-center gap-2 rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3.5 py-1.5 text-sm font-medium text-[var(--esc-panel-text-tertiary)] transition-all hover:text-[var(--esc-panel-text-secondary)]"
+            @click="open = !open"
+        >
+            <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.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                />
+            </svg>
+            <span>Export</span>
+            <svg v-if="loading" class="h-3.5 w-3.5 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 12h4z" />
+            </svg>
+        </button>
+        <div
+            v-if="open"
+            class="absolute right-0 top-full z-10 mt-1 w-44 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] py-1 shadow-xl"
+        >
+            <button
+                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
+                @click="exportAs('csv')"
+            >
+                <svg
+                    class="h-4 w-4 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                    />
+                </svg>
+                Export as CSV
+            </button>
+            <button
+                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-[var(--esc-panel-text-secondary)] hover:bg-[var(--esc-panel-hover)]"
+                @click="exportAs('json')"
+            >
+                <svg
+                    class="h-4 w-4 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="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"
+                    />
+                </svg>
+                Export as JSON
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/SaveViewDialog.vue

@@ -1,172 +1,172 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const props = defineProps({
-    show: { type: Boolean, default: false },
-    filters: { type: Object, default: () => ({}) },
-});
-
-const emit = defineEmits(['close', 'saved']);
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-const name = ref('');
-const isShared = ref(false);
-const saving = ref(false);
-const error = ref('');
-
-function reset() {
-    name.value = '';
-    isShared.value = false;
-    error.value = '';
-}
-
-async function save() {
-    if (!name.value.trim()) {
-        error.value = 'Name is required.';
-        return;
-    }
-
-    const nonEmptyFilters = {};
-    for (const [key, value] of Object.entries(props.filters)) {
-        if (value !== '' && value !== null && value !== undefined) {
-            nonEmptyFilters[key] = value;
-        }
-    }
-
-    if (Object.keys(nonEmptyFilters).length === 0) {
-        error.value = 'Apply some filters first before saving a view.';
-        return;
-    }
-
-    saving.value = true;
-    error.value = '';
-
-    try {
-        const response = await fetch(route('escalated.admin.saved-views.store'), {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
-                Accept: 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-            },
-            body: JSON.stringify({
-                name: name.value.trim(),
-                filters: nonEmptyFilters,
-                is_shared: isShared.value,
-            }),
-        });
-
-        if (!response.ok) {
-            const data = await response.json();
-            error.value = data.message || 'Failed to save view.';
-            return;
-        }
-
-        emit('saved');
-        reset();
-        emit('close');
-    } catch {
-        error.value = 'Failed to save view.';
-    } finally {
-        saving.value = false;
-    }
-}
-
-function cancel() {
-    reset();
-    emit('close');
-}
-
-const overlayClass = computed(() => (escDark.value ? 'bg-black/60' : 'bg-black/30'));
-
-const panelClass = computed(() =>
-    escDark.value
-        ? 'border border-white/10 bg-[var(--esc-panel-surface)] text-neutral-200 shadow-xl'
-        : 'bg-white text-gray-900 shadow-xl',
-);
-
-const inputClass = computed(() =>
-    escDark.value
-        ? 'rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40'
-        : 'rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500',
-);
-</script>
-
-<template>
-    <Teleport to="body">
-        <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center" @click.self="cancel">
-            <div :class="['absolute inset-0', overlayClass]" @click="cancel"></div>
-            <div :class="['relative w-full max-w-md rounded-lg p-6', panelClass]">
-                <h3 :class="['mb-4 text-lg font-semibold', escDark ? 'text-neutral-100' : 'text-gray-900']">
-                    Save Current View
-                </h3>
-
-                <div class="space-y-4">
-                    <div>
-                        <label
-                            :class="['mb-1 block text-sm font-medium', escDark ? 'text-neutral-400' : 'text-gray-700']"
-                        >
-                            Name
-                        </label>
-                        <input
-                            v-model="name"
-                            type="text"
-                            placeholder="e.g. My Open Tickets"
-                            :class="['w-full', inputClass]"
-                            @keydown.enter="save"
-                        />
-                    </div>
-
-                    <label class="flex items-center gap-2">
-                        <input
-                            v-model="isShared"
-                            type="checkbox"
-                            :class="
-                                escDark
-                                    ? 'h-4 w-4 rounded border-white/10 bg-white/5 text-cyan-500 focus:ring-cyan-500/20'
-                                    : 'h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500'
-                            "
-                        />
-                        <span :class="['text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">
-                            Share with all agents
-                        </span>
-                    </label>
-
-                    <p v-if="error" :class="['text-sm', escDark ? 'text-red-400' : 'text-red-600']">
-                        {{ error }}
-                    </p>
-                </div>
-
-                <div class="mt-6 flex justify-end gap-3">
-                    <button
-                        type="button"
-                        :class="[
-                            'rounded-md px-4 py-2 text-sm font-medium',
-                            escDark ? 'text-neutral-400 hover:text-neutral-200' : 'text-gray-600 hover:text-gray-800',
-                        ]"
-                        @click="cancel"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="button"
-                        :disabled="saving"
-                        :class="[
-                            'rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50',
-                            escDark
-                                ? 'bg-cyan-600 text-white hover:bg-cyan-500'
-                                : 'bg-blue-600 text-white hover:bg-blue-700',
-                        ]"
-                        @click="save"
-                    >
-                        {{ saving ? 'Saving...' : 'Save View' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    filters: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['close', 'saved']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const name = ref('');
+const isShared = ref(false);
+const saving = ref(false);
+const error = ref('');
+
+function reset() {
+    name.value = '';
+    isShared.value = false;
+    error.value = '';
+}
+
+async function save() {
+    if (!name.value.trim()) {
+        error.value = 'Name is required.';
+        return;
+    }
+
+    const nonEmptyFilters = {};
+    for (const [key, value] of Object.entries(props.filters)) {
+        if (value !== '' && value !== null && value !== undefined) {
+            nonEmptyFilters[key] = value;
+        }
+    }
+
+    if (Object.keys(nonEmptyFilters).length === 0) {
+        error.value = 'Apply some filters first before saving a view.';
+        return;
+    }
+
+    saving.value = true;
+    error.value = '';
+
+    try {
+        const response = await fetch(route('escalated.admin.saved-views.store'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+            body: JSON.stringify({
+                name: name.value.trim(),
+                filters: nonEmptyFilters,
+                is_shared: isShared.value,
+            }),
+        });
+
+        if (!response.ok) {
+            const data = await response.json();
+            error.value = data.message || 'Failed to save view.';
+            return;
+        }
+
+        emit('saved');
+        reset();
+        emit('close');
+    } catch {
+        error.value = 'Failed to save view.';
+    } finally {
+        saving.value = false;
+    }
+}
+
+function cancel() {
+    reset();
+    emit('close');
+}
+
+const overlayClass = computed(() => (escDark.value ? 'bg-black/60' : 'bg-black/30'));
+
+const panelClass = computed(() =>
+    escDark.value
+        ? 'border border-white/10 bg-[var(--esc-panel-surface)] text-neutral-200 shadow-xl'
+        : 'bg-white text-gray-900 shadow-xl',
+);
+
+const inputClass = computed(() =>
+    escDark.value
+        ? 'rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-cyan-500/40 focus:outline-none focus:ring-1 focus:ring-cyan-500/40'
+        : 'rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500',
+);
+</script>
+
+<template>
+    <Teleport to="body">
+        <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center" @click.self="cancel">
+            <div :class="['absolute inset-0', overlayClass]" @click="cancel"></div>
+            <div :class="['relative w-full max-w-md rounded-lg p-6', panelClass]">
+                <h3 :class="['mb-4 text-lg font-semibold', escDark ? 'text-neutral-100' : 'text-gray-900']">
+                    Save Current View
+                </h3>
+
+                <div class="space-y-4">
+                    <div>
+                        <label
+                            :class="['mb-1 block text-sm font-medium', escDark ? 'text-neutral-400' : 'text-gray-700']"
+                        >
+                            Name
+                        </label>
+                        <input
+                            v-model="name"
+                            type="text"
+                            placeholder="e.g. My Open Tickets"
+                            :class="['w-full', inputClass]"
+                            @keydown.enter="save"
+                        />
+                    </div>
+
+                    <label class="flex items-center gap-2">
+                        <input
+                            v-model="isShared"
+                            type="checkbox"
+                            :class="
+                                escDark
+                                    ? 'h-4 w-4 rounded border-white/10 bg-white/5 text-cyan-500 focus:ring-cyan-500/20'
+                                    : 'h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500'
+                            "
+                        />
+                        <span :class="['text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">
+                            Share with all agents
+                        </span>
+                    </label>
+
+                    <p v-if="error" :class="['text-sm', escDark ? 'text-red-400' : 'text-red-600']">
+                        {{ error }}
+                    </p>
+                </div>
+
+                <div class="mt-6 flex justify-end gap-3">
+                    <button
+                        type="button"
+                        :class="[
+                            'rounded-md px-4 py-2 text-sm font-medium',
+                            escDark ? 'text-neutral-400 hover:text-neutral-200' : 'text-gray-600 hover:text-gray-800',
+                        ]"
+                        @click="cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        :disabled="saving"
+                        :class="[
+                            'rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50',
+                            escDark
+                                ? 'bg-cyan-600 text-white hover:bg-cyan-500'
+                                : 'bg-blue-600 text-white hover:bg-blue-700',
+                        ]"
+                        @click="save"
+                    >
+                        {{ saving ? 'Saving...' : 'Save View' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>