From c540ec2815bdbbe06d30754010dbed99cffbadda Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Wed, 24 Jun 2026 11:15:18 +0100
Subject: [PATCH] design updates

---
 .../Helpdesk/Resources/views/index.blade.php  | 166 +++++--------
 .../views/livewire/dashboard-widget.blade.php | 220 ++++++++++--------
 Modules/Helpdesk/changelog.yaml               |  17 ++
 Modules/Helpdesk/module.json                  |   2 +-
 4 files changed, 209 insertions(+), 196 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/index.blade.php b/Modules/Helpdesk/Resources/views/index.blade.php
index 64f43cad..aa11755d 100644
--- a/Modules/Helpdesk/Resources/views/index.blade.php
+++ b/Modules/Helpdesk/Resources/views/index.blade.php
@@ -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>
diff --git a/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php b/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php
index dfb972c5..efe45469 100644
--- a/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php
@@ -1,112 +1,150 @@
-<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 class="space-y-5" dusk="helpdesk-dashboard-widget">
+    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <div class="rounded-2xl border border-blue-400/20 bg-gradient-to-br from-slate-950 to-blue-950/40 p-4 shadow-sm ring-1 ring-white/5">
+            <div class="flex items-center justify-between gap-3">
+                <div>
+                    <div class="text-xs font-black uppercase tracking-[0.18em] text-blue-200/80">Total tickets</div>
+                    <div class="mt-2 text-3xl font-black text-white">{{ $totalCount }}</div>
+                </div>
+                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/20 text-blue-200 ring-1 ring-blue-300/20">
+                    <i class="fa-solid fa-ticket" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div class="mt-4 h-1.5 rounded-full bg-slate-800">
+                <div class="h-1.5 rounded-full bg-blue-400" 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 class="rounded-2xl border border-blue-400/20 bg-gradient-to-br from-slate-950 to-blue-950/40 p-4 shadow-sm ring-1 ring-white/5">
+            <div class="flex items-center justify-between gap-3">
+                <div>
+                    <div class="text-xs font-black uppercase tracking-[0.18em] text-blue-200/80">Open tickets</div>
+                    <div class="mt-2 text-3xl font-black text-blue-200">{{ $openCount }}</div>
+                </div>
+                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/20 text-blue-200 ring-1 ring-blue-300/20">
+                    <i class="fa-solid fa-inbox" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div class="mt-4 h-1.5 rounded-full bg-slate-800">
+                <div class="h-1.5 rounded-full bg-blue-400" 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 class="rounded-2xl border border-emerald-400/20 bg-gradient-to-br from-slate-950 to-emerald-950/30 p-4 shadow-sm ring-1 ring-white/5">
+            <div class="flex items-center justify-between gap-3">
+                <div>
+                    <div class="text-xs font-black uppercase tracking-[0.18em] text-emerald-200/80">Closed tickets</div>
+                    <div class="mt-2 text-3xl font-black text-emerald-200">{{ $closedCount }}</div>
+                </div>
+                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500/20 text-emerald-200 ring-1 ring-emerald-300/20">
+                    <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div class="mt-4 h-1.5 rounded-full bg-slate-800">
+                <div class="h-1.5 rounded-full bg-emerald-400" 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 class="rounded-2xl border border-rose-400/20 bg-gradient-to-br from-slate-950 to-rose-950/25 p-4 shadow-sm ring-1 ring-white/5">
+            <div class="flex items-center justify-between gap-3">
+                <div>
+                    <div class="text-xs font-black uppercase tracking-[0.18em] text-rose-200/80">High priority</div>
+                    <div class="mt-2 text-3xl font-black text-rose-200">{{ $criticalCount }}</div>
+                </div>
+                <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-500/20 text-rose-200 ring-1 ring-rose-300/20">
+                    <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+                </div>
+            </div>
+            <div class="mt-4 text-xs font-semibold text-slate-400">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 class="grid gap-5 xl:grid-cols-[minmax(0,2fr)_minmax(22rem,1fr)]">
+        <div class="rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 via-slate-950 to-blue-950/20 shadow-sm ring-1 ring-white/5">
+            <div class="flex items-center justify-between border-b border-white/10 px-5 py-4">
+                <div class="flex items-center gap-3">
+                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 text-blue-200 ring-1 ring-blue-300/20">
+                        <i class="fa-solid fa-list-check" aria-hidden="true"></i>
+                    </span>
+                    <div>
+                        <h2 class="text-lg font-black text-white">Recent tickets</h2>
+                        <p class="text-sm text-slate-400">Latest support activity.</p>
+                    </div>
                 </div>
-                <flux:badge color="emerald">{{ $closedPercent }}% closed</flux:badge>
+                <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-blue">View all tickets</a>
             </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>
