@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/AuditLogEntry.vue

@@ -1,95 +1,95 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-    log: { type: Object, required: true },
-});
-
-const actionColors = {
-    created: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20',
-    updated: 'bg-cyan-500/10 text-cyan-400 ring-1 ring-cyan-500/20',
-    deleted: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20',
-};
-
-const actionColor = computed(
-    () => actionColors[props.log.action] || 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20',
-);
-
-const userInitial = computed(() => {
-    const name = props.log.user?.name || 'System';
-    return name.charAt(0).toUpperCase();
-});
-
-const resourceName = computed(() => {
-    const type = props.log.auditable_type || '';
-    return type.split('\\').pop() || type;
-});
-
-const changedFields = computed(() => {
-    if (props.log.action !== 'updated') return [];
-    const oldVals = props.log.old_values || {};
-    const newVals = props.log.new_values || {};
-    const keys = new Set([...Object.keys(oldVals), ...Object.keys(newVals)]);
-    return Array.from(keys).map((key) => ({
-        field: key,
-        old: oldVals[key] ?? '-',
-        new: newVals[key] ?? '-',
-    }));
-});
-
-const formattedDate = computed(() => {
-    if (!props.log.created_at) return '';
-    const d = new Date(props.log.created_at);
-    return d.toLocaleString();
-});
-</script>
-
-<template>
-    <div
-        class="flex gap-3 rounded-lg border border-white/[0.04] bg-white/[0.02] px-4 py-3 transition-colors hover:bg-white/[0.03]"
-    >
-        <!-- Avatar -->
-        <div
-            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-xs font-semibold text-neutral-300"
-        >
-            {{ userInitial }}
-        </div>
-
-        <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-2 text-sm">
-                <span class="font-medium text-neutral-200">{{ log.user?.name || 'System' }}</span>
-                <span :class="['inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', actionColor]">
-                    {{ log.action }}
-                </span>
-                <span class="text-neutral-400">{{ resourceName }}</span>
-                <span class="text-neutral-600">#{{ log.auditable_id }}</span>
-                <span class="ml-auto text-xs text-neutral-500">{{ formattedDate }}</span>
-            </div>
-
-            <!-- Changed fields diff -->
-            <div v-if="changedFields.length" class="mt-2 space-y-1">
-                <div v-for="change in changedFields" :key="change.field" class="flex items-center gap-2 text-xs">
-                    <span class="font-medium text-neutral-400">{{ change.field }}:</span>
-                    <span class="text-rose-400/70 line-through">{{
-                        typeof change.old === 'object' ? JSON.stringify(change.old) : change.old
-                    }}</span>
-                    <svg
-                        class="h-3 w-3 text-neutral-600"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        viewBox="0 0 24 24"
-                    >
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                    </svg>
-                    <span class="text-emerald-400/70">{{
-                        typeof change.new === 'object' ? JSON.stringify(change.new) : change.new
-                    }}</span>
-                </div>
-            </div>
-
-            <!-- IP address -->
-            <div v-if="log.ip_address" class="mt-1 text-xs text-neutral-600">IP: {{ log.ip_address }}</div>
-        </div>
-    </div>
-</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    log: { type: Object, required: true },
+});
+
+const actionColors = {
+    created: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20',
+    updated: 'bg-cyan-500/10 text-cyan-400 ring-1 ring-cyan-500/20',
+    deleted: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20',
+};
+
+const actionColor = computed(
+    () => actionColors[props.log.action] || 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20',
+);
+
+const userInitial = computed(() => {
+    const name = props.log.user?.name || 'System';
+    return name.charAt(0).toUpperCase();
+});
+
+const resourceName = computed(() => {
+    const type = props.log.auditable_type || '';
+    return type.split('\\').pop() || type;
+});
+
+const changedFields = computed(() => {
+    if (props.log.action !== 'updated') return [];
+    const oldVals = props.log.old_values || {};
+    const newVals = props.log.new_values || {};
+    const keys = new Set([...Object.keys(oldVals), ...Object.keys(newVals)]);
+    return Array.from(keys).map((key) => ({
+        field: key,
+        old: oldVals[key] ?? '-',
+        new: newVals[key] ?? '-',
+    }));
+});
+
+const formattedDate = computed(() => {
+    if (!props.log.created_at) return '';
+    const d = new Date(props.log.created_at);
+    return d.toLocaleString();
+});
+</script>
+
+<template>
+    <div
+        class="flex gap-3 rounded-lg border border-white/[0.04] bg-white/[0.02] px-4 py-3 transition-colors hover:bg-white/[0.03]"
+    >
+        <!-- Avatar -->
+        <div
+            class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500/20 to-violet-500/20 text-xs font-semibold text-neutral-300"
+        >
+            {{ userInitial }}
+        </div>
+
+        <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2 text-sm">
+                <span class="font-medium text-neutral-200">{{ log.user?.name || 'System' }}</span>
+                <span :class="['inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium', actionColor]">
+                    {{ log.action }}
+                </span>
+                <span class="text-neutral-400">{{ resourceName }}</span>
+                <span class="text-neutral-600">#{{ log.auditable_id }}</span>
+                <span class="ml-auto text-xs text-neutral-500">{{ formattedDate }}</span>
+            </div>
+
+            <!-- Changed fields diff -->
+            <div v-if="changedFields.length" class="mt-2 space-y-1">
+                <div v-for="change in changedFields" :key="change.field" class="flex items-center gap-2 text-xs">
+                    <span class="font-medium text-neutral-400">{{ change.field }}:</span>
+                    <span class="text-rose-400/70 line-through">{{
+                        typeof change.old === 'object' ? JSON.stringify(change.old) : change.old
+                    }}</span>
+                    <svg
+                        class="h-3 w-3 text-neutral-600"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                    </svg>
+                    <span class="text-emerald-400/70">{{
+                        typeof change.new === 'object' ? JSON.stringify(change.new) : change.new
+                    }}</span>
+                </div>
+            </div>
+
+            <!-- IP address -->
+            <div v-if="log.ip_address" class="mt-1 text-xs text-neutral-600">IP: {{ log.ip_address }}</div>
+        </div>
+    </div>
+</template>

