sky121113
80436caee7
Some checks failed
star-cloud-deploy-demo / deploy-demo (push) Has been cancelled
108 lines
5.1 KiB
PHP
108 lines
5.1 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="space-y-4 sm:space-y-6">
|
|
<!-- Grid -->
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
<!-- Card -->
|
|
<div class="luxury-card rounded-2xl p-5 animate-luxury-in">
|
|
<div class="flex items-center gap-x-2">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
Total Revenue
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-x-2">
|
|
<h3 class="text-3xl font-bold text-slate-800 dark:text-white">$72,540.00</h3>
|
|
<span class="text-xs font-medium text-cyan-500 bg-cyan-500/10 px-1.5 py-0.5 rounded">+2.5%</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card -->
|
|
<div class="luxury-card rounded-2xl p-5 animate-luxury-in" style="animation-delay: 100ms">
|
|
<div class="flex items-center gap-x-2">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
Active Machines
|
|
</p>
|
|
</div>
|
|
<div class="mt-2">
|
|
<h3 class="text-3xl font-bold text-slate-800 dark:text-white">124 Units</h3>
|
|
</div>
|
|
</div>
|
|
<!-- Card -->
|
|
<div class="luxury-card rounded-2xl p-5 animate-luxury-in" style="animation-delay: 200ms">
|
|
<div class="flex items-center gap-x-2">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
Alerts Pending
|
|
</p>
|
|
</div>
|
|
<div class="mt-2">
|
|
<h3 class="text-3xl font-bold text-rose-500">12 Signals</h3>
|
|
</div>
|
|
</div>
|
|
<!-- Card -->
|
|
<div class="luxury-card rounded-2xl p-5 animate-luxury-in" style="animation-delay: 300ms">
|
|
<div class="flex items-center gap-x-2">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
Member Growth
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 flex items-baseline gap-x-2">
|
|
<h3 class="text-3xl font-bold text-slate-800 dark:text-white">2,840</h3>
|
|
<span class="text-xs font-medium text-emerald-500">↑ 12%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-6">
|
|
<!-- Chart Column -->
|
|
<div class="lg:col-span-2 luxury-card rounded-3xl p-6 animate-luxury-in" style="animation-delay: 400ms">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-800 dark:text-white">Revenue Performance</h2>
|
|
<p class="text-sm text-slate-400">Daily revenue insights across all regions</p>
|
|
</div>
|
|
<select class="bg-slate-50 dark:bg-slate-800/50 border-0 text-sm font-medium rounded-lg focus:ring-0">
|
|
<option>Last 7 Days</option>
|
|
<option>Last 30 Days</option>
|
|
</select>
|
|
</div>
|
|
<div class="h-[300px] flex items-center justify-center border-2 border-dashed border-slate-100 dark:border-slate-800 rounded-2xl">
|
|
<span class="text-slate-300 dark:text-slate-700 font-medium">Chart Visualization Placeholder</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Activity -->
|
|
<div class="luxury-card rounded-3xl p-6 animate-luxury-in" style="animation-delay: 500ms">
|
|
<h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6">Live Activity</h2>
|
|
<div class="space-y-6">
|
|
<div class="relative pl-6 before:absolute before:left-0 before:top-1 before:bottom-0 before:w-0.5 before:bg-slate-100 dark:before:bg-slate-800">
|
|
<div class="absolute left-[-4px] top-0 w-2.5 h-2.5 rounded-full bg-cyan-500 border-2 border-white dark:border-[#1e293b]"></div>
|
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-200">#MAC-402 Transaction Successful</p>
|
|
<p class="text-xs text-slate-400">Just now • Taipei Sector</p>
|
|
</div>
|
|
<div class="relative pl-6 before:absolute before:left-0 before:top-1 before:bottom-0 before:w-0.5 before:bg-slate-100 dark:before:bg-slate-800">
|
|
<div class="absolute left-[-4px] top-0 w-2.5 h-2.5 rounded-full bg-rose-500 border-2 border-white dark:border-[#1e293b]"></div>
|
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-200">#MAC-882 Motor Error Detail</p>
|
|
<p class="text-xs text-slate-400">2 mins ago • Taichung Sector</p>
|
|
</div>
|
|
<div class="relative pl-6">
|
|
<div class="absolute left-[-4px] top-0 w-2.5 h-2.5 rounded-full bg-slate-300 border-2 border-white dark:border-[#1e293b]"></div>
|
|
<p class="text-sm font-bold text-slate-700 dark:text-slate-200">Maintenance Schedule Updated</p>
|
|
<p class="text-xs text-slate-400">15 mins ago • System System</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-8 py-3 text-sm font-bold text-slate-500 hover:text-cyan-500 transition-colors">VIEW ALL LOGS →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
window.addEventListener('load', () => {
|
|
// Here you would initialize charts using ApexCharts or similar,
|
|
// as Preline examples often use ApexCharts.
|
|
// For now, placeholders are sufficient.
|
|
});
|
|
</script>
|
|
@endsection
|