admin/zemailnator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added support ticket and added more stat widgets

Browse Source
This commit is contained in:
Gitea
2025-05-17 05:11:29 +05:30
parent f30d7fa096
commit 175a7203f3
19 changed files with 975 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
resources/views/livewire/dashboard/support.blade.php Normal file
View File

@@ -0,0 +1,199 @@
@section('title'){{ __('Support Ticket') }}@endsection
<span>
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
<div class="grid auto-rows-min gap-4 md:grid-cols-2">
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
<span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
<flux:icon.clock />
</span>
<div>
<p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $open }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Opened Tickets</p>
</div>
</article>
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
<span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
<flux:icon.circle-x />
</span>
<div>
<p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $closed }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Closed Tickets</p>
</div>
</article>
</div>
<div x-data="{ show: false, id: 0 }">
<div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]">
<div x-show="!show" class="list">
<div class="flex justify-between items-center p-2 dark:bg-zinc-900 bg-gray-300">
<h3 class="text-md font-semibold text-gray-900 dark:text-white pl-1">Tickets</h3>
<flux:modal.trigger name="create-ticket">
<flux:button class="cursor-pointer">Create Ticket</flux:button>
</flux:modal.trigger>
</div>
</div>
<div x-show="show">
<div class="flex justify-between items-center p-2 dark:bg-zinc-900 bg-gray-300">
<nav class="flex items-center cursor-pointer py-3" x-on:click="show = false">
<flux:icon.chevron-left variant="mini"/>
<flux:text>{{ __('Get back to Tickets') }}</flux:text>
</nav>
</div>
</div>
@if(count($tickets) > 0)
<div class="ticketbox">
<div x-show="!show" class="list">
<!-- Tickets Table -->
<div class="overflow-x-auto shadow-md sm:rounded-lg">
<table class="min-w-full table-auto text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-zinc-800 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">ID</th>
<th scope="col" class="px-6 py-3">Subject</th>
<th scope="col" class="px-6 py-3">Status</th>
<th scope="col" class="px-6 py-3">Created Date</th>
<th scope="col" class="px-6 py-3"></th>
</tr>
</thead>
<tbody>
@foreach(collect($tickets)->reverse() as $index => $ticket)
<tr class="border-b dark:border-gray-700 border-gray-200">
<td class="px-6 py-4">#{{ $ticket->ticket_id }}</td>
<td class="px-6 py-4 truncate">{{ $ticket->subject }}</td>
<td class="px-6 py-4">
@if($ticket->status == "open")
<flux:badge size="sm" color="green">Open</flux:badge>
@elseif($ticket->status == "pending")
<flux:badge size="sm" color="yellow">In-Progress</flux:badge>
@else
<flux:badge size="sm" color="red">Closed</flux:badge>
@endif
</td>
<td class="px-6 py-4">{{ $ticket->created_at->diffForHumans() }}</td>
<td class="px-6 py-4">
<button class="cursor-pointer px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none"
x-on:click="show = true; id = {{ $index }};" data-id="{{ $index }}"
>
Show
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div x-show="show" class="message">
@foreach(collect($tickets)->reverse() as $index => $ticket)
<div x-show="id === {{ $index }}" id="ticket-{{ $index }}">
<div class="overflow-x-auto shadow-md sm:rounded-lg p-4">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Column (Messages & Reply Form) -->
<div class="w-full lg:w-2/3 space-y-4">
<!-- Customer Message -->
<div class="bg-white dark:bg-zinc-800 border-l-4 shadow rounded p-4">
<div class="flex justify-between items-center mb-1">
<span class="font-semibold text-gray-800 dark:text-gray-200">{{ auth()->user()->name }}</span>
<span class="text-sm text-gray-500">{{ $ticket->created_at->format('F d, Y • h:i A') }}</span>
</div>
<p class="text-gray-700 dark:text-gray-300">Subject: {{ $ticket->subject }}<br/>Message: {{ $ticket->message }}</p>
</div>
@if(count($ticket->responses) > 0)
@foreach($ticket->responses as $response)
<div class="bg-white dark:bg-zinc-800 border-l-4 shadow rounded p-4">
<div class="flex justify-between items-center mb-1">
<span class="font-semibold text-gray-800 dark:text-gray-200">{{ auth()->user()->id === $response->user_id ? auth()->user()->name : 'Support Team' }}</span>
<span class="text-sm text-gray-500">{{ $response->created_at->format('F d, Y • h:i A') }}</span>
</div>
<p class="text-gray-700 dark:text-gray-300">{{ $response->response }}</p>
</div>
@endforeach
@endif
<!-- Reply Form -->
<div class="bg-white dark:bg-zinc-800 p-4 shadow rounded">
<textarea wire:model="response" class="w-full p-3 rounded border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-gray-800 dark:text-white focus:outline-none focus:ring focus:ring-blue-500" rows="4" placeholder="Type your response..."></textarea>
@error('response')
<div class="my-2 app-primary">
{{ $message }}
</div>
@enderror
<!-- Success/Error Message -->
@if (session()->has('success'))
<div class="my-2" style="color: #00AB55">
{{ session('success') }}
</div>
@endif
@if (session()->has('error'))
<div class="my-2 app-primary">
{{ session('error') }}
</div>
@endif
<flux:button variant="outline" wire:click="reply('{{ $ticket->id }}')">Send Reply</flux:button>
</div>
</div>
<!-- Right Column (Ticket Details) -->
<div class="w-full lg:w-1/3">
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg p-4 space-y-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Ticket Details</h2>
<div class="text-gray-700 dark:text-gray-300">
<p><strong>Ticket ID:</strong> #{{ $ticket->ticket_id }}</p>
<p><strong>Created At:</strong> {{ $ticket->created_at->format('F d, Y • h:i A') }}</p>
<p><strong>Last Response:</strong> {{ $ticket->last_response_at ? $ticket->last_response_at->format('F d, Y • h:i A') : 'No responses yet' }}</p>
<span class="flex flex-row gap-2"><p><strong>Status:</strong></p>
@if($ticket->status == "open")
<flux:badge size="sm" color="green">Open</flux:badge>
@elseif($ticket->status == "pending")
<flux:badge size="sm" color="yellow">In-Progress</flux:badge>
@else
<flux:badge size="sm" color="red">Closed</flux:badge>
@endif
</span>
<flux:button class="mt-2 cursor-pointer inbox-btn" wire:click="close('{{ $ticket->id }}')">Close Ticket</flux:button>
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
@else
<div class="flex justify-center items-center" style="min-height: 400px;">
<p class="text-gray-500 dark:text-gray-400">No Tickets</p>
</div>
@endif
</div>
</div>
</div>
<flux:modal name="create-ticket" class="md:w-96">
<div class="space-y-6">
<div>
<flux:heading size="lg">Create ticket</flux:heading>
@if (session()->has('success'))
<flux:text class="mt-2" style="color: #00AB55">{{ session('success') }}</flux:text>
@endif
@if (session()->has('error'))
<flux:text class="mt-2 app-primary" >{{ session('error') }}</flux:text>
@endif
</div>
<flux:input label="Subject" placeholder="Enter subject" wire:model="subject"/>
<flux:textarea
label="Message"
placeholder="Enter the issue you are facing or just give us feedback what we can improve"
wire:model="message"
/>
<div class="flex">
<flux:spacer />
<flux:button class="cursor-pointer" type="submit" variant="primary" wire:click="store">Create</flux:button>
</div>
</div>
</flux:modal>
</span>