From 22452f9ab9bbf34fd09a017039b98d561ebd56dc Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Thu, 18 Jun 2026 13:14:06 +0100
Subject: [PATCH] intial ticket fix

---
 .../views/livewire/ticket-create.blade.php    | 127 ++++++++++++++++--
 .../views/livewire/ticket-index.blade.php     |  18 ++-
 2 files changed, 134 insertions(+), 11 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 299224b5..56445a9f 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -260,19 +260,57 @@
                 </div>
 
                 <div class="lg:col-span-3 xl:col-span-6">
-                    <label class="block text-sm font-semibold text-zinc-200" for="body">
+                    <label class="block text-sm font-semibold text-zinc-200" for="body-editor">
                         Details <span class="helpdesk-required-star">*</span>
                     </label>
 
-                    <textarea
-                        id="body"
-                        rows="10"
-                        wire:model.defer="body"
-                        class="mt-2 block min-h-[18rem] w-full rounded-xl border border-zinc-700 bg-zinc-950 px-4 py-3 text-sm leading-6 text-zinc-100 shadow-sm outline-none transition-colors duration-150 placeholder:text-zinc-500 focus:border-blue-500 focus:bg-zinc-950 focus:ring-2 focus:ring-blue-500/40"
-                        placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
-                        data-dusk="ticket-body-editor"
-                        dusk="ticket-body-editor"
-                    ></textarea>
+                    <div class="mt-2 overflow-hidden rounded-xl border border-zinc-700 bg-zinc-950 shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/40" wire:ignore>
+                        <div class="flex flex-wrap items-center gap-1 border-b border-zinc-700 bg-zinc-900 px-3 py-2">
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="bold" aria-label="Bold">
+                                <i class="fa-solid fa-bold" aria-hidden="true"></i>
+                            </button>
+
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="italic" aria-label="Italic">
+                                <i class="fa-solid fa-italic" aria-hidden="true"></i>
+                            </button>
+
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="underline" aria-label="Underline">
+                                <i class="fa-solid fa-underline" aria-hidden="true"></i>
+                            </button>
+
+                            <span class="mx-1 h-6 w-px bg-zinc-700" aria-hidden="true"></span>
+
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="insertUnorderedList" aria-label="Bullet list">
+                                <i class="fa-solid fa-list-ul" aria-hidden="true"></i>
+                            </button>
+
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-command="insertOrderedList" aria-label="Numbered list">
+                                <i class="fa-solid fa-list-ol" aria-hidden="true"></i>
+                            </button>
+
+                            <span class="mx-1 h-6 w-px bg-zinc-700" aria-hidden="true"></span>
+
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-format="pre" aria-label="Code block">
+                                <i class="fa-solid fa-code" aria-hidden="true"></i>
+                            </button>
+
+                            <button type="button" class="helpdesk-editor-button" data-helpdesk-editor-link aria-label="Insert link">
+                                <i class="fa-solid fa-link" aria-hidden="true"></i>
+                            </button>
+                        </div>
+
+                        <div
+                            id="body-editor"
+                            class="min-h-[18rem] w-full px-4 py-3 text-sm leading-6 text-zinc-100 outline-none empty:before:text-zinc-500 empty:before:content-[attr(data-placeholder)]"
+                            contenteditable="true"
+                            data-helpdesk-details-editor
+                            data-placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
+                            data-dusk="ticket-body-editor"
+                            dusk="ticket-body-editor"
+                        >{!! $body ?? '' !!}</div>
+                    </div>
+
+                    <textarea id="body" wire:model.defer="body" class="sr-only" tabindex="-1" aria-hidden="true"></textarea>
 
                     @error('body')
                     <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@@ -356,4 +394,73 @@
             </div>
         </div>
     </form>
+    <style>
+        .helpdesk-editor-button {
+            display: inline-flex;
+            height: 2rem;
+            width: 2rem;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0.625rem;
+            color: rgb(212 212 216);
+            transition: background-color 150ms ease, color 150ms ease;
+        }
+
+        .helpdesk-editor-button:hover,
+        .helpdesk-editor-button:focus {
+            background: rgb(37 99 235);
+            color: white;
+            outline: none;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const form = document.querySelector('.helpdesk-ticket-form');
+            const editor = document.querySelector('[data-helpdesk-details-editor]');
+            const bodyField = document.getElementById('body');
+
+            if (!form || !editor || !bodyField) {
+                return;
+            }
+
+            const syncBody = function () {
+                bodyField.value = editor.innerHTML.trim();
+                bodyField.dispatchEvent(new Event('input', { bubbles: true }));
+                bodyField.dispatchEvent(new Event('change', { bubbles: true }));
+            };
+
+            document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function (button) {
+                button.addEventListener('click', function () {
+                    editor.focus();
+                    document.execCommand(button.dataset.helpdeskEditorCommand, false, null);
+                    syncBody();
+                });
+            });
+
+            document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function (button) {
+                button.addEventListener('click', function () {
+                    editor.focus();
+                    document.execCommand('formatBlock', false, button.dataset.helpdeskEditorFormat);
+                    syncBody();
+                });
+            });
+
+            document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function (button) {
+                button.addEventListener('click', function () {
+                    const url = window.prompt('Enter link URL');
+
+                    if (!url) {
+                        return;
+                    }
+
+                    editor.focus();
+                    document.execCommand('createLink', false, url);
+                    syncBody();
+                });
+            });
+
+            editor.addEventListener('blur', syncBody);
+            form.addEventListener('submit', syncBody);
+        });
+    </script>
 </div>
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-index.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-index.blade.php
index 2cea2289..7cd1e310 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-index.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-index.blade.php
@@ -200,6 +200,7 @@
                         <th class="px-4 py-3">Agent</th>
                         <th class="px-4 py-3 text-center">Files</th>
                         <th class="px-4 py-3">Last activity</th>
+                        <th class="px-4 py-3 text-right">Actions</th>
                     </tr>
                 </thead>
                 <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
@@ -232,10 +233,25 @@
                                 @endif
                             </td>
                             <td class="whitespace-nowrap px-4 py-3 text-zinc-500">{{ $ticket->last_activity_at?->diffForHumans() ?? $ticket->created_at->diffForHumans() }}</td>
+                            <td class="whitespace-nowrap px-4 py-3 text-right">
+                                @can('delete', $ticket)
+                                    <button
+                                        type="button"
+                                        wire:click="deleteTicket({{ $ticket->id }})"
+                                        wire:confirm="Delete ticket {{ $ticket->reference }}? This action cannot be undone."
+                                        class="hd-btn hd-btn-sm hd-btn-red"
+                                        title="Delete {{ $ticket->reference }}"
+                                        dusk="delete-ticket-{{ $ticket->id }}"
+                                    >
+                                        <i class="fa-solid fa-trash" aria-hidden="true"></i>
+                                        <span>Delete</span>
+                                    </button>
+                                @endcan
+                            </td>
                         </tr>
                     @empty
                         <tr>
-                            <td colspan="7" class="px-4 py-12 text-center text-zinc-500">No tickets matched your filters.</td>
+                            <td colspan="8" class="px-4 py-12 text-center text-zinc-500">No tickets matched your filters.</td>
                         </tr>
                     @endforelse
                 </tbody>