first commit from hostslim

2026-03-24 21:12:21 +01:00
commit 20fee7784c
252 changed files with 27385 additions and 0 deletions
@@ -0,0 +1,43 @@
+@props(['label', 'value', 'previousValue' => null, 'format' => 'number', 'suffix' => ''])
+
+@php
+    $formatted = match($format) {
+        'duration' => gmdate('i:s', (int) $value),
+        'percent' => $value . '%',
+        default => number_format($value) . $suffix,
+    };
+
+    $delta = null;
+    $deltaClass = '';
+    $deltaIcon = '';
+    if ($previousValue !== null && is_numeric($previousValue)) {
+        if ($previousValue > 0) {
+            $delta = round((($value - $previousValue) / $previousValue) * 100, 1);
+        } elseif ($value > 0) {
+            $delta = 100;
+        }
+
+        if ($delta !== null) {
+            $isNegativeBetter = in_array($format, ['percent']) && str_contains(strtolower($label), 'bounce');
+            $isPositive = $delta > 0;
+            $isGood = $isNegativeBetter ? !$isPositive : $isPositive;
+
+            $deltaClass = $delta == 0
+                ? 'text-gray-500 bg-gray-50'
+                : ($isGood ? 'text-emerald-700 bg-emerald-50' : 'text-red-700 bg-red-50');
+            $deltaIcon = $delta > 0 ? '↑' : ($delta < 0 ? '↓' : '→');
+        }
+    }
+@endphp
+
+<div class="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-sm transition-shadow">
+    <dt class="text-sm font-medium text-gray-500 truncate">{{ $label }}</dt>
+    <dd class="mt-2 flex items-baseline gap-2">
+        <span class="text-2xl font-bold text-gray-900 tracking-tight">{{ $formatted }}</span>
+        @if ($delta !== null)
+            <span class="inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-medium {{ $deltaClass }}">
+                {{ $deltaIcon }} {{ abs($delta) }}%
+            </span>
+        @endif
+    </dd>
+</div>