@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/SavedViewSidebar.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { ref, computed, inject, nextTick } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    savedViews: { type: Array, default: () => [] },
+    currentFilters: { type: Object, default: () => ({}) },
+    route: { type: String, required: true },
+});
+
+const emit = defineEmits(['apply-view']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const activeViewId = ref(null);
+const menuOpenId = ref(null);
+const editingView = ref(null);
+const editName = ref('');
+
+function applyView(view) {
+    if (view === null) {
+        activeViewId.value = null;
+        emit('apply-view', {});
+        router.get(props.route, {}, { preserveState: true, preserveScroll: true });
+        return;
+    }
+    activeViewId.value = view.id;
+    emit('apply-view', view.filters);
+    router.get(props.route, view.filters || {}, { preserveState: true, preserveScroll: true });
+}
+
+function toggleMenu(viewId) {
+    menuOpenId.value = menuOpenId.value === viewId ? null : viewId;
+}
+
+function startEdit(view) {
+    editingView.value = view.id;
+    editName.value = view.name;
+    menuOpenId.value = null;
+    nextTick(() => {
+        const input = document.querySelector(`[data-edit-view="${view.id}"]`);
+        if (input) input.focus();
+    });
+}
+
+function saveEdit(view) {
+    if (!editName.value.trim()) {
+        editingView.value = null;
+        return;
+    }
+    fetch(route('escalated.admin.saved-views.update', view.id), {
+        method: 'PUT',
+        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: editName.value, filters: view.filters }),
+    }).then(() => {
+        view.name = editName.value;
+        editingView.value = null;
+    });
+}
+
+function updateViewFilters(view) {
+    menuOpenId.value = null;
+    const nonEmptyFilters = {};
+    for (const [key, value] of Object.entries(props.currentFilters)) {
+        if (value !== '' && value !== null && value !== undefined) {
+            nonEmptyFilters[key] = value;
+        }
+    }
+    fetch(route('escalated.admin.saved-views.update', view.id), {
+        method: 'PUT',
+        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: view.name, filters: nonEmptyFilters }),
+    }).then(() => {
+        view.filters = nonEmptyFilters;
+        router.reload({ only: ['savedViews'] });
+    });
+}
+
+function deleteView(view) {
+    menuOpenId.value = null;
+    if (!confirm(`Delete view "${view.name}"?`)) return;
+    fetch(route('escalated.admin.saved-views.destroy', view.id), {
+        method: 'DELETE',
+        headers: {
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            Accept: 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+        },
+    }).then(() => {
+        if (activeViewId.value === view.id) {
+            activeViewId.value = null;
+        }
+        router.reload({ only: ['savedViews'] });
+    });
+}
+
+const itemClass = computed(
+    () => (isActive) =>
+        [
+            'flex items-center justify-between gap-2 rounded-md px-3 py-1.5 text-sm cursor-pointer transition-colors group',
+            isActive
+                ? escDark.value
+                    ? 'bg-cyan-500/10 text-cyan-400'
+                    : 'bg-blue-50 text-blue-700 font-medium'
+                : escDark.value
+                  ? 'text-neutral-400 hover:bg-white/[0.04] hover:text-neutral-200'
+                  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+        ].flat(),
+);
+</script>
+
+<template>
+    <div class="space-y-1">
+        <div :class="itemClass(activeViewId === null)" @click="applyView(null)">
+            <span class="truncate">All Tickets</span>
+        </div>
+
+        <div v-for="view in savedViews" :key="view.id" class="relative">
+            <div v-if="editingView === view.id" class="flex items-center gap-1 px-1">
+                <input
+                    v-model="editName"
+                    :data-edit-view="view.id"
+                    type="text"
+                    class="flex-1 rounded border px-2 py-1 text-sm"
+                    :class="
+                        escDark
+                            ? 'border-white/10 bg-white/5 text-neutral-200'
+                            : 'border-gray-300 bg-white text-gray-900'
+                    "
+                    @keydown.enter="saveEdit(view)"
+                    @keydown.escape="editingView = null"
+                    @blur="saveEdit(view)"
+                />
+            </div>
+            <div v-else :class="itemClass(activeViewId === view.id)" @click="applyView(view)">
+                <span class="flex items-center gap-2 truncate">
+                    <span
+                        v-if="view.color"
+                        class="inline-block h-2 w-2 shrink-0 rounded-full"
+                        :style="{ backgroundColor: view.color }"
+                    ></span>
+                    <span class="truncate">{{ view.name }}</span>
+                    <span
+                        v-if="view.is_shared"
+                        :class="[
+                            'shrink-0 rounded px-1 py-0.5 text-[10px] leading-none font-medium',
+                            escDark ? 'bg-white/[0.06] text-neutral-500' : 'bg-gray-100 text-gray-400',
+                        ]"
+                        >shared</span
+                    >
+                </span>
+                <button
+                    aria-label="View options"
+                    class="shrink-0 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
+                    :class="escDark ? 'hover:bg-white/10' : 'hover:bg-gray-200'"
+                    @click.stop="toggleMenu(view.id)"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                            d="M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"
+                        />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Kebab menu -->
+            <div
+                v-if="menuOpenId === view.id"
+                class="absolute right-0 z-20 mt-1 w-44 rounded-md border py-1 shadow-lg"
+                :class="escDark ? 'border-white/10 bg-[var(--esc-panel-surface)]' : 'border-gray-200 bg-white'"
+            >
+                <button
+                    class="block w-full px-3 py-1.5 text-left text-sm"
+                    :class="escDark ? 'text-neutral-300 hover:bg-white/5' : 'text-gray-700 hover:bg-gray-50'"
+                    @click="startEdit(view)"
+                >
+                    Rename
+                </button>
+                <button
+                    class="block w-full px-3 py-1.5 text-left text-sm"
+                    :class="escDark ? 'text-neutral-300 hover:bg-white/5' : 'text-gray-700 hover:bg-gray-50'"
+                    @click="updateViewFilters(view)"
+                >
+                    Save current filters
+                </button>
+                <button
+                    class="block w-full px-3 py-1.5 text-left text-sm"
+                    :class="escDark ? 'text-red-400 hover:bg-white/5' : 'text-red-600 hover:bg-red-50'"
+                    @click="deleteView(view)"
+                >
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/ScheduleEditor.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: () => ({
+            monday: { start: '09:00', end: '17:00' },
+            tuesday: { start: '09:00', end: '17:00' },
+            wednesday: { start: '09:00', end: '17:00' },
+            thursday: { start: '09:00', end: '17:00' },
+            friday: { start: '09:00', end: '17:00' },
+            saturday: { start: '', end: '' },
+            sunday: { start: '', end: '' },
+        }),
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const days = [
+    { key: 'monday', label: 'Monday' },
+    { key: 'tuesday', label: 'Tuesday' },
+    { key: 'wednesday', label: 'Wednesday' },
+    { key: 'thursday', label: 'Thursday' },
+    { key: 'friday', label: 'Friday' },
+    { key: 'saturday', label: 'Saturday' },
+    { key: 'sunday', label: 'Sunday' },
+];
+
+const timeOptions = computed(() => {
+    const options = [];
+    for (let h = 0; h < 24; h++) {
+        for (let m = 0; m < 60; m += 30) {
+            const hh = String(h).padStart(2, '0');
+            const mm = String(m).padStart(2, '0');
+            options.push(`${hh}:${mm}`);
+        }
+    }
+    options.push('24:00');
+    return options;
+});
+
+function updateDay(dayKey, field, value) {
+    const updated = { ...props.modelValue };
+    updated[dayKey] = { ...(updated[dayKey] || { start: '', end: '' }), [field]: value };
+    emit('update:modelValue', updated);
+}
+
+function toggleDay(dayKey) {
+    const updated = { ...props.modelValue };
+    const current = updated[dayKey];
+    if (current && current.start) {
+        updated[dayKey] = { start: '', end: '' };
+    } else {
+        updated[dayKey] = { start: '09:00', end: '17:00' };
+    }
+    emit('update:modelValue', updated);
+}
+
+function isDayEnabled(dayKey) {
+    const day = props.modelValue[dayKey];
+    return day && day.start;
+}
+</script>
+
+<template>
+    <div class="space-y-2">
+        <div
+            v-for="day in days"
+            :key="day.key"
+            class="flex items-center gap-3 rounded-lg border border-white/[0.06] bg-neutral-950/50 px-3 py-2"
+        >
+            <label class="flex w-28 items-center gap-2">
+                <input
+                    type="checkbox"
+                    :checked="isDayEnabled(day.key)"
+                    class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                    @change="toggleDay(day.key)"
+                />
+                <span class="text-sm font-medium text-neutral-300">{{ day.label }}</span>
+            </label>
+
+            <template v-if="isDayEnabled(day.key)">
+                <select
+                    :value="modelValue[day.key]?.start || '09:00'"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateDay(day.key, 'start', $event.target.value)"
+                >
+                    <option v-for="t in timeOptions" :key="'s-' + t" :value="t">{{ t }}</option>
+                </select>
+                <span class="text-xs text-neutral-500">to</span>
+                <select
+                    :value="modelValue[day.key]?.end || '17:00'"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateDay(day.key, 'end', $event.target.value)"
+                >
+                    <option v-for="t in timeOptions" :key="'e-' + t" :value="t">{{ t }}</option>
+                </select>
+            </template>
+            <span v-else class="text-xs text-neutral-500">Closed</span>
+        </div>
+    </div>
+</template>

