@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/pages/Agent/TicketIndex.vue

@@ -1,38 +1,88 @@
-<script setup>
-import { ref } from 'vue';
-import { usePage, router } from '@inertiajs/vue3';
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-import QuickFilters from '../../components/QuickFilters.vue';
-import BulkActionBar from '../../components/BulkActionBar.vue';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-    departments: Array,
-    tags: Array,
-});
-
-const page = usePage();
-const selectedIds = ref([]);
-
-function applyQuickFilter(filter) {
-    router.get(route('escalated.agent.tickets.index'), filter, { preserveState: true });
-}
-</script>
-
-<template>
-    <EscalatedLayout title="Ticket Queue">
-        <div class="mb-4">
-            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
-        </div>
-        <div class="mb-6">
-            <TicketFilters :filters="filters" :route="route('escalated.agent.tickets.index')" :departments="departments" :tags="tags" show-assignee show-following />
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.agent.tickets" show-assignee
-                    selectable v-model:selected-ids="selectedIds" />
-        <BulkActionBar :selected-ids="selectedIds" :bulk-route="route('escalated.agent.tickets.bulk')"
-                       :departments="departments" @clear="selectedIds = []" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import { ref } from 'vue';
+import { usePage, router } from '@inertiajs/vue3';
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import QuickFilters from '../../components/QuickFilters.vue';
+import BulkActionBar from '../../components/BulkActionBar.vue';
+import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+    departments: Array,
+    tags: Array,
+});
+
+const page = usePage();
+const selectedIds = ref([]);
+const ticketListRef = ref(null);
+const showShortcutHelp = ref(false);
+
+useKeyboardShortcuts({
+    j: () => {
+        ticketListRef.value?.moveDown();
+    },
+    k: () => {
+        ticketListRef.value?.moveUp();
+    },
+    x: () => {
+        ticketListRef.value?.toggleSelectFocused();
+    },
+    Enter: () => {
+        ticketListRef.value?.openFocused();
+    },
+    '?': () => {
+        showShortcutHelp.value = true;
+    },
+});
+
+const { getPageComponents } = usePluginExtensions();
+
+function applyQuickFilter(filter) {
+    router.get(route('escalated.agent.tickets.index'), filter, { preserveState: true });
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Ticket Queue">
+        <div class="mb-4">
+            <QuickFilters :current-user-id="page.props.auth?.user?.id" @filter="applyQuickFilter" />
+        </div>
+        <PluginSlot
+            slot="ticket.list.before_filters"
+            :components="getPageComponents('ticket.list', 'before_filters')"
+        />
+        <div class="mb-6">
+            <TicketFilters
+                :filters="filters"
+                :route="route('escalated.agent.tickets.index')"
+                :departments="departments"
+                :tags="tags"
+                show-assignee
+                show-following
+            />
+        </div>
+        <TicketList
+            ref="ticketListRef"
+            v-model:selected-ids="selectedIds"
+            :tickets="tickets"
+            route-prefix="escalated.agent.tickets"
+            :columns="['reference', 'subject', 'requester', 'status', 'priority', 'assignee', 'updated']"
+            selectable
+            navigable
+        />
+        <BulkActionBar
+            :selected-ids="selectedIds"
+            :bulk-route="route('escalated.agent.tickets.bulk')"
+            :departments="departments"
+            @clear="selectedIds = []"
+        />
+        <PluginSlot slot="ticket.list.footer" :components="getPageComponents('ticket.list', 'footer')" />
+        <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="list" />
+    </EscalatedLayout>
+</template>

package/src/pages/Agent/TicketShow.vue

@@ -12,10 +12,13 @@ import PresenceIndicator from '../../components/PresenceIndicator.vue';
 import PinnedNotes from '../../components/PinnedNotes.vue';
 import KeyboardShortcutHelp from '../../components/KeyboardShortcutHelp.vue';
 import PluginSlot from '../../components/PluginSlot.vue';
+import KnowledgePanel from '../../components/KnowledgePanel.vue';
+import ContextPanel from '../../components/ContextPanel.vue';
+import ContextPanelSection from '../../components/ContextPanelSection.vue';
 import { useKeyboardShortcuts } from '../../composables/useKeyboardShortcuts';
 import { usePluginExtensions } from '../../composables/usePluginExtensions';
 import { router, useForm, usePage } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 const props = defineProps({
     ticket: Object,
@@ -28,12 +31,15 @@ const props = defineProps({
 });
 
 const page = usePage();
-const activeTab = ref('reply');
+const isLightAgent = computed(() => page.props.escalated?.agent_type === 'light');
+const activeTab = ref(isLightAgent.value ? 'note' : 'reply');
 const showShortcutHelp = ref(false);
 const replyComposerRef = ref(null);
 const statusSelectRef = ref(null);
 const prioritySelectRef = ref(null);
 
+const showContextPanel = ref(false);
+
 const statusForm = useForm({ status: '' });
 const priorityForm = useForm({ priority: '' });
 const assignForm = useForm({ agent_id: '' });
@@ -57,16 +63,34 @@ function toggleFollow() {
     router.post(route('escalated.agent.tickets.follow', props.ticket.reference), {}, { preserveScroll: true });
 }
 
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
 const { getPageComponents } = usePluginExtensions();
 
 // Keyboard shortcuts
 useKeyboardShortcuts({
-    'r': () => { activeTab.value = 'reply'; replyComposerRef.value?.$el?.querySelector('textarea')?.focus(); },
-    'n': () => { activeTab.value = 'note'; },
-    's': () => { statusSelectRef.value?.focus(); },
-    'p': () => { prioritySelectRef.value?.focus(); },
-    'f': () => { toggleFollow(); },
-    '?': () => { showShortcutHelp.value = true; },
+    r: () => {
+        activeTab.value = 'reply';
+        replyComposerRef.value?.$el?.querySelector('textarea')?.focus();
+    },
+    n: () => {
+        activeTab.value = 'note';
+    },
+    s: () => {
+        statusSelectRef.value?.focus();
+    },
+    p: () => {
+        prioritySelectRef.value?.focus();
+    },
+    f: () => {
+        toggleFollow();
+    },
+    '?': () => {
+        showShortcutHelp.value = true;
+    },
 });
 </script>
 
@@ -76,80 +100,263 @@ useKeyboardShortcuts({
         <PluginSlot slot="ticket.show.header" :components="getPageComponents('ticket.show', 'header')" />
 
         <div class="mb-5 flex flex-wrap items-center gap-3">
-            <span class="text-sm font-mono font-medium text-white">{{ ticket.reference }}</span>
+            <span :class="['text-sm font-mono font-medium', escDark ? 'text-white' : 'text-gray-900']">{{
+                ticket.reference
+            }}</span>
             <StatusBadge :status="ticket.status" />
             <PriorityBadge :priority="ticket.priority" />
             <span class="text-sm text-neutral-500">by {{ ticket.requester?.name }}</span>
             <PresenceIndicator :ticket-reference="ticket.reference" route-prefix="escalated.agent" />
             <div class="ml-auto flex items-center gap-2">
-                <FollowButton :is-following="is_following" :followers-count="followers_count"
-                              :action="route('escalated.agent.tickets.follow', ticket.reference)" />
-                <MacroDropdown v-if="macros.length" :macros="macros"
-                               :action="route('escalated.agent.tickets.macro', ticket.reference)" />
-                <button v-if="!ticket.assigned_to" @click="assignToMe"
-                        class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400">
+                <FollowButton
+                    :is-following="is_following"
+                    :followers-count="followers_count"
+                    :action="route('escalated.agent.tickets.follow', ticket.reference)"
+                />
+                <MacroDropdown
+                    v-if="macros.length && !isLightAgent"
+                    :macros="macros"
+                    :action="route('escalated.agent.tickets.macro', ticket.reference)"
+                />
+                <button
+                    v-if="!ticket.assigned_to && !isLightAgent"
+                    class="rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400"
+                    @click="assignToMe"
+                >
                     Assign to Me
                 </button>
-                <select ref="statusSelectRef" @change="changeStatus($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
-                    <option value="">Change Status...</option>
-                    <option value="in_progress">In Progress</option>
-                    <option value="waiting_on_customer">Waiting on Customer</option>
-                    <option value="resolved">Resolved</option>
-                    <option value="closed">Closed</option>
-                </select>
-                <select ref="prioritySelectRef" @change="changePriority($event.target.value); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10">
-                    <option value="">Change Priority...</option>
-                    <option value="low">Low</option>
-                    <option value="medium">Medium</option>
-                    <option value="high">High</option>
-                    <option value="urgent">Urgent</option>
-                    <option value="critical">Critical</option>
-                </select>
+                <template v-if="!isLightAgent">
+                    <select
+                        ref="statusSelectRef"
+                        :class="[
+                            'rounded-lg border px-3 py-1.5 text-sm focus:outline-none focus:ring-1',
+                            escDark
+                                ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-white/10'
+                                : 'border-gray-300 bg-white text-gray-700 focus:border-gray-400 focus:ring-gray-200',
+                        ]"
+                        @change="
+                            changeStatus($event.target.value);
+                            $event.target.value = '';
+                        "
+                    >
+                        <option value="">Change Status...</option>
+                        <option value="in_progress">In Progress</option>
+                        <option value="waiting_on_customer">Waiting on Customer</option>
+                        <option value="resolved">Resolved</option>
+                        <option value="closed">Closed</option>
+                    </select>
+                    <select
+                        ref="prioritySelectRef"
+                        :class="[
+                            'rounded-lg border px-3 py-1.5 text-sm focus:outline-none focus:ring-1',
+                            escDark
+                                ? 'border-white/10 bg-neutral-950 text-neutral-200 focus:border-white/20 focus:ring-white/10'
+                                : 'border-gray-300 bg-white text-gray-700 focus:border-gray-400 focus:ring-gray-200',
+                        ]"
+                        @change="
+                            changePriority($event.target.value);
+                            $event.target.value = '';
+                        "
+                    >
+                        <option value="">Change Priority...</option>
+                        <option value="low">Low</option>
+                        <option value="medium">Medium</option>
+                        <option value="high">High</option>
+                        <option value="urgent">Urgent</option>
+                        <option value="critical">Critical</option>
+                    </select>
+                </template>
+                <!-- Context Panel Toggle -->
+                <button
+                    type="button"
+                    :class="[
+                        'rounded-lg border px-3 py-1.5 text-sm transition-colors',
+                        showContextPanel
+                            ? escDark
+                                ? 'border-cyan-500/30 bg-cyan-500/10 text-cyan-400'
+                                : 'border-blue-300 bg-blue-50 text-blue-600'
+                            : escDark
+                              ? 'border-white/10 text-neutral-400 hover:border-white/20 hover:text-neutral-200'
+                              : 'border-gray-300 text-gray-400 hover:border-gray-400 hover:text-gray-600',
+                    ]"
+                    @click="showContextPanel = !showContextPanel"
+                >
+                    <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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+                        />
+                    </svg>
+                </button>
                 <!-- Plugin: ticket show actions slot -->
                 <PluginSlot slot="ticket.show.actions" :components="getPageComponents('ticket.show', 'actions')" />
             </div>
         </div>
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
             <div class="lg:col-span-2 space-y-6">
-                <PinnedNotes v-if="ticket.pinned_notes?.length" :notes="ticket.pinned_notes"
-                             :ticket-reference="ticket.reference" route-prefix="escalated.agent" />
-                <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
-                    <p class="whitespace-pre-wrap text-sm text-neutral-300">{{ ticket.description }}</p>
+                <PinnedNotes
+                    v-if="ticket.pinned_notes?.length"
+                    :notes="ticket.pinned_notes"
+                    :ticket-reference="ticket.reference"
+                    route-prefix="escalated.agent"
+                />
+                <div
+                    :class="[
+                        'rounded-xl border p-5',
+                        escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white',
+                    ]"
+                >
+                    <p :class="['whitespace-pre-wrap text-sm', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                        {{ ticket.description }}
+                    </p>
                     <AttachmentList v-if="ticket.attachments?.length" :attachments="ticket.attachments" class="mt-3" />
                 </div>
                 <div>
-                    <div class="mb-4 flex gap-4 border-b border-white/[0.06]">
-                        <button @click="activeTab = 'reply'"
-                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'reply' ? 'border-b-2 border-cyan-500 text-white' : 'text-neutral-500 hover:text-neutral-300']">
+                    <div :class="['mb-4 flex gap-4 border-b', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+                        <button
+                            v-if="!isLightAgent"
+                            :class="[
+                                'pb-2 text-sm font-medium transition-colors',
+                                activeTab === 'reply'
+                                    ? escDark
+                                        ? 'border-b-2 border-cyan-500 text-white'
+                                        : 'border-b-2 border-blue-500 text-gray-900'
+                                    : escDark
+                                      ? 'text-neutral-500 hover:text-neutral-300'
+                                      : 'text-gray-400 hover:text-gray-600',
+                            ]"
+                            @click="activeTab = 'reply'"
+                        >
                             Reply
                         </button>
