@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/pages/Customer/KnowledgeBase/Index.vue

@@ -1,151 +1,151 @@
-<script setup>
-import EscalatedLayout from '../../../components/EscalatedLayout.vue';
-import { router, Link } from '@inertiajs/vue3';
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-    categories: Array,
-    articles: Object,
-    filters: Object,
-});
-
-const search = ref(props.filters?.search || '');
-const selectedCategory = ref(props.filters?.category || '');
-
-let debounceTimer;
-function applyFilters() {
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-        router.get(
-            route('escalated.customer.kb.index'),
-            {
-                search: search.value || undefined,
-                category: selectedCategory.value || undefined,
-            },
-            { preserveState: true, preserveScroll: true },
-        );
-    }, 300);
-}
-
-watch([search, selectedCategory], applyFilters);
-</script>
-
-<template>
-    <EscalatedLayout title="Knowledge Base">
-        <!-- Search -->
-        <div class="mb-8 text-center">
-            <h1 class="mb-3 text-2xl font-bold text-gray-900">How can we help you?</h1>
-            <div class="mx-auto max-w-lg">
-                <input
-                    v-model="search"
-                    type="text"
-                    placeholder="Search articles..."
-                    class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 shadow-sm placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
-                />
-            </div>
-        </div>
-
-        <!-- Categories -->
-        <div v-if="categories?.length && !search" class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            <button
-                v-for="cat in categories"
-                :key="cat.id"
-                :class="[
-                    'rounded-lg border p-5 text-left transition-all',
-                    selectedCategory == cat.id
-                        ? 'border-indigo-500 bg-indigo-50 shadow-sm'
-                        : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm',
-                ]"
-                @click="selectedCategory = selectedCategory == cat.id ? '' : cat.id"
-            >
-                <div class="flex items-center gap-3">
-                    <div
-                        :class="[
-                            'flex h-10 w-10 items-center justify-center rounded-lg',
-                            selectedCategory == cat.id ? 'bg-indigo-100' : 'bg-gray-100',
-                        ]"
-                    >
-                        <svg
-                            :class="['h-5 w-5', selectedCategory == cat.id ? 'text-indigo-600' : 'text-gray-500']"
-                            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>
-                    <div>
-                        <h3
-                            :class="[
-                                'text-sm font-semibold',
-                                selectedCategory == cat.id ? 'text-indigo-900' : 'text-gray-900',
-                            ]"
-                        >
-                            {{ cat.name }}
-                        </h3>
-                        <p class="text-xs text-gray-500">{{ cat.articles_count }} articles</p>
-                    </div>
-                </div>
-                <p v-if="cat.description" class="mt-2 text-xs text-gray-500">{{ cat.description }}</p>
-            </button>
-        </div>
-
-        <!-- Articles -->
-        <div class="space-y-3">
-            <Link
-                v-for="article in articles.data"
-                :key="article.id"
-                :href="route('escalated.customer.kb.show', article.slug)"
-                class="block rounded-lg border border-gray-200 bg-white p-4 transition-all hover:border-gray-300 hover:shadow-sm"
-            >
-                <h3 class="text-sm font-semibold text-gray-900">{{ article.title }}</h3>
-                <div class="mt-1 flex items-center gap-3 text-xs text-gray-500">
-                    <span v-if="article.category">{{ article.category.name }}</span>
-                    <span>{{ article.view_count }} views</span>
-                </div>
-            </Link>
-        </div>
-
-        <div v-if="!articles.data?.length" class="py-12 text-center">
-            <svg
-                class="mx-auto mb-3 h-10 w-10 text-gray-300"
-                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.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.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>
-            <p class="text-sm text-gray-500">No articles found.</p>
-        </div>
-
-        <!-- Pagination -->
-        <div v-if="articles.links && articles.last_page > 1" class="mt-6 flex items-center justify-center gap-1">
-            <Link
-                v-for="link in articles.links"
-                :key="link.label"
-                :href="link.url || '#'"
-                :class="[
-                    'rounded-lg px-3 py-1.5 text-sm transition-colors',
-                    link.active
-                        ? 'bg-indigo-600 text-white'
-                        : link.url
-                          ? 'border border-gray-200 text-gray-600 hover:bg-gray-50'
-                          : 'cursor-default text-gray-300',
-                ]"
-                preserve-scroll
-            >
-                <!-- eslint-disable-next-line vue/no-v-html --><span v-html="link.label" />
-            </Link>
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    categories: Array,
+    articles: Object,
+    filters: Object,
+});
+
+const search = ref(props.filters?.search || '');
+const selectedCategory = ref(props.filters?.category || '');
+
+let debounceTimer;
+function applyFilters() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+        router.get(
+            route('escalated.customer.kb.index'),
+            {
+                search: search.value || undefined,
+                category: selectedCategory.value || undefined,
+            },
+            { preserveState: true, preserveScroll: true },
+        );
+    }, 300);
+}
+
+watch([search, selectedCategory], applyFilters);
+</script>
+
+<template>
+    <EscalatedLayout title="Knowledge Base">
+        <!-- Search -->
+        <div class="mb-8 text-center">
+            <h1 class="mb-3 text-2xl font-bold text-gray-900">How can we help you?</h1>
+            <div class="mx-auto max-w-lg">
+                <input
+                    v-model="search"
+                    type="text"
+                    placeholder="Search articles..."
+                    class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 shadow-sm placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                />
+            </div>
+        </div>
+
+        <!-- Categories -->
+        <div v-if="categories?.length && !search" class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <button
+                v-for="cat in categories"
+                :key="cat.id"
+                :class="[
+                    'rounded-lg border p-5 text-left transition-all',
+                    selectedCategory == cat.id
+                        ? 'border-indigo-500 bg-indigo-50 shadow-sm'
+                        : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm',
+                ]"
+                @click="selectedCategory = selectedCategory == cat.id ? '' : cat.id"
+            >
+                <div class="flex items-center gap-3">
+                    <div
+                        :class="[
+                            'flex h-10 w-10 items-center justify-center rounded-lg',
+                            selectedCategory == cat.id ? 'bg-indigo-100' : 'bg-gray-100',
+                        ]"
+                    >
+                        <svg
+                            :class="['h-5 w-5', selectedCategory == cat.id ? 'text-indigo-600' : 'text-gray-500']"
+                            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>
+                    <div>
+                        <h3
+                            :class="[
+                                'text-sm font-semibold',
+                                selectedCategory == cat.id ? 'text-indigo-900' : 'text-gray-900',
+                            ]"
+                        >
+                            {{ cat.name }}
+                        </h3>
+                        <p class="text-xs text-gray-500">{{ cat.articles_count }} articles</p>
+                    </div>
+                </div>
+                <p v-if="cat.description" class="mt-2 text-xs text-gray-500">{{ cat.description }}</p>
+            </button>
+        </div>
+
+        <!-- Articles -->
+        <div class="space-y-3">
+            <Link
+                v-for="article in articles.data"
+                :key="article.id"
+                :href="route('escalated.customer.kb.show', article.slug)"
+                class="block rounded-lg border border-gray-200 bg-white p-4 transition-all hover:border-gray-300 hover:shadow-sm"
+            >
+                <h3 class="text-sm font-semibold text-gray-900">{{ article.title }}</h3>
+                <div class="mt-1 flex items-center gap-3 text-xs text-gray-500">
+                    <span v-if="article.category">{{ article.category.name }}</span>
+                    <span>{{ article.view_count }} views</span>
+                </div>
+            </Link>
+        </div>
+
+        <div v-if="!articles.data?.length" class="py-12 text-center">
+            <svg
+                class="mx-auto mb-3 h-10 w-10 text-gray-300"
+                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.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.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>
+            <p class="text-sm text-gray-500">No articles found.</p>
+        </div>
+
+        <!-- Pagination -->
+        <div v-if="articles.links && articles.last_page > 1" class="mt-6 flex items-center justify-center gap-1">
+            <Link
+                v-for="link in articles.links"
+                :key="link.label"
+                :href="link.url || '#'"
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm transition-colors',
+                    link.active
+                        ? 'bg-indigo-600 text-white'
+                        : link.url
+                          ? 'border border-gray-200 text-gray-600 hover:bg-gray-50'
+                          : 'cursor-default text-gray-300',
+                ]"
+                preserve-scroll
+            >
+                <!-- eslint-disable-next-line vue/no-v-html --><span v-html="link.label" />
+            </Link>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/Show.vue