package/src/components/SideConversation.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, inject, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const props = defineProps({
+    conversation: { type: Object, required: true },
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['updated']);
+const replyBody = ref('');
+const submitting = ref(false);
+const expanded = ref(false);
+
+function submitReply() {
+    if (!replyBody.value.trim() || submitting.value) return;
+    submitting.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.side-conversations.reply', [props.ticketReference, props.conversation.id]),
+        { body: replyBody.value },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                replyBody.value = '';
+                emit('updated');
+            },
+            onFinish: () => {
+                submitting.value = false;
+            },
+        },
+    );
+}
+
+function closeConversation() {
+    router.post(
+        route('escalated.admin.tickets.side-conversations.close', [props.ticketReference, props.conversation.id]),
+        {},
+        {
+            preserveScroll: true,
+            onSuccess: () => emit('updated'),
+        },
+    );
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            'rounded-lg border p-3',
+            escDark ? 'border-white/[0.06] bg-white/[0.02]' : 'border-gray-200 bg-gray-50',
+        ]"
+    >
+        <button
+            class="flex w-full items-center justify-between"
+            :aria-expanded="expanded"
+            @click="expanded = !expanded"
+        >
+            <div class="flex items-center gap-2">
+                <span
+                    :class="[
+                        'inline-flex h-5 items-center rounded px-1.5 text-[10px] font-semibold uppercase',
+                        conversation.status === 'open'
+                            ? escDark
+                                ? 'bg-emerald-500/15 text-emerald-400'
+                                : 'bg-emerald-100 text-emerald-700'
+                            : escDark
+                              ? 'bg-neutral-500/15 text-neutral-400'
+                              : 'bg-gray-100 text-gray-500',
+                    ]"
+                >
+                    {{ conversation.status }}
+                </span>
+                <span :class="['text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                    {{ conversation.subject }}
+                </span>
+                <span :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                    {{ conversation.channel }}
+                </span>
+            </div>
+            <svg
+                :class="[
+                    'h-4 w-4 transition-transform',
+                    escDark ? 'text-neutral-500' : 'text-gray-400',
+                    expanded && 'rotate-180',
+                ]"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <!-- Replies -->
+            <div
+                v-for="reply in conversation.replies"
+                :key="reply.id"
+                :class="['border-l-2 pl-3', escDark ? 'border-white/[0.06]' : 'border-gray-200']"
+            >
+                <div class="flex items-center gap-2">
+                    <span :class="['text-xs font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                        {{ reply.author?.name || 'System' }}
+                    </span>
+                    <span :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                        {{ reply.created_at }}
+                    </span>
+                </div>
+                <p :class="['mt-1 whitespace-pre-wrap text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">
+                    {{ reply.body }}
+                </p>
+            </div>
+
+            <div
+                v-if="!conversation.replies?.length"
+                :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']"
+            >
+                No replies yet.
+            </div>
+
+            <!-- Reply form -->
+            <div v-if="conversation.status === 'open'" class="pt-2">
+                <textarea
+                    v-model="replyBody"
+                    rows="2"
+                    placeholder="Write a reply..."
+                    :class="[
+                        'w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1',
+                        escDark
+                            ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:ring-white/10'
+                            : 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-blue-400 focus:ring-blue-200',
+                    ]"
+                ></textarea>
+                <div class="mt-2 flex items-center gap-2">
+                    <button
+                        :disabled="!replyBody.trim() || submitting"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-xs font-medium text-white transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!replyBody.trim() || submitting) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="submitReply"
+                    >
+                        Reply
+                    </button>
+                    <button
+                        :class="[
+                            'rounded-lg px-3 py-1.5 text-xs',
+                            escDark ? 'text-neutral-400 hover:text-neutral-300' : 'text-gray-500 hover:text-gray-700',
+                        ]"
+                        @click="closeConversation"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/SideConversationList.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { router } from '@inertiajs/vue3';
+import SideConversation from './SideConversation.vue';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const conversations = ref([]);
+const expanded = ref(true);
+const showNew = ref(false);
+const newSubject = ref('');
+const newChannel = ref('internal');
+const newBody = ref('');
+const creating = ref(false);
+
+onMounted(() => {
+    fetchConversations();
+});
+
+async function fetchConversations() {
+    try {
+        const response = await fetch(route('escalated.admin.tickets.side-conversations.index', props.ticketReference), {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            conversations.value = data.conversations || [];
+        }
+    } catch {
+        // silently ignore
+    }
+}
+
+function createConversation() {
+    if (!newSubject.value.trim() || !newBody.value.trim() || creating.value) return;
+    creating.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.side-conversations.store', props.ticketReference),
+        {
+            subject: newSubject.value,
+            channel: newChannel.value,
+            body: newBody.value,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                newSubject.value = '';
+                newBody.value = '';
+                newChannel.value = 'internal';
+                showNew.value = false;
+                fetchConversations();
+            },
+            onFinish: () => {
+                creating.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <button
+            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
+            @click="expanded = !expanded"
+        >
+            <span>Side Conversations ({{ conversations.length }})</span>
+            <svg
+                :class="['h-4 w-4 text-neutral-500 transition-transform', expanded && 'rotate-180']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <SideConversation
+                v-for="conv in conversations"
+                :key="conv.id"
+                :conversation="conv"
+                :ticket-reference="ticketReference"
+                @updated="fetchConversations"
+            />
+
+            <div v-if="!conversations.length && !showNew" class="text-xs text-neutral-500">No side conversations.</div>
+
+            <!-- New conversation form -->
+            <div v-if="showNew" class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3 space-y-2">
+                <input
+                    v-model="newSubject"
+                    type="text"
+                    placeholder="Subject..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                />
+                <select
+                    v-model="newChannel"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none"
+                >
+                    <option value="internal">Internal</option>
+                    <option value="email">Email</option>
+                </select>
+                <textarea
+                    v-model="newBody"
+                    rows="3"
+                    placeholder="Write the first message..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                ></textarea>
+                <div class="flex gap-2">
+                    <button
+                        :disabled="!newSubject.trim() || !newBody.trim() || creating"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-xs font-medium text-white transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!newSubject.trim() || !newBody.trim() || creating) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="createConversation"
+                    >
+                        Create
+                    </button>
+                    <button
+                        class="rounded-lg px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-300"
+                        @click="showNew = false"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+
+            <button
+                v-if="!showNew"
+                class="w-full rounded-lg border border-dashed border-white/[0.08] py-2 text-xs text-neutral-400 transition-colors hover:border-white/[0.15] hover:text-neutral-300"
+                @click="showNew = true"
+            >
+                + New Side Conversation
+            </button>
+        </div>
+    </div>
+</template>