-                        <button @click="activeTab = 'note'"
-                                :class="['pb-2 text-sm font-medium transition-colors', activeTab === 'note' ? 'border-b-2 border-amber-500 text-amber-400' : 'text-neutral-500 hover:text-neutral-300']">
+                        <button
+                            :class="[
+                                'pb-2 text-sm font-medium transition-colors',
+                                activeTab === 'note'
+                                    ? escDark
+                                        ? 'border-b-2 border-amber-500 text-amber-400'
+                                        : 'border-b-2 border-amber-500 text-amber-700'
+                                    : escDark
+                                      ? 'text-neutral-500 hover:text-neutral-300'
+                                      : 'text-gray-400 hover:text-gray-600',
+                            ]"
+                            @click="activeTab = 'note'"
+                        >
                             Internal Note
                         </button>
                     </div>
-                    <ReplyComposer v-if="activeTab === 'reply'" ref="replyComposerRef"
-                                   :action="route('escalated.agent.tickets.reply', ticket.reference)"
-                                   :canned-responses="cannedResponses" />
-                    <ReplyComposer v-else
-                                   :action="route('escalated.agent.tickets.note', ticket.reference)"
-                                   placeholder="Write an internal note..."
-                                   submit-label="Add Note" />
+                    <ReplyComposer
+                        v-if="activeTab === 'reply' && !isLightAgent"
+                        ref="replyComposerRef"
+                        :action="route('escalated.agent.tickets.reply', ticket.reference)"
+                        :canned-responses="cannedResponses"
+                    />
+                    <ReplyComposer
+                        v-if="activeTab === 'note'"
+                        :action="route('escalated.agent.tickets.note', ticket.reference)"
+                        placeholder="Write an internal note..."
+                        submit-label="Add Note"
+                    />
                 </div>
                 <div>