@@ -1,63 +1,69 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import StatusBadge from '../../components/StatusBadge.vue';
-import PriorityBadge from '../../components/PriorityBadge.vue';
-import ReplyThread from '../../components/ReplyThread.vue';
-import ReplyComposer from '../../components/ReplyComposer.vue';
-import AttachmentList from '../../components/AttachmentList.vue';
-import SatisfactionRating from '../../components/SatisfactionRating.vue';
-import { router, usePage } from '@inertiajs/vue3';
-
-const props = defineProps({ ticket: Object });
-const page = usePage();
-
-const isResolved = ['resolved', 'closed'].includes(props.ticket.status);
-
-function closeTicket() {
-    router.post(route('escalated.customer.tickets.close', props.ticket.reference));
-}
-
-function reopenTicket() {
-    router.post(route('escalated.customer.tickets.reopen', props.ticket.reference));
-}
-</script>
-
-<template>
-    <EscalatedLayout :title="ticket.subject">
-        <div class="mb-4 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-medium text-neutral-500">{{ ticket.reference }}</span>
-            <StatusBadge :status="ticket.status" />
-            <PriorityBadge :priority="ticket.priority" />
-            <span v-if="ticket.department" class="text-sm text-neutral-500">{{ ticket.department.name }}</span>
-            <div class="ml-auto flex gap-2">
-                <button v-if="ticket.status === 'resolved' || ticket.status === 'closed'"
-                        @click="reopenTicket"
-                        class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
-                    Reopen
-                </button>
-                <button v-if="ticket.status !== 'closed' && ticket.status !== 'resolved'"
-                        @click="closeTicket"
-                        class="rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">
-                    Close Ticket
-                </button>
-            </div>
-        </div>
-
-        <!-- CSAT Rating -->
-        <SatisfactionRating v-if="isResolved && !ticket.satisfaction_rating"
-                            :action="route('escalated.customer.tickets.rate', ticket.reference)" />
-
-        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
-            <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
-            <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
-        </div>
-        <div class="mb-6">
-            <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
-            <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
-        </div>
-        <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
-            <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
-            <ReplyComposer :action="route('escalated.customer.tickets.reply', ticket.reference)" />
-        </div>
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import StatusBadge from '../../components/StatusBadge.vue';
+import PriorityBadge from '../../components/PriorityBadge.vue';
+import ReplyThread from '../../components/ReplyThread.vue';
+import ReplyComposer from '../../components/ReplyComposer.vue';
+import AttachmentList from '../../components/AttachmentList.vue';
+import SatisfactionRating from '../../components/SatisfactionRating.vue';
+import { router, usePage } from '@inertiajs/vue3';
+
+const props = defineProps({ ticket: Object });
+const page = usePage();
+
+const isResolved = ['resolved', 'closed'].includes(props.ticket.status);
+
+function closeTicket() {
+    router.post(route('escalated.customer.tickets.close', props.ticket.reference));
+}
+
+function reopenTicket() {
+    router.post(route('escalated.customer.tickets.reopen', props.ticket.reference));
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="ticket.subject">
+        <div class="mb-4 flex flex-wrap items-center gap-3">
+            <span class="text-sm font-medium text-neutral-500">{{ ticket.reference }}</span>
+            <StatusBadge :status="ticket.status" />
+            <PriorityBadge :priority="ticket.priority" />
+            <span v-if="ticket.department" class="text-sm text-neutral-500">{{ ticket.department.name }}</span>
+            <div class="ml-auto flex gap-2">
+                <button
+                    v-if="ticket.status === 'resolved' || ticket.status === 'closed'"
+                    class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+                    @click="reopenTicket"
+                >
+                    Reopen
+                </button>
+                <button
+                    v-if="ticket.status !== 'closed' && ticket.status !== 'resolved'"
+                    class="rounded-lg border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50"
+                    @click="closeTicket"
+                >
+                    Close Ticket
+                </button>
+            </div>
+        </div>
+
+        <!-- CSAT Rating -->
+        <SatisfactionRating
+            v-if="isResolved && !ticket.satisfaction_rating"
+            :action="route('escalated.customer.tickets.rate', ticket.reference)"
+        />
+
+        <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4">
+            <p class="whitespace-pre-wrap text-sm text-gray-700">{{ ticket.description }}</p>
+            <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
+        </div>
+        <div class="mb-6">
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Replies</h2>
+            <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id" />
+        </div>
+        <div v-if="ticket.status !== 'closed'" class="rounded-lg border border-gray-200 bg-white p-4">
+            <h2 class="mb-4 text-lg font-semibold text-gray-900">Reply</h2>
+            <ReplyComposer :action="route('escalated.customer.tickets.reply', ticket.reference)" />
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Guest/Create.vue

@@ -3,7 +3,7 @@ import EscalatedLayout from '../../components/EscalatedLayout.vue';
 import FileDropzone from '../../components/FileDropzone.vue';
 import { useForm, Link } from '@inertiajs/vue3';
 
-const props = defineProps({
+defineProps({
     departments: Array,
     priorities: Array,
 });
@@ -34,34 +34,56 @@ function submit() {
                 </Link>
             </div>
 
-            <form @submit.prevent="submit" class="space-y-5 rounded-lg border border-gray-200 bg-white p-6">
+            <form class="space-y-5 rounded-lg border border-gray-200 bg-white p-6" @submit.prevent="submit">
                 <div class="grid grid-cols-2 gap-4">
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Your Name</label>
-                        <input v-model="form.guest_name" type="text" required
-                               class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-                        <div v-if="form.errors.guest_name" class="mt-1 text-sm text-red-600">{{ form.errors.guest_name }}</div>
+                        <input
+                            v-model="form.guest_name"
+                            type="text"
+                            required
+                            class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                        />
+                        <div v-if="form.errors.guest_name" class="mt-1 text-sm text-red-600">
+                            {{ form.errors.guest_name }}
+                        </div>
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Email Address</label>
-                        <input v-model="form.guest_email" type="email" required
-                               class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-                        <div v-if="form.errors.guest_email" class="mt-1 text-sm text-red-600">{{ form.errors.guest_email }}</div>
+                        <input
+                            v-model="form.guest_email"
+                            type="email"
+                            required
+                            class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                        />
+                        <div v-if="form.errors.guest_email" class="mt-1 text-sm text-red-600">
+                            {{ form.errors.guest_email }}
+                        </div>
                     </div>
                 </div>
 
                 <div>
                     <label class="block text-sm font-medium text-gray-700">Subject</label>
-                    <input v-model="form.subject" type="text" required
-                           class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+                    <input
+                        v-model="form.subject"
+                        type="text"
+                        required
+                        class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    />
                     <div v-if="form.errors.subject" class="mt-1 text-sm text-red-600">{{ form.errors.subject }}</div>
                 </div>
 
                 <div>
                     <label class="block text-sm font-medium text-gray-700">Description</label>
-                    <textarea v-model="form.description" rows="6" required
-                              class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
-                    <div v-if="form.errors.description" class="mt-1 text-sm text-red-600">{{ form.errors.description }}</div>
+                    <textarea
+                        v-model="form.description"
+                        rows="6"
+                        required
+                        class="mt-1 w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    ></textarea>
+                    <div v-if="form.errors.description" class="mt-1 text-sm text-red-600">
+                        {{ form.errors.description }}
+                    </div>
                 </div>
 
                 <div class="grid grid-cols-2 gap-4">
@@ -86,8 +108,11 @@ function submit() {
                 </div>
 
                 <div class="flex justify-end">
-                    <button type="submit" :disabled="form.processing"
-                            class="rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+                    >
                         {{ form.processing ? 'Submitting...' : 'Submit Ticket' }}
                     </button>
                 </div>