Загрузка...
Панель аналитики бюджета: дашборд с карточками на Tailwind CSS для отображения статистики финансов, KPI и прогнозов. Идеально для страниц аналитики.
<div
class="md:p-8 flex flex-col bg-zinc-900/50 w-full h-full max-w-2xl border-zinc-800/60 border rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-sm"
style="background: radial-gradient(120% 120% at 80% 0%, rgba(16,185,129,0.08), rgba(0,0,0,0) 60%);">
<!-- Header -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-3">
<div class="p-2 rounded-xl bg-emerald-400/10 border border-emerald-400/20">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-emerald-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
</div>
<h2 class="text-white text-2xl md:text-3xl font-geist font-semibold tracking-tight">Budget Analytics</h2>
</div>
<button class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-zinc-700/60 text-zinc-400 hover:text-zinc-300 hover:border-zinc-600 hover:bg-zinc-800/50 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="1" class=""></circle>
<circle cx="19" cy="12" r="1" class=""></circle>
<circle cx="5" cy="12" r="1" class=""></circle>
</svg>
</button>
</div>
<!-- Enhanced Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 flex-1 mb-8">
<!-- AI Engine Status -->
<div
class="rounded-2xl border border-zinc-800/60 bg-zinc-900/60 backdrop-blur-sm p-6 hover:bg-zinc-800/40 transition-all group/card">
<div class="flex items-center gap-3 text-zinc-400 text-sm font-geist mb-4">
<div class="p-2 rounded-lg bg-emerald-400/10 group-hover/card:bg-emerald-400/15 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" class=""></path>
</svg>
</div>
<span class="tracking-tight uppercase text-xs tracking-[0.12em]">AI Engine</span>
</div>
<div class="flex items-center gap-3 mb-3">
<span class="h-3 w-3 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.8)]"></span>
<span class="text-white text-xl font-geist font-semibold tracking-tight">Active</span>
</div>
<div class="text-zinc-500 text-sm font-geist tracking-tight">Budget optimization running</div>
</div>
<!-- Monthly Savings -->
<div
class="rounded-2xl border border-zinc-800/60 bg-zinc-900/60 backdrop-blur-sm p-6 hover:bg-zinc-800/40 transition-all group/card">
<div class="flex items-center gap-3 text-zinc-400 text-sm font-geist mb-4">
<div class="p-2 rounded-lg bg-blue-400/10 group-hover/card:bg-blue-400/15 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"
class=""></path>
</svg>
</div>
<span class="tracking-tight uppercase text-xs tracking-[0.12em]">Monthly Savings</span>
</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="text-white text-2xl font-geist font-semibold tracking-tight">$1,247</span>
<span class="text-blue-400 text-sm font-geist tracking-tight">this month</span>
</div>
<div class="text-zinc-500 text-sm font-geist tracking-tight">+23% from last month</div>
</div>
<!-- Budget Accuracy -->
<div
class="rounded-2xl border border-zinc-800/60 bg-zinc-900/60 backdrop-blur-sm p-6 hover:bg-zinc-800/40 transition-all group/card">
<div class="flex items-center gap-3 text-zinc-400 text-sm font-geist mb-4">
<div class="p-2 rounded-lg bg-purple-400/10 group-hover/card:bg-purple-400/15 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-purple-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" class=""></path>
<path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" class=""></path>
</svg>
</div>
<span class="tracking-tight uppercase text-xs tracking-[0.12em]">Prediction Accuracy</span>
</div>
<div class="flex items-baseline gap-2 mb-3">
<span class="text-white text-2xl font-mono font-semibold tracking-tight">94.2%</span>
</div>
<div class="text-zinc-500 text-sm font-geist tracking-tight">AI forecast precision</div>
</div>
<!-- Active Users -->
<div
class="rounded-2xl border border-zinc-800/60 bg-zinc-900/60 backdrop-blur-sm p-6 hover:bg-zinc-800/40 transition-all group/card">
<div class="flex items-center gap-3 text-zinc-400 text-sm font-geist mb-4">
<div class="p-2 rounded-lg bg-orange-400/10 group-hover/card:bg-orange-400/15 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
class=""></path>
</svg>
</div>
<span class="tracking-tight uppercase text-xs tracking-[0.12em]">Active Users</span>
</div>
<div class="flex items-center gap-2 mb-3">
<span class="text-white text-xl font-geist font-semibold tracking-tight">2,847</span>
<span class="px-2 py-1 rounded-full bg-emerald-400/20 text-emerald-400 text-xs font-geist tracking-tight">Online</span>
</div>
<div class="text-zinc-500 text-sm font-geist tracking-tight">Managing budgets now</div>
</div>
</div>
<!-- Enhanced Budget Processing Panel -->
<div
class="rounded-2xl border border-zinc-800/60 bg-zinc-900/60 backdrop-blur-sm p-6 hover:bg-zinc-800/40 transition-all">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="p-2 rounded-lg bg-zinc-800/60 border border-zinc-700/40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-zinc-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l-1-3m1 3l-1-3m-9-1.5h5.25"
class=""></path>
</svg>
</div>
<div class="">
<div class="text-zinc-300 text-lg font-geist font-semibold tracking-tight">budget-analyzer-pro</div>
<div class="text-zinc-500 text-sm font-geist tracking-tight">ML Instance ml-2c4g-budgets</div>
</div>
</div>
<button class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-zinc-700/60 text-zinc-400 hover:text-zinc-300 hover:border-zinc-600 hover:bg-zinc-800/50 transition-all">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="1" class=""></circle>
<circle cx="19" cy="12" r="1" class=""></circle>
<circle cx="5" cy="12" r="1" class=""></circle>
</svg>
</button>
</div>
<div class="h-px bg-zinc-800/60 mb-6"></div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3 text-zinc-400 text-sm font-geist">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="1.5">
<path
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
class=""></path>
</svg>
<span class="uppercase tracking-[0.12em]">AI Processing Load</span>
</div>
<div class="flex items-center gap-3">
<div class="text-lg font-geist font-semibold tracking-tight text-emerald-400">65%</div>
<div
class="px-3 py-1 rounded-full bg-emerald-400/20 text-emerald-400 text-xs font-geist tracking-tight border border-emerald-400/30">
Optimal</div>
</div>
</div>
<!-- Enhanced Load Bars -->
<div class="flex items-end justify-center gap-1.5 mb-6 px-4">
<!-- Optimal Range (Green) -->
<span class="h-8 w-2.5 rounded-full bg-emerald-400/90 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/90 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/90 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/90 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/90 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/80 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/80 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/80 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/70 shadow-sm hover:bg-emerald-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-emerald-400/70 shadow-sm hover:bg-emerald-400 transition-all"></span>
<!-- Moderate Load (Yellow-Green) -->
<span class="h-8 w-2.5 rounded-full bg-lime-400/90 shadow-sm hover:bg-lime-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-lime-400/90 shadow-sm hover:bg-lime-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-yellow-400/80 shadow-sm hover:bg-yellow-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-yellow-400/80 shadow-sm hover:bg-yellow-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-amber-400/80 shadow-sm hover:bg-amber-400 transition-all"></span>
<!-- Current Processing -->
<span class="h-8 w-2.5 rounded-full bg-blue-400/90 shadow-sm hover:bg-blue-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-blue-400/90 shadow-sm hover:bg-blue-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-blue-400/80 shadow-sm hover:bg-blue-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-blue-400/80 shadow-sm hover:bg-blue-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-blue-400/80 shadow-sm hover:bg-blue-400 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-blue-400/50 shadow-sm hover:bg-blue-400 transition-all"></span>
<!-- Available Capacity -->
<span class="h-8 w-2.5 rounded-full bg-zinc-700/60 hover:bg-zinc-600 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-zinc-700/60 hover:bg-zinc-600 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-zinc-700/60 hover:bg-zinc-600 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-zinc-700/60 hover:bg-zinc-600 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-zinc-700/60 hover:bg-zinc-600 transition-all"></span>
<span class="h-8 w-2.5 rounded-full bg-zinc-700/60 hover:bg-zinc-600 transition-all"></span>
</div>
<div class="flex items-center justify-between">
<div class="text-zinc-500 font-geist text-sm tracking-tight">Processing 1.2K budgets • 8GB ML Cache</div>
<div class="flex items-center gap-3">
<span class="h-2.5 w-2.5 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(16,185,129,0.6)]"></span>
<span class="text-zinc-300 font-geist font-semibold tracking-tight">45ms</span>
</div>
</div>
</div>
</div>