package/src/components/BulkActionBar.vue

@@ -1,166 +1,166 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    selectedIds: { type: Array, required: true },
-    bulkRoute: { type: String, required: true },
-    agents: { type: Array, default: () => [] },
-    departments: { type: Array, default: () => [] },
-});
-
-const emit = defineEmits(['clear']);
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-const processing = ref(false);
-
-function performAction(action, value) {
-    if (!props.selectedIds.length || processing.value) return;
-    processing.value = true;
-    router.post(
-        props.bulkRoute,
-        {
-            ticket_ids: props.selectedIds,
-            action,
-            value,
-        },
-        {
-            preserveScroll: true,
-            onSuccess: () => emit('clear'),
-            onFinish: () => {
-                processing.value = false;
-            },
-        },
-    );
-}
-
-const statusOptions = [
-    { value: 'in_progress', label: 'In Progress' },
-    { value: 'waiting_on_customer', label: 'Waiting on Customer' },
-    { value: 'resolved', label: 'Resolved' },
-    { value: 'closed', label: 'Closed' },
-];
-
-const priorityOptions = [
-    { value: 'low', label: 'Low' },
-    { value: 'medium', label: 'Medium' },
-    { value: 'high', label: 'High' },
-    { value: 'urgent', label: 'Urgent' },
-    { value: 'critical', label: 'Critical' },
-];
-
-const selectClass = computed(() =>
-    escDark.value
-        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
-        : 'rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none',
-);
-</script>
-
-<template>
-    <Transition
-        enter-active-class="transition-all duration-200 ease-out"
-        enter-from-class="translate-y-full opacity-0"
-        enter-to-class="translate-y-0 opacity-100"
-        leave-active-class="transition-all duration-150 ease-in"
-        leave-from-class="translate-y-0 opacity-100"
-        leave-to-class="translate-y-full opacity-0"
-    >
-        <div
-            v-if="selectedIds.length > 0"
-            :class="[
-                'fixed bottom-0 left-0 right-0 z-50 border-t px-6 py-3',
-                escDark
-                    ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)]/95 backdrop-blur-xl'
-                    : 'border-gray-200 bg-white/95 backdrop-blur-xl shadow-lg',
-            ]"
-        >
-            <div class="mx-auto flex max-w-7xl items-center gap-4">
-                <span
-                    :class="['text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']"
-                    aria-live="polite"
-                >
-                    {{ selectedIds.length }} ticket{{ selectedIds.length !== 1 ? 's' : '' }} selected
-                </span>
-
-                <select
-                    :class="selectClass"
-                    :disabled="processing"
-                    aria-label="Change status"
-                    @change="
-                        performAction('status', $event.target.value);
-                        $event.target.value = '';
-                    "
-                >
-                    <option value="">Status...</option>
-                    <option v-for="o in statusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
-                </select>
-
-                <select
-                    :class="selectClass"
-                    :disabled="processing"
-                    aria-label="Change priority"
-                    @change="
-                        performAction('priority', $event.target.value);
-                        $event.target.value = '';
-                    "
-                >
-                    <option value="">Priority...</option>
-                    <option v-for="o in priorityOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
-                </select>
-
-                <select
-                    v-if="agents.length"
-                    :class="selectClass"
-                    :disabled="processing"
-                    @change="
-                        performAction('assign', $event.target.value);
-                        $event.target.value = '';
-                    "
-                >
-                    <option value="">Assign to...</option>
-                    <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
-                </select>
-
-                <select
-                    v-if="departments.length"
-                    :class="selectClass"
-                    :disabled="processing"
-                    @change="
-                        performAction('department', $event.target.value);
-                        $event.target.value = '';
-                    "
-                >
-                    <option value="">Department...</option>
-                    <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
-                </select>
-
-                <button
-                    :class="[
-                        'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
-                        escDark
-                            ? 'bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 hover:bg-rose-500/25'
-                            : 'bg-red-50 text-red-600 ring-1 ring-red-200 hover:bg-red-100',
-                    ]"
-                    :disabled="processing"
-                    @click="performAction('delete', null)"
-                >
-                    Delete
-                </button>
-
-                <button
-                    :class="[
-                        'ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
-                        escDark
-                            ? 'text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
-                            : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700',
-                    ]"
-                    @click="emit('clear')"
-                >
-                    Deselect All
-                </button>
-            </div>
-        </div>
-    </Transition>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    selectedIds: { type: Array, required: true },
+    bulkRoute: { type: String, required: true },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['clear']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const processing = ref(false);
+
+function performAction(action, value) {
+    if (!props.selectedIds.length || processing.value) return;
+    processing.value = true;
+    router.post(
+        props.bulkRoute,
+        {
+            ticket_ids: props.selectedIds,
+            action,
+            value,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => emit('clear'),
+            onFinish: () => {
+                processing.value = false;
+            },
+        },
+    );
+}
+
+const statusOptions = [
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'waiting_on_customer', label: 'Waiting on Customer' },
+    { value: 'resolved', label: 'Resolved' },
+    { value: 'closed', label: 'Closed' },
+];
+
+const priorityOptions = [
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'urgent', label: 'Urgent' },
+    { value: 'critical', label: 'Critical' },
+];
+
+const selectClass = computed(() =>
+    escDark.value
+        ? 'rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] px-2 py-1.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-border-input)] focus:outline-none focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+        : 'rounded-md border border-gray-300 bg-white px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none',
+);
+</script>
+
+<template>
+    <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="translate-y-full opacity-0"
+        enter-to-class="translate-y-0 opacity-100"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="translate-y-0 opacity-100"
+        leave-to-class="translate-y-full opacity-0"
+    >
+        <div
+            v-if="selectedIds.length > 0"
+            :class="[
+                'fixed bottom-0 left-0 right-0 z-50 border-t px-6 py-3',
+                escDark
+                    ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)]/95 backdrop-blur-xl'
+                    : 'border-gray-200 bg-white/95 backdrop-blur-xl shadow-lg',
+            ]"
+        >
+            <div class="mx-auto flex max-w-7xl items-center gap-4">
+                <span
+                    :class="['text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']"
+                    aria-live="polite"
+                >
+                    {{ selectedIds.length }} ticket{{ selectedIds.length !== 1 ? 's' : '' }} selected
+                </span>
+
+                <select
+                    :class="selectClass"
+                    :disabled="processing"
+                    aria-label="Change status"
+                    @change="
+                        performAction('status', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
+                    <option value="">Status...</option>
+                    <option v-for="o in statusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+
+                <select
+                    :class="selectClass"
+                    :disabled="processing"
+                    aria-label="Change priority"
+                    @change="
+                        performAction('priority', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
+                    <option value="">Priority...</option>
+                    <option v-for="o in priorityOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+
+                <select
+                    v-if="agents.length"
+                    :class="selectClass"
+                    :disabled="processing"
+                    @change="
+                        performAction('assign', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
+                    <option value="">Assign to...</option>
+                    <option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
+                </select>
+
+                <select
+                    v-if="departments.length"
+                    :class="selectClass"
+                    :disabled="processing"
+                    @change="
+                        performAction('department', $event.target.value);
+                        $event.target.value = '';
+                    "
+                >
+                    <option value="">Department...</option>
+                    <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
+                </select>
+
+                <button
+                    :class="[
+                        'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                        escDark
+                            ? 'bg-rose-500/15 text-rose-400 ring-1 ring-rose-500/20 hover:bg-rose-500/25'
+                            : 'bg-red-50 text-red-600 ring-1 ring-red-200 hover:bg-red-100',
+                    ]"
+                    :disabled="processing"
+                    @click="performAction('delete', null)"
+                >
+                    Delete
+                </button>
+
+                <button
+                    :class="[
+                        'ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                        escDark
+                            ? 'text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                            : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700',
+                    ]"
+                    @click="emit('clear')"
+                >
+                    Deselect All
+                </button>
+            </div>
+        </div>
+    </Transition>
+</template>