Refactor dashboard layout and enhance quick actions sidebar
This commit is contained in:
@@ -100,7 +100,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Stats Cards - Conditional --}}
|
{{-- Stats Cards - Overview --}}
|
||||||
@if(config('settings.tickets_disabled', false))
|
@if(config('settings.tickets_disabled', false))
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6 mb-6">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6 mb-6">
|
||||||
@else
|
@else
|
||||||
@@ -164,84 +164,14 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl p-6 lg:p-8 mb-8 shadow-xl transform transition-all duration-300 hover:scale-[1.005] animate-fade-in-up"
|
{{-- Main Content Grid --}}
|
||||||
style="animation-delay: 0.4s;">
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
|
||||||
<h2 class="text-2xl font-bold text-color-base mb-6 flex items-center gap-3">
|
|
||||||
<div class="bg-primary/10 text-primary p-2 rounded-full">
|
|
||||||
<x-ri-flashlight-fill class="size-6" />
|
|
||||||
</div>
|
|
||||||
Quick Actions
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
{{-- Left Column: Services & Invoices --}}
|
||||||
|
<div class="lg:col-span-3 space-y-6">
|
||||||
{{-- Buy Server --}}
|
|
||||||
<a href="{{ theme('buy_server_link', 'https://yourserver.com') }}"
|
|
||||||
class="group bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-white p-4 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="bg-white/20 p-2 rounded-full">
|
|
||||||
<x-ri-server-fill class="size-5" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold">Buy Service</h3>
|
|
||||||
<p class="text-sm text-white/80">Hosting</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{{-- Help/Discord --}}
|
|
||||||
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" target="_blank"
|
|
||||||
class="group bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white p-4 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="bg-white/20 p-2 rounded-full">
|
|
||||||
<x-ri-question-answer-fill class="size-5" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold">Get Help</h3>
|
|
||||||
<p class="text-sm text-white/80">Chat Support</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{{-- Profile --}}
|
|
||||||
<a href="account"
|
|
||||||
class="group bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white p-4 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="bg-white/20 p-2 rounded-full">
|
|
||||||
<x-ri-user-settings-fill class="size-5" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold">{{ __('navigation.account') }}</h3>
|
|
||||||
<p class="text-sm text-white/80">Manage Profile</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{{-- Documentation --}}
|
|
||||||
<a href="{{ theme('docs_link', 'https://docs.yourserver.com') }}"
|
|
||||||
class="group bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white p-4 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div class="bg-white/20 p-2 rounded-full">
|
|
||||||
<x-ri-book-open-fill class="size-5" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-semibold">Documentation</h3>
|
|
||||||
<p class="text-sm text-white/80">Get Started</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Bottom Widgets - Conditional --}}
|
|
||||||
@if(config('settings.tickets_disabled', false))
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6 mt-8 mb-8 items-start">
|
|
||||||
@else
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6 mt-8 mb-8 items-start">
|
|
||||||
@endif
|
|
||||||
|
|
||||||
{{-- Active Services --}}
|
{{-- Active Services --}}
|
||||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-xl p-6 lg:p-8 transform transition-all duration-300 hover:scale-[1.005] hover:shadow-2xl animate-fade-in-up"
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-xl p-6 lg:p-8 transform transition-all duration-300 hover:shadow-2xl animate-fade-in-up"
|
||||||
style="animation-delay: 0.5s;">
|
style="animation-delay: 0.5s;">
|
||||||
<div class="flex items-center justify-between mb-6 border-b border-dashed border-neutral/50 pb-4">
|
<div class="flex items-center justify-between mb-6 border-b border-dashed border-neutral/50 pb-4">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
@@ -256,7 +186,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-4 mb-6">
|
<div class="space-y-4 mb-6">
|
||||||
<livewire:services.widget status="active" :limit="3" />
|
<livewire:services.widget status="active" :limit="5" />
|
||||||
</div>
|
</div>
|
||||||
<x-navigation.link
|
<x-navigation.link
|
||||||
class="w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 flex items-center justify-center px-4 py-3 rounded-xl font-medium text-color-base transition-all duration-300 group"
|
class="w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 flex items-center justify-center px-4 py-3 rounded-xl font-medium text-color-base transition-all duration-300 group"
|
||||||
@@ -268,7 +198,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Unpaid Invoices --}}
|
{{-- Unpaid Invoices --}}
|
||||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-xl p-6 lg:p-8 transform transition-all duration-300 hover:scale-[1.005] hover:shadow-2xl animate-fade-in-up"
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-xl p-6 lg:p-8 transform transition-all duration-300 hover:shadow-2xl animate-fade-in-up"
|
||||||
style="animation-delay: 0.6s;">
|
style="animation-delay: 0.6s;">
|
||||||
<div class="flex items-center justify-between mb-6 border-b border-dashed border-neutral/50 pb-4">
|
<div class="flex items-center justify-between mb-6 border-b border-dashed border-neutral/50 pb-4">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
@@ -283,7 +213,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-4 mb-6">
|
<div class="space-y-4 mb-6">
|
||||||
<livewire:invoices.widget :limit="3" />
|
<livewire:invoices.widget :limit="5" />
|
||||||
</div>
|
</div>
|
||||||
<x-navigation.link
|
<x-navigation.link
|
||||||
class="w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 flex items-center justify-center px-4 py-3 rounded-xl font-medium text-color-base transition-all duration-300 group"
|
class="w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 flex items-center justify-center px-4 py-3 rounded-xl font-medium text-color-base transition-all duration-300 group"
|
||||||
@@ -294,44 +224,116 @@
|
|||||||
</x-navigation.link>
|
</x-navigation.link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Open Tickets --}}
|
</div>
|
||||||
|
|
||||||
|
{{-- Right Column: Sidebar (Quick Actions & Tickets) --}}
|
||||||
|
<div class="lg:col-span-1 space-y-6">
|
||||||
|
|
||||||
|
{{-- Quick Actions --}}
|
||||||
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl p-6 shadow-xl animate-fade-in-up"
|
||||||
|
style="animation-delay: 0.4s;">
|
||||||
|
<h2 class="text-xl font-bold text-color-base mb-6 flex items-center gap-3">
|
||||||
|
<div class="bg-primary/10 text-primary p-2 rounded-full">
|
||||||
|
<x-ri-flashlight-fill class="size-5" />
|
||||||
|
</div>
|
||||||
|
Quick Actions
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
{{-- Buy Server --}}
|
||||||
|
<a href="{{ theme('buy_server_link', 'https://yourserver.com') }}"
|
||||||
|
class="group bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-white p-3 rounded-xl shadow-lg transform transition-all duration-300 hover:translate-x-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="bg-white/20 p-1.5 rounded-full">
|
||||||
|
<x-ri-server-fill class="size-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h3 class="font-semibold text-sm">Buy Service</h3>
|
||||||
|
<p class="text-xs text-white/80">Hosting</p>
|
||||||
|
</div>
|
||||||
|
<x-ri-arrow-right-s-line class="size-5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{{-- Help/Discord --}}
|
||||||
|
<a href="{{ theme('help_link', 'https://help.yourserver.com') }}" target="_blank"
|
||||||
|
class="group bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white p-3 rounded-xl shadow-lg transform transition-all duration-300 hover:translate-x-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="bg-white/20 p-1.5 rounded-full">
|
||||||
|
<x-ri-question-answer-fill class="size-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h3 class="font-semibold text-sm">Get Help</h3>
|
||||||
|
<p class="text-xs text-white/80">Support</p>
|
||||||
|
</div>
|
||||||
|
<x-ri-arrow-right-s-line class="size-5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{{-- Profile --}}
|
||||||
|
<a href="account"
|
||||||
|
class="group bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white p-3 rounded-xl shadow-lg transform transition-all duration-300 hover:translate-x-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="bg-white/20 p-1.5 rounded-full">
|
||||||
|
<x-ri-user-settings-fill class="size-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h3 class="font-semibold text-sm">{{ __('navigation.account') }}</h3>
|
||||||
|
<p class="text-xs text-white/80">Profile</p>
|
||||||
|
</div>
|
||||||
|
<x-ri-arrow-right-s-line class="size-5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{{-- Documentation --}}
|
||||||
|
<a href="{{ theme('docs_link', 'https://docs.yourserver.com') }}"
|
||||||
|
class="group bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white p-3 rounded-xl shadow-lg transform transition-all duration-300 hover:translate-x-1">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="bg-white/20 p-1.5 rounded-full">
|
||||||
|
<x-ri-book-open-fill class="size-4" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h3 class="font-semibold text-sm">Docs</h3>
|
||||||
|
<p class="text-xs text-white/80">Learn</p>
|
||||||
|
</div>
|
||||||
|
<x-ri-arrow-right-s-line class="size-5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Open Tickets Widget (Sidebar) --}}
|
||||||
@if(!config('settings.tickets_disabled', false))
|
@if(!config('settings.tickets_disabled', false))
|
||||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-xl p-6 lg:p-8 transform transition-all duration-300 hover:scale-[1.005] hover:shadow-2xl animate-fade-in-up"
|
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-2xl shadow-xl p-6 transform transition-all duration-300 hover:shadow-2xl animate-fade-in-up"
|
||||||
style="animation-delay: 0.7s;">
|
style="animation-delay: 0.7s;">
|
||||||
<div class="flex items-center justify-between mb-6 border-b border-dashed border-neutral/50 pb-4">
|
<div class="flex items-center justify-between mb-6 border-b border-dashed border-neutral/50 pb-4">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-3">
|
||||||
<div class="bg-green-500/10 text-green-500 p-3 rounded-full flex-shrink-0 shadow-md">
|
<div class="bg-green-500/10 text-green-500 p-2 rounded-full flex-shrink-0">
|
||||||
<x-ri-customer-service-fill class="size-6" />
|
<x-ri-customer-service-fill class="size-5" />
|
||||||
</div>
|
</div>
|
||||||
<h2 class="text-2xl font-bold text-color-base">{{ __('dashboard.open_tickets') }}</h2>
|
<h2 class="text-xl font-bold text-color-base">{{ __('dashboard.open_tickets') }}</h2>
|
||||||
<a href="{{ route('tickets.create') }}" wire:navigate
|
|
||||||
class="text-color-muted hover:text-primary ml-2 group">
|
|
||||||
<x-ri-add-circle-fill
|
|
||||||
class="size-7 transform transition-transform duration-300 group-hover:rotate-90" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<span
|
<a href="{{ route('tickets.create') }}" wire:navigate
|
||||||
class="bg-green-500 text-white text-lg font-bold rounded-full size-10 flex items-center justify-center shadow-lg transform transition-transform duration-300 hover:scale-110">
|
class="bg-green-500/10 text-green-500 p-1.5 rounded-lg hover:bg-green-500 hover:text-white transition-colors">
|
||||||
{{ Auth::user()->tickets()->where('status', '!=', 'closed')->count() }}
|
<x-ri-add-line class="size-5" />
|
||||||
</span>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-4 mb-6">
|
<div class="space-y-4 mb-6">
|
||||||
<livewire:tickets.widget />
|
<livewire:tickets.widget :limit="3" />
|
||||||
</div>
|
</div>
|
||||||
<x-navigation.link
|
<x-navigation.link
|
||||||
class="w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 flex items-center justify-center px-4 py-3 rounded-xl font-medium text-color-base transition-all duration-300 group"
|
class="w-full bg-background-tertiary hover:bg-background-tertiary/80 border border-neutral/50 flex items-center justify-center px-4 py-2 rounded-xl text-sm font-medium text-color-base transition-all duration-300 group"
|
||||||
:href="route('tickets')">
|
:href="route('tickets')">
|
||||||
{{ __('dashboard.open_tickets') }}
|
{{ __('dashboard.view_all') }}
|
||||||
<x-ri-arrow-right-fill
|
<x-ri-arrow-right-fill
|
||||||
class="size-5 ml-2 transform transition-transform duration-300 group-hover:translate-x-1" />
|
class="size-4 ml-2 transform transition-transform duration-300 group-hover:translate-x-1" />
|
||||||
</x-navigation.link>
|
</x-navigation.link>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Widget --}}
|
|
||||||
|
|
||||||
{!! hook('pages.dashboard') !!}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{!! hook('pages.dashboard') !!}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user