379 lines
No EOL
18 KiB
HTML
379 lines
No EOL
18 KiB
HTML
<!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> |