@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/pages/Customer/Index.vue

@@ -2,20 +2,27 @@
 import EscalatedLayout from '../../components/EscalatedLayout.vue';
 import TicketList from '../../components/TicketList.vue';
 import TicketFilters from '../../components/TicketFilters.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
 import { Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
 
 defineProps({
     tickets: Object,
     filters: Object,
 });
+
+const { getPageComponents } = usePluginExtensions();
 </script>
 
 <template>
     <EscalatedLayout title="My Tickets">
+        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
         <div class="mb-6 flex items-center justify-between">
             <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
-            <Link :href="route('escalated.customer.tickets.create')"
-                  class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
+            <Link
+                :href="route('escalated.customer.tickets.create')"
+                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+            >
                 New Ticket
             </Link>
         </div>

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

@@ -0,0 +1,129 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    article: Object,
+    related: Array,
+    feedbackEnabled: { type: Boolean, default: true },
+});
+
+const feedbackSent = ref(false);
+
+function sendFeedback(helpful) {
+    router.post(
+        route('escalated.customer.kb.feedback', props.article.slug),
+        {
+            helpful,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                feedbackSent.value = true;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="article.title">
+        <div class="mx-auto max-w-3xl">
+            <div class="mb-6">
+                <Link :href="route('escalated.customer.kb.index')" class="text-sm text-gray-500 hover:text-gray-700">
+                    &larr; Back to Knowledge Base
+                </Link>
+            </div>
+
+            <!-- Breadcrumb -->
+            <div v-if="article.category" class="mb-4 flex items-center gap-2 text-xs text-gray-500">
+                <Link :href="route('escalated.customer.kb.index')" class="hover:text-gray-700">Knowledge Base</Link>
+                <span>/</span>
+                <Link
+                    :href="route('escalated.customer.kb.index', { category: article.category.id })"
+                    class="hover:text-gray-700"
+                >
+                    {{ article.category.name }}
+                </Link>
+            </div>
+
+            <!-- Article -->
+            <article class="rounded-lg border border-gray-200 bg-white p-8">
+                <h1 class="mb-4 text-2xl font-bold text-gray-900">{{ article.title }}</h1>
+                <div class="mb-6 flex items-center gap-4 text-xs text-gray-500">
+                    <span>{{ article.view_count }} views</span>
+                    <span v-if="article.published_at"
+                        >Published {{ new Date(article.published_at).toLocaleDateString() }}</span
+                    >
+                </div>
+
+                <!-- Article body rendered as HTML -->
+                <div class="prose prose-gray max-w-none text-gray-700" v-html="article.body"></div>
+            </article>
+
+            <!-- Feedback -->
+            <div v-if="feedbackEnabled" class="mt-6 rounded-lg border border-gray-200 bg-white p-6 text-center">
+                <template v-if="!feedbackSent">
+                    <p class="mb-3 text-sm font-medium text-gray-700">Was this article helpful?</p>
+                    <div class="flex items-center justify-center gap-3">
+                        <button
+                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-green-300 hover:bg-green-50 hover:text-green-700"
+                            @click="sendFeedback(true)"
+                        >
+                            <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="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h.904"
+                                />
+                            </svg>
+                            Yes
+                        </button>
+                        <button
+                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-700"
+                            @click="sendFeedback(false)"
+                        >
+                            <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="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-.904c-.26 0-.507-.098-.672-.28a5.002 5.002 0 01-.188-.226M7.5 15c-.863 0-1.706-.12-2.514-.348m2.514.348c.26.044.507.22.672.44a4.992 4.992 0 001.423 1.305M4.986 14.652a4.5 4.5 0 01-.236-.442m.236.442c-.31.652-.762 1.168-1.285 1.5m4.78-1.5a11.92 11.92 0 01-.813 1.25m.813-1.25c-.418.593-.91 1.098-1.459 1.5m1.459-1.5a6.12 6.12 0 01-.813 1.25m-2.606 0c-.5.338-1.1.5-1.71.5h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h.904"
+                                />
+                            </svg>
+                            No
+                        </button>
+                    </div>
+                </template>
+                <p v-else class="text-sm text-green-600">Thank you for your feedback!</p>
+            </div>
+
+            <!-- Related Articles -->
+            <div v-if="related?.length" class="mt-6">
+                <h3 class="mb-3 text-sm font-semibold text-gray-900">Related Articles</h3>
+                <div class="space-y-2">
+                    <Link
+                        v-for="item in related"
+                        :key="item.id"
+                        :href="route('escalated.customer.kb.show', item.slug)"
+                        class="block rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50"
+                    >
+                        {{ item.title }}
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

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

@@ -0,0 +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>

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>