new ataxchments preview code now with proper code
This commit is contained in:
Mark Gregory
@@ -205,45 +205,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative overflow-hidden rounded-3xl border border-white/15 bg-slate-900/75 p-5 shadow-2xl ring-1 ring-blue-400/10 backdrop-blur">
|
||||
<div class="absolute -right-12 -top-12 h-36 w-36 rounded-full bg-blue-500/20 blur-3xl"></div>
|
||||
<div class="absolute -bottom-16 left-8 h-40 w-40 rounded-full bg-emerald-400/10 blur-3xl"></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-2xl border border-white/10 bg-white/[0.06] p-4 shadow-inner">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<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="h-2.5 w-24 rounded-full bg-blue-200/80"></div>
|
||||
<div class="mt-2 h-2 w-16 rounded-full bg-white/25"></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="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 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-2.5">
|
||||
@foreach ([72, 54, 88, 46, 68, 58] as $height)
|
||||
<div class="rounded-xl border border-white/10 bg-slate-800/80 p-2">
|
||||
<div class="rounded-lg bg-blue-400/20" style="height: {{ $height }}px"></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>
|
||||
@endforeach
|
||||
<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 grid gap-3 sm:grid-cols-3">
|
||||
<div class="rounded-xl border border-blue-300/20 bg-blue-500/15 p-3">
|
||||
<div class="h-2 w-10 rounded-full bg-blue-200"></div>
|
||||
<div class="mt-3 h-6 w-14 rounded-lg bg-white/20"></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="rounded-xl border border-emerald-300/20 bg-emerald-500/15 p-3">
|
||||
<div class="h-2 w-10 rounded-full bg-emerald-200"></div>
|
||||
<div class="mt-3 h-6 w-14 rounded-lg bg-white/20"></div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-violet-300/20 bg-violet-500/15 p-3">
|
||||
<div class="h-2 w-10 rounded-full bg-violet-200"></div>
|
||||
<div class="mt-3 h-6 w-14 rounded-lg bg-white/20"></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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,6 +22,49 @@
|
||||
->get();
|
||||
@endphp
|
||||
|
||||
|
||||
<style>
|
||||
[data-helpdesk-sidebar-cards] > div > :first-child {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0 !important;
|
||||
border-radius: .75rem !important;
|
||||
transition: filter .15s ease, transform .15s ease;
|
||||
}
|
||||
|
||||
[data-helpdesk-sidebar-cards] > div > :first-child:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
[data-helpdesk-sidebar-cards] > div > :first-child::after {
|
||||
content: "\f078";
|
||||
float: right;
|
||||
margin-top: -2.15rem;
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: .85rem;
|
||||
font-weight: 900;
|
||||
opacity: .9;
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
|
||||
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :first-child {
|
||||
margin-bottom: 1rem !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :first-child::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
[data-helpdesk-sidebar-cards] > div > :not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :not(:first-child) {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
@@ -45,7 +88,7 @@
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a href="{{ route('helpdesk.index') }}" wire:navigate
|
||||
class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
|
||||
<i class="fa-solid fa-list-check mr-2" aria-hidden="true"></i>
|
||||
<i class="fa-solid fa-gauge-high mr-2" aria-hidden="true"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
@can('update', $ticket)
|
||||
@@ -185,7 +228,7 @@
|
||||
<article
|
||||
class="group/file overflow-hidden rounded-xl border border-zinc-200 bg-white text-xs shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:hover:bg-zinc-900">
|
||||
@if ($attachment->isImage())
|
||||
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}" target="_blank"
|
||||
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}"
|
||||
class="block aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-900">
|
||||
<img src="{{ route('helpdesk.attachments.preview', $attachment->id) }}" alt="{{ $attachment->displayName() }}"
|
||||
class="h-full w-full object-cover transition group-hover/file:scale-[1.02]">
|
||||
@@ -211,7 +254,7 @@
|
||||
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
@if ($attachment->canPreview())
|
||||
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}" target="_blank"
|
||||
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}"
|
||||
class="inline-flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-green-700">
|
||||
<i class="fa-regular fa-eye" aria-hidden="true"></i>
|
||||
Preview
|
||||
@@ -892,9 +935,16 @@
|
||||
const details = document.createElement('details');
|
||||
details.className = card.className;
|
||||
details.dataset.helpdeskSidebarCard = 'true';
|
||||
details.open = false;
|
||||
|
||||
const summary = document.createElement('summary');
|
||||
summary.className = 'cursor-pointer list-none marker:hidden';
|
||||
header.classList.add('relative', 'pr-10');
|
||||
|
||||
const chevron = document.createElement('span');
|
||||
chevron.className = 'pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-white/80 transition group-open:rotate-180';
|
||||
chevron.innerHTML = '<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>';
|
||||
header.appendChild(chevron);
|
||||
summary.appendChild(header);
|
||||
|
||||
const body = document.createElement('div');
|
||||
|
||||
@@ -337,3 +337,16 @@
|
||||
- Made Helpdesk dashboard hero artwork more polished and less placeholder-like.
|
||||
- Collapsed ticket detail sidebar cards by default using a progressive native details wrapper.
|
||||
- Preserved append-only changelog history.
|
||||
|
||||
|
||||
- version: 1.10.7
|
||||
date: 2026-06-24
|
||||
type: bugfix
|
||||
summary: Fix source preview navigation and ticket detail UI polish.
|
||||
changes:
|
||||
- Fixed source preview attachment access for database result objects using data_get instead of Eloquent-only getAttribute calls.
|
||||
- Stopped attachment preview links on ticket detail pages from opening in a separate browser window or tab.
|
||||
- Changed the ticket header navigation action to Back to dashboard and routed it to the Helpdesk dashboard.
|
||||
- Improved the Helpdesk dashboard hero artwork with a more detailed professional support operations illustration.
|
||||
- Ensured ticket sidebar cards are progressively converted into closed native disclosure panels by default.
|
||||
- Preserved append-only changelog history.
|
||||
|
||||
Reference in New Issue
Block a user