611 lines
36 KiB
HTML
611 lines
36 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Expense Tracking</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<nav class="navbar">
|
|
<div class="navbar-container">
|
|
<a href="#" class="navbar-brand">FinTrackAI</a>
|
|
|
|
<button class="navbar-toggler" aria-label="Toggle navigation menu">
|
|
<span class="toggler-bar"></span>
|
|
<span class="toggler-bar"></span>
|
|
<span class="toggler-bar"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link">Accounts</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link">Expenses</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link">Forecast</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link">Advice</a></li>
|
|
</ul>
|
|
|
|
<div class="navbar-actions">
|
|
<a href="#" class="btn btn-secondary">Sign In</a>
|
|
<a href="#" class="btn btn-primary">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<section id="expense-overview-header" class="expense-overview-section">
|
|
<div class="container">
|
|
<header class="expense-header-controls">
|
|
<h2 class="section-title">Expense Overview</h2>
|
|
<div class="date-range-selector">
|
|
<label for="expense-period-select" class="visually-hidden">Select Expense Period</label>
|
|
<select id="expense-period-select" class="select-period">
|
|
<option value="current-month">This Month</option>
|
|
<option value="last-month">Last Month</option>
|
|
<option value="last-3-months">Last 3 Months</option>
|
|
<option value="current-year">This Year</option>
|
|
<option value="custom">Custom Range</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="expense-summary-cards">
|
|
<div class="summary-card">
|
|
<p class="card-label">Total Spent</p>
|
|
<p class="card-value">$1,234.56</p>
|
|
<p class="card-description">as of October 25, 2023</p>
|
|
</div>
|
|
<div class="summary-card">
|
|
<p class="card-label">Remaining Budget</p>
|
|
<p class="card-value text-positive">$765.44</p>
|
|
<p class="card-description">of $2,000.00 monthly budget</p>
|
|
</div>
|
|
<div class="summary-card">
|
|
<p class="card-label">Largest Expense</p>
|
|
<p class="card-value">$350.00</p>
|
|
<p class="card-description">Groceries on Oct 22</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="expense-actions">
|
|
<button class="button button-primary">Add New Expense</button>
|
|
<button class="button button-secondary">View All Transactions</button>
|
|
<button class="button button-tertiary">Analyze Spending Patterns</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="transaction-list-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Transaction History</h2>
|
|
|
|
<div class="filters-controls">
|
|
<div class="filter-group">
|
|
<label for="date-range-filter" class="sr-only">Filter by Date Range</label>
|
|
<select id="date-range-filter" class="filter-select">
|
|
<option value="last-30-days">Last 30 Days</option>
|
|
<option value="this-month">This Month</option>
|
|
<option value="last-month">Last Month</option>
|
|
<option value="this-year">This Year</option>
|
|
<option value="custom">Custom Range</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="account-filter" class="sr-only">Filter by Account</label>
|
|
<select id="account-filter" class="filter-select">
|
|
<option value="all-accounts">All Accounts</option>
|
|
<option value="checking">Checking (...1234)</option>
|
|
<option value="savings">Savings (...5678)</option>
|
|
<option value="investment">Investment (...9012)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="category-filter" class="sr-only">Filter by Category</label>
|
|
<select id="category-filter" class="filter-select">
|
|
<option value="all-categories">All Categories</option>
|
|
<option value="food">Food & Dining</option>
|
|
<option value="housing">Housing</option>
|
|
<option value="transportation">Transportation</option>
|
|
<option value="utilities">Utilities</option>
|
|
<option value="income">Income</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="search-group">
|
|
<label for="transaction-search" class="sr-only">Search Transactions</label>
|
|
<input type="search" id="transaction-search" class="search-input" placeholder="Search transactions...">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transaction-table-wrapper">
|
|
<table class="transaction-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="date-col">Date</th>
|
|
<th scope="col" class="description-col">Description</th>
|
|
<th scope="col" class="category-col">Category</th>
|
|
<th scope="col" class="account-col">Account</th>
|
|
<th scope="col" class="amount-col">Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Date">Oct 26, 2023</td>
|
|
<td data-label="Description">Starbucks Coffee</td>
|
|
<td data-label="Category">Food & Dining</td>
|
|
<td data-label="Account">Checking (...1234)</td>
|
|
<td data-label="Amount" class="expense">-$5.75</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Date">Oct 25, 2023</td>
|
|
<td data-label="Description">Groceries at Whole Foods</td>
|
|
<td data-label="Category">Groceries</td>
|
|
<td data-label="Account">Checking (...1234)</td>
|
|
<td data-label="Amount" class="expense">-$82.30</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Date">Oct 25, 2023</td>
|
|
<td data-label="Description">Salary Deposit</td>
|
|
<td data-label="Category">Income</td>
|
|
<td data-label="Account">Checking (...1234)</td>
|
|
<td data-label="Amount" class="income">+$2,500.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Date">Oct 24, 2023</td>
|
|
<td data-label="Description">Netflix Subscription</td>
|
|
<td data-label="Category">Entertainment</td>
|
|
<td data-label="Account">Savings (...5678)</td>
|
|
<td data-label="Amount" class="expense">-$19.99</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Date">Oct 23, 2023</td>
|
|
<td data-label="Description">Investment Purchase (AAPL)</td>
|
|
<td data-label="Category">Investments</td>
|
|
<td data-label="Account">Investment (...9012)</td>
|
|
<td data-label="Amount" class="expense">-$500.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Date">Oct 22, 2023</td>
|
|
<td data-label="Description">Utility Bill (Electricity)</td>
|
|
<td data-label="Category">Utilities</td>
|
|
<td data-label="Account">Checking (...1234)</td>
|
|
<td data-label="Amount" class="expense">-$75.50</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination-controls">
|
|
<button class="load-more-btn">Load More Transactions</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="category-breakdown-chart" class="section-padding">
|
|
<div class="container">
|
|
<h2 class="section-title">Your Financial Categories at a Glance</h2>
|
|
<p class="section-description">Understand where your money is going with a detailed breakdown of your expenses and income categories.</p>
|
|
|
|
<div class="chart-controls">
|
|
<button class="control-button active">Last 30 Days</button>
|
|
<button class="control-button">This Quarter</button>
|
|
<button class="control-button">This Year</button>
|
|
<select class="control-select">
|
|
<option value="all-accounts">All Accounts</option>
|
|
<option value="checking">Checking</option>
|
|
<option value="credit-card">Credit Card</option>
|
|
<option value="investments">Investments</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="chart-content-wrapper">
|
|
<div class="chart-area">
|
|
<p class="chart-placeholder-text">Placeholder for Dynamic Chart Visualization (e.g., Pie Chart, Bar Chart)</p>
|
|
<div class="chart-visual-placeholder"></div>
|
|
</div>
|
|
<div class="chart-legend">
|
|
<h3>Category Details</h3>
|
|
<ul class="category-list">
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #FF6384;"></span>
|
|
<span class="category-name">Housing & Utilities</span>
|
|
<span class="category-value">$1,850.00 <span class="percentage">(38%)</span></span>
|
|
</li>
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #36A2EB;"></span>
|
|
<span class="category-name">Food & Groceries</span>
|
|
<span class="category-value">$720.50 <span class="percentage">(15%)</span></span>
|
|
</li>
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #FFCD56;"></span>
|
|
<span class="category-name">Transportation</span>
|
|
<span class="category-value">$500.00 <span class="percentage">(10%)</span></span>
|
|
</li>
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #4BC0C0;"></span>
|
|
<span class="category-name">Shopping & Personal Care</span>
|
|
<span class="category-value">$650.00 <span class="percentage">(13%)</span></span>
|
|
</li>
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #9966FF;"></span>
|
|
<span class="category-name">Entertainment & Leisure</span>
|
|
<span class="category-value">$400.00 <span class="percentage">(8%)</span></span>
|
|
</li>
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #FF9F40;"></span>
|
|
<span class="category-name">Health & Wellness</span>
|
|
<span class="category-value">$280.00 <span class="percentage">(6%)</span></span>
|
|
</li>
|
|
<li class="category-item">
|
|
<span class="color-swatch" style="background-color: #C9CBCF;"></span>
|
|
<span class="category-name">Other Expenses</span>
|
|
<span class="category-value">$500.00 <span class="percentage">(10%)</span></span>
|
|
</li>
|
|
</ul>
|
|
<p class="legend-note">Data reflects spending from linked accounts during the selected period.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="budgeting-tool" class="section-container">
|
|
<div class="container">
|
|
<h2 class="section-title">Budgeting Tool</h2>
|
|
<p class="section-description">Take control of your finances. Link your bank accounts, track every expense, forecast your savings, and make smarter financial decisions.</p>
|
|
|
|
<div class="grid-layout">
|
|
<!-- Budget Overview Card -->
|
|
<div class="card budget-overview-card">
|
|
<h3 class="card-title">Current Budget Overview</h3>
|
|
<div class="card-content">
|
|
<div class="metric-group">
|
|
<p class="metric-label">Income This Month:</p>
|
|
<p class="metric-value placeholder-income">$XXXX.XX</p>
|
|
</div>
|
|
<div class="metric-group">
|
|
<p class="metric-label">Expenses This Month:</p>
|
|
<p class="metric-value placeholder-expenses">$XXXX.XX</p>
|
|
</div>
|
|
<div class="metric-group remaining-budget">
|
|
<p class="metric-label">Remaining Budget:</p>
|
|
<p class="metric-value placeholder-remaining">$XXXX.XX</p>
|
|
</div>
|
|
<div class="chart-placeholder">
|
|
<p>[Placeholder: Visual Bar Chart - Income vs. Expenses]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expense Tracking Card -->
|
|
<div class="card expense-tracking-card">
|
|
<h3 class="card-title">Track Expenses</h3>
|
|
<div class="card-content">
|
|
<div class="input-form-placeholder">
|
|
<p>[Placeholder: Input fields for 'Amount', 'Category', 'Description', 'Date']</p>
|
|
<button class="button primary-button">Add Expense</button>
|
|
</div>
|
|
<h4 class="sub-title">Recent Transactions</h4>
|
|
<ul class="transaction-list">
|
|
<li class="transaction-item">
|
|
<span class="transaction-description">Groceries</span>
|
|
<span class="transaction-amount">-$XX.XX</span>
|
|
<span class="transaction-date">MM/DD/YYYY</span>
|
|
</li>
|
|
<li class="transaction-item">
|
|
<span class="transaction-description">Rent Payment</span>
|
|
<span class="transaction-amount">-$XXX.XX</span>
|
|
<span class="transaction-date">MM/DD/YYYY</span>
|
|
</li>
|
|
<li class="transaction-item">
|
|
<span class="transaction-description">Salary Deposit</span>
|
|
<span class="transaction-amount">+$XXXX.XX</span>
|
|
<span class="transaction-date">MM/DD/YYYY</span>
|
|
</li>
|
|
<li class="transaction-item">
|
|
<span class="transaction-description">Utilities Bill</span>
|
|
<span class="transaction-amount">-$XX.XX</span>
|
|
<span class="transaction-date">MM/DD/YYYY</span>
|
|
</li>
|
|
</ul>
|
|
<button class="button secondary-button">View All Transactions</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Savings Goals & Forecast Card -->
|
|
<div class="card savings-forecast-card">
|
|
<h3 class="card-title">Savings Goals & Forecast</h3>
|
|
<div class="card-content">
|
|
<ul class="goal-list">
|
|
<li class="goal-item">
|
|
<span class="goal-name">Down Payment</span>
|
|
<span class="goal-progress">Progress: XX% ($X,XXX / $XX,XXX)</span>
|
|
</li>
|
|
<li class="goal-item">
|
|
<span class="goal-name">Emergency Fund</span>
|
|
<span class="goal-progress">Progress: XX% ($X,XXX / $X,XXX)</span>
|
|
</li>
|
|
<li class="goal-item">
|
|
<span class="goal-name">Vacation Fund</span>
|
|
<span class="goal-progress">Progress: XX% ($XXX / $X,XXX)</span>
|
|
</li>
|
|
</ul>
|
|
<div class="chart-placeholder">
|
|
<p>[Placeholder: Line Chart - Savings Projection Over Time]</p>
|
|
</div>
|
|
<button class="button primary-button">Set New Goal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linked Accounts Card -->
|
|
<div class="card linked-accounts-card">
|
|
<h3 class="card-title">Linked Accounts</h3>
|
|
<div class="card-content">
|
|
<p>Connect your financial institutions to automatically track income and expenses using Plaid or similar services.</p>
|
|
<button class="button primary-button connect-plaid-button">
|
|
<span class="icon-placeholder">[🔗]</span> Link New Account
|
|
</button>
|
|
<h4 class="sub-title">Your Linked Banks:</h4>
|
|
<ul class="account-list">
|
|
<li class="account-item">Bank of America <span class="status-indicator">[Active]</span></li>
|
|
<li class="account-item">Fidelity Investments <span class="status-indicator">[Active]</span></li>
|
|
<li class="account-item">Chase Bank <span class="status-indicator">[Active]</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Budgeting Insights Card -->
|
|
<div class="card ai-insights-card">
|
|
<h3 class="card-title">Personalized Budgeting Advice</h3>
|
|
<div class="card-content">
|
|
<p>Our AI analyzes your spending habits and financial goals to provide tailored recommendations.</p>
|
|
<ul class="advice-list">
|
|
<li>"Consider reducing spending in 'Dining Out' by 15% this month for faster goal achievement."</li>
|
|
<li>"You have an opportunity to save an extra $XX by optimizing your 'Shopping' budget."</li>
|
|
<li>"Your projected savings goal is achievable X months earlier if you increase contributions by $XX."</li>
|
|
</ul>
|
|
<button class="button secondary-button">Get More Insights</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="expense-management" class="py-12 bg-gray-50 dark:bg-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Expense Filtering & Sorting</h2>
|
|
|
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 mb-8">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Filter Expenses</h3>
|
|
<form class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div>
|
|
<label for="search-expenses" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search by Merchant/Description</label>
|
|
<input type="search" id="search-expenses" name="search" placeholder="e.g., Starbucks, Rent" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="filter-category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
|
|
<select id="filter-category" name="category" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="">All Categories</option>
|
|
<option value="food">Food & Dining</option>
|
|
<option value="transport">Transportation</option>
|
|
<option value="bills">Bills & Utilities</option>
|
|
<option value="shopping">Shopping</option>
|
|
<option value="entertainment">Entertainment</option>
|
|
<option value="health">Health & Fitness</option>
|
|
<option value="housing">Housing</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="filter-account" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Account</label>
|
|
<select id="filter-account" name="account" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="">All Accounts</option>
|
|
<option value="checking">Checking Account (**** 1234)</option>
|
|
<option value="savings">Savings Account (**** 5678)</option>
|
|
<option value="credit">Credit Card (**** 9012)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-span-1 md:col-span-2 lg:col-span-1">
|
|
<label for="filter-start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range (From)</label>
|
|
<input type="date" id="filter-start-date" name="startDate" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2 lg:col-span-1">
|
|
<label for="filter-end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range (To)</label>
|
|
<input type="date" id="filter-end-date" name="endDate" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="filter-min-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Amount</label>
|
|
<input type="number" id="filter-min-amount" name="minAmount" placeholder="$0.00" min="0" step="0.01" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
</div>
|
|
<div>
|
|
<label for="filter-max-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Amount</label>
|
|
<input type="number" id="filter-max-amount" name="maxAmount" placeholder="$1000.00" min="0" step="0.01" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
</div>
|
|
|
|
<div class="col-span-full flex justify-end space-x-3 mt-4">
|
|
<button type="reset" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Clear Filters
|
|
</button>
|
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 mb-8">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Sort Expenses</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="sort-by" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
|
|
<select id="sort-by" name="sortBy" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="date">Date</option>
|
|
<option value="amount">Amount</option>
|
|
<option value="category">Category</option>
|
|
<option value="merchant">Merchant</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="sort-order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort Order</label>
|
|
<select id="sort-order" name="sortOrder" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="desc">Descending</option>
|
|
<option value="asc">Ascending</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 overflow-x-auto">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Your Expenses</h3>
|
|
<div class="min-w-full">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Merchant</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Amount</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Account</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-26</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Coffee Shop Name</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Food & Dining</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$5.50</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Checking</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-25</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Grocery Store Name</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Shopping</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$75.23</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Credit Card</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-24</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Electric Company</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Bills & Utilities</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$120.00</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Checking</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-23</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Online Streaming Service</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Entertainment</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$15.99</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Credit Card</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-22</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Gas Station</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Transportation</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$40.00</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Savings</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<nav class="mt-6 flex justify-between items-center" aria-label="Pagination">
|
|
<div class="hidden sm:block">
|
|
<p class="text-sm text-gray-700 dark:text-gray-300">
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">50</span> results
|
|
</p>
|
|
</div>
|
|
<div class="flex-1 flex justify-between sm:justify-end">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
|
Previous
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
|
Next
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="footer">
|
|
<div class="footer-container">
|
|
<div class="footer-brand">
|
|
<a href="#" class="footer-logo">
|
|
<!-- Placeholder for logo image or text -->
|
|
<span class="logo-text">FinTrack AI</span>
|
|
</a>
|
|
<p class="footer-description">
|
|
Your smart financial companion for tracking, forecasting, and investing.
|
|
</p>
|
|
</div>
|
|
|
|
<nav class="footer-nav">
|
|
<div class="footer-nav-column">
|
|
<h3 class="footer-heading">Product</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">How It Works</a></li>
|
|
<li><a href="#">Expense Tracking</a></li>
|
|
<li><a href="#">Savings Forecast</a></li>
|
|
<li><a href="#">AI Investment Advice</a></li>
|
|
<li><a href="#">Security</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-nav-column">
|
|
<h3 class="footer-heading">Company</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Careers</a></li>
|
|
<li><a href="#">Blog</a></li>
|
|
<li><a href="#">Press</a></li>
|
|
<li><a href="#">Developers (API)</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-nav-column">
|
|
<h3 class="footer-heading">Support</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">FAQ</a></li>
|
|
<li><a href="#">Help Center</a></li>
|
|
<li><a href="#">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-nav-column">
|
|
<h3 class="footer-heading">Legal</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
<li><a href="#">Disclaimer</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="footer-social">
|
|
<h3 class="footer-heading">Connect</h3>
|
|
<div class="social-icons">
|
|
<a href="#" aria-label="Facebook"><span class="icon-placeholder">Fb</span></a>
|
|
<a href="#" aria-label="Twitter"><span class="icon-placeholder">Tw</span></a>
|
|
<a href="#" aria-label="LinkedIn"><span class="icon-placeholder">Li</span></a>
|
|
<a href="#" aria-label="Instagram"><span class="icon-placeholder">Ig</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p class="footer-copyright">
|
|
© 2023 FinTrack AI. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |