205 lines
9.6 KiB
PHP
205 lines
9.6 KiB
PHP
<div class="space-y-6">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<flux:heading size="xl">{{ __('Tickets') }}</flux:heading>
|
|
<flux:text>{{ __('Manage Helpdesk tickets, assignments and status.') }}</flux:text>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<flux:button :href="route('helpdesk.kanban')" wire:navigate>
|
|
{{ __('Kanban') }}
|
|
</flux:button>
|
|
|
|
<flux:button variant="primary" :href="route('helpdesk.tickets.create')" wire:navigate>
|
|
{{ __('New ticket') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-3 md:grid-cols-4">
|
|
<flux:input
|
|
wire:model.live.debounce.300ms="search"
|
|
:label="__('Search')"
|
|
:placeholder="__('Reference, subject or text')"
|
|
/>
|
|
|
|
<flux:select wire:model.live="status" :label="__('Status')">
|
|
<option value="">{{ __('All statuses') }}</option>
|
|
@foreach ($statuses as $statusOption)
|
|
<option value="{{ $statusOption->id }}">{{ $statusOption->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<flux:select wire:model.live="priority" :label="__('Priority')">
|
|
<option value="">{{ __('All priorities') }}</option>
|
|
@foreach ($priorities as $priorityOption)
|
|
<option value="{{ $priorityOption->id }}">{{ $priorityOption->name }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<flux:select wire:model.live="scope" :label="__('Scope')">
|
|
<option value="open">{{ __('Open') }}</option>
|
|
<option value="closed">{{ __('Closed') }}</option>
|
|
<option value="all">{{ __('All') }}</option>
|
|
</flux:select>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
|
|
<thead class="bg-zinc-50 dark:bg-zinc-800/80">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ __('Reference') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ __('Subject') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ __('Status') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ __('Priority') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ __('Agent') }}
|
|
</th>
|
|
<th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ __('Actions') }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
@forelse ($tickets as $ticket)
|
|
<tr wire:key="ticket-{{ $ticket->id }}" class="hover:bg-zinc-50/70 dark:hover:bg-zinc-800/50">
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
|
<a
|
|
href="{{ route('helpdesk.tickets.show', $ticket) }}"
|
|
wire:navigate
|
|
class="hover:underline"
|
|
>
|
|
{{ $ticket->reference }}
|
|
</a>
|
|
</td>
|
|
|
|
<td class="px-4 py-3">
|
|
<div class="max-w-xl">
|
|
<a
|
|
href="{{ route('helpdesk.tickets.show', $ticket) }}"
|
|
wire:navigate
|
|
class="font-medium text-zinc-900 hover:underline dark:text-zinc-100"
|
|
>
|
|
{{ $ticket->subject }}
|
|
</a>
|
|
|
|
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-zinc-500">
|
|
@if ($ticket->category)
|
|
<span>{{ $ticket->category->name }}</span>
|
|
@endif
|
|
|
|
@if ($ticket->project)
|
|
<span>{{ $ticket->project->title }}</span>
|
|
@endif
|
|
|
|
@if ($ticket->attachments_count)
|
|
<span>{{ trans_choice(':count attachment|:count attachments', $ticket->attachments_count, ['count' => $ticket->attachments_count]) }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300">
|
|
{{ $ticket->status?->name ?? '—' }}
|
|
</td>
|
|
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300">
|
|
{{ $ticket->priority?->name ?? '—' }}
|
|
</td>
|
|
|
|
<td class="whitespace-nowrap px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300">
|
|
{{ $ticket->agent_name ?? '—' }}
|
|
</td>
|
|
|
|
<td class="whitespace-nowrap px-4 py-3 text-right">
|
|
<div class="flex justify-end gap-2">
|
|
<flux:button
|
|
size="sm"
|
|
:href="route('helpdesk.tickets.show', $ticket)"
|
|
wire:navigate
|
|
>
|
|
{{ __('View') }}
|
|
</flux:button>
|
|
|
|
@can('update', $ticket)
|
|
<flux:button
|
|
size="sm"
|
|
:href="route('helpdesk.tickets.edit', $ticket)"
|
|
wire:navigate
|
|
>
|
|
{{ __('Edit') }}
|
|
</flux:button>
|
|
@endcan
|
|
|
|
@can('delete', $ticket)
|
|
<flux:button
|
|
size="sm"
|
|
variant="danger"
|
|
wire:click="askToDeleteTicket({{ $ticket->id }})"
|
|
>
|
|
{{ __('Delete') }}
|
|
</flux:button>
|
|
@endcan
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-12 text-center">
|
|
<flux:heading size="lg">{{ __('No tickets found') }}</flux:heading>
|
|
<flux:text class="mt-1">
|
|
{{ __('Try changing the filters or create a new ticket.') }}
|
|
</flux:text>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if ($tickets->hasPages())
|
|
<div class="border-t border-zinc-200 px-4 py-3 dark:border-zinc-700">
|
|
{{ $tickets->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($deleteModalOpen)
|
|
<div
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
|
wire:key="delete-ticket-modal"
|
|
>
|
|
<div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-zinc-900">
|
|
<flux:heading size="lg">{{ __('Delete ticket?') }}</flux:heading>
|
|
|
|
<flux:text class="mt-2">
|
|
{{ __('This will delete :reference — :subject.', [
|
|
'reference' => $pendingDeleteTicketReference,
|
|
'subject' => $pendingDeleteTicketSubject,
|
|
]) }}
|
|
</flux:text>
|
|
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<flux:button wire:click="cancelTicketDelete">
|
|
{{ __('Cancel') }}
|
|
</flux:button>
|
|
|
|
<flux:button variant="danger" wire:click="confirmTicketDelete">
|
|
{{ __('Delete') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|