Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: update Proxmox UI components to use TailAdmin styling

Browse Source 
- Changed component styles and classes to align with TailAdmin design patterns.
- Updated color schemes, typography, and layout for consistency across components.
- Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components.
- Enhanced responsiveness and accessibility features in various components.
This commit is contained in:
Joseph.Rawlings
2025-12-17 12:33:10 -05:00
parent 7a089f53e2
commit b4e2923a2c
23 changed files with 364 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
extensions/Servers/Proxmox/views/components/ui/action-button.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Action Toolbar Button Component - shadcn-style
Action Toolbar Button Component - TailAdmin style
Individual button for VM control actions
Usage:
@@ -24,23 +24,23 @@
@php
$variants = [
'default' => 'border bg-background hover:bg-accent hover:text-accent-foreground',
'primary' => 'border border-primary/20 bg-primary/10 text-primary hover:bg-primary/20',
'success' => 'border border-success/20 bg-success/10 text-success hover:bg-success/20',
'warning' => 'border border-warning/20 bg-warning/10 text-warning hover:bg-warning/20',
'danger' => 'border border-danger/20 bg-danger/10 text-danger hover:bg-danger/20',
'default' => 'border border-gray-300 bg-white text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
'primary' => 'border border-brand-200 bg-brand-50 text-brand-600 hover:bg-brand-100 dark:border-brand-800 dark:bg-brand-500/10 dark:text-brand-400 dark:hover:bg-brand-500/20',
'success' => 'border border-success-200 bg-success-50 text-success-600 hover:bg-success-100 dark:border-success-800 dark:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/20',
'warning' => 'border border-warning-200 bg-warning-50 text-warning-600 hover:bg-warning-100 dark:border-warning-800 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20',
'danger' => 'border border-error-200 bg-error-50 text-error-600 hover:bg-error-100 dark:border-error-800 dark:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/20',
];
$sizes = [
'sm' => 'h-8 px-3 text-xs',
'md' => 'h-9 px-4 text-sm',
'lg' => 'h-10 px-5 text-sm',
'sm' => 'h-9 px-3 text-theme-xs',
'md' => 'h-10 px-4 text-theme-sm',
'lg' => 'h-11 px-5 text-theme-sm',
];
$iconSizes = [
'sm' => 'size-3.5',
'md' => 'size-4',
'lg' => 'size-4',
'lg' => 'size-4.5',
];
@endphp
@@ -53,7 +53,7 @@
{{ $attributes->merge([
'disabled' => $disabled || $loading,
])->class([
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-3 focus-visible:ring-brand-500/20',
$variants[$variant] ?? $variants['default'],
$sizes[$size] ?? $sizes['md'],
'pointer-events-none opacity-50' => $disabled,

4
extensions/Servers/Proxmox/views/components/ui/action-toolbar.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Action Toolbar Component - shadcn-inspired
Action Toolbar Component - TailAdmin style
For VM control buttons (Start, Stop, Restart, etc.)
Usage:
@@ -17,7 +17,7 @@
])
<div {{ $attributes->class([
'flex flex-wrap gap-2',
'flex flex-wrap gap-3',
'justify-center' => $centered,
'justify-start' => !$centered,
]) }}>

40
extensions/Servers/Proxmox/views/components/ui/allocation-card.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Resource Allocation Card Component - shadcn-style
Resource Allocation Card Component - TailAdmin style
For displaying CPU, Memory, and other resource allocation vs entitlement
Usage:
@@ -10,7 +10,7 @@
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']"
:badge="['label' => 'Healthy', 'class' => 'text-success-500 bg-success-50 dark:bg-success-500/15']"
/>
--}}
@@ -20,41 +20,41 @@
'usageSummary',
'entitlementLabel',
'description' => null,
'gradient' => 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)',
'gradient' => 'linear-gradient(90deg, #465fff 0%, #8b5cf6 100%)',
'badge' => null,
'icon' => null,
'iconColor' => 'text-primary',
'iconColor' => 'text-brand-500',
])
<div {{ $attributes->class(['rounded-xl border bg-card p-4 shadow-sm transition-colors duration-150 hover:bg-accent/50']) }}>
<div class="flex flex-col gap-3">
<div {{ $attributes->class(['rounded-2xl border border-gray-200 bg-white p-5 transition-colors duration-150 hover:bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03] dark:hover:bg-gray-800/50']) }}>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between gap-3">
<div class="flex items-start gap-3">
<div class="flex items-start gap-3.5">
@if($icon)
<div class="flex-shrink-0 size-9 rounded-lg bg-primary/10 flex items-center justify-center">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
<div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
</div>
@endif
<div class="min-w-0 space-y-0.5">
<p class="text-xs font-medium text-muted-foreground">{{ $label }}</p>
<p class="text-xl font-bold tracking-tight">{{ $usageSummary }}</p>
<p class="text-xs text-muted-foreground">{{ $entitlementLabel }}</p>
<div class="min-w-0 space-y-1">
<p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
<p class="text-xl font-bold text-gray-800 dark:text-white/90">{{ $usageSummary }}</p>
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $entitlementLabel }}</p>
</div>
</div>
@if($badge)
<span class="flex-shrink-0 text-xs font-medium px-2 py-0.5 rounded-full {{ $badge['class'] ?? 'text-muted-foreground bg-muted' }}">
<span class="flex-shrink-0 rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badge['class'] ?? 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-400' }}">
{{ $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-muted-foreground">Usage</span>
<span class="font-medium">{{ $percent }}%</span>
<div class="space-y-2">
<div class="flex items-center justify-between text-theme-xs">
<span class="text-gray-500 dark:text-gray-400">Usage</span>
<span class="font-semibold text-gray-800 dark:text-white/90">{{ $percent }}%</span>
</div>
<div class="h-1.5 rounded-full bg-muted overflow-hidden">
<div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="h-full rounded-full transition-all duration-300"
style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
@@ -64,7 +64,7 @@
@endif
@if($description)
<p class="text-xs text-muted-foreground/70">{{ $description }}</p>
<p class="text-theme-xs text-gray-400 dark:text-gray-500">{{ $description }}</p>
@endif
</div>
</div>

50
extensions/Servers/Proxmox/views/components/ui/confirm-dialog.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Confirm Dialog Component - shadcn-style
Confirm Dialog Component - TailAdmin style
For dangerous actions like delete, stop, etc.
Usage:
@@ -26,21 +26,21 @@
$variants = [
'danger' => [
'icon' => 'ri-error-warning-line',
'iconBg' => 'bg-danger/10',
'iconColor' => 'text-danger',
'buttonClass' => 'bg-danger text-danger-foreground hover:bg-danger/90',
'iconBg' => 'bg-error-50 dark:bg-error-500/10',
'iconColor' => 'text-error-500',
'buttonClass' => 'bg-error-500 text-white shadow-theme-xs hover:bg-error-600',
],
'warning' => [
'icon' => 'ri-alert-line',
'iconBg' => 'bg-warning/10',
'iconColor' => 'text-warning',
'buttonClass' => 'bg-warning text-warning-foreground hover:bg-warning/90',
'iconBg' => 'bg-warning-50 dark:bg-warning-500/10',
'iconColor' => 'text-warning-500',
'buttonClass' => 'bg-warning-500 text-white shadow-theme-xs hover:bg-warning-600',
],
'primary' => [
'icon' => 'ri-question-line',
'iconBg' => 'bg-primary/10',
'iconColor' => 'text-primary',
'buttonClass' => 'bg-primary text-primary-foreground hover:bg-primary/90',
'iconBg' => 'bg-brand-50 dark:bg-brand-500/10',
'iconColor' => 'text-brand-500',
'buttonClass' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
],
];
@@ -52,52 +52,52 @@
x-show="open"
x-cloak
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 overflow-y-auto"
class="fixed inset-0 z-99999 overflow-y-auto"
{{ $attributes->whereDoesntStartWith('wire:click') }}
>
<div class="flex items-center justify-center min-h-screen p-4">
<div class="flex min-h-screen items-center justify-center p-4">
<!-- Backdrop -->
<div
x-show="open"
x-transition:enter="ease-out duration-150"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-100"
x-transition:leave="ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
class="fixed inset-0 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
></div>
<!-- Dialog -->
<div
x-show="open"
x-transition:enter="ease-out duration-150"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-in duration-100"
x-transition:leave="ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="relative rounded-lg border bg-background shadow-lg w-full max-w-md p-6"
class="relative w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900"
>
<div class="flex flex-col items-center text-center">
<!-- Icon -->
<div class="p-3 rounded-full {{ $config['iconBg'] }} mb-4">
<x-dynamic-component :component="$config['icon']" class="size-6 {{ $config['iconColor'] }}" />
<div class="mb-5 flex size-14 items-center justify-center rounded-full {{ $config['iconBg'] }}">
<x-dynamic-component :component="$config['icon']" class="size-7 {{ $config['iconColor'] }}" />
</div>
<!-- Title -->
<h3 class="text-lg font-semibold leading-none tracking-tight mb-2">{{ $title }}</h3>
<h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h3>
<!-- Message -->
<p class="text-sm text-muted-foreground mb-6">{{ $message }}</p>
<p class="mb-6 text-theme-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
<!-- Actions -->
<div class="flex gap-2 w-full">
<div class="flex w-full gap-3">
<button
type="button"
@click="open = false"
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-150 h-9 px-4 py-2 border bg-background hover:bg-accent hover:text-accent-foreground"
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-lg bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition-colors duration-150 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700"
>
{{ $cancelLabel }}
</button>
@@ -105,7 +105,7 @@
type="button"
@click="open = false"
{{ $attributes->whereStartsWith('wire:click') }}
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors duration-150 h-9 px-4 py-2 {{ $config['buttonClass'] }}"
class="flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150 {{ $config['buttonClass'] }}"
>
{{ $confirmLabel }}
</button>

6
extensions/Servers/Proxmox/views/components/ui/copy-button.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Copy Button Component - shadcn-style
Copy Button Component - TailAdmin style
Small inline button to copy text to clipboard
Usage:
@@ -26,10 +26,10 @@
<button
@click="copyToClipboard()"
type="button"
class="text-muted-foreground hover:text-foreground transition-colors duration-150 relative inline-flex items-center justify-center size-4"
class="relative inline-flex size-5 items-center justify-center text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
title="Copy to clipboard"
>
<x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
<x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success-500" />
<x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
</button>
</div>

16
extensions/Servers/Proxmox/views/components/ui/copyable.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Copyable Text Component - shadcn-style
Copyable Text Component - TailAdmin style
Text field with copy to clipboard functionality
Usage:
@@ -14,7 +14,7 @@
<div class="space-y-2">
@if($label)
<label class="text-sm font-medium leading-none">{{ $label }}</label>
<label class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</label>
@endif
<div
x-data="{
@@ -27,29 +27,29 @@
setTimeout(() => this.copied = false, 2000);
}
}"
class="flex items-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm transition-colors duration-150"
class="flex items-center gap-2.5 rounded-lg border border-gray-300 bg-gray-50 px-4 py-2.5 text-theme-sm transition-colors duration-150 dark:border-gray-700 dark:bg-gray-800"
>
@if($masked)
<span class="truncate flex-1 font-mono" x-text="showValue ? copyText : '••••••••••••'"></span>
<span class="flex-1 truncate font-mono text-gray-700 dark:text-gray-300" x-text="showValue ? copyText : '••••••••••••'"></span>
<button
@click="showValue = !showValue"
type="button"
class="text-muted-foreground hover:text-foreground transition-colors duration-150"
class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
:aria-label="showValue ? 'Hide value' : 'Show value'"
>
<x-ri-eye-line x-show="!showValue" class="size-4" />
<x-ri-eye-off-line x-show="showValue" x-cloak class="size-4" />
</button>
@else
<span class="truncate flex-1 font-mono">{{ $value }}</span>
<span class="flex-1 truncate font-mono text-gray-700 dark:text-gray-300">{{ $value }}</span>
@endif
<button
@click="copyToClipboard()"
type="button"
class="text-muted-foreground hover:text-foreground transition-colors duration-150 relative inline-flex items-center justify-center size-4"
class="relative inline-flex size-5 items-center justify-center text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
aria-label="Copy to clipboard"
>
<x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success" />
<x-ri-check-fill x-show="copied" x-transition x-cloak class="absolute size-4 text-success-500" />
<x-ri-file-copy-line x-show="!copied" x-transition class="absolute size-4" />
</button>
</div>

