414 lines
23 KiB
HTML
414 lines
23 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>Reports - Expense Tracker</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
"primary": "#3b82f6",
|
||
|
|
"background-dark": "#0f172a",
|
||
|
|
"card-dark": "#1e293b",
|
||
|
|
"border-dark": "#334155",
|
||
|
|
"text-main": "#f8fafc",
|
||
|
|
"text-muted": "#94a3b8",
|
||
|
|
"accent": "#6366f1",
|
||
|
|
"success": "#10b981",
|
||
|
|
"warning": "#f59e0b",
|
||
|
|
"danger": "#ef4444",
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
"display": ["Inter", "sans-serif"]
|
||
|
|
},
|
||
|
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: #0f172a;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #334155;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #475569;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background-dark text-text-main font-display overflow-hidden antialiased">
|
||
|
|
<div class="flex h-screen w-full">
|
||
|
|
<aside class="hidden lg:flex w-64 flex-col bg-card-dark border-r border-border-dark shadow-sm z-20">
|
||
|
|
<div class="p-6 flex flex-col h-full justify-between">
|
||
|
|
<div class="flex flex-col gap-8">
|
||
|
|
<div class="flex gap-3 items-center">
|
||
|
|
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border border-border-dark" data-alt="User profile picture showing a smiling professional" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuANUUrJ2rc1XWSNKLt215RxpZflCxewvvZq_ZylsIILmZIjcBUGlPtBIQNmsPHhZs6WjM660ExRzDkFkwHPzxwS6ta2zQ9lFfEMpKK9Ii7RTs6B-lCsDP94jjuZnAzZsrS-ZR_DLQjI16FAzAz_GvyrW9fSGpXcjzLFztbygeR64wagIlFwfYRd3RdlEG2GWH2aDXCrEO86UxzdHzBi13r2tqFH35vfLFwcg2kcbuLP4kkwWk_kese2hD4N0GgXuehsBv8AUzsQ6DU");'>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<h1 class="text-text-main text-base font-bold leading-none">Alex Morgan</h1>
|
||
|
|
<p class="text-text-muted text-xs font-normal mt-1">Premium Plan</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nav class="flex flex-col gap-2">
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||
|
|
<span class="text-sm font-medium">Dashboard</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">receipt_long</span>
|
||
|
|
<span class="text-sm font-medium">Transactions</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary border border-primary/10" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]" data-weight="fill">pie_chart</span>
|
||
|
|
<span class="text-sm font-medium">Reports</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">folder_open</span>
|
||
|
|
<span class="text-sm font-medium">Documents</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-2">
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||
|
|
<span class="text-sm font-medium">Settings</span>
|
||
|
|
</a>
|
||
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">logout</span>
|
||
|
|
<span class="text-sm font-medium">Log out</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<main class="flex-1 flex flex-col h-full overflow-hidden relative bg-background-dark">
|
||
|
|
<header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-dark bg-background-dark/80 backdrop-blur z-10 shrink-0">
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<button class="lg:hidden text-text-main">
|
||
|
|
<span class="material-symbols-outlined">menu</span>
|
||
|
|
</button>
|
||
|
|
<h2 class="text-text-main text-lg font-bold">Financial Reports</h2>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-6">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<button class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-text-muted hover:text-text-main hover:bg-white/5 rounded-lg border border-transparent hover:border-border-dark transition-all">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">download</span>
|
||
|
|
<span class="hidden sm:inline">Export CSV</span>
|
||
|
|
</button>
|
||
|
|
<div class="w-px h-6 bg-border-dark mx-1 hidden sm:block"></div>
|
||
|
|
<button class="size-9 rounded-lg bg-card-dark border border-border-dark flex items-center justify-center text-text-muted hover:text-text-main hover:bg-white/5 transition-colors relative shadow-sm">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||
|
|
<span class="absolute top-2 right-2.5 size-1.5 bg-primary rounded-full border border-card-dark"></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="flex-1 overflow-y-auto p-6 lg:p-8 scroll-smooth">
|
||
|
|
<div class="max-w-7xl mx-auto flex flex-col gap-6 pb-10">
|
||
|
|
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 bg-card-dark p-4 rounded-xl border border-border-dark shadow-sm">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider">Analysis Period:</h3>
|
||
|
|
<div class="flex bg-background-dark rounded-lg p-1 border border-border-dark">
|
||
|
|
<button class="px-3 py-1 text-sm font-medium rounded text-text-main bg-white/10 shadow-sm">Last 30 Days</button>
|
||
|
|
<button class="px-3 py-1 text-sm font-medium rounded text-text-muted hover:text-text-main hover:bg-white/5 transition-colors">Quarter</button>
|
||
|
|
<button class="px-3 py-1 text-sm font-medium rounded text-text-muted hover:text-text-main hover:bg-white/5 transition-colors">YTD</button>
|
||
|
|
<button class="px-3 py-1 text-sm font-medium rounded text-text-muted hover:text-text-main hover:bg-white/5 transition-colors">Custom</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-wrap items-center gap-3 w-full lg:w-auto">
|
||
|
|
<div class="relative group">
|
||
|
|
<button class="flex items-center gap-2 px-3 py-2 bg-background-dark border border-border-dark rounded-lg text-text-muted hover:text-text-main hover:border-primary/50 transition-colors text-sm w-full lg:w-48 justify-between">
|
||
|
|
<span class="flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">category</span>
|
||
|
|
All Categories
|
||
|
|
</span>
|
||
|
|
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button class="flex-1 sm:flex-none bg-primary hover:bg-blue-600 text-white h-10 px-4 rounded-lg text-sm font-semibold shadow-lg shadow-primary/20 transition-all flex items-center justify-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-[18px]">autorenew</span>
|
||
|
|
<span>Generate Report</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
<div class="bg-card-dark p-5 rounded-xl border border-border-dark shadow-sm hover:border-primary/30 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-xs font-medium uppercase tracking-wider">Total Spent</span>
|
||
|
|
<h4 class="text-2xl font-bold text-text-main mt-1">$4,250.00</h4>
|
||
|
|
</div>
|
||
|
|
<div class="p-2 bg-primary/10 rounded-lg text-primary group-hover:bg-primary group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">payments</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-xs">
|
||
|
|
<span class="text-success flex items-center font-medium bg-success/10 px-1.5 py-0.5 rounded">
|
||
|
|
<span class="material-symbols-outlined text-[14px] mr-0.5">trending_down</span>
|
||
|
|
12%
|
||
|
|
</span>
|
||
|
|
<span class="text-text-muted">vs last month</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-card-dark p-5 rounded-xl border border-border-dark shadow-sm hover:border-accent/30 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-xs font-medium uppercase tracking-wider">Top Category</span>
|
||
|
|
<h4 class="text-2xl font-bold text-text-main mt-1">Housing</h4>
|
||
|
|
</div>
|
||
|
|
<div class="p-2 bg-accent/10 rounded-lg text-accent group-hover:bg-accent group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">home</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-xs">
|
||
|
|
<span class="text-text-main font-semibold">$1,850</span>
|
||
|
|
<span class="text-text-muted">spent this month</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-card-dark p-5 rounded-xl border border-border-dark shadow-sm hover:border-warning/30 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-xs font-medium uppercase tracking-wider">Avg. Daily</span>
|
||
|
|
<h4 class="text-2xl font-bold text-text-main mt-1">$141.66</h4>
|
||
|
|
</div>
|
||
|
|
<div class="p-2 bg-warning/10 rounded-lg text-warning group-hover:bg-warning group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">calendar_today</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-xs">
|
||
|
|
<span class="text-danger flex items-center font-medium bg-danger/10 px-1.5 py-0.5 rounded">
|
||
|
|
<span class="material-symbols-outlined text-[14px] mr-0.5">trending_up</span>
|
||
|
|
5%
|
||
|
|
</span>
|
||
|
|
<span class="text-text-muted">vs last month</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-card-dark p-5 rounded-xl border border-border-dark shadow-sm hover:border-success/30 transition-colors group">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-text-muted text-xs font-medium uppercase tracking-wider">Savings Rate</span>
|
||
|
|
<h4 class="text-2xl font-bold text-text-main mt-1">18.5%</h4>
|
||
|
|
</div>
|
||
|
|
<div class="p-2 bg-success/10 rounded-lg text-success group-hover:bg-success group-hover:text-white transition-colors">
|
||
|
|
<span class="material-symbols-outlined text-[20px]">savings</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-xs">
|
||
|
|
<span class="text-success flex items-center font-medium bg-success/10 px-1.5 py-0.5 rounded">
|
||
|
|
<span class="material-symbols-outlined text-[14px] mr-0.5">arrow_upward</span>
|
||
|
|
2.1%
|
||
|
|
</span>
|
||
|
|
<span class="text-text-muted">vs last month</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
|
|
<div class="lg:col-span-2 bg-card-dark p-6 rounded-xl border border-border-dark shadow-sm flex flex-col">
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<h3 class="text-lg font-bold text-text-main">Spending Trend</h3>
|
||
|
|
<button class="text-text-muted hover:text-text-main transition-colors">
|
||
|
|
<span class="material-symbols-outlined">more_horiz</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-h-[300px] w-full relative flex items-end gap-2 px-4 pb-4 border-b border-border-dark/50">
|
||
|
|
<div class="absolute inset-0 top-10 left-4 right-4 bg-gradient-to-b from-primary/20 to-transparent opacity-50" style="clip-path: polygon(0 80%, 10% 60%, 20% 70%, 30% 50%, 40% 65%, 50% 40%, 60% 55%, 70% 30%, 80% 45%, 90% 20%, 100% 40%, 100% 100%, 0 100%);"></div>
|
||
|
|
<div class="absolute inset-0 top-10 left-4 right-4 h-full pointer-events-none">
|
||
|
|
<svg class="w-full h-full overflow-visible" preserveAspectRatio="none" viewBox="0 0 100 100">
|
||
|
|
<path d="M0 80 L10 60 L20 70 L30 50 L40 65 L50 40 L60 55 L70 30 L80 45 L90 20 L100 40" fill="none" stroke="#3b82f6" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" vector-effect="non-scaling-stroke"></path>
|
||
|
|
<circle cx="0" cy="80" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="10" cy="60" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="20" cy="70" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="30" cy="50" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="40" cy="65" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="50" cy="40" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="60" cy="55" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="70" cy="30" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="80" cy="45" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="90" cy="20" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
<circle cx="100" cy="40" fill="#1e293b" r="1" stroke="#3b82f6" stroke-width="0.5"></circle>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="absolute bottom-[-24px] left-0 w-full flex justify-between text-xs text-text-muted px-4">
|
||
|
|
<span>1 Nov</span>
|
||
|
|
<span>5 Nov</span>
|
||
|
|
<span>10 Nov</span>
|
||
|
|
<span>15 Nov</span>
|
||
|
|
<span>20 Nov</span>
|
||
|
|
<span>25 Nov</span>
|
||
|
|
<span>30 Nov</span>
|
||
|
|
</div>
|
||
|
|
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none pb-8 pt-6 px-4">
|
||
|
|
<div class="w-full h-px bg-border-dark/30 border-t border-dashed border-border-dark"></div>
|
||
|
|
<div class="w-full h-px bg-border-dark/30 border-t border-dashed border-border-dark"></div>
|
||
|
|
<div class="w-full h-px bg-border-dark/30 border-t border-dashed border-border-dark"></div>
|
||
|
|
<div class="w-full h-px bg-border-dark/30 border-t border-dashed border-border-dark"></div>
|
||
|
|
<div class="w-full h-px bg-border-dark/30 border-t border-dashed border-border-dark"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="lg:col-span-1 bg-card-dark p-6 rounded-xl border border-border-dark shadow-sm flex flex-col">
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<h3 class="text-lg font-bold text-text-main">Category Breakdown</h3>
|
||
|
|
<button class="text-text-muted hover:text-text-main transition-colors">
|
||
|
|
<span class="material-symbols-outlined">filter_list</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center justify-center flex-1 gap-6">
|
||
|
|
<div class="relative size-48 rounded-full border-[16px] border-card-dark shadow-inner" style="background: conic-gradient(#3b82f6 0% 35%, #6366f1 35% 60%, #10b981 60% 80%, #f59e0b 80% 92%, #ef4444 92% 100%);">
|
||
|
|
<div class="absolute inset-0 m-6 bg-card-dark rounded-full flex flex-col items-center justify-center">
|
||
|
|
<span class="text-xs text-text-muted uppercase font-medium">Total</span>
|
||
|
|
<span class="text-xl font-bold text-text-main">$4,250</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-full grid grid-cols-2 gap-3 text-sm">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-3 rounded-full bg-primary"></span>
|
||
|
|
<span class="text-text-muted flex-1">Housing</span>
|
||
|
|
<span class="font-semibold text-text-main">35%</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-3 rounded-full bg-accent"></span>
|
||
|
|
<span class="text-text-muted flex-1">Food</span>
|
||
|
|
<span class="font-semibold text-text-main">25%</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-3 rounded-full bg-success"></span>
|
||
|
|
<span class="text-text-muted flex-1">Investments</span>
|
||
|
|
<span class="font-semibold text-text-main">20%</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-3 rounded-full bg-warning"></span>
|
||
|
|
<span class="text-text-muted flex-1">Transport</span>
|
||
|
|
<span class="font-semibold text-text-main">12%</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<span class="size-3 rounded-full bg-danger"></span>
|
||
|
|
<span class="text-text-muted flex-1">Others</span>
|
||
|
|
<span class="font-semibold text-text-main">8%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
|
<div class="bg-card-dark p-6 rounded-xl border border-border-dark shadow-sm">
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<h3 class="text-lg font-bold text-text-main">Monthly Spending</h3>
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<span class="flex items-center gap-1.5 text-xs text-text-muted">
|
||
|
|
<span class="size-2 rounded-full bg-primary"></span> 2023
|
||
|
|
</span>
|
||
|
|
<span class="flex items-center gap-1.5 text-xs text-text-muted">
|
||
|
|
<span class="size-2 rounded-full bg-border-dark"></span> 2022
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="h-64 w-full flex items-end justify-between gap-2 px-2">
|
||
|
|
<div class="flex flex-col items-center gap-2 w-full group cursor-pointer">
|
||
|
|
<div class="w-full flex gap-1 items-end justify-center h-full relative">
|
||
|
|
<div class="w-3 bg-border-dark rounded-t-sm h-[40%] opacity-50 group-hover:opacity-70 transition-all"></div>
|
||
|
|
<div class="w-3 bg-primary rounded-t-sm h-[55%] group-hover:bg-blue-400 transition-all relative">
|
||
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">$2,400</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-text-muted">Jun</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 w-full group cursor-pointer">
|
||
|
|
<div class="w-full flex gap-1 items-end justify-center h-full relative">
|
||
|
|
<div class="w-3 bg-border-dark rounded-t-sm h-[45%] opacity-50 group-hover:opacity-70 transition-all"></div>
|
||
|
|
<div class="w-3 bg-primary rounded-t-sm h-[60%] group-hover:bg-blue-400 transition-all relative">
|
||
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">$2,600</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-text-muted">Jul</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 w-full group cursor-pointer">
|
||
|
|
<div class="w-full flex gap-1 items-end justify-center h-full relative">
|
||
|
|
<div class="w-3 bg-border-dark rounded-t-sm h-[50%] opacity-50 group-hover:opacity-70 transition-all"></div>
|
||
|
|
<div class="w-3 bg-primary rounded-t-sm h-[45%] group-hover:bg-blue-400 transition-all relative">
|
||
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">$2,100</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-text-muted">Aug</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 w-full group cursor-pointer">
|
||
|
|
<div class="w-full flex gap-1 items-end justify-center h-full relative">
|
||
|
|
<div class="w-3 bg-border-dark rounded-t-sm h-[55%] opacity-50 group-hover:opacity-70 transition-all"></div>
|
||
|
|
<div class="w-3 bg-primary rounded-t-sm h-[75%] group-hover:bg-blue-400 transition-all relative">
|
||
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">$3,200</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-text-muted">Sep</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 w-full group cursor-pointer">
|
||
|
|
<div class="w-full flex gap-1 items-end justify-center h-full relative">
|
||
|
|
<div class="w-3 bg-border-dark rounded-t-sm h-[60%] opacity-50 group-hover:opacity-70 transition-all"></div>
|
||
|
|
<div class="w-3 bg-primary rounded-t-sm h-[65%] group-hover:bg-blue-400 transition-all relative">
|
||
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">$2,800</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs text-text-muted">Oct</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-center gap-2 w-full group cursor-pointer">
|
||
|
|
<div class="w-full flex gap-1 items-end justify-center h-full relative">
|
||
|
|
<div class="w-3 bg-border-dark rounded-t-sm h-[48%] opacity-50 group-hover:opacity-70 transition-all"></div>
|
||
|
|
<div class="w-3 bg-primary rounded-t-sm h-[85%] group-hover:bg-blue-400 transition-all relative">
|
||
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">$4,250</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="text-xs font-semibold text-primary">Nov</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-card-dark p-6 rounded-xl border border-border-dark shadow-sm flex flex-col">
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<h3 class="text-lg font-bold text-text-main">Smart Recommendations</h3>
|
||
|
|
<button class="text-xs text-primary hover:text-blue-400 font-medium transition-colors">View All</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-4">
|
||
|
|
<div class="flex gap-4 p-4 rounded-lg bg-background-dark border border-border-dark hover:border-primary/30 transition-all group cursor-pointer">
|
||
|
|
<div class="bg-yellow-500/10 p-3 rounded-lg h-fit text-yellow-500">
|
||
|
|
<span class="material-symbols-outlined text-[24px]">lightbulb</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<h4 class="text-sm font-semibold text-text-main group-hover:text-primary transition-colors">Reduce Subscription Costs</h4>
|
||
|
|
<p class="text-xs text-text-muted leading-relaxed">You have 4 active streaming subscriptions totaling $68/mo. Consolidating could save you up to $25/mo.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-4 p-4 rounded-lg bg-background-dark border border-border-dark hover:border-primary/30 transition-all group cursor-pointer">
|
||
|
|
<div class="bg-green-500/10 p-3 rounded-lg h-fit text-green-500">
|
||
|
|
<span class="material-symbols-outlined text-[24px]">trending_up</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<h4 class="text-sm font-semibold text-text-main group-hover:text-primary transition-colors">Increase Savings Goal</h4>
|
||
|
|
<p class="text-xs text-text-muted leading-relaxed">Your spending in "Dining Out" decreased by 15%. Consider moving the surplus $120 to your emergency fund.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-4 p-4 rounded-lg bg-background-dark border border-border-dark hover:border-primary/30 transition-all group cursor-pointer">
|
||
|
|
<div class="bg-red-500/10 p-3 rounded-lg h-fit text-red-500">
|
||
|
|
<span class="material-symbols-outlined text-[24px]">warning</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<h4 class="text-sm font-semibold text-text-main group-hover:text-primary transition-colors">Unusual Activity Detected</h4>
|
||
|
|
<p class="text-xs text-text-muted leading-relaxed">A transaction of $450 at "TechGadgets Inc" is 200% higher than your average for this category.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body></html>
|