Initial commit
This commit is contained in:
iulian
commit
983cee0320
322 changed files with 57174 additions and 0 deletions
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Loading…
Add table
Add a link
Reference in a new issue