4
extensions/Servers/Proxmox/views/components/ui/dropdown-divider.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Dropdown Divider Component - shadcn-style
Dropdown Divider Component - TailAdmin style
--}}
<div class="-mx-1 my-1 h-px bg-border"></div>
<div class="-mx-2 my-1.5 h-px bg-gray-200 dark:bg-gray-800"></div>

12
extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Dropdown Item Component - shadcn-style
Dropdown Item Component - TailAdmin style
--}}
@props([
@@ -13,9 +13,9 @@
$tag = $href ? 'a' : 'button';
$variantClasses = [
'default' => 'text-foreground hover:bg-accent hover:text-accent-foreground',
'danger' => 'text-danger focus:bg-danger/10 focus:text-danger',
'success' => 'text-success focus:bg-success/10 focus:text-success',
'default' => 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white',
'danger' => 'text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-500/10',
'success' => 'text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-500/10',
];
$variantClass = $variantClasses[$variant] ?? $variantClasses['default'];
@@ -26,13 +26,13 @@
@if($tag === 'button') type="button" @endif
@if($disabled) disabled @endif
{{ $attributes->class([
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-100 w-full',
'relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-lg px-3 py-2 text-theme-sm outline-none transition-colors duration-150',
$variantClass,
'pointer-events-none opacity-50' => $disabled,
]) }}
>
@if($icon)
<x-dynamic-component :component="$icon" class="size-4" />
<x-dynamic-component :component="$icon" class="size-4.5" />
@endif
<span class="flex-1 text-left">{{ $slot }}</span>
</{{ $tag }}>

48
extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Editable Field Component - shadcn-inspired
Editable Field Component - TailAdmin style
A field with display value and edit button that opens a modal
Usage:
@@ -32,14 +32,14 @@
])
<div class="space-y-2" x-data="{ showEditModal: @entangle($attributes->wire('model')->value() ? 'isEditing' . ucfirst($label) : 'editing') }">
<label class="text-sm font-medium">{{ $label }}</label>
<div class="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm">
<span class="truncate flex-1">{{ $value ?? 'Not set' }}</span>
<label class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</label>
<div class="flex items-center gap-2.5 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-theme-sm dark:border-gray-700 dark:bg-gray-800">
<span class="flex-1 truncate text-gray-700 dark:text-gray-300">{{ $value ?? 'Not set' }}</span>
@if($editClick)
<button
wire:click="{{ $editClick }}"
type="button"
class="text-muted-foreground hover:text-foreground transition-colors duration-150"
class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
aria-label="Edit {{ $label }}"
>
<x-ri-edit-line class="size-4" />
@@ -52,15 +52,15 @@
<div
x-cloak
x-show="showEditModal"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
@keydown.escape.window="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
class="fixed inset-0 z-50 bg-black/50"
class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
style="display: none;"
></div>
@@ -68,55 +68,55 @@
<div
x-cloak
x-show="showEditModal"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-99999 flex items-center justify-center p-4"
style="display: none;"
>
<div class="relative rounded-xl border bg-card shadow-lg w-full max-w-xl p-6 space-y-4">
<div class="relative w-full max-w-xl space-y-5 rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900">
<div class="flex items-center justify-between">
<h4 class="text-base font-semibold">Edit {{ $label }}</h4>
<h4 class="text-lg font-semibold text-gray-800 dark:text-white/90">Edit {{ $label }}</h4>
<button
type="button"
class="p-1.5 rounded-lg hover:bg-muted transition-colors duration-150"
class="flex size-9 items-center justify-center rounded-lg text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
aria-label="Close"
>
<x-ri-close-line class="size-4 text-muted-foreground" />
<x-ri-close-line class="size-5" />
</button>
</div>
<div class="space-y-3">
<div class="space-y-4">
<div>
<label class="text-sm font-medium text-muted-foreground">{{ $label }}</label>
<label class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</label>
<input
type="text"
{{ $attributes->whereStartsWith('wire:model') }}
class="w-full mt-1.5 px-3 py-2 rounded-lg border bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
class="mt-2 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-theme-sm shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-500 dark:focus:border-brand-600"
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
/>
</div>
@if($error)
<div class="text-sm text-danger">{{ $error }}</div>
<div class="text-theme-sm text-error-500">{{ $error }}</div>
@endif
@if(isset($hint))
<div class="text-xs text-muted-foreground">{{ $hint }}</div>
<div class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $hint }}</div>
@endif
</div>
<div class="flex justify-end gap-2 pt-2">
<div class="flex justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-800">
@if($cancelClick)
<button
type="button"
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
class="px-4 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors duration-150"
class="rounded-lg bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-gray-300 transition-colors duration-150 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700"
>
Cancel
</button>
@@ -125,7 +125,7 @@
<button
type="button"
wire:click="{{ $saveClick }}"
class="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors duration-150"
class="rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white shadow-theme-xs transition-colors duration-150 hover:bg-brand-600"
>
Save
</button>
@@ -134,7 +134,7 @@
<button
type="button"
wire:click="{{ $applyClick }}"
class="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors duration-150"
class="rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white shadow-theme-xs transition-colors duration-150 hover:bg-brand-600"
>
{{ $applyLabel }}
</button>

