|
|
|
@@ -176,102 +176,86 @@
|
|
|
|
|
|
|
|
|
|
<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-[43%] overflow-hidden lg:block" aria-hidden="true">
|
|
|
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_72%_22%,rgba(59,130,246,0.32),transparent_30%),radial-gradient(circle_at_88%_88%,rgba(16,185,129,0.22),transparent_28%)]"></div>
|
|
|
|
|
<div class="absolute right-6 top-5 w-[25rem] rounded-2xl border border-blue-200/20 bg-slate-950/72 p-4 shadow-2xl shadow-blue-950/40 ring-1 ring-white/10 backdrop-blur-sm">
|
|
|
|
|
<div class="flex items-center justify-between border-b border-white/10 pb-3">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="h-2.5 w-36 rounded-full bg-blue-200/90 shadow-[0_0_18px_rgba(147,197,253,.35)]"></div>
|
|
|
|
|
<div class="mt-2 h-1.5 w-24 rounded-full bg-slate-500/80"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
<span class="h-2.5 w-2.5 rounded-full bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,.55)]"></span>
|
|
|
|
|
<span class="h-2.5 w-2.5 rounded-full bg-amber-300 shadow-[0_0_14px_rgba(252,211,77,.45)]"></span>
|
|
|
|
|
<span class="h-2.5 w-2.5 rounded-full bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,.45)]"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mt-4 grid grid-cols-3 gap-3">
|
|
|
|
|
<div class="rounded-xl border border-blue-300/20 bg-blue-500/12 p-3">
|
|
|
|
|
<div class="mb-3 flex items-center gap-2">
|
|
|
|
|
<span class="h-7 w-7 rounded-lg bg-blue-500/30"></span>
|
|
|
|
|
<span class="h-2 w-12 rounded-full bg-blue-200/70"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="h-16 rounded-lg bg-gradient-to-b from-blue-300/28 to-blue-900/20"></div>
|
|
|
|
|
<div class="mt-3 h-1.5 w-full rounded-full bg-blue-200/70"></div>
|
|
|
|
|
<div class="mt-2 h-1.5 w-2/3 rounded-full bg-slate-500/70"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-xl border border-emerald-300/20 bg-emerald-500/10 p-3">
|
|
|
|
|
<div class="mb-3 flex items-center gap-2">
|
|
|
|
|
<span class="h-7 w-7 rounded-lg bg-emerald-500/25"></span>
|
|
|
|
|
<span class="h-2 w-12 rounded-full bg-emerald-100/70"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex h-16 items-end gap-1.5 rounded-lg bg-slate-950/40 p-2">
|
|
|
|
|
<span class="h-5 w-full rounded bg-emerald-300/70"></span>
|
|
|
|
|
<span class="h-8 w-full rounded bg-emerald-300/80"></span>
|
|
|
|
|
<span class="h-11 w-full rounded bg-emerald-300/90"></span>
|
|
|
|
|
<span class="h-7 w-full rounded bg-emerald-300/75"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-3 h-1.5 w-11/12 rounded-full bg-emerald-100/70"></div>
|
|
|
|
|
<div class="mt-2 h-1.5 w-1/2 rounded-full bg-slate-500/70"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-xl border border-violet-300/20 bg-violet-500/10 p-3">
|
|
|
|
|
<div class="mb-3 flex items-center gap-2">
|
|
|
|
|
<span class="h-7 w-7 rounded-lg bg-violet-500/25"></span>
|
|
|
|
|
<span class="h-2 w-12 rounded-full bg-violet-100/70"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="relative h-16 rounded-lg bg-slate-950/40 p-2">
|
|
|
|
|
<div class="absolute bottom-3 left-3 h-8 w-8 rounded-full border-[6px] border-violet-300/80 border-r-violet-900/50"></div>
|
|
|
|
|
<div class="absolute bottom-4 right-3 h-2 w-14 rounded-full bg-violet-200/70"></div>
|
|
|
|
|
<div class="absolute right-3 top-4 h-2 w-10 rounded-full bg-slate-500/70"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-3 h-1.5 w-10/12 rounded-full bg-violet-100/70"></div>
|
|
|
|
|
<div class="mt-2 h-1.5 w-7/12 rounded-full bg-slate-500/70"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mt-4 rounded-xl border border-white/10 bg-slate-900/70 p-3">
|
|
|
|
|
<div class="mb-3 flex items-center justify-between">
|
|
|
|
|
<div class="text-[0.62rem] font-black uppercase tracking-[0.22em] text-blue-100/90">Live support workload</div>
|
|
|
|
|
<div class="rounded-full bg-emerald-400/15 px-2 py-1 text-[0.62rem] font-black text-emerald-100">Healthy</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 w-[78%] rounded-full bg-blue-300"></div></div>
|
|
|
|
|
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 w-[62%] rounded-full bg-emerald-300"></div></div>
|
|
|
|
|
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 w-[43%] rounded-full bg-amber-300"></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="relative overflow-hidden 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="grid items-center gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(26rem,34rem)]">
|
|
|
|
|
<div class="relative z-10 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>
|
|
|
|
|
|
|
|
|
|
<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 class="relative hidden min-h-[8.5rem] lg:block" aria-hidden="true">
|
|
|
|
|
<div class="absolute inset-0 rounded-2xl bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.22),transparent_36%),radial-gradient(circle_at_88%_76%,rgba(16,185,129,0.16),transparent_30%)]"></div>
|
|
|
|
|
<div class="relative h-full rounded-2xl border border-blue-300/15 bg-slate-950/70 p-4 shadow-2xl shadow-blue-950/30 backdrop-blur-sm">
|
|
|
|
|
<div class="flex items-start justify-between gap-4 border-b border-white/10 pb-3">
|
|
|
|
|
<div>
|
|
|
|
|
<p class="text-[0.62rem] font-black uppercase tracking-[0.24em] text-blue-200">Support workflow</p>
|
|
|
|
|
<p class="mt-0.5 text-[0.72rem] text-slate-400">Tickets, replies, files, commits and SLA</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex shrink-0 gap-1.5 pt-1">
|
|
|
|
|
<span class="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.8)]"></span>
|
|
|
|
|
<span class="h-2 w-2 rounded-full bg-amber-400 shadow-[0_0_12px_rgba(251,191,36,0.8)]"></span>
|
|
|
|
|
<span class="h-2 w-2 rounded-full bg-rose-400 shadow-[0_0_12px_rgba(251,113,133,0.8)]"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mt-3 grid grid-cols-4 items-stretch gap-2">
|
|
|
|
|
<div class="rounded-xl border border-blue-400/25 bg-blue-500/10 px-2 py-2 text-center">
|
|
|
|
|
<i class="fa-solid fa-ticket text-sm text-blue-300"></i>
|
|
|
|
|
<p class="mt-1 text-[0.58rem] font-black uppercase tracking-wide text-white">New</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-xl border border-amber-400/25 bg-amber-500/10 px-2 py-2 text-center">
|
|
|
|
|
<i class="fa-solid fa-user-gear text-sm text-amber-300"></i>
|
|
|
|
|
<p class="mt-1 text-[0.58rem] font-black uppercase tracking-wide text-white">Assigned</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-xl border border-violet-400/25 bg-violet-500/10 px-2 py-2 text-center">
|
|
|
|
|
<i class="fa-solid fa-comments text-sm text-violet-300"></i>
|
|
|
|
|
<p class="mt-1 text-[0.58rem] font-black uppercase tracking-wide text-white">Response</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-xl border border-emerald-400/25 bg-emerald-500/10 px-2 py-2 text-center">
|
|
|
|
|
<i class="fa-solid fa-circle-check text-sm text-emerald-300"></i>
|
|
|
|
|
<p class="mt-1 text-[0.58rem] font-black uppercase tracking-wide text-white">Resolved</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mt-2 grid grid-cols-3 gap-2">
|
|
|
|
|
<div class="rounded-lg border border-white/10 bg-slate-900/65 px-2 py-1.5 text-[0.62rem] font-bold text-slate-200">
|
|
|
|
|
<i class="fa-solid fa-paperclip mr-1 text-blue-300"></i> Attachments
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-lg border border-white/10 bg-slate-900/65 px-2 py-1.5 text-[0.62rem] font-bold text-slate-200">
|
|
|
|
|
<i class="fa-solid fa-code-branch mr-1 text-violet-300"></i> Commits
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rounded-lg border border-white/10 bg-slate-900/65 px-2 py-1.5 text-[0.62rem] font-bold text-slate-200">
|
|
|
|
|
<i class="fa-solid fa-stopwatch mr-1 text-emerald-300"></i> SLA
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<livewire:helpdesk.dashboard-widget />
|
|
|
|
|
</div>
|
|
|
|
|