@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/BulkActionBar.vue

@@ -1,97 +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-white/10 bg-neutral-950 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10'
-    : '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-white/[0.06] bg-neutral-950/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-white' : 'text-gray-900']">
-                    {{ selectedIds.length }} ticket{{ selectedIds.length !== 1 ? 's' : '' }} selected
-                </span>
-
-                <select @change="performAction('status', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
-                    <option value="">Status...</option>
-                    <option v-for="o in statusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
-                </select>
-
-                <select @change="performAction('priority', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
-                    <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" @change="performAction('assign', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
-                    <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" @change="performAction('department', $event.target.value); $event.target.value = ''" :class="selectClass" :disabled="processing">
-                    <option value="">Department...</option>
-                    <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
-                </select>
-
-                <button @click="performAction('delete', null)"
-                        :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">
-                    Delete
-                </button>
-
-                <button @click="emit('clear')"
-                        :class="['ml-auto rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
-                                 escDark ? 'text-neutral-400 hover:bg-white/[0.04] hover:text-neutral-200' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700']">
-                    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>

package/src/components/CategoryTree.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    categories: { type: Array, default: () => [] },
+    level: { type: Number, default: 0 },
+    parentId: { type: [Number, null], default: null },
+});
+
+defineEmits(['edit', 'delete']);
+
+const children = computed(() => {
+    return props.categories.filter((c) => {
+        if (props.parentId === null) return !c.parent_id;
+        return c.parent_id === props.parentId;
+    });
+});
+</script>
+
+<template>
+    <div>
+        <div v-for="category in children" :key="category.id">
+            <div
+                :class="[
+                    'flex items-center justify-between rounded-lg border border-white/[0.06] bg-neutral-900/60 px-4 py-3 mb-1.5',
+                ]"
+                :style="{ marginLeft: level * 24 + 'px' }"
+            >
+                <div class="flex items-center gap-3">
+                    <svg
+                        class="h-4 w-4 text-neutral-600"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+                        />
+                    </svg>
+                    <div>
+                        <span class="text-sm font-medium text-neutral-200">{{ category.name }}</span>
+                        <span v-if="category.articles_count !== undefined" class="ml-2 text-xs text-neutral-500">
+                            {{ category.articles_count }} articles
+                        </span>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-xs text-neutral-600">pos: {{ category.position }}</span>
+                    <button
+                        type="button"
+                        class="rounded p-1 text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300"
+                        @click="$emit('edit', category)"
+                    >
+                        <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="rounded p-1 text-neutral-500 hover:bg-red-500/10 hover:text-red-400"
+                        @click="$emit('delete', category)"
+                    >
+                        <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>
+            <CategoryTree
+                :categories="categories"
+                :level="level + 1"
+                :parent-id="category.id"
+                @edit="$emit('edit', $event)"
+                @delete="$emit('delete', $event)"
+            />
+        </div>
+    </div>
+</template>