30
extensions/Servers/Proxmox/views/components/ui/empty-state.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Empty State Component - shadcn-style
Empty State Component - TailAdmin style
Usage:
<x-proxmox::ui.empty-state title="No servers found" />
@@ -23,21 +23,21 @@
<div
{{ $attributes->class([
'flex flex-col items-center justify-center text-center',
'py-12 px-6' => !$compact,
'py-6 px-4' => $compact,
'px-6 py-12' => !$compact,
'px-4 py-6' => $compact,
]) }}
>
@if($icon)
<div @class([
'flex items-center justify-center rounded-full bg-muted',
'mb-4 size-14' => !$compact,
'mb-3 size-10' => $compact,
'flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800',
'mb-5 size-16' => !$compact,
'mb-3 size-11' => $compact,
])>
<x-dynamic-component
:component="$icon"
@class([
$iconClass ?? 'text-muted-foreground',
'size-7' => !$compact,
$iconClass ?? 'text-gray-400 dark:text-gray-500',
'size-8' => !$compact,
'size-5' => $compact,
])
/>
@@ -45,25 +45,25 @@
@endif
<h3 @class([
'font-semibold tracking-tight',
'text-base' => !$compact,
'text-sm' => $compact,
'font-semibold text-gray-800 dark:text-white/90',
'text-lg' => !$compact,
'text-theme-sm' => $compact,
])>
{{ $title }}
</h3>
@if($description)
<p @class([
'text-muted-foreground max-w-sm',
'mt-1.5 text-sm' => !$compact,
'mt-1 text-xs' => $compact,
'max-w-sm text-gray-500 dark:text-gray-400',
'mt-2 text-theme-sm' => !$compact,
'mt-1 text-theme-xs' => $compact,
])>
{{ $description }}
</p>
@endif
@if($slot->isNotEmpty())
<div @class(['mt-4' => !$compact, 'mt-3' => $compact])>
<div @class(['mt-5' => !$compact, 'mt-3' => $compact])>
{{ $slot }}
</div>
@endif

20
extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Help Modal Trigger Component - shadcn-style
Help Modal Trigger Component - TailAdmin styled
Question mark button that opens an info modal
Usage:
@@ -19,7 +19,7 @@
])
<div class="relative" x-data="{ open: false }" x-cloak {{ $attributes }}>
<button type="button" @click="open = true" class="text-muted-foreground hover:text-foreground transition-colors duration-150">
<button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-150">
<x-ri-question-line class="size-4" />
</button>
@@ -34,7 +34,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-50 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-950/70"
style="display: none;"
></div>
@@ -51,28 +51,28 @@
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;"
>
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-xl border bg-background shadow-lg p-6">
<button @click="open = false" class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-900 p-6">
<button @click="open = false" class="absolute top-4 right-4 rounded-lg p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 transition-colors duration-150">
<x-ri-close-line class="size-4" />
</button>
<div class="flex items-center gap-3 mb-4 pr-8">
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 text-primary" />
<div class="flex items-center justify-center size-9 rounded-xl bg-brand-500/10 dark:bg-brand-500/20">
<x-dynamic-component :component="$icon" class="size-4 text-brand-500" />
</div>
<h3 class="text-lg font-semibold leading-none tracking-tight">
<h3 class="text-lg font-semibold leading-none tracking-tight text-gray-800 dark:text-white/90">
{{ $title }}
</h3>
</div>
@if(isset($description))
<div class="text-sm text-muted-foreground mb-4">
<div class="text-theme-sm text-gray-500 dark:text-gray-400 mb-4">
{{ $description }}
</div>
@endif
@if(isset($details))
<div class="pt-4 mt-4 border-t space-y-2 text-sm text-muted-foreground">
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2 text-theme-sm text-gray-500 dark:text-gray-400">
{{ $details }}
</div>
@endif