-                    <h2 class="mb-4 text-lg font-semibold text-neutral-200">Conversation</h2>
-                    <ReplyThread :replies="ticket.replies || []" :current-user-id="page.props.auth?.user?.id"
-                                 :ticket-reference="ticket.reference" route-prefix="escalated.agent" pinnable />
+                    <h2 :class="['mb-4 text-lg font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                        Conversation
+                    </h2>
+                    <ReplyThread
+                        :replies="ticket.replies || []"
+                        :current-user-id="page.props.auth?.user?.id"
+                        :ticket-reference="ticket.reference"
+                        route-prefix="escalated.agent"
+                        pinnable
+                    />
                 </div>
             </div>
             <div class="space-y-6">
                 <TicketSidebar :ticket="ticket" :tags="tags" :departments="departments" />
+                <KnowledgePanel :ticket-reference="ticket.reference" />
                 <!-- Plugin: ticket show sidebar slot -->
                 <PluginSlot slot="ticket.show.sidebar" :components="getPageComponents('ticket.show', 'sidebar')" />
             </div>
         </div>
+        <!-- Context Panel -->
+        <ContextPanel v-model:visible="showContextPanel">
+            <ContextPanelSection
+                title="Customer Info"
+                icon="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+            >
+                <div class="space-y-2 text-sm">
+                    <div class="flex justify-between">
+                        <span :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Name</span>
+                        <span :class="escDark ? 'text-neutral-200' : 'text-gray-900'">{{
+                            ticket.requester?.name || 'Unknown'
+                        }}</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Email</span>
+                        <span :class="['truncate', escDark ? 'text-neutral-200' : 'text-gray-900']">{{
+                            ticket.requester?.email || '---'
+                        }}</span>
+                    </div>
+                    <div class="flex justify-between">
+                        <span :class="escDark ? 'text-neutral-500' : 'text-gray-500'">Tickets</span>
+                        <span :class="escDark ? 'text-neutral-200' : 'text-gray-900'">{{
+                            ticket.requester_ticket_count ?? '---'
+                        }}</span>
+                    </div>
+                </div>
+            </ContextPanelSection>
+
+            <ContextPanelSection
+                title="Related Tickets"
+                icon="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"
+                :default-open="false"
+            >
+                <div v-if="ticket.related_tickets?.length" class="space-y-2">
+                    <div
+                        v-for="rt in ticket.related_tickets"
+                        :key="rt.reference"
+                        :class="[
+                            'rounded-lg border px-3 py-2',
+                            escDark ? 'border-white/[0.06] bg-neutral-950' : 'border-gray-200 bg-gray-50',
+                        ]"
+                    >
+                        <span :class="['font-mono text-xs', escDark ? 'text-cyan-400' : 'text-blue-600']">{{
+                            rt.reference
+                        }}</span>
+                        <p :class="['mt-0.5 truncate text-xs', escDark ? 'text-neutral-400' : 'text-gray-500']">
+                            {{ rt.subject }}
+                        </p>
+                    </div>
+                </div>
+                <p v-else :class="['text-xs', escDark ? 'text-neutral-600' : 'text-gray-400']">
+                    No related tickets found.
+                </p>
+            </ContextPanelSection>
+
+            <ContextPanelSection
+                title="Recent Activity"
+                icon="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                :default-open="false"
+            >
+                <div v-if="ticket.activities?.length" class="space-y-2">
+                    <div v-for="activity in ticket.activities.slice(0, 5)" :key="activity.id" class="text-xs">
+                        <span :class="escDark ? 'text-neutral-500' : 'text-gray-600'">{{ activity.description }}</span>
+                        <span :class="['ml-1', escDark ? 'text-neutral-600' : 'text-gray-400']">{{
+                            activity.created_at_human
+                        }}</span>
+                    </div>
+                </div>
+                <p v-else :class="['text-xs', escDark ? 'text-neutral-600' : 'text-gray-400']">No recent activity.</p>
+            </ContextPanelSection>
+
+            <!-- Plugin: context panel slot -->
+            <PluginSlot
+                slot="ticket.show.context-panel"
+                :components="getPageComponents('ticket.show', 'context-panel')"
+            />
+        </ContextPanel>
+
         <KeyboardShortcutHelp v-model:show="showShortcutHelp" context="detail" />
     </EscalatedLayout>
 </template>

