112 lines
6.5 KiB
PHP
112 lines
6.5 KiB
PHP
<div class="space-y-6" dusk="helpdesk-dashboard-widget">
|
|
<div class="grid gap-4 md:grid-cols-4">
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm font-medium text-zinc-500">Total tickets</div>
|
|
<div class="mt-3 text-4xl font-semibold text-zinc-950 dark:text-white">{{ $totalCount }}</div>
|
|
<div class="mt-3 h-2 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-2 rounded-full bg-blue-500" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm font-medium text-zinc-500">Open tickets</div>
|
|
<div class="mt-3 text-4xl font-semibold text-blue-700 dark:text-blue-300">{{ $openCount }}</div>
|
|
<div class="mt-3 h-2 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-2 rounded-full bg-blue-500" style="width: {{ $openPercent }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm font-medium text-zinc-500">Closed tickets</div>
|
|
<div class="mt-3 text-4xl font-semibold text-emerald-700 dark:text-emerald-300">{{ $closedCount }}</div>
|
|
<div class="mt-3 h-2 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-2 rounded-full bg-emerald-500" style="width: {{ $closedPercent }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm font-medium text-zinc-500">High priority</div>
|
|
<div class="mt-3 text-4xl font-semibold text-red-700 dark:text-red-300">{{ $criticalCount }}</div>
|
|
<div class="mt-3 text-xs text-zinc-500">Open urgent/high/critical workload.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 lg:grid-cols-3">
|
|
<div
|
|
class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 lg:col-span-2">
|
|
<div class="mb-5 flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Performance</h2>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400">Closure rate and remaining open workload.</p>
|
|
</div>
|
|
<flux:badge color="emerald">{{ $closedPercent }}% closed</flux:badge>
|
|
</div>
|
|
<div class="space-y-5">
|
|
<div>
|
|
<div class="mb-2 flex justify-between text-sm"><span>Closed</span><span>{{ $closedPercent }}%</span>
|
|
</div>
|
|
<div class="h-4 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-4 rounded-full bg-emerald-500" style="width: {{ $closedPercent }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="mb-2 flex justify-between text-sm"><span>Open</span><span>{{ $openPercent }}%</span>
|
|
</div>
|
|
<div class="h-4 rounded-full bg-zinc-100 dark:bg-zinc-800">
|
|
<div class="h-4 rounded-full bg-blue-500" style="width: {{ $openPercent }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="mb-5 flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Recent commits</h2>
|
|
<a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-violet">Git
|
|
setup</a>
|
|
</div>
|
|
<div class="space-y-2">
|
|
@forelse ($recentCommits as $commit)
|
|
<div class="rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
|
|
<div class="font-mono text-xs text-zinc-500">{{ $commit->short_hash }} ·
|
|
{{ $commit->repository?->name }}</div>
|
|
<div class="mt-1 truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
|
{{ $commit->message }}</div>
|
|
</div>
|
|
@empty
|
|
<div
|
|
class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700">
|
|
No commits tracked yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="mb-5 flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Recent tickets</h2>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400">Latest support activity.</p>
|
|
</div>
|
|
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-blue">View
|
|
all</a>
|
|
</div>
|
|
<div class="space-y-2">
|
|
@forelse ($recentTickets as $ticket)
|
|
<a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
|
|
class="block rounded-xl border border-zinc-100 p-3 hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span
|
|
class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $ticket->subject }}</span>
|
|
<flux:badge color="{{ $ticket->priority->color }}" size="sm">
|
|
{{ $ticket->priority->name }}</flux:badge>
|
|
</div>
|
|
<div class="mt-1 text-xs text-zinc-500">{{ $ticket->reference }} · {{ $ticket->status->name }}
|
|
</div>
|
|
</a>
|
|
@empty
|
|
<div
|
|
class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700">
|
|
No helpdesk tickets yet.</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|