feat: Enhance UI components with improved styles and responsiveness across various views
This commit is contained in:
@@ -107,60 +107,30 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6 mb-6">
|
||||
@endif
|
||||
|
||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl animate-fade-in-up"
|
||||
style="animation-delay: 0.1s;">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="bg-primary/10 text-primary p-2 rounded-full inline-flex mb-3">
|
||||
<x-ri-archive-stack-fill class="size-5" />
|
||||
</div>
|
||||
<h3 class="text-sm font-medium text-color-muted mb-1">{{ __('dashboard.active_services') }}</h3>
|
||||
<p class="text-2xl font-bold text-color-base">{{ Auth::user()->services()->where('status',
|
||||
'active')->count() }}</p>
|
||||
</div>
|
||||
<a href="{{ route('services') }}"
|
||||
class="text-primary hover:text-blue-700 transition-colors duration-300">
|
||||
<x-ri-arrow-right-line class="size-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<x-card.stat
|
||||
:label="__('dashboard.active_services')"
|
||||
:value="Auth::user()->services()->where('status', 'active')->count()"
|
||||
icon="ri-archive-stack-fill"
|
||||
:href="route('services')"
|
||||
tone="primary"
|
||||
data-tilt />
|
||||
|
||||
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl animate-fade-in-up"
|
||||
style="animation-delay: 0.2s;">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="bg-orange-500/10 text-orange-500 p-2 rounded-full inline-flex mb-3">
|
||||
<x-ri-receipt-fill class="size-5" />
|
||||
</div>
|
||||
<h3 class="text-sm font-medium text-color-muted mb-1">{{ __('dashboard.unpaid_invoices') }}</h3>
|
||||
<p class="text-2xl font-bold text-color-base">{{ Auth::user()->invoices()->where('status',
|
||||
'pending')->count() }}</p>
|
||||
</div>
|
||||
<a href="{{ route('invoices') }}"
|
||||
class="text-orange-500 hover:text-orange-700 transition-colors duration-300">
|
||||
<x-ri-arrow-right-line class="size-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<x-card.stat
|
||||
:label="__('dashboard.unpaid_invoices')"
|
||||
:value="Auth::user()->invoices()->where('status', 'pending')->count()"
|
||||
icon="ri-receipt-fill"
|
||||
:href="route('invoices')"
|
||||
tone="warning"
|
||||
data-tilt />
|
||||
|
||||
@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-xl p-6 shadow-lg transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl animate-fade-in-up"
|
||||
style="animation-delay: 0.3s;">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="bg-green-500/10 text-green-500 p-2 rounded-full inline-flex mb-3">
|
||||
<x-ri-customer-service-fill class="size-5" />
|
||||
</div>
|
||||
<h3 class="text-sm font-medium text-color-muted mb-1">{{ __('dashboard.open_tickets') }}</h3>
|
||||
<p class="text-2xl font-bold text-color-base">{{ Auth::user()->tickets()->where('status', '!=',
|
||||
'closed')->count() }}</p>
|
||||
</div>
|
||||
<a href="{{ route('tickets') }}"
|
||||
class="text-green-500 hover:text-green-700 transition-colors duration-300">
|
||||
<x-ri-arrow-right-line class="size-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<x-card.stat
|
||||
:label="__('dashboard.open_tickets')"
|
||||
:value="Auth::user()->tickets()->where('status', '!=', 'closed')->count()"
|
||||
icon="ri-customer-service-fill"
|
||||
:href="route('tickets')"
|
||||
tone="info"
|
||||
data-tilt />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -202,13 +172,13 @@
|
||||
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 gap-4">
|
||||
<div class="bg-orange-500/10 text-orange-500 p-3 rounded-full flex-shrink-0 shadow-md">
|
||||
<div class="bg-warning/10 text-warning p-3 rounded-full flex-shrink-0 shadow-md">
|
||||
<x-ri-receipt-fill class="size-6" />
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-color-base">{{ __('dashboard.unpaid_invoices') }}</h2>
|
||||
</div>
|
||||
<span
|
||||
class="bg-orange-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-warning text-white tnum text-lg font-bold rounded-full size-10 flex items-center justify-center shadow-lg transform transition-transform duration-300 hover:scale-110">
|
||||
{{ Auth::user()->invoices()->where('status', 'pending')->count() }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -308,13 +278,13 @@
|
||||
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 gap-3">
|
||||
<div class="bg-green-500/10 text-green-500 p-2 rounded-full flex-shrink-0">
|
||||
<div class="bg-info/10 text-info p-2 rounded-full flex-shrink-0">
|
||||
<x-ri-customer-service-fill class="size-5" />
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-color-base">{{ __('dashboard.open_tickets') }}</h2>
|
||||
</div>
|
||||
<a href="{{ route('tickets.create') }}" wire:navigate
|
||||
class="bg-green-500/10 text-green-500 p-1.5 rounded-lg hover:bg-green-500 hover:text-white transition-colors">
|
||||
class="bg-info/10 text-info p-1.5 rounded-lg hover:bg-info hover:text-white transition-colors">
|
||||
<x-ri-add-line class="size-5" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user