Joseph.Rawlings
e7b33a2f6c
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
74 lines
3.1 KiB
PHP
74 lines
3.1 KiB
PHP
{{--
|
|
Resource Allocation Card Component - TailServer Theme
|
|
For displaying CPU, Memory, and other resource allocation vs entitlement
|
|
|
|
Usage:
|
|
<x-proxmox::ui.allocation-card
|
|
label="CPU Allocation"
|
|
:percent="45"
|
|
usage-summary="1.8 / 4 vCPU"
|
|
entitlement-label="4 vCPU entitlement"
|
|
description="Live hypervisor usage sampled directly from the cluster."
|
|
gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
|
|
:badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
|
|
/>
|
|
--}}
|
|
|
|
@props([
|
|
'label',
|
|
'percent' => null,
|
|
'usageSummary',
|
|
'entitlementLabel',
|
|
'description' => null,
|
|
'gradient' => 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)',
|
|
'badge' => null,
|
|
'icon' => null,
|
|
'iconColor' => 'text-primary',
|
|
])
|
|
|
|
<div {{ $attributes->class(['group relative border border-neutral/20 rounded-xl p-4 bg-background hover:border-neutral/30 hover:shadow-sm transition-all duration-200']) }}>
|
|
{{-- Subtle gradient overlay on hover --}}
|
|
<div class="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
|
|
|
<div class="relative flex flex-col gap-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="flex items-start gap-3">
|
|
@if($icon)
|
|
<div class="flex-shrink-0 w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<x-dynamic-component :component="$icon" class="size-4.5 {{ $iconColor }}" />
|
|
</div>
|
|
@endif
|
|
<div class="min-w-0">
|
|
<p class="text-[11px] font-semibold tracking-wider uppercase text-base/50">{{ $label }}</p>
|
|
<p class="text-xl font-bold text-base leading-tight mt-0.5">{{ $usageSummary }}</p>
|
|
<p class="text-xs text-base/50 mt-0.5">{{ $entitlementLabel }}</p>
|
|
</div>
|
|
</div>
|
|
@if($badge)
|
|
<span class="flex-shrink-0 text-[10px] font-bold px-2 py-1 rounded-full {{ $badge['class'] ?? 'text-base/60 bg-neutral/10' }}">
|
|
{{ $badge['label'] ?? '' }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if(!is_null($percent))
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-base/50">Usage</span>
|
|
<span class="font-semibold text-base/70">{{ $percent }}%</span>
|
|
</div>
|
|
<div class="h-1.5 rounded-full bg-neutral/10 overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-500 ease-out"
|
|
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if($description)
|
|
<p class="text-[11px] text-base/40 leading-relaxed">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|