46
extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Icon Picker Component - shadcn-inspired
Icon Picker Component - TailAdmin styled
Modal-based icon picker with search and categories
Usage:
@@ -40,15 +40,15 @@
<button
type="button"
@click="open = true"
class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-background hover:bg-muted transition-colors duration-150"
class="flex items-center gap-2 px-3 py-2.5 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 shadow-theme-xs dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 transition-colors duration-150"
>
<template x-if="selected">
<x-dynamic-component x-bind:component="selected" class="size-5 text-primary" />
<x-dynamic-component x-bind:component="selected" class="size-5 text-brand-500" />
</template>
<template x-if="!selected">
<x-ri-image-add-line class="size-5 text-muted-foreground" />
<x-ri-image-add-line class="size-5 text-gray-400 dark:text-gray-500" />
</template>
<span class="text-sm">Select Icon</span>
<span class="text-theme-sm text-gray-700 dark:text-gray-300">Select Icon</span>
</button>
<!-- Modal -->
@@ -69,7 +69,7 @@
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
class="fixed inset-0 bg-black/50"
class="fixed inset-0 bg-gray-900/50 dark:bg-gray-950/70"
></div>
<!-- Modal Content -->
@@ -81,44 +81,44 @@
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="relative rounded-xl border bg-card shadow-lg w-full max-w-2xl max-h-[80vh] overflow-hidden"
class="relative rounded-2xl border border-gray-200 bg-white shadow-theme-lg dark:border-gray-800 dark:bg-gray-900 w-full max-w-2xl max-h-[80vh] overflow-hidden"
>
<!-- Header -->
<div class="p-4 border-b">
<div class="p-4 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-3">
<h3 class="text-lg font-semibold">Select Icon</h3>
<button @click="open = false" class="p-1.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors duration-150">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Select Icon</h3>
<button @click="open = false" class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 transition-colors duration-150">
<x-ri-close-line class="size-5" />
</button>
</div>
<!-- Search -->
<div class="relative">
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400 dark:text-gray-500" />
<input
type="text"
x-model="search"
placeholder="Search icons..."
class="w-full pl-10 pr-4 py-2 rounded-lg border bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 bg-white text-theme-sm text-gray-800 placeholder:text-gray-400 shadow-theme-xs focus:outline-none focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-500"
/>
</div>
</div>
<!-- Categories -->
@if(count($categories) > 0)
<div class="flex gap-2 p-4 border-b overflow-x-auto">
<div class="flex gap-2 p-4 border-b border-gray-200 dark:border-gray-800 overflow-x-auto">
<button
@click="activeCategory = 'all'"
:class="activeCategory === 'all' ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'"
class="px-3 py-1 rounded-full text-xs font-medium transition-colors duration-150 whitespace-nowrap"
:class="activeCategory === 'all' ? 'bg-brand-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
class="px-3 py-1.5 rounded-full text-theme-xs font-medium transition-colors duration-150 whitespace-nowrap"
>
All
</button>
@foreach($categories as $category)
<button
@click="activeCategory = '{{ $category['id'] }}'"
:class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'"
class="px-3 py-1 rounded-full text-xs font-medium transition-colors duration-150 whitespace-nowrap"
:class="activeCategory === '{{ $category['id'] }}' ? 'bg-brand-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'"
class="px-3 py-1.5 rounded-full text-theme-xs font-medium transition-colors duration-150 whitespace-nowrap"
>
{{ $category['name'] }}
</button>
@@ -132,7 +132,7 @@
<template x-for="icon in filteredIcons" :key="icon.name">
<button
@click="selected = icon.component; open = false;"
:class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-muted'"
:class="selected === icon.component ? 'ring-2 ring-brand-500 bg-brand-500/10 dark:bg-brand-500/20' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
class="flex items-center justify-center p-3 rounded-lg transition-colors duration-150"
:title="icon.name"
>
@@ -143,22 +143,22 @@
<!-- Empty State -->
<div x-show="filteredIcons.length === 0" class="py-8 text-center">
<x-ri-search-line class="size-12 mx-auto text-muted-foreground/30 mb-3" />
<p class="text-sm text-muted-foreground">No icons found matching your search.</p>
<x-ri-search-line class="size-12 mx-auto text-gray-300 dark:text-gray-700 mb-3" />
<p class="text-theme-sm text-gray-500 dark:text-gray-400">No icons found matching your search.</p>
</div>
</div>
<!-- Footer -->
<div class="p-4 border-t flex items-center justify-between">
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<button
@click="selected = null"
class="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors duration-150"
class="px-3 py-1.5 text-theme-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-150"
>
Clear Selection
</button>
<button
@click="open = false"
class="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors duration-150"
class="px-4 py-2.5 bg-brand-500 text-white rounded-lg text-theme-sm font-medium shadow-theme-xs hover:bg-brand-600 transition-colors duration-150"
>
Done
</button>

32
extensions/Servers/Proxmox/views/components/ui/index.blade.php
View File

@@ -3,25 +3,25 @@
===================================
This file documents all available UI components for the Proxmox server views.
All components follow shadcn-inspired styling with TailServer theme CSS variables.
All components styled using TailAdmin CSS Framework patterns from:
https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template
Design Patterns:
- Card: rounded-xl border bg-card shadow-sm
- Typography: text-2xl font-bold (values), text-sm font-medium (labels), text-xs text-muted-foreground (descriptions)
TailAdmin Design Patterns:
- Card: rounded-2xl border border-gray-200 bg-white shadow-theme-sm dark:border-gray-800 dark:bg-white/[0.03]
- Typography: text-theme-sm (14px), text-theme-xs (12px)
- Text Colors: text-gray-800 dark:text-white/90 (headings), text-gray-500 dark:text-gray-400 (muted)
- Layout: flex/grid with gap-4/gap-6 spacing
- Transitions: duration-150 for all interactions (speed-optimized)
- Borders: border (uses CSS variable), rounded-lg/rounded-xl
- Backgrounds: bg-card, bg-muted, bg-muted/50 (no gradient overlays)
- Transitions: duration-150 for all interactions
- Shadows: shadow-theme-xs, shadow-theme-sm, shadow-theme-md, shadow-theme-lg
- Borders: rounded-2xl for cards, rounded-lg for inputs/buttons
CSS Variables Used:
- --color-background: Page background color
- --color-neutral: Neutral/gray tones
- --color-primary: Primary accent color (purple)
- --color-base: Text color
- --color-success: Success/positive states
- --color-warning: Warning states
- --color-danger: Error/danger states
- --color-info: Informational states
TailAdmin Color System:
- brand-500: #465fff (primary accent)
- gray-50 through gray-950 (neutral tones)
- success-500: Success/positive states
- warning-500: Warning states
- error-500: Error/danger states
- blue-light-500: Informational states
=== LAYOUT COMPONENTS ===

