From ac19c8ef37e0b7108a080ba23d06eb98fb28de2e Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Sun, 14 Jun 2026 15:41:23 +0100
Subject: [PATCH] Updated the helpdesk module

---
 .../views/livewire/ticket-create.blade.php    | 144 ++++++++++++++----
 1 file changed, 118 insertions(+), 26 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 4f53a553..e2f8ce46 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -1,4 +1,28 @@
 <div class="space-y-6">
+    <style>
+        .helpdesk-required-star {
+            color: #ef4444 !important;
+            font-weight: 800;
+        }
+
+        .select2-container--default .select2-selection--single {
+            position: relative;
+        }
+
+        .select2-container--default .select2-selection--single .select2-selection__clear {
+            position: absolute !important;
+            top: 50% !important;
+            right: 2.25rem !important;
+            left: auto !important;
+            float: none !important;
+            margin: 0 !important;
+            transform: translateY(-50%);
+            color: #f87171 !important;
+            font-weight: 800 !important;
+            z-index: 5;
+        }
+    </style>
+
     @include('helpdesk::partials.page-header', [
         'eyebrow' => 'Helpdesk',
         'title' => 'Create Ticket',
@@ -9,95 +33,163 @@
         <div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm">
             <div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4">
                 <h2 class="text-lg font-semibold text-zinc-100">Ticket details</h2>
-                <p class="mt-1 text-sm text-zinc-400">Mandatory fields are marked with <span class="font-bold text-red-400">*</span>. Use the searchable lists to keep the ticket correctly routed.</p>
+                <p class="mt-1 text-sm text-zinc-400">
+                    Mandatory fields are marked with <span class="helpdesk-required-star">*</span>.
+                    Use the searchable lists to keep the ticket correctly routed.
+                </p>
             </div>
 
             <div class="grid gap-5 p-6 lg:grid-cols-3 xl:grid-cols-6">
                 <div class="lg:col-span-3 xl:col-span-6">
-                    <label class="block text-sm font-semibold text-zinc-200" for="subject">Subject <span class="text-red-400">*</span></label>
-                    <input id="subject" type="text" wire:model.defer="subject" class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-dusk="ticket-subject">
-                    @error('subject') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+                    <label class="block text-sm font-semibold text-zinc-200" for="subject">
+                        Subject <span class="helpdesk-required-star">*</span>
+                    </label>
+
+                    <textarea
+                        id="subject"
+                        rows="3"
+                        wire:model.defer="subject"
+                        class="mt-2 block min-h-[92px] w-full resize-y rounded-xl border-zinc-700 bg-zinc-950 px-4 py-3 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        data-dusk="ticket-subject"
+                    ></textarea>
+
+                    @error('subject')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
                 @if($companies->isNotEmpty())
-                    <div>
-                        <label class="block text-sm font-semibold text-zinc-200" for="company_id">Company</label>
+                    <div class="xl:col-span-2">
+                        <label class="block text-sm font-semibold text-zinc-200" for="company_id">
+                            Company <span class="helpdesk-required-star">*</span>
+                        </label>
+
                         <select id="company_id" wire:model.defer="company_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                             <option value="">Select company</option>
                             @foreach ($companies as $company)
                                 <option value="{{ $company->id }}">{{ $company->name }}</option>
                             @endforeach
                         </select>
-                        @error('company_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                        @error('company_id')
+                            <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
                     </div>
                 @endif
 
-                <div>
-                    <label class="block text-sm font-semibold text-zinc-200" for="priority_id">Priority <span class="text-red-400">*</span></label>
+                <div class="xl:col-span-2">
+                    <label class="block text-sm font-semibold text-zinc-200" for="priority_id">
+                        Priority <span class="helpdesk-required-star">*</span>
+                    </label>
+
                     <select id="priority_id" wire:model.defer="priority_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500" data-dusk="ticket-priority">
                         <option value="">Select priority</option>
                         @foreach ($priorities as $priority)
                             <option value="{{ $priority->id }}">{{ $priority->name }}</option>
                         @endforeach
                     </select>
-                    @error('priority_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('priority_id')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
-                <div>
-                    <label class="block text-sm font-semibold text-zinc-200" for="category_id">Category</label>
+                <div class="xl:col-span-2">
+                    <label class="block text-sm font-semibold text-zinc-200" for="category_id">
+                        Category <span class="helpdesk-required-star">*</span>
+                    </label>
+
                     <select id="category_id" wire:model.defer="category_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                         <option value="">Select category</option>
                         @foreach ($categories as $category)
                             <option value="{{ $category->id }}">{{ $category->name }}</option>
                         @endforeach
                     </select>
-                    @error('category_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('category_id')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
-                <div>
-                    <label class="block text-sm font-semibold text-zinc-200" for="project_id">Project</label>
+                <div class="xl:col-span-2">
+                    <label class="block text-sm font-semibold text-zinc-200" for="project_id">
+                        Project <span class="helpdesk-required-star">*</span>
+                    </label>
+
                     <select id="project_id" wire:model.defer="project_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                         <option value="">Select project</option>
                         @foreach ($projects as $project)
                             <option value="{{ $project->id }}">{{ $project->title ?? $project->name }}</option>
                         @endforeach
                     </select>
-                    @error('project_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('project_id')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
-                <div>
-                    <label class="block text-sm font-semibold text-zinc-200" for="team_id">Team</label>
+                <div class="xl:col-span-2">
+                    <label class="block text-sm font-semibold text-zinc-200" for="team_id">
+                        Team <span class="helpdesk-required-star">*</span>
+                    </label>
+
                     <select id="team_id" wire:model.defer="team_id" data-helpdesk-select2 class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                         <option value="">Select team</option>
                         @foreach ($teams as $team)
                             <option value="{{ $team->id }}">{{ $team->name }}</option>
                         @endforeach
                     </select>
-                    @error('team_id') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('team_id')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
-                <div>
+                <div class="xl:col-span-2">
                     <label class="block text-sm font-semibold text-zinc-200" for="due_at">Due date</label>
+
                     <input id="due_at" type="date" wire:model.defer="due_at" class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                    @error('due_at') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('due_at')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
                 <div class="lg:col-span-3 xl:col-span-6">
                     <x-helpdesk::html-editor dusk="ticket-body-editor" wire:model="body" label="Details *" rows="10" placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..." />
-                    @error('body') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('body')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
 
                 <div class="lg:col-span-3 xl:col-span-6">
                     <label class="block text-sm font-semibold text-zinc-200" for="attachments">Attachments</label>
+
                     <input id="attachments" type="file" wire:model="attachments" multiple class="mt-2 block w-full rounded-xl border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 shadow-sm">
-                    @error('attachments') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
-                    @error('attachments.*') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror
+
+                    @error('attachments')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
+
+                    @error('attachments.*')
+                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                    @enderror
                 </div>
             </div>
 
             <div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4">
-                <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">Cancel</a>
-                <button type="submit" class="rounded-xl bg-emerald-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50" data-dusk="ticket-create-submit" wire:loading.attr="disabled">
+                <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
+                    Cancel
+                </a>
+
+                <button
+                    type="submit"
+                    class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+                    data-dusk="ticket-create-submit"
+                    wire:loading.attr="disabled"
+                >
+                    <i class="fa-regular fa-floppy-disk" aria-hidden="true"></i>
                     <span wire:loading.remove>Create Ticket</span>
                     <span wire:loading>Creating...</span>
                 </button>