Initial commit
This commit is contained in:
iulian
commit
983cee0320
322 changed files with 57174 additions and 0 deletions
348
backup/new theme/stitch_expense_tracking_dashboard(1)/code.html
Normal file
348
backup/new theme/stitch_expense_tracking_dashboard(1)/code.html
Normal file
|
|
@ -0,0 +1,348 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Expense Tracking Dashboard</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": "#2b8cee",
|
||||
"background-light": "#f6f7f8",
|
||||
"background-dark": "#111a22",
|
||||
"card-dark": "#1a2632",
|
||||
"card-light": "#ffffff",
|
||||
"sidebar-light": "#ffffff",
|
||||
"border-light": "#e2e8f0",
|
||||
"text-main": "#0f172a",
|
||||
"text-muted": "#64748b",
|
||||
},
|
||||
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: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light text-text-main font-display overflow-hidden">
|
||||
<div class="flex h-screen w-full">
|
||||
<aside class="hidden lg:flex w-64 flex-col bg-sidebar-light border-r border-border-light 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-light" 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">Free 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 bg-primary/10 text-primary border border-primary/10" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-weight="fill">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-slate-50 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 text-text-muted hover:bg-slate-50 hover:text-text-main transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">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-slate-50 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-slate-50 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-slate-50 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-[#f8fafc]">
|
||||
<header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-border-light bg-white/80 backdrop-blur z-10 shrink-0 shadow-sm">
|
||||
<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">Dashboard</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex items-center bg-slate-50 rounded-lg h-10 px-3 border border-border-light focus-within:border-primary transition-colors w-64">
|
||||
<span class="material-symbols-outlined text-text-muted text-[20px]">search</span>
|
||||
<input class="bg-transparent border-none text-text-main text-sm placeholder-slate-400 focus:ring-0 w-full ml-2" placeholder="Search expenses..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="bg-primary hover:bg-primary/90 text-white h-9 px-4 rounded-lg text-sm font-semibold shadow-md shadow-primary/20 transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
<span class="hidden sm:inline">Add Expense</span>
|
||||
</button>
|
||||
<button class="size-9 rounded-lg bg-white border border-border-light flex items-center justify-center text-text-muted hover:text-text-main hover:bg-slate-50 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-red-500 rounded-full border border-white"></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-8 pb-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6">
|
||||
<div class="p-6 rounded-xl bg-white border border-border-light flex flex-col justify-between relative overflow-hidden group shadow-sm">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl text-primary">payments</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-text-muted text-sm font-medium">Total Spent</p>
|
||||
<h3 class="text-text-main text-3xl font-bold mt-2 tracking-tight">$2,450.00</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<span class="bg-green-500/10 text-green-600 text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
||||
12%
|
||||
</span>
|
||||
<span class="text-text-muted text-xs">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 rounded-xl bg-white border border-border-light flex flex-col justify-between shadow-sm">
|
||||
<div>
|
||||
<p class="text-text-muted text-sm font-medium">Active Categories</p>
|
||||
<h3 class="text-text-main text-3xl font-bold mt-2 tracking-tight">8</h3>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full mt-6 overflow-hidden">
|
||||
<div class="bg-purple-500 h-full rounded-full" style="width: 65%"></div>
|
||||
</div>
|
||||
<p class="text-text-muted text-xs mt-2">65% of budget utilized</p>
|
||||
</div>
|
||||
<div class="p-6 rounded-xl bg-white border border-border-light flex flex-col justify-between shadow-sm">
|
||||
<div>
|
||||
<p class="text-text-muted text-sm font-medium">Total Transactions</p>
|
||||
<h3 class="text-text-main text-3xl font-bold mt-2 tracking-tight">42</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<span class="bg-primary/10 text-primary text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">add</span>
|
||||
5 New
|
||||
</span>
|
||||
<span class="text-text-muted text-xs">this week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||||
<div class="xl:col-span-2 bg-white border border-border-light rounded-xl p-6 flex flex-col shadow-sm">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold">Monthly Trends</h3>
|
||||
<p class="text-text-muted text-sm">Income vs Expense over time</p>
|
||||
</div>
|
||||
<button class="text-text-muted hover:text-text-main text-sm bg-slate-50 border border-slate-200 px-3 py-1.5 rounded-lg transition-colors hover:bg-slate-100">Last 6 Months</button>
|
||||
</div>
|
||||
<div class="flex-1 flex items-end gap-3 sm:gap-6 min-h-[240px] px-2 pb-2">
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[140px] group-hover:bg-slate-100 transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/50 h-[60%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-text-muted text-xs font-medium">Jan</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[180px] group-hover:bg-slate-100 transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/60 h-[45%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-text-muted text-xs font-medium">Feb</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[160px] group-hover:bg-slate-100 transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/70 h-[70%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-text-muted text-xs font-medium">Mar</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[200px] group-hover:bg-slate-100 transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary h-[55%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-text-muted text-xs font-medium">Apr</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[150px] group-hover:bg-slate-100 transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/80 h-[80%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-text-muted text-xs font-medium">May</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-slate-50 border border-slate-100 rounded-t-sm relative h-[190px] group-hover:bg-slate-100 transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary h-[65%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-text-muted text-xs font-medium">Jun</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-border-light rounded-xl p-6 flex flex-col shadow-sm">
|
||||
<h3 class="text-text-main text-lg font-bold mb-1">Expense Distribution</h3>
|
||||
<p class="text-text-muted text-sm mb-6">Breakdown by category</p>
|
||||
<div class="flex-1 flex items-center justify-center relative">
|
||||
<div class="size-52 rounded-full relative" style="background: conic-gradient(
|
||||
#2b8cee 0% 35%,
|
||||
#a855f7 35% 60%,
|
||||
#0bda5b 60% 80%,
|
||||
#f59e0b 80% 90%,
|
||||
#ef4444 90% 100%
|
||||
);">
|
||||
<div class="absolute inset-4 bg-white rounded-full flex flex-col items-center justify-center z-10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<span class="text-text-muted text-xs font-medium">Total</span>
|
||||
<span class="text-text-main text-xl font-bold">$2,450</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-2 gap-y-2 gap-x-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-primary"></span>
|
||||
<span class="text-text-muted text-xs">House</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-purple-500"></span>
|
||||
<span class="text-text-muted text-xs">Mortgage</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-green-500"></span>
|
||||
<span class="text-text-muted text-xs">Car</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-orange-500"></span>
|
||||
<span class="text-text-muted text-xs">Food</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-text-main text-lg font-bold">Expense Categories</h3>
|
||||
<a class="text-primary text-sm font-medium hover:text-primary/80" href="#">View All</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-green-500/10 flex items-center justify-center text-green-600 group-hover:bg-green-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">directions_car</span>
|
||||
</div>
|
||||
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">3 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-muted text-sm font-medium">Car Expenses</span>
|
||||
<span class="text-text-main text-xl font-bold mt-1">$450.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||||
<div class="bg-green-500 h-full rounded-full" style="width: 18%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
</div>
|
||||
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">5 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-muted text-sm font-medium">House Expenses-Bills</span>
|
||||
<span class="text-text-main text-xl font-bold mt-1">$1,200.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||||
<div class="bg-primary h-full rounded-full" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-600 group-hover:bg-orange-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">restaurant</span>
|
||||
</div>
|
||||
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">12 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-muted text-sm font-medium">Food & Drink</span>
|
||||
<span class="text-text-main text-xl font-bold mt-1">$350.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||||
<div class="bg-orange-500 h-full rounded-full" style="width: 14%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-red-500/10 flex items-center justify-center text-red-600 group-hover:bg-red-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">smoking_rooms</span>
|
||||
</div>
|
||||
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">8 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-muted text-sm font-medium">Smoking</span>
|
||||
<span class="text-text-main text-xl font-bold mt-1">$120.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||||
<div class="bg-red-500 h-full rounded-full" style="width: 5%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-600 group-hover:bg-purple-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">account_balance</span>
|
||||
</div>
|
||||
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">1 txn</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-muted text-sm font-medium">Mortgage</span>
|
||||
<span class="text-text-main text-xl font-bold mt-1">$800.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||||
<div class="bg-purple-500 h-full rounded-full" style="width: 32%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg border border-border-light hover:border-primary/50 transition-colors group shadow-sm">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-600 group-hover:bg-cyan-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">shopping_cart</span>
|
||||
</div>
|
||||
<span class="bg-slate-100 text-text-muted text-[10px] font-bold px-2 py-1 rounded-full border border-slate-200">4 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-muted text-sm font-medium">Supermarket</span>
|
||||
<span class="text-text-main text-xl font-bold mt-1">$200.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1 rounded-full mt-4">
|
||||
<div class="bg-cyan-500 h-full rounded-full" style="width: 8%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
backup/new theme/stitch_expense_tracking_dashboard(1)/screen.png
Normal file
BIN
backup/new theme/stitch_expense_tracking_dashboard(1)/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
472
backup/new theme/stitch_expense_tracking_dashboard(2)/code.html
Normal file
472
backup/new theme/stitch_expense_tracking_dashboard(2)/code.html
Normal file
|
|
@ -0,0 +1,472 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Transactions - 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",
|
||||
},
|
||||
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 bg-primary/10 text-primary border border-primary/10" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-weight="fill">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 text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">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">Transactions</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="hidden sm:flex flex-col items-end mr-2">
|
||||
<span class="text-[10px] text-text-muted uppercase font-semibold tracking-wider">Total Balance</span>
|
||||
<span class="text-sm font-bold text-text-main">$12,450.00</span>
|
||||
</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="relative w-full lg:w-96 group">
|
||||
<span class="material-symbols-outlined absolute left-3 top-2.5 text-text-muted group-focus-within:text-primary transition-colors">search</span>
|
||||
<input class="bg-background-dark border border-border-dark text-text-main text-sm rounded-lg focus:ring-1 focus:ring-primary focus:border-primary block w-full pl-10 p-2.5 placeholder-text-muted transition-all" placeholder="Search transactions..." type="text"/>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2 w-full lg:w-auto">
|
||||
<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">
|
||||
<span class="material-symbols-outlined text-[18px]">calendar_month</span>
|
||||
<span class="hidden sm:inline">Date</span>
|
||||
</button>
|
||||
<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">
|
||||
<span class="material-symbols-outlined text-[18px]">category</span>
|
||||
<span class="hidden sm:inline">Category</span>
|
||||
</button>
|
||||
<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">
|
||||
<span class="material-symbols-outlined text-[18px]">tune</span>
|
||||
<span class="hidden sm:inline">Filters</span>
|
||||
</button>
|
||||
<div class="w-px h-6 bg-border-dark mx-1 hidden sm:block"></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]">add</span>
|
||||
<span>Add New</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card-dark border border-border-dark rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-background-dark/50">
|
||||
<tr class="border-b border-border-dark text-text-muted text-xs uppercase font-medium">
|
||||
<th class="p-5 font-semibold">Transaction</th>
|
||||
<th class="p-5 font-semibold">Category</th>
|
||||
<th class="p-5 font-semibold">Date</th>
|
||||
<th class="p-5 font-semibold">Payment Method</th>
|
||||
<th class="p-5 font-semibold text-right">Amount</th>
|
||||
<th class="p-5 font-semibold text-center">Status</th>
|
||||
<th class="p-5"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark/40 text-sm">
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<img alt="Apple" class="size-6 object-contain" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMjF2LThhMiAyIDAgMCAxIDItMmgyLjVhMiAyIDAgMCAxIDIgMnY4Ii8+PHBhdGggZD0iTTIyIDIxdi04YTIgMiAwIDAgMC0yLTJoLTIuNWEyIDIgMCAwIDAtMiAydjgiLz48cGF0aCBkPSJNMTAgMjFWMiIvPjwvc3ZnPg=='" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSywgcsLzmEYNZ3a2R0LVhZ5nIjwShhMnk8omZ09Iwn4xM8ehTZjG2xLTprdwpoDgB8QuqXXEuWJCVv_P52bRcD9q3ay9jpg8mf7irNNVpNir8XfSuMaeYOXt05rQzprKMEZ6zNd-XzmJri1cjF1QtATRcGtieIPrjI__7t32sdZ-Jrp_PU40niUj6zIQp-5l7PyBOGx3FSJlk1ZHObpj6CIvpc_k-R09RMtSx0rWHFyOqxQj9vj1kUzkDmj7p7js6qkTjVwSdyCs"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Apple Store</span>
|
||||
<span class="text-text-muted text-xs">Electronics</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<span class="size-1.5 rounded-full bg-blue-400"></span>
|
||||
Tech & Gadgets
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 24, 2023
|
||||
<span class="block text-xs opacity-60">10:42 AM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">credit_card</span>
|
||||
<span>•••• 4242</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-text-main font-semibold">-$1,299.00</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-success/20 text-success" title="Completed">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<img alt="Spotify" class="size-6 object-contain" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMjF2LThhMiAyIDAgMCAxIDItMmgyLjVhMiAyIDAgMCAxIDIgMnY4Ii8+PHBhdGggZD0iTTIyIDIxdi04YTIgMiAwIDAgMC0yLTJoLTIuNWEyIDIgMCAwIDAtMiAydjgiLz48cGF0aCBkPSJNMTAgMjFWMiIvPjwvc3ZnPg=='" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-GaSMPiYW37DPKB7OY0R_P419ISN-taoKpps9EcturmlE9dFo5NsKsQrC0EoVV9KsbdPhe1cQM9V-NMRckBPc1ajb8chzMvTrindVM0NyzsuBk_j1-jNjW-Ij3a4iX2DktsZZWpAvNYm8mcGXO366NXgo8I6JM2-zokOy1SQ4A4Qj0JxwEFD16bDmDoVPNrL1YSaT12bIlWe0EB-wx6NoTHqnysfnV0JxOdyOTBUXkkFe4VbeBJ8L7wSiWVjky6ytN5Yd40U4ul4"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Spotify Premium</span>
|
||||
<span class="text-text-muted text-xs">Subscription</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
<span class="size-1.5 rounded-full bg-purple-400"></span>
|
||||
Entertainment
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 23, 2023
|
||||
<span class="block text-xs opacity-60">09:00 AM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">credit_card</span>
|
||||
<span>•••• 8812</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-text-main font-semibold">-$14.99</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-success/20 text-success" title="Completed">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<img alt="Whole Foods" class="size-6 object-contain" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMjF2LThhMiAyIDAgMCAxIDItMmgyLjVhMiAyIDAgMCAxIDIgMnY4Ii8+PHBhdGggZD0iTTIyIDIxdi04YTIgMiAwIDAgMC0yLTJoLTIuNWEyIDIgMCAwIDAtMiAydjgiLz48cGF0aCBkPSJNMTAgMjFWMiIvPjwvc3ZnPg=='" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3oEKd_VksMaTsFZgiZoGe1gr1j1afyTTobXLNV9mFhBLtZT8R9CpX68AME1MDsxTOu1pxNF14-ZwV1gIQAOY1VDQzlZtOAi05hYHOq33kZE6Y2PzsnZX8ee8FRGhYT987t5UdAnNgYq468DGG3xX18kUqUs5JHW9vvf4oabNfhJkmfDaZO1smYZC7NZmnHt6lBrWQLH3BEdHETOiCTSjAL-gRYeBbJU9aLnOtVdXlPewGsd37oFwbwW-fgdcaRg8evpO74F-De0E"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Whole Foods Market</span>
|
||||
<span class="text-text-muted text-xs">Groceries</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<span class="size-1.5 rounded-full bg-green-400"></span>
|
||||
Food & Drink
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 22, 2023
|
||||
<span class="block text-xs opacity-60">06:15 PM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">account_balance_wallet</span>
|
||||
<span>Apple Pay</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-text-main font-semibold">-$84.32</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-yellow-500/20 text-yellow-400" title="Pending">
|
||||
<span class="material-symbols-outlined text-[16px]">schedule</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<img alt="Uber" class="size-6 object-contain" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMjF2LThhMiAyIDAgMCAxIDItMmgyLjVhMiAyIDAgMCAxIDIgMnY4Ii8+PHBhdGggZD0iTTIyIDIxdi04YTIgMiAwIDAgMC0yLTJoLTIuNWEyIDIgMCAwIDAtMiAydjgiLz48cGF0aCBkPSJNMTAgMjFWMiIvPjwvc3ZnPg=='" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCx0TiKqOyZxXQwssH0TuOkidRxBViRF8Vo8bhMWsxzLgKUJ7dNWdrln9i6arER8wYVb8b2_bvHU8AqlMaEcJpRj03qTp3P8qWfa53K5PsJOS_eJJIo2ctokCQ620SMMTQEvaRW578hW6JRrObJFMy1GoQSd1DNWCrUE4BCd0gaGuZ3S7mI1rrXBn4PGz4HZlq4dMdRPBOWAzAjU39NBvEB_5TjTYOXfkten6M7Bqv2MQLeEVWVYb69mq69RWXFqjmpWC_HAVcjDCY"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Uber Trip</span>
|
||||
<span class="text-text-muted text-xs">Transportation</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20">
|
||||
<span class="size-1.5 rounded-full bg-orange-400"></span>
|
||||
Travel
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 21, 2023
|
||||
<span class="block text-xs opacity-60">11:30 PM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">credit_card</span>
|
||||
<span>•••• 4242</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-text-main font-semibold">-$24.50</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-success/20 text-success" title="Completed">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<span class="font-bold text-gray-800">U</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Upwork Inc.</span>
|
||||
<span class="text-text-muted text-xs">Freelance</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-teal-500/10 text-teal-400 border border-teal-500/20">
|
||||
<span class="size-1.5 rounded-full bg-teal-400"></span>
|
||||
Income
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 20, 2023
|
||||
<span class="block text-xs opacity-60">02:00 PM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">account_balance</span>
|
||||
<span>Direct Deposit</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-success font-semibold">+$3,450.00</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-success/20 text-success" title="Completed">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<img alt="Netflix" class="size-6 object-contain" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMjF2LThhMiAyIDAgMCAxIDItMmgyLjVhMiAyIDAgMCAxIDIgMnY4Ii8+PHBhdGggZD0iTTIyIDIxdi04YTIgMiAwIDAgMC0yLTJoLTIuNWEyIDIgMCAwIDAtMiAydjgiLz48cGF0aCBkPSJNMTAgMjFWMiIvPjwvc3ZnPg=='" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8f9CCAkiZ9Ij5PjVYp04uFxma55OLSlNeI2UHPAH55fj1MKj09PGSGu-qMwu1VnB1SyptVIMMZIAAdbMDcDIg4SCOjSsiye0D9IPUEyU-9rtJODyME2G7QxqW4PeZxLPWOnESpUSLwdo6v9DjubLn3dSUXO1hvg9Iloat0mjFkqTtLG_VfrivzBqBALPQiK5Bu_1WJ_drF0emq7Ft1ne1CX1xo1pdsZC0w693X4Fb6S9UR5ErAFjTj-YivOOrjQbZXe7UhCHtIWI"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Netflix</span>
|
||||
<span class="text-text-muted text-xs">Subscription</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
<span class="size-1.5 rounded-full bg-purple-400"></span>
|
||||
Entertainment
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 18, 2023
|
||||
<span class="block text-xs opacity-60">11:00 AM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">credit_card</span>
|
||||
<span>•••• 8812</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-text-main font-semibold">-$19.99</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-success/20 text-success" title="Completed">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-white/[0.02] transition-colors relative">
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
|
||||
<img alt="Starbucks" class="size-6 object-contain" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMjF2LThhMiAyIDAgMCAxIDItMmgyLjVhMiAyIDAgMCAxIDIgMnY4Ii8+PHBhdGggZD0iTTIyIDIxdi04YTIgMiAwIDAgMC0yLTJoLTIuNWEyIDIgMCAwIDAtMiAydjgiLz48cGF0aCBkPSJNMTAgMjFWMiIvPjwvc3ZnPg=='" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTGBqffwTY09cdnZveNpeRYFuAOmJ6IFoihvN-tDUi8ZpL-n2JUf8fx4TmASiqo9NiN6Wq9Ix3MeLmXgFLGR7bumZ1D0hH28DiQItCeffxJIOzGQiH3dXv3Y3GHLIrLitIReCxc8hnkcJr-IBs86XbBCjihJmn9mJ3CyAhvSSZFWLTX-8r5T7uMvjBFxpUQIoSYNChmKdIWZkZ033GN4vROz88VIfSR2e4OlNMiqJ2fCMEvez70HzQO1ifPEpvk4u4TXWqRpix9zg"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-text-main font-medium group-hover:text-primary transition-colors">Starbucks</span>
|
||||
<span class="text-text-muted text-xs">Coffee</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<span class="size-1.5 rounded-full bg-green-400"></span>
|
||||
Food & Drink
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-text-muted">
|
||||
Oct 18, 2023
|
||||
<span class="block text-xs opacity-60">08:15 AM</span>
|
||||
</td>
|
||||
<td class="p-5">
|
||||
<div class="flex items-center gap-2 text-text-main">
|
||||
<span class="material-symbols-outlined text-text-muted text-[18px]">account_balance_wallet</span>
|
||||
<span>Apple Pay</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<span class="text-text-main font-semibold">-$6.50</span>
|
||||
</td>
|
||||
<td class="p-5 text-center">
|
||||
<span class="inline-flex items-center justify-center size-6 rounded-full bg-success/20 text-success" title="Completed">
|
||||
<span class="material-symbols-outlined text-[16px]">check</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-5 text-right">
|
||||
<button class="text-text-muted hover:text-text-main p-1 rounded hover:bg-white/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 border-t border-border-dark flex flex-col sm:flex-row gap-4 justify-between items-center bg-card-dark">
|
||||
<span class="text-sm text-text-muted">Showing <span class="text-text-main font-medium">1</span> to <span class="text-text-main font-medium">7</span> of <span class="text-text-main font-medium">124</span> results</span>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex items-center gap-1 px-3 py-1.5 bg-background-dark border border-border-dark rounded-md text-text-muted hover:text-text-main hover:border-text-muted transition-colors text-sm disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_left</span>
|
||||
Previous
|
||||
</button>
|
||||
<button class="flex items-center gap-1 px-3 py-1.5 bg-background-dark border border-border-dark rounded-md text-text-muted hover:text-text-main hover:border-text-muted transition-colors text-sm">
|
||||
Next
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
backup/new theme/stitch_expense_tracking_dashboard(2)/screen.png
Normal file
BIN
backup/new theme/stitch_expense_tracking_dashboard(2)/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
|
|
@ -0,0 +1,414 @@
|
|||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
414
backup/new theme/stitch_expense_tracking_dashboard(3)/code.html
Normal file
414
backup/new theme/stitch_expense_tracking_dashboard(3)/code.html
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
<!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>
|
||||
BIN
backup/new theme/stitch_expense_tracking_dashboard(3)/screen.png
Normal file
BIN
backup/new theme/stitch_expense_tracking_dashboard(3)/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
379
backup/new theme/stitch_expense_tracking_dashboard(4)/code.html
Normal file
379
backup/new theme/stitch_expense_tracking_dashboard(4)/code.html
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Documents - 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 text-text-muted hover:bg-white/5 hover:text-text-main transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">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 bg-primary/10 text-primary border border-primary/10" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-weight="fill">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">Documents</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="hidden sm:flex items-center text-xs text-text-muted bg-card-dark border border-border-dark px-2 py-1 rounded gap-2">
|
||||
<span class="size-2 rounded-full bg-success animate-pulse"></span>
|
||||
<span>System Status: Optimal</span>
|
||||
</div>
|
||||
<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-8 pb-10">
|
||||
<div class="flex flex-col gap-4">
|
||||
<h3 class="text-base font-semibold text-text-main">Upload Documents</h3>
|
||||
<div class="bg-card-dark border-2 border-dashed border-border-dark rounded-xl p-10 flex flex-col items-center justify-center text-center hover:border-primary/50 hover:bg-white/[0.02] transition-all cursor-pointer group relative overflow-hidden">
|
||||
<input class="absolute inset-0 opacity-0 cursor-pointer z-10" type="file"/>
|
||||
<div class="bg-primary/10 p-4 rounded-full text-primary mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<span class="material-symbols-outlined text-[32px]">cloud_upload</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-text-main mb-1">Drag & drop files here or click to browse</h3>
|
||||
<p class="text-text-muted text-sm max-w-sm leading-relaxed">
|
||||
Upload bank statements, invoices, or receipts. <br/>
|
||||
<span class="text-xs text-text-muted/70">Supported formats: CSV, PDF, XLS (Max 10MB)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<h3 class="text-base font-semibold text-text-main">Your Files</h3>
|
||||
<div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
|
||||
<div class="relative flex-1 min-w-[240px]">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-muted text-[20px]">search</span>
|
||||
<input class="w-full bg-card-dark border border-border-dark rounded-lg py-2 pl-10 pr-4 text-sm text-text-main focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-all placeholder:text-text-muted/50" placeholder="Search by name..." type="text"/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-2 bg-card-dark border border-border-dark rounded-lg text-text-muted hover:text-text-main text-sm font-medium flex items-center gap-2 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
<button class="px-3 py-2 bg-card-dark border border-border-dark rounded-lg text-text-muted hover:text-text-main text-sm font-medium flex items-center gap-2 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">sort</span>
|
||||
Sort
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card-dark border border-border-dark rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead class="text-xs text-text-muted uppercase bg-white/5 border-b border-border-dark">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-medium">Document Name</th>
|
||||
<th class="px-6 py-4 font-medium">Upload Date</th>
|
||||
<th class="px-6 py-4 font-medium">Type</th>
|
||||
<th class="px-6 py-4 font-medium">Status</th>
|
||||
<th class="px-6 py-4 font-medium text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-dark">
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-[20px]">picture_as_pdf</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-text-main">Chase_Statement_Oct2023.pdf</span>
|
||||
<span class="text-xs text-text-muted">2.4 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-muted">Nov 01, 2023</td>
|
||||
<td class="px-6 py-4 text-text-muted">Bank Statement</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20">
|
||||
<span class="size-1.5 rounded-full bg-success"></span>
|
||||
Analyzed
|
||||
</span>
|
||||
<div class="relative group/tooltip">
|
||||
<span class="material-symbols-outlined text-[16px] text-success cursor-help">verified</span>
|
||||
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-2 py-1 bg-gray-800 text-white text-[10px] rounded opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none">
|
||||
Added to reports
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-1.5 text-text-muted hover:text-primary hover:bg-primary/10 rounded transition-colors" title="View">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors" title="Download">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-danger hover:bg-danger/10 rounded transition-colors" title="Delete">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded bg-green-500/10 text-green-500">
|
||||
<span class="material-symbols-outlined text-[20px]">table_view</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-text-main">Uber_Receipts_Q3.csv</span>
|
||||
<span class="text-xs text-text-muted">845 KB</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-muted">Nov 05, 2023</td>
|
||||
<td class="px-6 py-4 text-text-muted">Expense Report</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-accent/10 text-accent border border-accent/20">
|
||||
<span class="size-1.5 rounded-full bg-accent animate-pulse"></span>
|
||||
Processing
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-1.5 text-text-muted/50 cursor-not-allowed rounded" disabled="" title="View">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors" title="Download">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-danger hover:bg-danger/10 rounded transition-colors" title="Delete">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-[20px]">picture_as_pdf</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-text-main">Amex_Statement_Sep.pdf</span>
|
||||
<span class="text-xs text-text-muted">1.8 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-muted">Oct 15, 2023</td>
|
||||
<td class="px-6 py-4 text-text-muted">Credit Card</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-danger/10 text-danger border border-danger/20">
|
||||
<span class="material-symbols-outlined text-[14px]">error</span>
|
||||
Error
|
||||
</span>
|
||||
<span class="text-xs text-text-muted hidden xl:inline">Format unrecognized</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-1.5 text-text-muted hover:text-primary hover:bg-primary/10 rounded transition-colors" title="Retry">
|
||||
<span class="material-symbols-outlined text-[18px]">refresh</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors" title="Download">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-danger hover:bg-danger/10 rounded transition-colors" title="Delete">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-[20px]">picture_as_pdf</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-text-main">Housing_Contract_2023.pdf</span>
|
||||
<span class="text-xs text-text-muted">4.2 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-muted">Sep 28, 2023</td>
|
||||
<td class="px-6 py-4 text-text-muted">Contract</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20">
|
||||
<span class="size-1.5 rounded-full bg-success"></span>
|
||||
Analyzed
|
||||
</span>
|
||||
<div class="relative group/tooltip">
|
||||
<span class="material-symbols-outlined text-[16px] text-success cursor-help">verified</span>
|
||||
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-2 py-1 bg-gray-800 text-white text-[10px] rounded opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none">
|
||||
Added to reports
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-1.5 text-text-muted hover:text-primary hover:bg-primary/10 rounded transition-colors" title="View">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors" title="Download">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-danger hover:bg-danger/10 rounded transition-colors" title="Delete">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-white/[0.02] transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded bg-green-500/10 text-green-500">
|
||||
<span class="material-symbols-outlined text-[20px]">table_view</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium text-text-main">Investments_Q2.xlsx</span>
|
||||
<span class="text-xs text-text-muted">1.1 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-text-muted">Sep 12, 2023</td>
|
||||
<td class="px-6 py-4 text-text-muted">Investment</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-success/10 text-success border border-success/20">
|
||||
<span class="size-1.5 rounded-full bg-success"></span>
|
||||
Analyzed
|
||||
</span>
|
||||
<div class="relative group/tooltip">
|
||||
<span class="material-symbols-outlined text-[16px] text-success cursor-help">verified</span>
|
||||
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-2 py-1 bg-gray-800 text-white text-[10px] rounded opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none">
|
||||
Added to reports
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<button class="p-1.5 text-text-muted hover:text-primary hover:bg-primary/10 rounded transition-colors" title="View">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors" title="Download">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||
</button>
|
||||
<button class="p-1.5 text-text-muted hover:text-danger hover:bg-danger/10 rounded transition-colors" title="Delete">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="bg-white/5 border-t border-border-dark p-4 flex items-center justify-between">
|
||||
<span class="text-sm text-text-muted">Showing <span class="text-text-main font-medium">1-5</span> of <span class="text-text-main font-medium">24</span> documents</span>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1.5 text-sm text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors disabled:opacity-50" disabled="">Previous</button>
|
||||
<button class="px-3 py-1.5 text-sm text-text-muted hover:text-text-main hover:bg-white/5 rounded transition-colors">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
backup/new theme/stitch_expense_tracking_dashboard(4)/screen.png
Normal file
BIN
backup/new theme/stitch_expense_tracking_dashboard(4)/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
375
backup/new theme/stitch_expense_tracking_dashboard/code.html
Normal file
375
backup/new theme/stitch_expense_tracking_dashboard/code.html
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Expense Tracking Dashboard</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"/>
|
||||
<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 = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#2b8cee",
|
||||
"background-light": "#f6f7f8",
|
||||
"background-dark": "#111a22",
|
||||
"card-dark": "#1a2632", // Slightly lighter than background-dark
|
||||
"card-light": "#ffffff",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Inter", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* Custom scrollbar for modern feel */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #324d67;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #4b6a88;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display overflow-hidden">
|
||||
<div class="flex h-screen w-full">
|
||||
<!-- Side Navigation -->
|
||||
<aside class="hidden lg:flex w-64 flex-col bg-[#111a22] border-r border-[#233648]">
|
||||
<div class="p-6 flex flex-col h-full justify-between">
|
||||
<div class="flex flex-col gap-8">
|
||||
<!-- User Profile Brief -->
|
||||
<div class="flex gap-3 items-center">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border border-[#233648]" 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-white text-base font-bold leading-none">Alex Morgan</h1>
|
||||
<p class="text-[#92adc9] text-xs font-normal mt-1">Free Plan</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="flex flex-col gap-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/20 text-primary border border-primary/10" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-weight="fill">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-[#92adc9] hover:bg-[#233648] hover:text-white 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 text-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">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-[#92adc9] hover:bg-[#233648] hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">folder_open</span>
|
||||
<span class="text-sm font-medium">Documents</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Bottom Links -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-[#92adc9] hover:bg-[#233648] hover:text-white 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-[#92adc9] hover:bg-[#233648] hover:text-white 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 Content -->
|
||||
<main class="flex-1 flex flex-col h-full overflow-hidden relative">
|
||||
<!-- Top Header -->
|
||||
<header class="h-16 flex items-center justify-between px-6 lg:px-8 border-b border-[#233648] bg-background-dark/95 backdrop-blur z-10 shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="lg:hidden text-white">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
<h2 class="text-white text-lg font-bold">Dashboard</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<!-- Search Bar -->
|
||||
<div class="hidden md:flex items-center bg-[#1a2632] rounded-lg h-10 px-3 border border-[#233648] focus-within:border-primary transition-colors w-64">
|
||||
<span class="material-symbols-outlined text-[#92adc9] text-[20px]">search</span>
|
||||
<input class="bg-transparent border-none text-white text-sm placeholder-[#5f7a96] focus:ring-0 w-full ml-2" placeholder="Search expenses..." type="text"/>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="bg-primary hover:bg-primary/90 text-white h-9 px-4 rounded-lg text-sm font-semibold shadow-lg shadow-primary/20 transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
<span class="hidden sm:inline">Add Expense</span>
|
||||
</button>
|
||||
<button class="size-9 rounded-lg bg-[#1a2632] border border-[#233648] flex items-center justify-center text-[#92adc9] hover:text-white hover:bg-[#233648] transition-colors relative">
|
||||
<span class="material-symbols-outlined text-[20px]">notifications</span>
|
||||
<span class="absolute top-2 right-2.5 size-1.5 bg-red-500 rounded-full border border-[#1a2632]"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Content -->
|
||||
<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-8 pb-10">
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6">
|
||||
<!-- Total Spent -->
|
||||
<div class="p-6 rounded-xl bg-[#1a2632] border border-[#233648] flex flex-col justify-between relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl text-primary">payments</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[#92adc9] text-sm font-medium">Total Spent</p>
|
||||
<h3 class="text-white text-3xl font-bold mt-2 tracking-tight">$2,450.00</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<span class="bg-green-500/10 text-green-400 text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">trending_up</span>
|
||||
12%
|
||||
</span>
|
||||
<span class="text-[#5f7a96] text-xs">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Active Categories -->
|
||||
<div class="p-6 rounded-xl bg-[#1a2632] border border-[#233648] flex flex-col justify-between">
|
||||
<div>
|
||||
<p class="text-[#92adc9] text-sm font-medium">Active Categories</p>
|
||||
<h3 class="text-white text-3xl font-bold mt-2 tracking-tight">8</h3>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1.5 rounded-full mt-6 overflow-hidden">
|
||||
<div class="bg-purple-500 h-full rounded-full" style="width: 65%"></div>
|
||||
</div>
|
||||
<p class="text-[#5f7a96] text-xs mt-2">65% of budget utilized</p>
|
||||
</div>
|
||||
<!-- Total Transactions -->
|
||||
<div class="p-6 rounded-xl bg-[#1a2632] border border-[#233648] flex flex-col justify-between">
|
||||
<div>
|
||||
<p class="text-[#92adc9] text-sm font-medium">Total Transactions</p>
|
||||
<h3 class="text-white text-3xl font-bold mt-2 tracking-tight">42</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<span class="bg-primary/10 text-primary text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">add</span>
|
||||
5 New
|
||||
</span>
|
||||
<span class="text-[#5f7a96] text-xs">this week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Charts Section -->
|
||||
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||||
<!-- Bar Chart: Monthly Trends -->
|
||||
<div class="xl:col-span-2 bg-[#1a2632] border border-[#233648] rounded-xl p-6 flex flex-col">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h3 class="text-white text-lg font-bold">Monthly Trends</h3>
|
||||
<p class="text-[#92adc9] text-sm">Income vs Expense over time</p>
|
||||
</div>
|
||||
<button class="text-[#92adc9] hover:text-white text-sm bg-[#233648] px-3 py-1.5 rounded-lg transition-colors">Last 6 Months</button>
|
||||
</div>
|
||||
<div class="flex-1 flex items-end gap-3 sm:gap-6 min-h-[240px] px-2 pb-2">
|
||||
<!-- Bars generation -->
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[140px] group-hover:bg-[#2d445a] transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/50 h-[60%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-[#92adc9] text-xs font-medium">Jan</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[180px] group-hover:bg-[#2d445a] transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/60 h-[45%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-[#92adc9] text-xs font-medium">Feb</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[160px] group-hover:bg-[#2d445a] transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/70 h-[70%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-[#92adc9] text-xs font-medium">Mar</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[200px] group-hover:bg-[#2d445a] transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary h-[55%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-[#92adc9] text-xs font-medium">Apr</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[150px] group-hover:bg-[#2d445a] transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary/80 h-[80%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-[#92adc9] text-xs font-medium">May</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-2 flex-1 group cursor-pointer">
|
||||
<div class="w-full max-w-[40px] bg-[#233648] rounded-t-sm relative h-[190px] group-hover:bg-[#2d445a] transition-all">
|
||||
<div class="absolute bottom-0 w-full bg-primary h-[65%] rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-[#92adc9] text-xs font-medium">Jun</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pie Chart: Expense Distribution -->
|
||||
<div class="bg-[#1a2632] border border-[#233648] rounded-xl p-6 flex flex-col">
|
||||
<h3 class="text-white text-lg font-bold mb-1">Expense Distribution</h3>
|
||||
<p class="text-[#92adc9] text-sm mb-6">Breakdown by category</p>
|
||||
<div class="flex-1 flex items-center justify-center relative">
|
||||
<!-- CSS Conic Gradient Pie Chart -->
|
||||
<div class="size-52 rounded-full relative" style="background: conic-gradient(
|
||||
#2b8cee 0% 35%,
|
||||
#a855f7 35% 60%,
|
||||
#0bda5b 60% 80%,
|
||||
#f59e0b 80% 90%,
|
||||
#ef4444 90% 100%
|
||||
);">
|
||||
<!-- Inner hole for donut effect -->
|
||||
<div class="absolute inset-4 bg-[#1a2632] rounded-full flex flex-col items-center justify-center z-10">
|
||||
<span class="text-[#92adc9] text-xs font-medium">Total</span>
|
||||
<span class="text-white text-xl font-bold">$2,450</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Legend -->
|
||||
<div class="mt-6 grid grid-cols-2 gap-y-2 gap-x-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-primary"></span>
|
||||
<span class="text-[#92adc9] text-xs">House</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-purple-500"></span>
|
||||
<span class="text-[#92adc9] text-xs">Mortgage</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-green-500"></span>
|
||||
<span class="text-[#92adc9] text-xs">Car</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2.5 rounded-full bg-orange-500"></span>
|
||||
<span class="text-[#92adc9] text-xs">Food</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Categories Grid -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-white text-lg font-bold">Expense Categories</h3>
|
||||
<a class="text-primary text-sm font-medium hover:text-primary/80" href="#">View All</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<!-- Category Card 1 -->
|
||||
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-green-500/10 flex items-center justify-center text-green-500 group-hover:bg-green-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">directions_car</span>
|
||||
</div>
|
||||
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">3 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#92adc9] text-sm font-medium">Car Expenses</span>
|
||||
<span class="text-white text-xl font-bold mt-1">$450.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||||
<div class="bg-green-500 h-full rounded-full" style="width: 18%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Card 2 -->
|
||||
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
</div>
|
||||
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">5 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#92adc9] text-sm font-medium">House Expenses-Bills</span>
|
||||
<span class="text-white text-xl font-bold mt-1">$1,200.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||||
<div class="bg-primary h-full rounded-full" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Card 3 -->
|
||||
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-500 group-hover:bg-orange-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">restaurant</span>
|
||||
</div>
|
||||
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">12 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#92adc9] text-sm font-medium">Food & Drink</span>
|
||||
<span class="text-white text-xl font-bold mt-1">$350.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||||
<div class="bg-orange-500 h-full rounded-full" style="width: 14%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Card 4 -->
|
||||
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-red-500/10 flex items-center justify-center text-red-500 group-hover:bg-red-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">smoking_rooms</span>
|
||||
</div>
|
||||
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">8 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#92adc9] text-sm font-medium">Smoking</span>
|
||||
<span class="text-white text-xl font-bold mt-1">$120.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||||
<div class="bg-red-500 h-full rounded-full" style="width: 5%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Card 5 -->
|
||||
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-500 group-hover:bg-purple-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">account_balance</span>
|
||||
</div>
|
||||
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">1 txn</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#92adc9] text-sm font-medium">Mortgage</span>
|
||||
<span class="text-white text-xl font-bold mt-1">$800.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||||
<div class="bg-purple-500 h-full rounded-full" style="width: 32%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Category Card 6 -->
|
||||
<div class="bg-[#1a2632] p-5 rounded-lg border border-[#233648] hover:border-primary/50 transition-colors group">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="size-10 rounded-lg bg-cyan-500/10 flex items-center justify-center text-cyan-500 group-hover:bg-cyan-500 group-hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">shopping_cart</span>
|
||||
</div>
|
||||
<span class="bg-[#233648] text-[#92adc9] text-[10px] font-bold px-2 py-1 rounded-full">4 txns</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[#92adc9] text-sm font-medium">Supermarket</span>
|
||||
<span class="text-white text-xl font-bold mt-1">$200.00</span>
|
||||
</div>
|
||||
<div class="w-full bg-[#233648] h-1 rounded-full mt-4">
|
||||
<div class="bg-cyan-500 h-full rounded-full" style="width: 8%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
backup/new theme/stitch_expense_tracking_dashboard/screen.png
Normal file
BIN
backup/new theme/stitch_expense_tracking_dashboard/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Loading…
Add table
Add a link
Reference in a new issue