package/src/pages/Customer/Create.vue

@@ -1,7 +1,10 @@
 <script setup>
 import EscalatedLayout from '../../components/EscalatedLayout.vue';
 import FileDropzone from '../../components/FileDropzone.vue';
+import TicketTypeSelector from '../../components/TicketTypeSelector.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
 import { useForm } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
 
 const props = defineProps({
     departments: Array,
@@ -13,9 +16,12 @@ const form = useForm({
     description: '',
     priority: 'medium',
     department_id: '',
+    ticket_type: 'question',
     attachments: [],
 });
 
+const { getPageComponents } = usePluginExtensions();
+
 function submit() {
     form.post(route('escalated.customer.tickets.store'));
 }
@@ -23,20 +29,33 @@ function submit() {
 
 <template>
     <EscalatedLayout title="Create Ticket">
-        <form @submit.prevent="submit" class="mx-auto max-w-2xl space-y-6 rounded-lg border border-gray-200 bg-white p-6">
+        <form
+            class="mx-auto max-w-2xl space-y-6 rounded-lg border border-gray-200 bg-white p-6"
+            @submit.prevent="submit"
+        >
             <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">
+            <div class="grid grid-cols-3 gap-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700">Priority</label>
                     <select v-model="form.priority" class="mt-1 w-full rounded-lg border-gray-300 shadow-sm">
@@ -50,17 +69,25 @@ function submit() {
                         <option v-for="d in departments" :key="d.id" :value="d.id">{{ d.name }}</option>
                     </select>
                 </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Type</label>
+                    <TicketTypeSelector v-model="form.ticket_type" class="mt-1 w-full" />
+                </div>
             </div>
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">Attachments</label>
                 <FileDropzone v-model="form.attachments" />
             </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 ? 'Creating...' : 'Create Ticket' }}
                 </button>
             </div>
         </form>
+        <PluginSlot slot="customer.create.footer" :components="getPageComponents('customer.create', 'footer')" />
     </EscalatedLayout>
 </template>