17
extensions/Servers/Proxmox/views/components/ui/info-row.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Info Row / Key-Value Pair Component - shadcn-style
Info Row / Key-Value Pair Component - TailAdmin style
Usage:
<x-proxmox::ui.info-row label="IP Address" value="192.168.1.1" />
@@ -16,17 +16,18 @@
'muted' => false,
])
<div {{ $attributes->class(['flex items-center justify-between py-2 border-b last:border-b-0']) }}>
<div class="flex items-center gap-2 text-sm text-muted-foreground">
<div {{ $attributes->class(['flex items-center justify-between border-b border-gray-200 py-3 last:border-b-0 dark:border-gray-800']) }}>
<div class="flex items-center gap-2.5 text-theme-sm text-gray-500 dark:text-gray-400">
@if($icon)
<x-dynamic-component :component="$icon" class="size-4" />
@endif
<span>{{ $label }}</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2.5">
<span @class([
'text-sm font-medium',
'text-muted-foreground' => $muted,
'text-theme-sm font-medium',
'text-gray-500 dark:text-gray-400' => $muted,
'text-gray-800 dark:text-white/90' => !$muted,
])>
{{ $value ?? $slot }}
</span>
@@ -39,11 +40,11 @@
copied = true;
setTimeout(() => copied = false, 2000);
"
class="rounded-sm p-1 text-muted-foreground hover:text-foreground transition-colors duration-150"
class="rounded-lg p-1 text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
title="Copy to clipboard"
>
<x-ri-file-copy-line x-show="!copied" class="size-4" />
<x-ri-check-line x-show="copied" x-cloak class="size-4 text-success" />
<x-ri-check-line x-show="copied" x-cloak class="size-4 text-success-500" />
</button>
@endif
</div>

70
extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Network Address Card Component - shadcn-inspired
Network Address Card Component - TailAdmin style
For displaying IP address information with gateway, netmask, and tools
Usage:
@@ -24,53 +24,53 @@
'fromGuestAgent' => false,
])
<div class="rounded-xl border bg-card p-6 shadow-sm mb-4">
<div class="mb-4 rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
{{-- Header --}}
<div class="flex items-center justify-between mb-4">
<h3 class="text-base font-semibold">{{ strtoupper($type) }} Address</h3>
<div class="mb-5 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ strtoupper($type) }} Address</h3>
<x-proxmox::ui.badge variant="default">
{{ $type === 'ipv6' ? 'IPv6' : 'IPv4' }}
</x-proxmox::ui.badge>
</div>
{{-- Address Grid --}}
<div class="grid md:grid-cols-3 gap-4">
<div class="grid gap-5 md:grid-cols-3">
{{-- IP Address --}}
<div class="space-y-1.5">
<span class="text-sm font-medium text-muted-foreground">IP Address</span>
<div class="flex items-center gap-2">
<span class="font-semibold font-mono">{{ $ip }}</span>
<div class="space-y-2">
<span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">IP Address</span>
<div class="flex items-center gap-2.5">
<span class="font-mono font-semibold text-gray-800 dark:text-white/90">{{ $ip }}</span>
<x-proxmox::ui.copy-button :value="$ip" />
</div>
@if($cidr)
<p class="text-xs text-muted-foreground">CIDR: {{ $ip }}{{ $cidr }}</p>
<p class="text-theme-xs text-gray-500 dark:text-gray-400">CIDR: {{ $ip }}{{ $cidr }}</p>
@endif
</div>
{{-- Gateway --}}
<div class="space-y-1.5">
<span class="text-sm font-medium text-muted-foreground">Gateway</span>
<div class="flex items-center gap-2">
<span class="font-semibold font-mono">{{ $gateway ?? 'N/A' }}</span>
<div class="space-y-2">
<span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">Gateway</span>
<div class="flex items-center gap-2.5">
<span class="font-mono font-semibold text-gray-800 dark:text-white/90">{{ $gateway ?? 'N/A' }}</span>
@if($gateway)
<x-proxmox::ui.copy-button :value="$gateway" />
@endif
</div>
<p class="text-xs text-muted-foreground">
<p class="text-theme-xs text-gray-500 dark:text-gray-400">
{{ $fromGuestAgent && !$gateway ? 'Not configured in database' : 'Default route' }}
</p>
</div>
{{-- Netmask --}}
<div class="space-y-1.5">
<span class="text-sm font-medium text-muted-foreground">Subnet Mask</span>
<div class="flex items-center gap-2">
<span class="font-semibold font-mono">{{ $netmask ?? 'N/A' }}</span>
<div class="space-y-2">
<span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">Subnet Mask</span>
<div class="flex items-center gap-2.5">
<span class="font-mono font-semibold text-gray-800 dark:text-white/90">{{ $netmask ?? 'N/A' }}</span>
@if($netmask)
<x-proxmox::ui.copy-button :value="$netmask" />
@endif
</div>
<p class="text-xs text-muted-foreground">
<p class="text-theme-xs text-gray-500 dark:text-gray-400">
{{ $fromGuestAgent && !$netmask ? 'Not configured' : 'Network range' }}
</p>
</div>
@@ -78,7 +78,7 @@
{{-- Network Tools (for public IPs) --}}
@if($isPublic)
<div class="flex gap-2 justify-end mt-4 pt-4 border-t">
<div class="mt-5 flex justify-end gap-3 border-t border-gray-200 pt-5 dark:border-gray-800">
@if($isIpv6)
<x-proxmox::ui.button
variant="outline"
@@ -130,7 +130,7 @@
{{-- Guest Agent Technical Details --}}
@if($guestInterface)
<div
class="border-t pt-4 mt-4"
class="mt-5 border-t border-gray-200 pt-5 dark:border-gray-800"
x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
@@ -139,33 +139,33 @@
});
"
x-show="isAdvancedView"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
>
<h4 class="text-sm font-medium text-muted-foreground mb-3">Technical Details</h4>
<div class="grid md:grid-cols-2 gap-4">
<h4 class="mb-4 text-theme-sm font-medium text-gray-500 dark:text-gray-400">Technical Details</h4>
<div class="grid gap-4 md:grid-cols-2">
@if(isset($guestInterface['hardware-address']))
<div class="space-y-1">
<span class="text-xs font-medium text-muted-foreground">MAC Address</span>
<div class="flex items-center gap-2">
<span class="text-sm font-mono">{{ $guestInterface['hardware-address'] }}</span>
<div class="space-y-1.5">
<span class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">MAC Address</span>
<div class="flex items-center gap-2.5">
<span class="font-mono text-theme-sm text-gray-700 dark:text-gray-300">{{ $guestInterface['hardware-address'] }}</span>
<x-proxmox::ui.copy-button :value="$guestInterface['hardware-address']" />
</div>
</div>
@endif
@if(isset($guestInterface['name']))
<div class="space-y-1">
<span class="text-xs font-medium text-muted-foreground">Interface</span>
<span class="text-sm font-mono block">{{ $guestInterface['name'] }}</span>
<div class="space-y-1.5">
<span class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">Interface</span>
<span class="block font-mono text-theme-sm text-gray-700 dark:text-gray-300">{{ $guestInterface['name'] }}</span>
</div>
@endif
@if(isset($guestInterface['statistics']))
<div class="space-y-1 md:col-span-2">
<span class="text-xs font-medium text-muted-foreground">Statistics</span>
<div class="flex flex-wrap gap-4 text-sm text-muted-foreground">
<div class="space-y-1.5 md:col-span-2">
<span class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">Statistics</span>
<div class="flex flex-wrap gap-4 text-theme-sm text-gray-600 dark:text-gray-400">
@if(isset($guestInterface['statistics']['rx-bytes']))
<span>RX: {{ number_format($guestInterface['statistics']['rx-bytes']) }} bytes</span>
@endif

