design updates
This commit is contained in:
Mark Gregory
@@ -174,113 +174,71 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="hd-helpdesk-surface space-y-6">
|
||||
<div
|
||||
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-8 text-white">
|
||||
<div class="grid gap-6 lg:grid-cols-[1fr_320px] lg:items-center">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Support operations</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight md:text-4xl">Helpdesk dashboard</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-blue-100/90">Track open workload, closed tickets,
|
||||
response performance, project activity, priorities, Git commits and workflow communication from
|
||||
one professional support workspace.</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<a href="{{ route('helpdesk.tickets.create') }}" wire:navigate class="hd-btn hd-btn-green">
|
||||
<i class="fa-solid fa-plus" aria-hidden="true"></i>
|
||||
<span>New Ticket</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-blue">
|
||||
<i class="fa-solid fa-ticket" aria-hidden="true"></i>
|
||||
<span>Active tickets</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.kanban') }}" wire:navigate class="hd-btn hd-btn-amber">
|
||||
<i class="fa-solid fa-table-columns" aria-hidden="true"></i>
|
||||
<span>Kanban</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-violet">
|
||||
<i class="fa-solid fa-gear" aria-hidden="true"></i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<div class="hd-helpdesk-surface space-y-5">
|
||||
<div class="overflow-hidden rounded-2xl border border-blue-400/20 bg-slate-950 shadow-sm ring-1 ring-white/5">
|
||||
<div class="relative min-h-[9.5rem] bg-[radial-gradient(circle_at_78%_18%,rgba(37,99,235,0.28),transparent_34%),linear-gradient(135deg,#020617_0%,#07112d_48%,#111827_100%)] px-5 py-5 text-white sm:px-6">
|
||||
<div class="absolute inset-y-0 right-0 hidden w-[42%] overflow-hidden lg:block" aria-hidden="true">
|
||||
<div class="absolute right-6 top-5 h-28 w-64 rotate-[-8deg] rounded-2xl border border-blue-300/25 bg-blue-950/35 shadow-2xl shadow-blue-950/50">
|
||||
<div class="absolute inset-3 rounded-xl border border-white/10 bg-slate-950/70 p-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="h-2 w-24 rounded-full bg-blue-200/80"></div>
|
||||
<div class="flex gap-1.5">
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-emerald-300"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-amber-300"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-rose-300"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 grid grid-cols-3 gap-2">
|
||||
<div class="h-10 rounded-lg bg-blue-400/20 ring-1 ring-blue-300/20"></div>
|
||||
<div class="h-10 rounded-lg bg-emerald-400/15 ring-1 ring-emerald-300/20"></div>
|
||||
<div class="h-10 rounded-lg bg-violet-400/15 ring-1 ring-violet-300/20"></div>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1.5">
|
||||
<div class="h-1.5 w-11/12 rounded-full bg-blue-300/70"></div>
|
||||
<div class="h-1.5 w-8/12 rounded-full bg-emerald-300/70"></div>
|
||||
<div class="h-1.5 w-6/12 rounded-full bg-amber-300/70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative overflow-hidden rounded-[2rem] border border-blue-300/25 bg-slate-950/90 p-5 shadow-2xl ring-1 ring-white/10 backdrop-blur">
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_18%,rgba(37,99,235,0.42),transparent_28%),radial-gradient(circle_at_80%_82%,rgba(16,185,129,0.24),transparent_30%),linear-gradient(135deg,rgba(15,23,42,0.1),rgba(30,64,175,0.18))]"></div>
|
||||
<div class="absolute -right-16 -top-16 h-44 w-44 rounded-full border border-blue-300/10"></div>
|
||||
<div class="absolute -bottom-20 -left-16 h-52 w-52 rounded-full border border-emerald-300/10"></div>
|
||||
|
||||
<div class="relative rounded-[1.65rem] border border-white/12 bg-slate-950/80 p-4 shadow-inner">
|
||||
<div class="mb-4 flex items-center justify-between gap-4 border-b border-white/10 pb-4">
|
||||
<div>
|
||||
<div class="text-[0.62rem] font-black uppercase tracking-[0.22em] text-blue-200">Operations console</div>
|
||||
<div class="mt-1 text-lg font-black text-white">Live support control room</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-1.5">
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-emerald-300 shadow-sm shadow-emerald-300/40"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-amber-300 shadow-sm shadow-amber-300/40"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-rose-300 shadow-sm shadow-rose-300/40"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="rounded-2xl border border-blue-300/20 bg-blue-500/10 p-3">
|
||||
<div class="flex items-center justify-between text-blue-100">
|
||||
<i class="fa-solid fa-ticket text-sm"></i>
|
||||
<span class="rounded-full bg-blue-400/20 px-2 py-0.5 text-[0.6rem] font-black">OPEN</span>
|
||||
</div>
|
||||
<div class="mt-4 text-2xl font-black text-white">{{ number_format($openTickets ?? 0) }}</div>
|
||||
<div class="mt-2 h-1.5 rounded-full bg-slate-800"><div class="h-1.5 w-9/12 rounded-full bg-blue-300"></div></div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-emerald-300/20 bg-emerald-500/10 p-3">
|
||||
<div class="flex items-center justify-between text-emerald-100">
|
||||
<i class="fa-solid fa-stopwatch text-sm"></i>
|
||||
<span class="rounded-full bg-emerald-400/20 px-2 py-0.5 text-[0.6rem] font-black">SLA</span>
|
||||
</div>
|
||||
<div class="mt-4 text-2xl font-black text-white">96%</div>
|
||||
<div class="mt-2 h-1.5 rounded-full bg-slate-800"><div class="h-1.5 w-10/12 rounded-full bg-emerald-300"></div></div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-violet-300/20 bg-violet-500/10 p-3">
|
||||
<div class="flex items-center justify-between text-violet-100">
|
||||
<i class="fa-solid fa-code-branch text-sm"></i>
|
||||
<span class="rounded-full bg-violet-400/20 px-2 py-0.5 text-[0.6rem] font-black">GIT</span>
|
||||
</div>
|
||||
<div class="mt-4 text-2xl font-black text-white">{{ number_format($gitCommits ?? 0) }}</div>
|
||||
<div class="mt-2 h-1.5 rounded-full bg-slate-800"><div class="h-1.5 w-7/12 rounded-full bg-violet-300"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 rounded-2xl border border-white/10 bg-white/[0.045] p-4">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-[0.62rem] font-black uppercase tracking-[0.2em] text-blue-100/80">Priority workload</div>
|
||||
<div class="mt-1 text-xs font-semibold text-slate-300">Queue pressure and response activity</div>
|
||||
</div>
|
||||
<div class="rounded-xl bg-slate-900 px-3 py-1.5 font-mono text-xs font-black text-blue-100">{{ now()->format('H:i') }}</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="mb-1 flex justify-between text-[0.65rem] font-bold text-slate-300"><span>New tickets</span><span>72%</span></div>
|
||||
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 w-[72%] rounded-full bg-blue-300 shadow-sm shadow-blue-300/40"></div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1 flex justify-between text-[0.65rem] font-bold text-slate-300"><span>In progress</span><span>58%</span></div>
|
||||
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 w-[58%] rounded-full bg-emerald-300 shadow-sm shadow-emerald-300/40"></div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-1 flex justify-between text-[0.65rem] font-bold text-slate-300"><span>Escalations</span><span>24%</span></div>
|
||||
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 w-[24%] rounded-full bg-rose-300 shadow-sm shadow-rose-300/40"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-4 gap-2">
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/70 p-2 text-center"><div class="text-lg font-black text-white">{{ number_format($closedTickets ?? 0) }}</div><div class="text-[0.58rem] font-bold uppercase tracking-wide text-slate-400">Closed</div></div>
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/70 p-2 text-center"><div class="text-lg font-black text-white">{{ number_format($projectsCount ?? 0) }}</div><div class="text-[0.58rem] font-bold uppercase tracking-wide text-slate-400">Projects</div></div>
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/70 p-2 text-center"><div class="text-lg font-black text-white">{{ number_format($teamsCount ?? 0) }}</div><div class="text-[0.58rem] font-bold uppercase tracking-wide text-slate-400">Teams</div></div>
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/70 p-2 text-center"><div class="text-lg font-black text-white">{{ number_format($templatesCount ?? 0) }}</div><div class="text-[0.58rem] font-bold uppercase tracking-wide text-slate-400">Templates</div></div>
|
||||
</div>
|
||||
<div class="absolute bottom-4 right-12 grid grid-cols-3 gap-2">
|
||||
<div class="rounded-xl border border-blue-300/25 bg-blue-500/15 px-3 py-2 shadow-lg shadow-blue-950/30">
|
||||
<div class="text-[0.6rem] font-black uppercase tracking-widest text-blue-100">Tickets</div>
|
||||
<div class="mt-1 text-lg font-black">{{ number_format($totalTickets ?? 0) }}</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-emerald-300/25 bg-emerald-500/15 px-3 py-2 shadow-lg shadow-emerald-950/20">
|
||||
<div class="text-[0.6rem] font-black uppercase tracking-widest text-emerald-100">SLA</div>
|
||||
<div class="mt-1 text-lg font-black">96%</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-violet-300/25 bg-violet-500/15 px-3 py-2 shadow-lg shadow-violet-950/20">
|
||||
<div class="text-[0.6rem] font-black uppercase tracking-widest text-violet-100">Git</div>
|
||||
<div class="mt-1 text-lg font-black">{{ number_format($gitCommits ?? 0) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-4xl">
|
||||
<p class="text-[0.67rem] font-black uppercase tracking-[0.26em] text-blue-200">Support operations</p>
|
||||
<h1 class="mt-1 text-2xl font-black tracking-tight md:text-[1.7rem]">Helpdesk dashboard</h1>
|
||||
<p class="mt-2 max-w-3xl text-sm leading-5 text-blue-100/85">
|
||||
Track workload, SLA health, project activity, Git commits and support communication from one professional workspace.
|
||||
</p>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<a href="{{ route('helpdesk.tickets.create') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-green">
|
||||
<i class="fa-solid fa-plus" aria-hidden="true"></i>
|
||||
<span>New Ticket</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-blue">
|
||||
<i class="fa-solid fa-ticket" aria-hidden="true"></i>
|
||||
<span>Active tickets</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.kanban') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-amber">
|
||||
<i class="fa-solid fa-table-columns" aria-hidden="true"></i>
|
||||
<span>Kanban</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-violet">
|
||||
<i class="fa-solid fa-gear" aria-hidden="true"></i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user