125 lines
6.7 KiB
PHP
125 lines
6.7 KiB
PHP
<div class="flex w-full flex-1 flex-col gap-6">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<flux:heading size="xl">{{ __('Helpdesk') }}</flux:heading>
|
|
<flux:text class="mt-1">{{ __('Support operations, workload and recent activity.') }}</flux:text>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<flux:button :href="route('helpdesk.tickets.index')" variant="ghost" icon="list-bullet" wire:navigate>
|
|
{{ __('Tickets') }}
|
|
</flux:button>
|
|
<flux:button :href="route('helpdesk.kanban')" variant="ghost" icon="view-columns" wire:navigate>
|
|
{{ __('Kanban') }}
|
|
</flux:button>
|
|
<flux:button :href="route('helpdesk.tickets.create')" variant="primary" icon="plus" wire:navigate>
|
|
{{ __('New ticket') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:text>{{ __('Total tickets') }}</flux:text>
|
|
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $totalCount }}</div>
|
|
<flux:text class="mt-2">{{ __('All tickets visible to you') }}</flux:text>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:text>{{ __('Open') }}</flux:text>
|
|
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $openCount }}</div>
|
|
<flux:text class="mt-2">{{ $openPercent }}% {{ __('of total') }}</flux:text>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:text>{{ __('Closed') }}</flux:text>
|
|
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $closedCount }}</div>
|
|
<flux:text class="mt-2">{{ $closedPercent }}% {{ __('resolved') }}</flux:text>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:text>{{ __('High priority') }}</flux:text>
|
|
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $criticalCount }}</div>
|
|
<flux:text class="mt-2">{{ __('Critical, urgent or high') }}</flux:text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 xl:grid-cols-3">
|
|
<section class="xl:col-span-2 rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
|
|
<div>
|
|
<flux:heading size="lg">{{ __('Recent tickets') }}</flux:heading>
|
|
<flux:text>{{ __('Latest support activity') }}</flux:text>
|
|
</div>
|
|
<flux:button :href="route('helpdesk.tickets.index')" size="sm" variant="ghost" wire:navigate>
|
|
{{ __('View all') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
<div class="divide-y divide-zinc-200 dark:divide-zinc-700">
|
|
@forelse ($recentTickets as $ticket)
|
|
<a
|
|
href="{{ route('helpdesk.tickets.show', $ticket) }}"
|
|
wire:navigate
|
|
class="flex items-start justify-between gap-4 px-5 py-4 transition hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
|
|
>
|
|
<div class="min-w-0">
|
|
<div class="truncate font-medium text-zinc-950 dark:text-white">
|
|
{{ $ticket->reference ?? $ticket->id }} · {{ $ticket->subject ?? __('Untitled ticket') }}
|
|
</div>
|
|
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
|
|
@if ($ticket->status)
|
|
<span>{{ $ticket->status->name }}</span>
|
|
@endif
|
|
@if ($ticket->priority)
|
|
<span>{{ $ticket->priority->name }}</span>
|
|
@endif
|
|
@if ($ticket->last_activity_at)
|
|
<span>{{ $ticket->last_activity_at->diffForHumans() }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<flux:icon.chevron-right class="mt-1 size-4 shrink-0 text-zinc-400" />
|
|
</a>
|
|
@empty
|
|
<div class="px-5 py-10 text-center">
|
|
<flux:text>{{ __('No tickets yet.') }}</flux:text>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
|
|
<flux:heading size="lg">{{ __('Recent Git activity') }}</flux:heading>
|
|
<flux:text>{{ __('Commits linked to Helpdesk') }}</flux:text>
|
|
</div>
|
|
|
|
<div class="divide-y divide-zinc-200 dark:divide-zinc-700">
|
|
@forelse ($recentCommits as $commit)
|
|
<div class="px-5 py-4">
|
|
<div class="truncate font-medium text-zinc-950 dark:text-white">
|
|
{{ $commit->repository?->name ?? __('Repository') }}
|
|
</div>
|
|
<div class="mt-1 line-clamp-2 text-sm text-zinc-600 dark:text-zinc-300">
|
|
{{ $commit->message ?? __('Commit') }}
|
|
</div>
|
|
<div class="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400">
|
|
@if ($commit->sha)
|
|
<span>{{ substr($commit->sha, 0, 8) }}</span>
|
|
@endif
|
|
@if ($commit->committed_at)
|
|
<span>{{ $commit->committed_at->diffForHumans() }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="px-5 py-10 text-center">
|
|
<flux:text>{{ __('No Git activity yet.') }}</flux:text>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|