44
extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Info Notice / Alert Banner Component - shadcn-style
Info Notice / Alert Banner Component - TailAdmin style
Collapsible notice banners for important information
Usage:
@@ -25,28 +25,28 @@
@php
$variants = [
'info' => [
'bg' => 'bg-info/10',
'border' => 'border-info/20',
'bg' => 'bg-blue-light-50 dark:bg-blue-light-500/10',
'border' => 'border-blue-light-200 dark:border-blue-light-800',
'icon' => $icon ?? 'ri-information-line',
'iconColor' => 'text-info',
'iconColor' => 'text-blue-light-500',
],
'warning' => [
'bg' => 'bg-warning/10',
'border' => 'border-warning/20',
'bg' => 'bg-warning-50 dark:bg-warning-500/10',
'border' => 'border-warning-200 dark:border-warning-800',
'icon' => $icon ?? 'ri-alert-line',
'iconColor' => 'text-warning',
'iconColor' => 'text-warning-500',
],
'danger' => [
'bg' => 'bg-danger/10',
'border' => 'border-danger/20',
'bg' => 'bg-error-50 dark:bg-error-500/10',
'border' => 'border-error-200 dark:border-error-800',
'icon' => $icon ?? 'ri-error-warning-line',
'iconColor' => 'text-danger',
'iconColor' => 'text-error-500',
],
'success' => [
'bg' => 'bg-success/10',
'border' => 'border-success/20',
'bg' => 'bg-success-50 dark:bg-success-500/10',
'border' => 'border-success-200 dark:border-success-800',
'icon' => $icon ?? 'ri-checkbox-circle-line',
'iconColor' => 'text-success',
'iconColor' => 'text-success-500',
],
];
@@ -73,24 +73,24 @@
$config['bg'],
'border',
$config['border'],
'rounded-lg p-4',
'rounded-xl p-4',
]) }}
>
<div class="flex items-start gap-3">
<x-dynamic-component :component="$config['icon']" class="size-4 {{ $config['iconColor'] }} flex-shrink-0 mt-0.5" />
<div class="flex-1 min-w-0">
<div class="flex items-start gap-3.5">
<x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0 {{ $config['iconColor'] }}" />
<div class="min-w-0 flex-1">
@if($title)
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium">{{ $title }}</h3>
<div class="mb-2 flex items-center justify-between">
<h3 class="text-theme-sm font-medium text-gray-800 dark:text-white/90">{{ $title }}</h3>
@if($collapsible)
<button @click="toggle()" type="button" class="text-muted-foreground hover:text-foreground transition-colors duration-150">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
<button @click="toggle()" type="button" class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 rotate-180 transition-transform' : 'size-5 transition-transform'" />
</button>
@endif
</div>
@endif
<div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-sm text-muted-foreground">
<div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-theme-sm text-gray-600 dark:text-gray-400">
{{ $slot }}
</div>
</div>

37
extensions/Servers/Proxmox/views/components/ui/progress.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Progress Bar Component - shadcn-style
Progress Bar Component - TailAdmin style
Usage:
<x-proxmox::ui.progress :value="75" />
@@ -23,12 +23,21 @@
$percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
$colorClasses = [
'primary' => 'bg-primary',
'secondary' => 'bg-secondary',
'success' => 'bg-success',
'warning' => 'bg-warning',
'danger' => 'bg-danger',
'info' => 'bg-info',
'primary' => 'bg-brand-500',
'secondary' => 'bg-gray-500',
'success' => 'bg-success-500',
'warning' => 'bg-warning-500',
'danger' => 'bg-error-500',
'info' => 'bg-blue-light-500',
];
$bgClasses = [
'primary' => 'bg-brand-100 dark:bg-brand-500/20',
'secondary' => 'bg-gray-200 dark:bg-gray-700',
'success' => 'bg-success-100 dark:bg-success-500/20',
'warning' => 'bg-warning-100 dark:bg-warning-500/20',
'danger' => 'bg-error-100 dark:bg-error-500/20',
'info' => 'bg-blue-light-100 dark:bg-blue-light-500/20',
];
$sizeClasses = [
@@ -40,32 +49,36 @@
];
$colorClass = $colorClasses[$color] ?? $colorClasses['primary'];
$bgClass = $bgClasses[$color] ?? $bgClasses['primary'];
$sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
// Auto-select color based on value if specified
if ($color === 'auto') {
if ($percent >= 90) {
$colorClass = $colorClasses['danger'];
$bgClass = $bgClasses['danger'];
} elseif ($percent >= 70) {
$colorClass = $colorClasses['warning'];
$bgClass = $bgClasses['warning'];
} else {
$colorClass = $colorClasses['success'];
$bgClass = $bgClasses['success'];
}
}
@endphp
<div {{ $attributes->class(['w-full']) }}>
@if($showLabel || $label)
<div class="flex items-center justify-between text-xs mb-1.5">
<span class="text-muted-foreground font-medium">{{ $label ?? 'Usage' }}</span>
<span class="font-medium">{{ number_format($percent, 1) }}%</span>
<div class="mb-2 flex items-center justify-between text-theme-xs">
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $label ?? 'Usage' }}</span>
<span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
</div>
@endif
<div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full bg-primary/20">
<div class="relative {{ $sizeClass }} w-full overflow-hidden rounded-full {{ $bgClass }}">
<div
@class([
$sizeClass,
'flex-1 w-full transition-all duration-300',
'w-full flex-1 rounded-full transition-all duration-300',
$colorClass => !$gradient,
])
@if($gradient)

