278 lines
13 KiB
PHP
278 lines
13 KiB
PHP
<style>
|
|
.hd-helpdesk-surface .hd-btn,
|
|
.hd-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: .5rem;
|
|
border-radius: .85rem;
|
|
padding: .62rem 1.05rem;
|
|
font-size: .875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 800;
|
|
color: #ffffff !important;
|
|
text-decoration: none !important;
|
|
border: 1px solid rgba(255, 255, 255, .14);
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
|
|
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn:hover,
|
|
.hd-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 16px 34px rgba(0, 0, 0, .30);
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-sm,
|
|
.hd-btn-sm {
|
|
border-radius: .65rem;
|
|
padding: .42rem .78rem;
|
|
font-size: .8125rem;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-blue,
|
|
.hd-btn-blue {
|
|
background: #2563eb !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-blue:hover,
|
|
.hd-btn-blue:hover {
|
|
background: #1d4ed8 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-green,
|
|
.hd-btn-green {
|
|
background: #16a34a !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-green:hover,
|
|
.hd-btn-green:hover {
|
|
background: #15803d !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-amber,
|
|
.hd-btn-amber {
|
|
background: #f59e0b !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-amber:hover,
|
|
.hd-btn-amber:hover {
|
|
background: #d97706 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-red,
|
|
.hd-btn-red {
|
|
background: #dc2626 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-red:hover,
|
|
.hd-btn-red:hover {
|
|
background: #b91c1c !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-violet,
|
|
.hd-btn-violet {
|
|
background: #7c3aed !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-btn-violet:hover,
|
|
.hd-btn-violet:hover {
|
|
background: #6d28d9 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[type="submit"],
|
|
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
|
|
background: #16a34a !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255, 255, 255, .14) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[wire\:click^="reset"],
|
|
.hd-helpdesk-surface button[wire\:target^="reset"] {
|
|
background: #f59e0b !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255, 255, 255, .14) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[wire\:click^="edit"],
|
|
.hd-helpdesk-surface button[wire\:target^="edit"] {
|
|
background: #2563eb !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255, 255, 255, .14) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface button[wire\:click^="delete"],
|
|
.hd-helpdesk-surface button[wire\:target^="delete"] {
|
|
background: #dc2626 !important;
|
|
color: #ffffff !important;
|
|
border-color: rgba(255, 255, 255, .14) !important;
|
|
}
|
|
|
|
.hd-select {
|
|
width: 100%;
|
|
min-height: 3.35rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid #3f3f46 !important;
|
|
background: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
padding: .78rem 3rem .78rem 1rem;
|
|
font-weight: 800;
|
|
outline: none;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 26px rgba(0, 0, 0, .24);
|
|
}
|
|
|
|
.hd-select:focus {
|
|
border-color: #60a5fa !important;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
.helpdesk-ticket-form,
|
|
.helpdesk-ticket-form * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.helpdesk-ticket-form input,
|
|
.helpdesk-ticket-form textarea,
|
|
.helpdesk-ticket-form select,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
|
|
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #f4f4f5 !important;
|
|
border-color: #3f3f46 !important;
|
|
caret-color: #f4f4f5 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.helpdesk-ticket-form input:disabled,
|
|
.helpdesk-ticket-form textarea:disabled,
|
|
.helpdesk-ticket-form select:disabled,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
|
|
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
|
|
.helpdesk-ticket-form [disabled],
|
|
.helpdesk-ticket-form [aria-disabled="true"] {
|
|
background: #09090b !important;
|
|
background-color: #09090b !important;
|
|
color: #a1a1aa !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.helpdesk-ticket-form input:-webkit-autofill,
|
|
.helpdesk-ticket-form input:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form input:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
|
|
.helpdesk-ticket-form select:-webkit-autofill,
|
|
.helpdesk-ticket-form select:-webkit-autofill:hover,
|
|
.helpdesk-ticket-form select:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #f4f4f5 !important;
|
|
box-shadow: 0 0 0 1000px #09090b inset !important;
|
|
transition: background-color 9999s ease-in-out 0s;
|
|
}
|
|
</style>
|
|
|
|
<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>
|
|
</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>
|
|
</div>
|
|
|
|
<livewire:helpdesk.dashboard-widget />
|
|
</div>
|