package/src/components/ChartWidget.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, default: '' },
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: 'cyan' },
+});
+
+const colorMap = {
+    cyan: 'bg-cyan-500',
+    violet: 'bg-violet-500',
+    emerald: 'bg-emerald-500',
+    amber: 'bg-amber-500',
+    red: 'bg-red-500',
+    blue: 'bg-blue-500',
+};
+
+const barColor = computed(() => colorMap[props.color] || colorMap.cyan);
+
+const maxValue = computed(() => {
+    if (!props.data.length) return 1;
+    return Math.max(...props.data.map((d) => d.value), 1);
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+        <h3 v-if="title" class="mb-4 text-sm font-semibold text-neutral-200">{{ title }}</h3>
+        <div v-if="data.length" class="space-y-2.5">
+            <div v-for="item in data" :key="item.label" class="flex items-center gap-3">
+                <span class="w-20 shrink-0 truncate text-xs text-neutral-500">{{ item.label }}</span>
+                <div class="flex-1">
+                    <div class="h-5 overflow-hidden rounded-full bg-white/[0.04]">
+                        <div
+                            :class="['h-full rounded-full transition-all', barColor]"
+                            :style="{ width: `${(item.value / maxValue) * 100}%`, opacity: 0.8 }"
+                        ></div>
+                    </div>
+                </div>
+                <span class="w-10 text-right text-xs font-medium text-neutral-300">{{ item.value }}</span>
+            </div>
+        </div>
+        <div v-else class="py-6 text-center text-sm text-neutral-500">No data available</div>
+    </div>
+</template>

package/src/components/ChatActionBar.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+import { useI18n } from '../composables/useI18n';
+
+const props = defineProps({
+    sessionId: { type: [String, Number], default: null },
+    startedAt: { type: String, default: null },
+    customer: { type: Object, default: () => ({}) },
+    agents: { type: Array, default: () => [] },
+    departments: { type: Array, default: () => [] },
+    endEndpoint: { type: String, default: '' },
+    transferEndpoint: { type: String, default: '' },
+});
+
+const emit = defineEmits(['end-chat', 'transfer']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const { t } = useI18n();
+
+const showEndConfirm = ref(false);
+const showTransfer = ref(false);
+const elapsed = ref('0:00');
+let timerInterval = null;
+
+function updateTimer() {
+    if (!props.startedAt) return;
+    const diffMs = Date.now() - new Date(props.startedAt).getTime();
+    const totalSecs = Math.max(0, Math.floor(diffMs / 1000));
+    const mins = Math.floor(totalSecs / 60);
+    const secs = totalSecs % 60;
+    if (mins >= 60) {
+        const hrs = Math.floor(mins / 60);
+        const remMins = mins % 60;
+        elapsed.value = `${hrs}:${String(remMins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    } else {
+        elapsed.value = `${mins}:${String(secs).padStart(2, '0')}`;
+    }
+}
+
+onMounted(() => {
+    updateTimer();
+    timerInterval = setInterval(updateTimer, 1000);
+});
+
+onUnmounted(() => {
+    clearInterval(timerInterval);
+});
+
+async function confirmEndChat() {
+    emit('end-chat', props.sessionId);
+    if (props.endEndpoint) {
+        try {
+            await fetch(props.endEndpoint, {
+                method: 'POST',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+            });
+        } catch {
+            // handled by caller
+        }
+    }
+    showEndConfirm.value = false;
+}
+
+function transferTo(type, id) {
+    emit('transfer', { type, id });
+    if (props.transferEndpoint) {
+        fetch(props.transferEndpoint, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+            body: JSON.stringify({ type, id }),
+        }).catch(() => {});
+    }
+    showTransfer.value = false;
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            'flex flex-wrap items-center gap-3 rounded-xl border px-4 py-3',
+            escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+        ]"
+    >
+        <!-- Chat duration -->
+        <div class="flex items-center gap-2">
+            <span :class="['h-2 w-2 animate-pulse rounded-full bg-emerald-500']"></span>
+            <span :class="['text-sm font-mono font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                {{ elapsed }}
+            </span>
+            <span :class="['text-xs', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                {{ t('chat.live') }}
+            </span>
+        </div>
+
+        <!-- Customer info -->
+        <div
+            v-if="customer.name || customer.email"
+            :class="['flex items-center gap-2 text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']"
+        >
+            <span v-if="customer.name">{{ customer.name }}</span>
+            <span v-if="customer.email" class="hidden sm:inline">&middot; {{ customer.email }}</span>
+            <span v-if="customer.page_url" class="hidden md:inline truncate max-w-[200px]"
+                >&middot; {{ customer.page_url }}</span
+            >
+        </div>
+
+        <div class="ml-auto flex items-center gap-2">
+            <!-- Transfer -->
+            <div class="relative">
+                <button
+                    :class="[
+                        'rounded-lg border px-3 py-1.5 text-sm transition-colors',
+                        escDark
+                            ? 'border-white/10 text-neutral-400 hover:border-white/20 hover:text-neutral-200'
+                            : 'border-gray-300 text-gray-600 hover:border-gray-400 hover:text-gray-800',
+                    ]"
+                    @click="showTransfer = !showTransfer"
+                >
+                    {{ t('chat.transfer') }}
+                </button>
+                <div
+                    v-if="showTransfer"
+                    :class="[
+                        'absolute right-0 top-full z-50 mt-1 w-56 rounded-lg border py-1 shadow-xl',
+                        escDark ? 'border-white/[0.08] bg-neutral-800' : 'border-gray-200 bg-white',
+                    ]"
+                >
+                    <div
+                        v-if="agents.length"
+                        :class="[
+                            'px-3 py-1 text-[10px] font-semibold uppercase',
+                            escDark ? 'text-neutral-600' : 'text-gray-400',
+                        ]"
+                    >
+                        {{ t('chat.agents') }}
+                    </div>
+                    <button
+                        v-for="agent in agents"
+                        :key="'a-' + agent.id"
+                        :class="[
+                            'block w-full px-3 py-1.5 text-left text-sm',
+                            escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                        ]"
+                        @click="transferTo('agent', agent.id)"
+                    >
+                        {{ agent.name }}
+                    </button>
+                    <div
+                        v-if="departments.length"
+                        :class="[
+                            'mt-1 border-t px-3 py-1 text-[10px] font-semibold uppercase',
+                            escDark ? 'border-white/[0.06] text-neutral-600' : 'border-gray-100 text-gray-400',
+                        ]"
+                    >
+                        {{ t('chat.departments') }}
+                    </div>
+                    <button
+                        v-for="dept in departments"
+                        :key="'d-' + dept.id"
+                        :class="[
+                            'block w-full px-3 py-1.5 text-left text-sm',
+                            escDark ? 'text-neutral-300 hover:bg-white/[0.06]' : 'text-gray-700 hover:bg-gray-50',
+                        ]"
+                        @click="transferTo('department', dept.id)"
+                    >
+                        {{ dept.name }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- End Chat -->
+            <div class="relative">
+                <button
+                    v-if="!showEndConfirm"
+                    :class="[
+                        'rounded-lg border px-3 py-1.5 text-sm transition-colors',
+                        escDark
+                            ? 'border-rose-500/20 text-rose-400 hover:bg-rose-500/10'
+                            : 'border-red-200 text-red-600 hover:bg-red-50',
+                    ]"
+                    @click="showEndConfirm = true"
+                >
+                    {{ t('chat.end_chat') }}
+                </button>
+                <div v-else class="flex items-center gap-2">
+                    <span :class="['text-xs', escDark ? 'text-neutral-400' : 'text-gray-500']">
+                        {{ t('chat.end_confirm') }}
+                    </span>
+                    <button
+                        :class="[
+                            'rounded-lg px-3 py-1.5 text-sm font-medium text-white',
+                            escDark ? 'bg-rose-600 hover:bg-rose-500' : 'bg-red-600 hover:bg-red-500',
+                        ]"
+                        @click="confirmEndChat"
+                    >
+                        {{ t('form.confirm') }}
+                    </button>
+                    <button
+                        :class="[
+                            'rounded-lg border px-3 py-1.5 text-sm',
+                            escDark
+                                ? 'border-white/10 text-neutral-400 hover:text-neutral-200'
+                                : 'border-gray-300 text-gray-500 hover:text-gray-700',
+                        ]"
+                        @click="showEndConfirm = false"
+                    >
+                        {{ t('form.cancel') }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>