50
extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Resource Gauge Component - shadcn-style
Resource Gauge Component - TailAdmin style
Shows a circular or linear gauge for resource usage
Usage:
@@ -34,19 +34,19 @@
}
$colorClasses = [
'primary' => 'text-primary',
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'primary' => 'text-brand-500',
'success' => 'text-success-500',
'warning' => 'text-warning-500',
'danger' => 'text-error-500',
'info' => 'text-blue-light-500',
];
$bgColorClasses = [
'primary' => 'bg-primary',
'success' => 'bg-success',
'warning' => 'bg-warning',
'danger' => 'bg-danger',
'info' => 'bg-info',
'primary' => 'bg-brand-500',
'success' => 'bg-success-500',
'warning' => 'bg-warning-500',
'danger' => 'bg-error-500',
'info' => 'bg-blue-light-500',
];
$textColor = $colorClasses[$color] ?? $colorClasses['primary'];
@@ -59,34 +59,34 @@
};
$badgeClass = match(true) {
$percent >= 100 => 'text-danger bg-danger/15',
$percent >= 85 => 'text-warning bg-warning/15',
default => 'text-success bg-success/15',
$percent >= 100 => 'text-error-600 bg-error-50 dark:bg-error-500/15 dark:text-error-400',
$percent >= 85 => 'text-warning-600 bg-warning-50 dark:bg-warning-500/15 dark:text-warning-400',
default => 'text-success-600 bg-success-50 dark:bg-success-500/15 dark:text-success-400',
};
@endphp
<div {{ $attributes->class(['rounded-xl border bg-card p-4 shadow-sm flex flex-col gap-4']) }}>
<div {{ $attributes->class(['flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]']) }}>
<div class="flex items-start justify-between gap-3">
<div class="space-y-0.5">
<p class="text-xs font-medium text-muted-foreground">{{ $label }}</p>
<p class="text-xl font-bold tracking-tight">
<div class="space-y-1">
<p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
<p class="text-xl font-bold text-gray-800 dark:text-white/90">
@if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
</p>
@if($sublabel)
<p class="text-xs text-muted-foreground">{{ $sublabel }}</p>
<p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $sublabel }}</p>
@endif
</div>
<span class="text-xs font-medium px-2 py-0.5 rounded-full {{ $badgeClass }}">
<span class="rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badgeClass }}">
{{ $badgeLabel }}
</span>
</div>
<div class="space-y-1.5">
<div class="flex items-center justify-between text-xs">
<span class="text-muted-foreground">Usage</span>
<span class="font-medium">{{ number_format($percent, 1) }}%</span>
<div class="space-y-2">
<div class="flex items-center justify-between text-theme-xs">
<span class="text-gray-500 dark:text-gray-400">Usage</span>
<span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
</div>
<div class="h-2 rounded-full bg-primary/20 overflow-hidden">
<div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="h-full rounded-full transition-all duration-300"
@if($gradient)

56
extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Section Header Component - shadcn-style
Section Header Component - TailAdmin style
Usage:
<x-proxmox::ui.section-header title="Section Title" />
@@ -14,7 +14,7 @@
'title',
'subtitle' => null,
'icon' => null,
'iconColor' => 'text-primary',
'iconColor' => 'text-brand-500',
'actions' => null,
'helpText' => null,
'size' => 'lg',
@@ -24,70 +24,70 @@
$titleSizes = [
'sm' => 'text-base font-semibold',
'md' => 'text-lg font-semibold',
'lg' => 'text-xl font-semibold tracking-tight',
'xl' => 'text-2xl font-bold tracking-tight',
'lg' => 'text-xl font-semibold',
'xl' => 'text-2xl font-bold',
];
$titleClass = $titleSizes[$size] ?? $titleSizes['lg'];
@endphp
<div {{ $attributes->class(['flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between']) }}>
<div class="flex items-start gap-3">
<div {{ $attributes->class(['flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between']) }}>
<div class="flex items-start gap-3.5">
@if($icon)
<div class="flex-shrink-0 flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
<div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
</div>
@endif
<div class="space-y-1">
<div class="flex items-center gap-2 min-w-0">
<h2 class="{{ $titleClass }}">{{ $title }}</h2>
<div class="flex min-w-0 items-center gap-2">
<h2 class="{{ $titleClass }} text-gray-800 dark:text-white/90">{{ $title }}</h2>
@if($helpText)
<div class="relative" x-data="{ open: false }" x-cloak>
<button
type="button"
@click="open = true"
class="text-muted-foreground hover:text-foreground transition-colors duration-150"
class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
>
<x-ri-question-line class="size-4" />
<x-ri-question-line class="size-4.5" />
</button>
{{-- Help Modal --}}
<div
x-show="open"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
style="display: none;"
></div>
<div
x-show="open"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-99999 flex items-center justify-center p-4"
style="display: none;"
>
<div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-lg border bg-background shadow-lg p-6">
<button @click="open = false" class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100">
<x-ri-close-line class="size-4" />
<div class="relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900">
<button @click="open = false" class="absolute right-4 top-4 flex size-9 items-center justify-center rounded-lg text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">
<x-ri-close-line class="size-5" />
</button>
<div class="flex items-center gap-3 mb-4 pr-8">
<div class="mb-5 flex items-center gap-3.5 pr-8">
@if($icon)
<div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
<div class="flex size-11 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
</div>
@endif
<h3 class="text-lg font-semibold leading-none tracking-tight">{{ $title }}</h3>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h3>
</div>
<div class="text-sm text-muted-foreground">
<div class="text-theme-sm text-gray-500 dark:text-gray-400">
{{ $helpText }}
</div>
</div>
@@ -96,13 +96,13 @@
@endif
</div>
@if($subtitle)
<p class="text-sm text-muted-foreground">{{ $subtitle }}</p>
<p class="text-theme-sm text-gray-500 dark:text-gray-400">{{ $subtitle }}</p>
@endif
</div>
</div>
@if($actions)
<div class="flex items-center gap-2 flex-shrink-0">
<div class="flex flex-shrink-0 items-center gap-3">
{{ $actions }}
</div>
@endif

