Загрузка...
Адаптивный UI дашборд финансов на Tailwind CSS. Отображает расходы, транзакции, бюджет. Идеально для финтех-приложений и аналитики.
<div
class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] sm:px-6 md:pt-6 lg:pt-12 lg:pl-0 lg:pr-0 z-10 text-neutral-100 font-geist max-w-6xl mr-auto ml-auto pt-6 pr-0 pl-0 relative">
<div class="md:px-6 -mb-8 max-w-7xl mr-auto ml-auto pr-4 pl-4"
style="mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent);">
<div
class="relative w-full overflow-hidden bg-white/[0.04] border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl">
<!-- Topbar -->
<div class="flex border-white/10 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-500/80"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
<span class="h-3 w-3 rounded-full bg-green-500/80"></span>
</div>
<div class="flex items-center gap-2">
<button class="hidden sm:inline-flex rounded-md border border-white/10 bg-white/5 p-1.5 text-neutral-200 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
<button class="hidden sm:inline-flex rounded-md border border-white/10 bg-white/5 p-1.5 text-neutral-200 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle>
</svg>
</button>
<button class="rounded-md px-3 py-1.5 text-xs font-medium text-white bg-sky-600 hover:bg-sky-500">
Sync
</button>
</div>
</div>
<!-- Body -->
<div class="grid grid-cols-1 md:grid-cols-12">
<!-- Sidebar Left -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-r border-white/10 p-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
Accounts
</div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-neutral-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
<div class="space-y-3 text-neutral-300 h-[520px] flex flex-col">
<!-- Filters -->
<div class="flex gap-1">
<button class="px-2 py-1 text-xs text-white rounded bg-sky-600">All</button>
<button class="px-2 py-1 text-xs rounded bg-white/5 text-neutral-400 hover:bg-white/10">Bank</button>
<button class="px-2 py-1 text-xs rounded bg-white/5 text-neutral-400 hover:bg-white/10">Cards</button>
</div>
<!-- Quick Stats -->
<div class="bg-white/5 rounded-lg p-2">
<div class="text-xs text-neutral-400 mb-2">Overview</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-xs text-neutral-400">Total Balance</span>
<span class="text-xs font-semibold text-sky-400">$24,582</span>
</div>
<div class="flex items-center justify-between">
<span class="text-xs text-neutral-400">This Month</span>
<span class="text-xs font-semibold text-sky-400">-$3,247</span>
</div>
<div class="flex items-center justify-between">
<span class="text-xs text-neutral-400">Budget Left</span>
<span class="text-xs font-semibold text-emerald-400">$1,753</span>
</div>
</div>
</div>
<!-- Accounts -->
<div class="flex-1 bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2">
<div class="text-xs text-neutral-400 mb-2">Connected Accounts</div>
<ul class="space-y-1">
<li class="flex items-center gap-2 rounded-md px-2 py-1 bg-sky-500/20">
<div class="w-6 h-6 rounded bg-gradient-to-br from-sky-500 to-sky-600 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Chase Checking</div>
<div class="text-[11px] text-neutral-500">****4829</div>
</div>
<span class="text-xs text-sky-400">$12,450</span>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
<div class="w-6 h-6 rounded bg-gradient-to-br from-purple-500 to-purple-600 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Savings</div>
<div class="text-[11px] text-neutral-500">****7291</div>
</div>
<span class="text-xs text-neutral-400">$8,932</span>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
<div class="w-6 h-6 rounded bg-gradient-to-br from-emerald-500 to-red-500 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Amex Gold</div>
<div class="text-[11px] text-neutral-500">****1046</div>
</div>
<span class="text-xs text-red-400">-$2,184</span>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
<div class="w-6 h-6 rounded bg-gradient-to-br from-cyan-500 to-sky-500 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Visa Platinum</div>
<div class="text-[11px] text-neutral-500">****8362</div>
</div>
<span class="text-xs text-red-400">-$1,816</span>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
<div class="w-6 h-6 rounded bg-gradient-to-br from-sky-500 to-teal-500 grid place-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path
d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"
class="">
</path>
<path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Investment</div>
<div class="text-[11px] text-neutral-500">Fidelity</div>
</div>
<span class="text-xs text-sky-400">$5,200</span>
</li>
</ul>
</div>
<!-- Categories -->
<div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3">
<div class="mb-1 flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="M7 16 17 6" class=""></path>
<path d="M17 16V6h-10" class=""></path>
</svg>
<span class="text-xs font-medium">Categories</span>
</div>
<span class="text-[11px] text-neutral-500">This Month</span>
</div>
<div class="space-y-1">
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-2 h-2 rounded-full bg-sky-500"></div>
<span class="text-neutral-300 flex-1 text-xs">Food & Dining</span>
<div class="text-xs text-neutral-400">$847</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-2 h-2 rounded-full bg-purple-500"></div>
<span class="text-neutral-300 flex-1 text-xs">Shopping</span>
<div class="text-xs text-neutral-400">$623</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
<span class="text-neutral-300 flex-1 text-xs">Transportation</span>
<div class="text-xs text-neutral-400">$312</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-2 h-2 rounded-full bg-cyan-500"></div>
<span class="text-neutral-300 flex-1 text-xs">Entertainment</span>
<div class="text-xs text-neutral-400">$285</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-2 h-2 rounded-full bg-red-500"></div>
<span class="text-neutral-300 flex-1 text-xs">Bills & Utilities</span>
<div class="text-xs text-neutral-400">$1,180</div>
</div>
</div>
</div>
</div>
</aside>
<!-- Canvas -->
<main class="relative md:col-span-6 bg-black/20">
<div class="flex items-center gap-2 border-b border-white/10 px-3 py-2 text-xs text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-sky-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class="">
</path>
<polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
<line x1="12" x2="12" y1="22" y2="12" class=""></line>
</svg>
<span class="">Dashboard</span>
<span class="text-neutral-500">•</span>
<span class="text-neutral-400">November 2024</span>
<div class="ml-auto">
<button class="inline-flex items-center gap-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 hover:bg-white/10 text-[11px]">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="17 8 12 3 7 8" class=""></polyline><line x1="12" x2="12" y1="3" y2="15" class=""></line></svg>
Export
</button>
</div>
</div>
<div class="p-4 sm:p-6">
<!-- Spending Overview -->
<div
class="overflow-hidden rounded-xl mb-4 p-5 bg-gradient-to-br from-black/0 via-black/10 to-black/0 backdrop-blur">
<div class="flex items-start justify-between mb-4">
<div class="">
<div class="text-sm text-neutral-400 mb-1">Total Spending</div>
<div class="text-3xl font-semibold tracking-tight">$3,247</div>
<div class="text-xs mt-1 text-sky-400">↓ 12% vs last month</div>
</div>
<div class="text-right">
<div class="text-sm text-neutral-400 mb-1">Budget</div>
<div class="text-xl font-semibold">$5,000</div>
<div class="text-xs text-neutral-400 mt-1">35% remaining</div>
</div>
</div>
<div class="relative h-3 bg-white/10 rounded-full overflow-hidden">
<div class="absolute inset-y-0 left-0 bg-sky-500 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between text-[11px] text-neutral-400 mt-1">
<span>$0</span><span>$2,500</span><span>$5,000</span>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-2 gap-3 mb-4">
<!-- By Category -->
<div
class="col-span-2 sm:col-span-1 rounded-xl p-4 bg-gradient-to-br from-black/0 via-black/10 to-black/0 backdrop-blur">
<div class="flex items-center justify-between mb-3">
<div class="text-sm font-medium text-neutral-300">By Category</div>
<button class="text-xs text-neutral-500 hover:text-neutral-400 </div> <div class=" space-y-2"="">
<div class="flex items-center gap-2">
<div class="w-full bg-white/5 rounded-full h-1.5"><div class="h-1.5 rounded-full bg-sky-500" style="width: 65%"></div></div>
<span class="text-[11px] text-neutral-400 whitespace-nowrap">Food $847</span>
</div>
<div class="flex items-center gap-2">
<div class="w-full bg-white/5 rounded-full h-1.5"><div class="h-1.5 rounded-full bg-purple-500" style="width: 48%"></div></div>
<span class="text-[11px] text-neutral-400 whitespace-nowrap">Shop $623</span>
</div>
<div class="flex items-center gap-2">
<div class="w-full bg-white/5 rounded-full h-1.5"><div class="h-1.5 rounded-full bg-emerald-500" style="width: 24%"></div></div>
<span class="text-[11px] text-neutral-400 whitespace-nowrap">Trans $312</span>
</div>
<div class="flex items-center gap-2">
<div class="w-full bg-white/5 rounded-full h-1.5"><div class="h-1.5 rounded-full bg-cyan-500" style="width: 22%"></div></div>
<span class="text-[11px] text-neutral-400 whitespace-nowrap">Fun $285</span>
</div>
</button>
</div>
</div>
<!-- Savings Goal -->
<div
class="col-span-2 sm:col-span-1 rounded-xl p-4 bg-gradient-to-br from-black/0 via-black/10 to-black/0 backdrop-blur">
<div class="flex items-center justify-between mb-3">
<div class="text-sm font-medium text-neutral-300">Savings Goal</div>
<span class="text-xs text-sky-400">78%</span>
</div>
<div class="relative w-24 h-24 mx-auto mb-3">
<svg class="-rotate-90" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="8" class="">
</circle>
<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" class="text-sky-400"
stroke-width="8" stroke-dasharray="251.2" stroke-dashoffset="55" stroke-linecap="round">
</circle>
</svg>
<div class="absolute inset-0 grid place-items-center text-center">
<div class="">
<div class="text-lg font-semibold text-white">$7,800</div>
<div class="text-[11px] text-neutral-400">of $10,000</div>
</div>
</div>
</div>
<button class="w-full px-3 py-1.5 text-white text-xs font-medium rounded-lg bg-sky-600 hover:bg-sky-500">
Add Funds
</button>
</div>
</div>
<!-- Recent Transactions -->
<div class="rounded-xl p-4 bg-gradient-to-br from-black/0 via-black/10 to-black/0 backdrop-blur">
<div class="flex items-center justify-between mb-3">
<div class="text-sm font-medium text-neutral-300">Recent Transactions</div>
<button class="text-xs text-neutral-500 hover:text-neutral-400">See All</button>
</div>
<div class="space-y-2">
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5">
<div class="w-8 h-8 rounded-lg grid place-items-center bg-sky-500/20">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path d="M4 5V19a2 2 0 0 0 2 2H20a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2z" class=""></path>
<path d="M16 3v4" class=""></path>
<path d="M8 3v4" class=""></path>
<path d="M4 11h16" class=""></path>
<path d="M11 15h1" class=""></path>
<path d="M12 15v3" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Whole Foods Market</div>
<div class="text-[11px] text-neutral-500">Today, 2:34 PM</div>
</div>
<div class="text-sm font-medium text-red-400">-$67.32</div>
</div>
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5">
<div class="w-8 h-8 rounded-lg grid place-items-center bg-purple-500/20">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-purple-400" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class="">
</path>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Amazon Purchase</div>
<div class="text-[11px] text-neutral-500">Yesterday, 6:12 PM</div>
</div>
<div class="text-sm font-medium text-red-400">-$143.99</div>
</div>
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5">
<div class="w-8 h-8 rounded-lg grid place-items-center bg-sky-500/20">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
class="">
</path>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Paycheck Deposit</div>
<div class="text-[11px] text-neutral-500">Nov 1, 9:00 AM</div>
</div>
<div class="text-sm font-medium text-sky-400">+$3,500.00</div>
</div>
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5">
<div class="w-8 h-8 rounded-lg grid place-items-center bg-emerald-500/20">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-400" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
</svg>
</div>
<div class="flex-1">
<div class="text-sm text-neutral-300">Uber Ride</div>
<div class="text-[11px] text-neutral-500">Oct 31, 11:24 PM</div>
</div>
<div class="text-sm font-medium text-red-400">-$28.50</div>
</div>
</div>
</div>
</div>
</main>
<!-- Sidebar Right -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-l border-white/10 p-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
AI Insights
</div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-neutral-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M8 16H3v5" class=""></path></svg>
</button>
</div>
<div class="space-y-3 h-[480px] overflow-y-auto">
<!-- Smart Tip -->
<div class="rounded-lg p-3 border border-sky-500/20 bg-sky-500/10">
<div class="flex items-center gap-2 mb-2">
<div class="w-6 h-6 rounded-full grid place-items-center bg-sky-500/20">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-sky-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path d="M12 2v20M2 12h20" class=""></path>
</svg>
</div>
<span class="text-xs font-medium text-sky-400">Smart Tip</span>
</div>
<p class="text-xs text-neutral-300 leading-relaxed mb-2">
You're spending 23% less on dining this month. Keep it up to reach your savings goal faster!
</p>
<button class="text-[11px] text-sky-400 hover:text-sky-300">View Details →</button>
</div>
<!-- Upcoming Bills -->
<div class="bg-white/5 rounded-lg p-3">
<div class="mb-2 flex items-center justify-between">
<span class="text-xs font-medium text-neutral-300">Upcoming Bills</span>
<span class="text-[11px] text-neutral-500">Next 7 days</span>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between p-2 bg-white/5 rounded">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
<div class="">
<div class="text-xs text-neutral-300">Rent</div>
<div class="text-[11px] text-neutral-500">Due Nov 1</div>
</div>
</div>
<span class="text-xs font-medium text-neutral-300">$1,850</span>
</div>
<div class="flex items-center justify-between p-2 bg-white/5 rounded">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
<div>
<div class="text-xs text-neutral-300">Electric</div>
<div class="text-[11px] text-neutral-500">Due Nov 5</div>
</div>
</div>
<span class="text-xs font-medium text-neutral-300">$124</span>
</div>
<div class="flex items-center justify-between p-2 bg-white/5 rounded">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-sky-500"></div>
<div>
<div class="text-xs text-neutral-300">Internet</div>
<div class="text-[11px] text-neutral-500">Due Nov 7</div>
</div>
</div>
<span class="text-xs font-medium text-neutral-300">$79</span>
</div>
</div>
</div>
<!-- Budget Alerts -->
<div class="bg-white/5 rounded-lg p-3">
<div class="mb-2 flex items-center justify-between">
<span class="text-xs font-medium text-neutral-300">Budget Alerts</span>
<span class="px-1.5 py-0.5 rounded-full text-[11px] bg-emerald-500/20 text-emerald-400">2 Active</span>
</div>
<div class="space-y-2">
<div class="p-2 border rounded bg-emerald-500/10 border-emerald-500/20">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-emerald-400" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class="">
</path>
<path d="M12 9v4" class=""></path>
<path d="M12 17h.01" class=""></path>
</svg>
<span class="text-xs text-emerald-400">Shopping Budget</span>
</div>
<p class="text-[11px] text-neutral-300">87% used ($623 of $720)</p>
</div>
<div class="p-2 border border-red-500/20 rounded bg-red-500/10">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-red-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10" class=""></circle>
<line x1="12" x2="12" y1="8" y2="12" class=""></line>
<line x1="12" x2="12.01" y1="16" y2="16" class=""></line>
</svg>
<span class="text-xs text-red-400">Dining Out</span>
</div>
<p class="text-[11px] text-neutral-300">Budget exceeded by $97</p>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white/5 rounded-lg p-3">
<div class="mb-2 text-xs font-medium text-neutral-300">Quick Actions</div>
<div class="space-y-2">
<button class="w-full flex items-center gap-2 p-2 bg-white/5 hover:bg-white/10 rounded text-left">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
<span class="text-xs text-neutral-300">Add Transaction</span>
</button>
<button class="w-full flex items-center gap-2 p-2 bg-white/5 hover:bg-white/10 rounded text-left">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-sky-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
<span class="text-xs text-neutral-300">Create Budget</span>
</button>
<button class="w-full flex items-center gap-2 p-2 bg-white/5 hover:bg-white/10 rounded text-left">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20h9" class=""></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" class=""></path></svg>
<span class="text-xs text-neutral-300">Set Savings Goal</span>
</button>
</div>
</div>
<!-- Monthly Summary -->
<div class="bg-white/5 rounded-lg p-3">
<div class="mb-2 text-xs font-medium text-neutral-300">This Month</div>
<div class="space-y-2 text-[11px]">
<div class="flex justify-between">
<span class="text-neutral-400">Income</span><span class="text-sky-400">+$3,500</span>
</div>
<div class="flex justify-between">
<span class="text-neutral-400">Expenses</span><span class="text-red-400">-$3,247</span>
</div>
<div class="flex justify-between">
<span class="text-neutral-400">Savings</span><span class="text-sky-400">+$500</span>
</div>
<div class="h-px bg-white/10 my-1"></div>
<div class="flex justify-between font-medium">
<span class="text-neutral-300">Net</span><span class="text-sky-400">+$753</span>
</div>
</div>
</div>
</div>
<!-- Footer actions -->
<div class="mt-4 flex gap-2">
<button class="flex-1 px-3 py-2 text-white rounded text-xs font-medium bg-sky-600 hover:bg-sky-500">Sync Accounts</button>
<button class="px-3 py-2 bg-white/5 text-neutral-300 rounded text-xs font-medium border border-white/10 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle></svg>
</button>
</div>
</aside>
</div>
</div>
</div>
</div>