+            <div class="divide-y divide-white/10">
+                @forelse ($recentTickets as $ticket)
+                    <a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate class="grid gap-3 px-5 py-4 transition hover:bg-blue-500/10 sm:grid-cols-[8rem_minmax(0,1fr)_9rem_7rem] sm:items-center">
+                        <div class="flex items-center gap-3 text-sm font-semibold text-slate-300">
+                            <span class="h-2 w-2 rounded-full bg-blue-400"></span>
+                            <span>{{ $ticket->reference }}</span>
+                        </div>
+                        <div class="min-w-0">
+                            <div class="truncate font-black text-white">{{ $ticket->subject }}</div>
+                            <div class="mt-1 text-xs text-slate-400">{{ $ticket->status->name }} · {{ optional($ticket->last_activity_at)->format('d M Y H:i') }}</div>
+                        </div>
+                        <div>
+                            <x-helpdesk::colour-badge :color="$ticket->priority->color">
+                                {{ $ticket->priority->name }}
+                            </x-helpdesk::colour-badge>
+                        </div>
+                        <div class="text-sm font-semibold text-slate-400 sm:text-right">{{ optional($ticket->last_activity_at)->diffForHumans() }}</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 commits tracked yet.</div>
+                    <div class="px-5 py-8 text-center text-sm text-slate-400">No helpdesk tickets 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 class="space-y-5">
+            <div class="rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 to-slate-900 p-5 shadow-sm ring-1 ring-white/5">
+                <div class="mb-5 flex items-center justify-between">
+                    <div>
+                        <h2 class="text-lg font-black text-white">SLA overview</h2>
+                        <p class="text-sm text-slate-400">Closure rate and open workload.</p>
+                    </div>
+                    <span class="rounded-xl bg-emerald-500/15 px-3 py-1.5 text-sm font-black text-emerald-200 ring-1 ring-emerald-300/20">{{ $closedPercent }}% closed</span>
+                </div>
+
+                <div class="grid gap-5 sm:grid-cols-[9rem_minmax(0,1fr)] sm:items-center">
+                    <div class="relative mx-auto flex h-32 w-32 items-center justify-center rounded-full bg-slate-900 ring-8 ring-emerald-400/20">
+                        <div class="absolute inset-2 rounded-full border-8 border-emerald-400" style="clip-path: polygon(0 0, {{ max($closedPercent, 8) }}% 0, {{ max($closedPercent, 8) }}% 100%, 0 100%);"></div>
+                        <div class="relative text-center">
+                            <div class="text-3xl font-black text-white">{{ $closedPercent }}%</div>
+                            <div class="text-xs font-bold text-slate-400">closed</div>
+                        </div>
+                    </div>
+                    <div class="space-y-4">
+                        <div>
+                            <div class="mb-2 flex justify-between text-sm font-semibold text-slate-300"><span>Closed</span><span>{{ $closedPercent }}%</span></div>
+                            <div class="h-2 rounded-full bg-slate-800"><div class="h-2 rounded-full bg-emerald-400" style="width: {{ $closedPercent }}%"></div></div>
+                        </div>
+                        <div>
+                            <div class="mb-2 flex justify-between text-sm font-semibold text-slate-300"><span>Open</span><span>{{ $openPercent }}%</span></div>
+                            <div class="h-2 rounded-full bg-slate-800"><div class="h-2 rounded-full bg-blue-400" style="width: {{ $openPercent }}%"></div></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 to-slate-900 p-5 shadow-sm ring-1 ring-white/5">
+                <div class="mb-4 flex items-center justify-between">
+                    <h2 class="text-lg font-black 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-white/10 bg-white/[0.03] p-3">
+                            <div class="font-mono text-xs text-slate-500">{{ $commit->short_hash }} · {{ $commit->repository?->name }}</div>
+                            <div class="mt-1 truncate text-sm font-semibold text-slate-100">{{ $commit->message }}</div>
+                        </div>
+                    @empty
+                        <div class="rounded-xl border border-dashed border-slate-700 p-4 text-center text-sm text-slate-500">No commits tracked yet.</div>
+                    @endforelse
+                </div>
             </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>
-                        <x-helpdesk::colour-badge :color="$ticket->priority->color">
-                            {{ $ticket->priority->name }}
-                        </x-helpdesk::colour-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>
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index 12bd36f9..b49ba539 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -350,3 +350,20 @@
     - 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.
+
+- version: 1.10.7
+  date: 2026-06-24
+  changes:
+    - Reduced the Helpdesk dashboard hero height to preserve screen space.
+    - Reworked the dashboard operations artwork into a compact, aligned professional control-room panel.
+
+- version: 1.10.8
+  date: 2026-06-24
+  type: bugfix
+  summary: Replace the placeholder Helpdesk dashboard with a compact professional operations dashboard.
+  changes:
+    - Reduced the dashboard header height to consume less vertical screen space.
+    - Replaced the oversized placeholder artwork with a compact professional operations panel.
+    - Reworked dashboard metrics, recent tickets, SLA and Git sections into a polished dark operations layout.
+    - Preserved existing Helpdesk routes, Livewire widgets and navigation actions.
+    - Preserved append-only changelog history.
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index fe80bcf7..e88aa0bf 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.10.6"
+    "version": "1.10.8"
 }