50
extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Server Status Indicator Component - shadcn-style
Server Status Indicator Component - TailAdmin style
Usage:
<x-proxmox::ui.server-status status="running" />
@@ -61,33 +61,33 @@
$config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
$colorClasses = [
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'muted' => 'text-muted-foreground',
'success' => 'text-success-600 dark:text-success-400',
'warning' => 'text-warning-600 dark:text-warning-400',
'danger' => 'text-error-600 dark:text-error-400',
'info' => 'text-blue-light-600 dark:text-blue-light-400',
'muted' => 'text-gray-500 dark:text-gray-400',
];
$bgClasses = [
'success' => 'bg-success/10',
'warning' => 'bg-warning/10',
'danger' => 'bg-danger/10',
'info' => 'bg-info/10',
'muted' => 'bg-muted',
'success' => 'bg-success-50 dark:bg-success-500/15',
'warning' => 'bg-warning-50 dark:bg-warning-500/15',
'danger' => 'bg-error-50 dark:bg-error-500/15',
'info' => 'bg-blue-light-50 dark:bg-blue-light-500/15',
'muted' => 'bg-gray-100 dark:bg-gray-800',
];
$dotColorClasses = [
'success' => 'bg-success',
'warning' => 'bg-warning',
'danger' => 'bg-danger',
'info' => 'bg-info',
'muted' => 'bg-muted-foreground',
'success' => 'bg-success-500',
'warning' => 'bg-warning-500',
'danger' => 'bg-error-500',
'info' => 'bg-blue-light-500',
'muted' => 'bg-gray-400 dark:bg-gray-500',
];
$sizeClasses = [
'sm' => 'text-xs px-2 py-1 gap-1.5',
'md' => 'text-sm px-2.5 py-1.5 gap-2',
'lg' => 'text-base px-3 py-2 gap-2',
'sm' => 'text-theme-xs px-2 py-1 gap-1.5',
'md' => 'text-theme-sm px-2.5 py-1.5 gap-2',
'lg' => 'text-base px-3 py-2 gap-2.5',
];
$dotSizes = [
@@ -97,8 +97,8 @@
];
$textSizes = [
'sm' => 'text-xs',
'md' => 'text-sm',
'sm' => 'text-theme-xs',
'md' => 'text-theme-sm',
'lg' => 'text-base',
];
@endphp
@@ -108,7 +108,7 @@
<div {{ $attributes->class(['inline-flex items-center', 'gap-1.5' => $showLabel]) }}>
<span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
@if($config['pulse'])
<span class="absolute inline-flex h-full w-full rounded-full {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }} opacity-60 animate-ping"></span>
<span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
@endif
<span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} {{ $dotColorClasses[$config['color']] ?? $dotColorClasses['muted'] }}"></span>
</span>
@@ -120,7 +120,7 @@
{{-- Full badge variant --}}
<div
{{ $attributes->class([
'inline-flex items-center font-medium rounded-md',
'inline-flex items-center font-medium rounded-full',
$bgClasses[$config['color']] ?? $bgClasses['muted'],
$colorClasses[$config['color']] ?? $colorClasses['muted'],
$sizeClasses[$size] ?? $sizeClasses['md'],
@@ -128,9 +128,9 @@
>
<span class="relative flex {{ $dotSizes[$size] ?? $dotSizes['md'] }}">
@if($config['pulse'])
<span class="absolute inline-flex h-full w-full rounded-full bg-current opacity-50 animate-ping"></span>
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50"></span>
@endif
<span class="relative inline-flex rounded-full {{ $dotSizes[$size] ?? $dotSizes['md'] }} bg-current"></span>
<span class="relative inline-flex rounded-full bg-current {{ $dotSizes[$size] ?? $dotSizes['md'] }}"></span>
</span>
@if($showLabel)
<span>{{ $config['label'] }}</span>

16
extensions/Servers/Proxmox/views/components/ui/spinner.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Spinner Component - shadcn-style
Spinner Component - TailAdmin style
Usage:
<x-proxmox::ui.spinner />
@@ -22,13 +22,13 @@
$colorClasses = [
'current' => 'text-current',
'primary' => 'text-primary',
'secondary' => 'text-secondary',
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'muted' => 'text-muted-foreground',
'primary' => 'text-brand-500',
'secondary' => 'text-gray-500',
'success' => 'text-success-500',
'warning' => 'text-warning-500',
'danger' => 'text-error-500',
'info' => 'text-blue-light-500',
'muted' => 'text-gray-400 dark:text-gray-500',
];
$sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];

38
extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Stat Card Component - shadcn-inspired
Stat Card Component - TailAdmin style
Usage:
<x-proxmox::ui.stat-card value="12" label="CPU %" />
@@ -13,12 +13,12 @@
'suffix' => null,
'prefix' => null,
'icon' => null,
'iconClass' => 'text-muted-foreground',
'iconClass' => 'text-gray-500 dark:text-gray-400',
'status' => null,
'statusText' => null,
'href' => null,
'progress' => null,
'progressColor' => 'bg-primary',
'progressColor' => 'bg-brand-500',
'clickable' => false,
'compact' => false,
'change' => null,
@@ -28,11 +28,11 @@
@php
$tag = $href ? 'a' : 'div';
$statusClasses = [
'success' => 'text-success',
'warning' => 'text-warning',
'danger' => 'text-danger',
'info' => 'text-info',
'muted' => 'text-muted-foreground',
'success' => 'text-success-500',
'warning' => 'text-warning-500',
'danger' => 'text-error-500',
'info' => 'text-blue-light-500',
'muted' => 'text-gray-500 dark:text-gray-400',
];
$statusClass = $statusClasses[$status] ?? '';
@endphp
@@ -40,24 +40,24 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'rounded-xl border bg-card p-6 shadow-sm',
'hover:bg-accent/50 transition-colors duration-150 cursor-pointer' => $href || $clickable,
'rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]',
'transition-colors duration-150 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer' => $href || $clickable,
]) }}
>
<div class="flex items-center justify-between pb-2">
<span class="text-sm font-medium text-muted-foreground">{{ $label }}</span>
<span class="text-theme-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</span>
@if($icon)
<x-dynamic-component :component="$icon" class="size-4 {{ $iconClass }}" />
<x-dynamic-component :component="$icon" class="size-5 {{ $iconClass }}" />
@endif
</div>
<div class="mt-1">
<span @class(['font-bold tracking-tight', 'text-2xl' => !$compact, 'text-xl' => $compact])>
@if($prefix)<span class="text-muted-foreground">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="text-muted-foreground text-base ml-1">{{ $suffix }}</span>@endif
<span @class(['font-bold text-gray-800 dark:text-white/90', 'text-2xl' => !$compact, 'text-xl' => $compact])>
@if($prefix)<span class="text-gray-500 dark:text-gray-400">{{ $prefix }}</span>@endif{{ $value }}@if($suffix)<span class="ml-1 text-base text-gray-500 dark:text-gray-400">{{ $suffix }}</span>@endif
</span>
@if($change !== null || $changeLabel)
<p class="text-xs text-muted-foreground mt-1">
<p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">
@if($change !== null)
<span @class(['font-medium', $change >= 0 ? 'text-success' : 'text-danger'])>
<span @class(['font-medium', $change >= 0 ? 'text-success-500' : 'text-error-500'])>
{{ $change >= 0 ? '+' : '' }}{{ $change }}%
</span>
@endif
@@ -68,14 +68,14 @@
@if($progress !== null)
<div class="mt-4">
<div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-150" style="width: {{ min(100, $progress) }}%"></div>
<div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full {{ $progressColor }} rounded-full transition-all duration-200" style="width: {{ min(100, $progress) }}%"></div>
</div>
</div>
@endif
@if($statusText)
<div class="border-t mt-4 pt-3 text-xs font-medium {{ $statusClass }}">
<div class="mt-4 border-t border-gray-200 pt-3 text-theme-xs font-medium dark:border-gray-800 {{ $statusClass }}">
{{ $statusText }}
</div>
@endif

6
extensions/Servers/Proxmox/views/components/ui/tab-panel.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Tab Panel Component - shadcn-style
Tab Panel Component - TailAdmin style
--}}
@props([
@@ -8,10 +8,10 @@
<div
x-show="activeTab === '{{ $name }}'"
x-transition:enter="transition ease-out duration-150"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
{{ $attributes->class(['ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2']) }}
{{ $attributes->class(['focus:outline-none focus-visible:ring-3 focus-visible:ring-brand-500/20']) }}
>
{{ $slot }}
</div>