<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Finance Tracker</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
<style>
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.sidebar {
transition: all 0.3s;
}
@media print {
.no-print {
display: none;
}
}
.custom-card {
transition: transform 0.3s ease;
}
.custom-card:hover {
transform: translateY(-5px);
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.bg-pattern {
background-color: #f9fafb;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a9b1c1' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>
</head>
<body class="bg-pattern min-h-screen">
<div class="flex flex-col h-screen bg-gray-100">
<!-- Header -->
<header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold flex items-center">
<i class="fas fa-wallet mr-2"></i> MyFinance Tracker
</h1>
<div class="flex space-x-4">
<button id="exportExcel" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-md flex items-center transition duration-200">
<i class="fas fa-file-excel mr-2"></i> Export Excel
</button>
<button id="exportPDF" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-md flex items-center transition duration-200">
<i class="fas fa-file-pdf mr-2"></i> Export PDF
</button>
<button id="settingsBtn" class="bg-gray-700 hover:bg-gray-800 text-white px-3 py-1 rounded-md flex items-center transition duration-200">
<i class="fas fa-cog mr-2"></i> Settings
</button>
</div>
</div>
</header>
<!-- Main Content -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-indigo-800 text-white w-64 flex flex-col shadow-xl">
<div class="p-4">
<div class="bg-indigo-900 rounded-lg p-3 mb-4 shadow-inner">
<div class="text-sm opacity-75">Total Balance</div>
<div class="text-2xl font-bold" id="totalBalance">₹0.00</div>
</div>
</div>
<nav class="flex-1 overflow-y-auto">
<ul>
<li class="tab-link mb-1" data-tab="dashboard">
<a href="#" class="flex items-center px-4 py-3 bg-indigo-700 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-home w-8"></i>
<span>Dashboard</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="credit-cards">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-credit-card w-8"></i>
<span>Credit Cards</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="upi">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-mobile-alt w-8"></i>
<span>UPI Accounts</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="bank-accounts">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-university w-8"></i>
<span>Bank Accounts</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="fastag">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-car w-8"></i>
<span>FASTag</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="transactions">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-exchange-alt w-8"></i>
<span>Transactions</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="categories">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-tags w-8"></i>
<span>Categories</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="reminders">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-bell w-8"></i>
<span>Reminders</span>
</a>
</li>
<li class="tab-link mb-1" data-tab="reports">
<a href="#" class="flex items-center px-4 py-3 hover:bg-indigo-600 transition duration-200">
<i class="fas fa-chart-pie w-8"></i>
<span>Reports</span>
</a>
</li>
</ul>
</nav>
<div class="p-4 text-sm">
<div class="bg-indigo-900 rounded-lg p-3 shadow-inner">
<p class="mb-2">Need help?</p>
<button class="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1 rounded-md w-full flex items-center justify-center transition duration-200">
<i class="fas fa-question-circle mr-2"></i> Help Guide
</button>
</div>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-6">
<!-- Dashboard Tab -->
<div id="dashboard" class="tab-content active">
<h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">Financial Dashboard</h2>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-blue-500 custom-card">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">Credit Card Balance</p>
<p class="text-xl font-bold text-gray-800" id="creditCardBalance">₹0.00</p>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-500">
<i class="fas fa-credit-card text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-green-500 custom-card">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">Bank Balance</p>
<p class="text-xl font-bold text-gray-800" id="bankBalance">₹0.00</p>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-500">
<i class="fas fa-university text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-purple-500 custom-card">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">UPI Transactions</p>
<p class="text-xl font-bold text-gray-800" id="upiTransactions">0</p>
</div>
<div class="p-3 rounded-full bg-purple-100 text-purple-500">
<i class="fas fa-mobile-alt text-xl"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-yellow-500 custom-card">
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500">FASTag Balance</p>
<p class="text-xl font-bold text-gray-800" id="fastagBalance">₹0.00</p>
</div>
<div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
<i class="fas fa-car text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Recent Transactions and Expense Chart -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Recent Transactions</h3>
<div class="overflow-x-auto">
<table class="min-w-full" id="recentTransactionsTable">
<thead>
<tr class="bg-gray-50">
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Date</th>
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Description</th>
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Amount</th>
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Method</th>
</tr>
</thead>
<tbody>
<tr class="text-gray-500 text-center">
<td colspan="4" class="py-4">No transactions yet</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Expense By Category</h3>
<div class="h-64">
<canvas id="expenseChart"></canvas>
</div>
</div>
</div>
<!-- Upcoming Reminders -->
<div class="bg-white rounded-lg shadow-md p-4 mb-8">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Upcoming Payment Reminders</h3>
<div class="overflow-x-auto">
<table class="min-w-full" id="upcomingRemindersTable">
<thead>
<tr class="bg-gray-50">
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Due Date</th>
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Description</th>
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Amount</th>
<th class="px-4 py-2 text-left text-sm font-medium text-gray-500">Actions</th>
</tr>
</thead>
<tbody>
<tr class="text-gray-500 text-center">
<td colspan="4" class="py-4">No upcoming reminders</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md p-6 text-center custom-card">
<div class="bg-indigo-100 inline-block p-3 rounded-full mb-4">
<i class="fas fa-plus text-indigo-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Add Transaction</h3>
<p class="text-gray-500 mb-4">Record your latest expenses or income</p>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md w-full transition duration-200" id="quickAddTransaction">
Add Now
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center custom-card">
<div class="bg-green-100 inline-block p-3 rounded-full mb-4">
<i class="fas fa-bell text-green-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Set Reminder</h3>
<p class="text-gray-500 mb-4">Never miss a payment date again</p>
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md w-full transition duration-200" id="quickSetReminder">
Create Reminder
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center custom-card">
<div class="bg-purple-100 inline-block p-3 rounded-full mb-4">
<i class="fas fa-chart-bar text-purple-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">View Reports</h3>
<p class="text-gray-500 mb-4">Analyze your spending patterns</p>
<button class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-md w-full transition duration-200" id="quickViewReports">
View Reports
</button>
</div>
</div>
</div>
<!-- Credit Cards Tab -->
<div id="credit-cards" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Credit Cards</h2>
<button id="addCreditCardBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add Credit Card
</button>
</div>
<!-- Credit Card Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8" id="creditCardsList">
<!-- Example Credit Card -->
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl shadow-lg p-6 text-white relative overflow-hidden">
<div class="absolute right-0 top-0 mt-4 mr-4">
<button class="text-white opacity-75 hover:opacity-100">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="mb-8">
<i class="fab fa-cc-visa text-4xl opacity-80"></i>
</div>
<div class="mb-4">
<p class="text-sm opacity-75">Card Number</p>
<p class="text-xl">•••• •••• •••• 1234</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm opacity-75">Name</p>
<p>John Doe</p>
</div>
<div>
<p class="text-sm opacity-75">Expiry</p>
<p>12/25</p>
</div>
</div>
<div class="mt-4 border-t border-white border-opacity-20 pt-4">
<div class="flex justify-between">
<div>
<p class="text-sm opacity-75">Credit Limit</p>
<p class="font-bold">₹1,00,000</p>
</div>
<div>
<p class="text-sm opacity-75">Used</p>
<p class="font-bold">₹25,000</p>
</div>
<div>
<p class="text-sm opacity-75">Available</p>
<p class="font-bold">₹75,000</p>
</div>
</div>
<div class="mt-2 bg-white bg-opacity-20 rounded-full h-2">
<div class="bg-white h-2 rounded-full" style="width: 25%;"></div>
</div>
</div>
</div>
</div>
<!-- Recent Credit Card Transactions -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Recent Transactions</h3>
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<table class="min-w-full" id="creditCardTransactionsTable">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Card</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="text-gray-500 text-center">
<td colspan="5" class="px-6 py-4">No transactions yet</td>
</tr>
</tbody>
</table>
</div>
<!-- Payment Due Summary -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Upcoming Payments</h3>
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" id="upcomingPaymentsList">
<!-- Example Payment Due -->
<div class="bg-red-50 border border-red-100 rounded-lg p-4">
<div class="flex justify-between items-center mb-3">
<div class="font-bold text-red-600">HDFC Bank</div>
<div class="text-sm text-gray-500">Due in 3 days</div>
</div>
<div class="mb-3">
<div class="text-2xl font-bold text-gray-800">₹12,500</div>
<div class="text-sm text-gray-500">Due Date: 15 Jul 2023</div>
</div>
<div class="flex justify-between">
<button class="bg-white hover:bg-gray-50 text-red-600 border border-red-200 px-3 py-1 rounded-md text-sm transition duration-200">
<i class="fas fa-bell mr-1"></i> Remind
</button>
<button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-md text-sm transition duration-200">
<i class="fas fa-credit-card mr-1"></i> Pay Now
</button>
</div>
</div>
</div>
</div>
</div>
<!-- UPI Tab -->
<div id="upi" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">UPI Accounts</h2>
<button id="addUPIBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add UPI ID
</button>
</div>
<!-- UPI Accounts -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8" id="upiAccountsList">
<!-- Example UPI Account -->
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-purple-500">
<div class="flex justify-between items-center mb-4">
<div class="text-xl font-bold text-gray-800">Google Pay</div>
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-purple-100">
<i class="fab fa-google text-purple-500"></i>
</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500">UPI ID</div>
<div class="font-medium">john.doe@okicici</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500">Linked Account</div>
<div class="font-medium">ICICI Bank (...4567)</div>
</div>
<div class="flex justify-between items-center">
<div>
<div class="text-sm text-gray-500">Monthly Transactions</div>
<div class="font-bold">12</div>
</div>
<div>
<div class="text-sm text-gray-500">Monthly Spend</div>
<div class="font-bold text-purple-600">₹25,430</div>
</div>
</div>
</div>
</div>
<!-- UPI Transactions -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Recent UPI Transactions</h3>
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<table class="min-w-full" id="upiTransactionsTable">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">UPI ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="text-gray-500 text-center">
<td colspan="5" class="px-6 py-4">No transactions yet</td>
</tr>
</tbody>
</table>
</div>
<!-- UPI Analysis -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">UPI Usage by App</h3>
<div class="h-64">
<canvas id="upiUsageChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Monthly UPI Trend</h3>
<div class="h-64">
<canvas id="upiTrendChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Bank Accounts Tab -->
<div id="bank-accounts" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Bank Accounts</h2>
<button id="addBankAccountBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add Bank Account
</button>
</div>
<!-- Bank Accounts -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8" id="bankAccountsList">
<!-- Example Bank Account -->
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-green-500">
<div class="flex justify-between items-center mb-4">
<div class="text-xl font-bold text-gray-800">HDFC Bank</div>
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-green-100">
<i class="fas fa-university text-green-500"></i>
</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500">Account Number</div>
<div class="font-medium">XXXX XXXX 1234</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500">Account Type</div>
<div class="font-medium">Savings</div>
</div>
<div class="mb-2">
<div class="text-sm text-gray-500">Current Balance</div>
<div class="text-2xl font-bold text-green-600">₹1,25,430</div>
</div>
<button class="w-full bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm transition duration-200">
View Transactions
</button>
</div>
</div>
<!-- Bank Transactions -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Recent Bank Transactions</h3>
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<table class="min-w-full" id="bankTransactionsTable">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="text-gray-500 text-center">
<td colspan="6" class="px-6 py-4">No transactions yet</td>
</tr>
</tbody>
</table>
</div>
<!-- Bank Analysis -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Income vs Expenses</h3>
<div class="h-64">
<canvas id="incomeExpensesChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Balance Trend</h3>
<div class="h-64">
<canvas id="balanceTrendChart"></canvas>
</div>
</div>
</div>
</div>
<!-- FASTag Tab -->
<div id="fastag" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">FASTag Management</h2>
<button id="addFastagBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add FASTag
</button>
</div>
<!-- FASTag Accounts -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8" id="fastagAccountsList">
<!-- Example FASTag -->
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-yellow-500">
<div class="flex justify-between items-center mb-4">
<div class="text-xl font-bold text-gray-800">ICICI FASTag</div>
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-yellow-100">
<i class="fas fa-car text-yellow-500"></i>
</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500">Vehicle Number</div>
<div class="font-medium">MH02 AB 1234</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500">FASTag ID</div>
<div class="font-medium">8412756345</div>
</div>
<div class="mb-2">
<div class="text-sm text-gray-500">Current Balance</div>
<div class="text-2xl font-bold text-yellow-600">₹850</div>
</div>
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-2 rounded-md text-sm transition duration-200">
Recharge Now
</button>
</div>
</div>
<!-- FASTag Transactions -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Recent FASTag Transactions</h3>
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<table class="min-w-full" id="fastagTransactionsTable">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicle</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Toll Plaza</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="text-gray-500 text-center">
<td colspan="5" class="px-6 py-4">No transactions yet</td>
</tr>
</tbody>
</table>
</div>
<!-- FASTag Analysis -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Monthly FASTag Expenses</h3>
<div class="h-64">
<canvas id="fastagExpensesChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Top Toll Plazas</h3>
<div class="h-64">
<canvas id="topTollsChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Transactions Tab -->
<div id="transactions" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">All Transactions</h2>
<button id="addTransactionBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add Transaction
</button>
</div>
<!-- Transaction Filters -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Account Type</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="">All Accounts</option>
<option value="credit-card">Credit Cards</option>
<option value="bank">Bank Accounts</option>
<option value="upi">UPI</option>
<option value="fastag">FASTag</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="">All Categories</option>
<option value="food">Food & Dining</option>
<option value="shopping">Shopping</option>
<option value="travel">Travel</option>
<option value="bills">Bills & Utilities</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="this-month">This Month</option>
<option value="last-month">Last Month</option>
<option value="3-months">Last 3 Months</option>
<option value="6-months">Last 6 Months</option>
<option value="custom">Custom Range</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
<input type="text" placeholder="Search transactions..." class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
</div>
</div>
<!-- Transactions List -->
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<table class="min-w-full" id="allTransactionsTable">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="text-gray-500 text-center">
<td colspan="7" class="px-6 py-4">No transactions yet</td>
</tr>
</tbody>
</table>
</div>
<!-- Transaction Summary -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-green-500">
<div class="text-sm text-gray-500 mb-1">Total Income</div>
<div class="text-2xl font-bold text-green-600 mb-2">₹0.00</div>
<div class="text-sm text-gray-500">
<span class="text-green-500">
<i class="fas fa-arrow-up"></i> 0%
</span>
compared to last period
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-red-500">
<div class="text-sm text-gray-500 mb-1">Total Expenses</div>
<div class="text-2xl font-bold text-red-600 mb-2">₹0.00</div>
<div class="text-sm text-gray-500">
<span class="text-red-500">
<i class="fas fa-arrow-up"></i> 0%
</span>
compared to last period
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-blue-500">
<div class="text-sm text-gray-500 mb-1">Net Cash Flow</div>
<div class="text-2xl font-bold text-blue-600 mb-2">₹0.00</div>
<div class="text-sm text-gray-500">
<span class="text-green-500">
<i class="fas fa-arrow-up"></i> 0%
</span>
compared to last period
</div>
</div>
</div>
</div>
<!-- Categories Tab -->
<div id="categories" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Categories</h2>
<button id="addCategoryBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add Category
</button>
</div>
<!-- Categories List -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8" id="categoriesList">
<!-- Example Categories -->
<div class="bg-white rounded-lg shadow-md p-5">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-red-100 mr-3">
<i class="fas fa-utensils text-red-500"></i>
</div>
<div class="text-xl font-bold text-gray-800">Food & Dining</div>
</div>
<div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-pencil-alt"></i>
</button>
</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500 mb-1">This Month</div>
<div class="text-xl font-bold text-red-600">₹4,250</div>
<div class="text-sm text-gray-500">
<span class="text-red-500">
<i class="fas fa-arrow-up"></i> 15%
</span>
compared to last month
</div>
</div>
<div class="mb-2">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-500">Budget: ₹5,000</span>
<span class="text-gray-600 font-medium">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 85%;"></div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-5">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-blue-100 mr-3">
<i class="fas fa-shopping-bag text-blue-500"></i>
</div>
<div class="text-xl font-bold text-gray-800">Shopping</div>
</div>
<div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-pencil-alt"></i>
</button>
</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500 mb-1">This Month</div>
<div class="text-xl font-bold text-blue-600">₹7,320</div>
<div class="text-sm text-gray-500">
<span class="text-green-500">
<i class="fas fa-arrow-down"></i> 5%
</span>
compared to last month
</div>
</div>
<div class="mb-2">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-500">Budget: ₹8,000</span>
<span class="text-gray-600 font-medium">91.5%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 91.5%;"></div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-5">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-yellow-100 mr-3">
<i class="fas fa-car text-yellow-500"></i>
</div>
<div class="text-xl font-bold text-gray-800">Transportation</div>
</div>
<div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-pencil-alt"></i>
</button>
</div>
</div>
<div class="mb-4">
<div class="text-sm text-gray-500 mb-1">This Month</div>
<div class="text-xl font-bold text-yellow-600">₹3,150</div>
<div class="text-sm text-gray-500">
<span class="text-yellow-500">
<i class="fas fa-arrows-alt-h"></i> 0%
</span>
compared to last month
</div>
</div>
<div class="mb-2">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-500">Budget: ₹5,000</span>
<span class="text-gray-600 font-medium">63%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 63%;"></div>
</div>
</div>
</div>
</div>
<!-- Category Spending -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Category Spending Analysis</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Spending by Category</h3>
<div class="h-64">
<canvas id="categorySpendingChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Category Spending Trend</h3>
<div class="h-64">
<canvas id="categoryTrendChart"></canvas>
</div>
</div>
</div>
<!-- Category Budget Management -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Budget Management</h3>
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
<table class="min-w-full">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spent</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Remaining</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="h-8 w-8 flex items-center justify-center rounded-full bg-red-100 mr-2">
<i class="fas fa-utensils text-red-500"></i>
</div>
<span class="font-medium text-gray-900">Food & Dining</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹5,000</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹4,250</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹750</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="w-full bg-gray-200 rounded-full h-2 mb-1">
<div class="bg-red-500 h-2 rounded-full" style="width: 85%;"></div>
</div>
<span class="text-sm text-gray-500">85% Used</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="h-8 w-8 flex items-center justify-center rounded-full bg-blue-100 mr-2">
<i class="fas fa-shopping-bag text-blue-500"></i>
</div>
<span class="font-medium text-gray-900">Shopping</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹8,000</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹7,320</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹680</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="w-full bg-gray-200 rounded-full h-2 mb-1">
<div class="bg-blue-500 h-2 rounded-full" style="width: 91.5%;"></div>
</div>
<span class="text-sm text-gray-500">91.5% Used</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="h-8 w-8 flex items-center justify-center rounded-full bg-yellow-100 mr-2">
<i class="fas fa-car text-yellow-500"></i>
</div>
<span class="font-medium text-gray-900">Transportation</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹5,000</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹3,150</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-gray-700">₹1,850</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="w-full bg-gray-200 rounded-full h-2 mb-1">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 63%;"></div>
</div>
<span class="text-sm text-gray-500">63% Used</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Reminders Tab -->
<div id="reminders" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Payment Reminders</h2>
<button id="addReminderBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-plus mr-2"></i> Add Reminder
</button>
</div>
<!-- Reminder Filters -->
<div class="bg-white rounded-lg shadow-md p-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="all">All Reminders</option>
<option value="upcoming">Upcoming</option>
<option value="overdue">Overdue</option>
<option value="completed">Completed</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Account Type</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="all">All Accounts</option>
<option value="credit-card">Credit Cards</option>
<option value="bank">Bank Accounts</option>
<option value="loans">Loans</option>
<option value="bills">Bills</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
<input type="text" placeholder="Search reminders..." class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
</div>
</div>
<!-- Reminders List -->
<div class="grid grid-cols-1 gap-4 mb-8" id="remindersList">
<!-- Example Reminders -->
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-red-500">
<div class="flex justify-between items-center">
<div>
<div class="text-lg font-bold text-gray-800 mb-1">HDFC Credit Card Payment</div>
<div class="text-sm text-gray-500 mb-2">Due in 3 days (Jul 15, 2023)</div>
<div class="text-xl font-bold text-red-600 mb-3">₹12,500</div>
<div class="flex items-center">
<div class="text-sm bg-red-100 text-red-700 px-2 py-1 rounded-md">Overdue</div>
<div class="text-sm text-gray-500 ml-4">
<i class="fas fa-bell-slash"></i> No reminders set
</div>
</div>
</div>
<div class="flex items-center">
<button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 mr-2 px-3 py-2 rounded-md text-sm">
<i class="fas fa-bell mr-1"></i> Set Reminder
</button>
<button class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm">
<i class="fas fa-check mr-1"></i> Mark Paid
</button>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-yellow-500">
<div class="flex justify-between items-center">
<div>
<div class="text-lg font-bold text-gray-800 mb-1">Electricity Bill</div>
<div class="text-sm text-gray-500 mb-2">Due in 7 days (Jul 19, 2023)</div>
<div class="text-xl font-bold text-yellow-600 mb-3">₹2,345</div>
<div class="flex items-center">
<div class="text-sm bg-yellow-100 text-yellow-700 px-2 py-1 rounded-md">Upcoming</div>
<div class="text-sm text-gray-500 ml-4">
<i class="fas fa-bell"></i> WhatsApp reminder set (1 day before)
</div>
</div>
</div>
<div class="flex items-center">
<button class="bg-yellow-100 hover:bg-yellow-200 text-yellow-700 mr-2 px-3 py-2 rounded-md text-sm">
<i class="fas fa-bell-slash mr-1"></i> Remove Reminder
</button>
<button class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm">
<i class="fas fa-check mr-1"></i> Mark Paid
</button>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-green-500">
<div class="flex justify-between items-center">
<div>
<div class="text-lg font-bold text-gray-800 mb-1">Home Loan EMI</div>
<div class="text-sm text-gray-500 mb-2">Due in 10 days (Jul 22, 2023)</div>
<div class="text-xl font-bold text-green-600 mb-3">₹24,500</div>
<div class="flex items-center">
<div class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md">Upcoming</div>
<div class="text-sm text-gray-500 ml-4">
<i class="fas fa-envelope"></i> Email reminder set (2 days before)
</div>
</div>
</div>
<div class="flex items-center">
<button class="bg-green-100 hover:bg-green-200 text-green-700 mr-2 px-3 py-2 rounded-md text-sm">
<i class="fas fa-bell-slash mr-1"></i> Remove Reminder
</button>
<button class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded-md text-sm">
<i class="fas fa-check mr-1"></i> Mark Paid
</button>
</div>
</div>
</div>
</div>
<!-- Reminder Settings -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Reminder Settings</h3>
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-lg font-semibold mb-4 text-gray-800">Notification Preferences</h4>
<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="whatsapp_notifications" class="h-4 w-4 text-indigo-600 rounded" checked>
<label for="whatsapp_notifications" class="ml-2 text-gray-700">WhatsApp Notifications</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="email_notifications" class="h-4 w-4 text-indigo-600 rounded" checked>
<label for="email_notifications" class="ml-2 text-gray-700">Email Notifications</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="sms_notifications" class="h-4 w-4 text-indigo-600 rounded">
<label for="sms_notifications" class="ml-2 text-gray-700">SMS Notifications</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="browser_notifications" class="h-4 w-4 text-indigo-600 rounded">
<label for="browser_notifications" class="ml-2 text-gray-700">Browser Notifications</label>
</div>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-gray-800">Default Reminder Schedule</h4>
<div class="space-y-4">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Credit Card Bills</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="1">1 day before due date</option>
<option value="3" selected>3 days before due date</option>
<option value="5">5 days before due date</option>
<option value="7">7 days before due date</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Regular Bills</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="1">1 day before due date</option>
<option value="3">3 days before due date</option>
<option value="5" selected>5 days before due date</option>
<option value="7">7 days before due date</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Loan EMIs</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="1">1 day before due date</option>
<option value="3">3 days before due date</option>
<option value="5">5 days before due date</option>
<option value="7" selected>7 days before due date</option>
</select>
</div>
</div>
</div>
</div>
<div class="mt-6 text-right">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md transition duration-200">
Save Settings
</button>
</div>
</div>
</div>
<!-- Reports Tab -->
<div id="reports" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Financial Reports</h2>
<div class="flex items-center">
<select class="mr-2 border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="this-month">This Month</option>
<option value="last-month">Last Month</option>
<option value="3-months">Last 3 Months</option>
<option value="6-months">Last 6 Months</option>
<option value="1-year">Last Year</option>
<option value="custom">Custom Range</option>
</select>
<button id="generateReportBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center transition duration-200">
<i class="fas fa-sync-alt mr-2"></i> Generate Report
</button>
</div>
</div>
<!-- Finance Summary -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-green-500">
<div class="text-sm text-gray-500 mb-1">Total Income</div>
<div class="text-2xl font-bold text-green-600 mb-2">₹0.00</div>
<div class="text-sm text-gray-500">
<span class="text-green-500">
<i class="fas fa-arrow-up"></i> 0%
</span>
compared to last period
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-red-500">
<div class="text-sm text-gray-500 mb-1">Total Expenses</div>
<div class="text-2xl font-bold text-red-600 mb-2">₹0.00</div>
<div class="text-sm text-gray-500">
<span class="text-red-500">
<i class="fas fa-arrow-up"></i> 0%
</span>
compared to last period
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-5 border-l-4 border-blue-500">
<div class="text-sm text-gray-500 mb-1">Savings Rate</div>
<div class="text-2xl font-bold text-blue-600 mb-2">0%</div>
<div class="text-sm text-gray-500">
<span class="text-green-500">
<i class="fas fa-arrow-up"></i> 0%
</span>
compared to last period
</div>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Income vs Expenses</h3>
<div class="h-64">
<canvas id="incomeExpensesReportChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Monthly Cash Flow</h3>
<div class="h-64">
<canvas id="cashFlowChart"></canvas>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Expense Breakdown</h3>
<div class="h-64">
<canvas id="expenseBreakdownChart"></canvas>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2">Payment Methods</h3>
<div class="h-64">
<canvas id="paymentMethodsChart"></canvas>
</div>
</div>
</div>
<!-- Export Options -->
<h3 class="text-xl font-bold mb-4 text-gray-800">Export Reports</h3>
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition duration-200">
<div class="text-5xl text-green-500 mb-4">
<i class="fas fa-file-excel"></i>
</div>
<h4 class="text-lg font-semibold mb-2">Excel Report</h4>
<p class="text-gray-500 text-sm mb-4">Export detailed financial data in Excel format</p>
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md w-full transition duration-200">
<i class="fas fa-download mr-2"></i> Export Excel
</button>
</div>
<div class="border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition duration-200">
<div class="text-5xl text-red-500 mb-4">
<i class="fas fa-file-pdf"></i>
</div>
<h4 class="text-lg font-semibold mb-2">PDF Report</h4>
<p class="text-gray-500 text-sm mb-4">Export comprehensive report in PDF format</p>
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md w-full transition duration-200">
<i class="fas fa-download mr-2"></i> Export PDF
</button>
</div>
<div class="border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition duration-200">
<div class="text-5xl text-blue-500 mb-4">
<i class="fas fa-share-alt"></i>
</div>
<h4 class="text-lg font-semibold mb-2">Share Report</h4>
<p class="text-gray-500 text-sm mb-4">Share the financial report via email or message</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md w-full transition duration-200">
<i class="fas fa-paper-plane mr-2"></i> Share Report
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modals -->
<!-- Add Credit Card Modal -->
<div id="addCreditCardModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
<div class="p-5 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold text-gray-800">Add New Credit Card</h3>
<button class="text-gray-400 hover:text-gray-600 close-modal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-5">
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Card Name</label>
<input type="text" placeholder="e.g. HDFC Diners Club" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Card Number (Last 4 digits)</label>
<input type="text" placeholder="e.g. 1234" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
<input type="text" placeholder="MM/YY" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Card Type</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="visa">Visa</option>
<option value="mastercard">Mastercard</option>
<option value="amex">American Express</option>
<option value="rupay">RuPay</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Credit Limit</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">₹</span>
<input type="text" placeholder="e.g. 100000" class="flex-1 border border-gray-300 rounded-r-md px-3 py-2 text-gray-700">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Current Outstanding</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">₹</span>
<input type="text" placeholder="e.g. 25000" class="flex-1 border border-gray-300 rounded-r-md px-3 py-2 text-gray-700">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Bill Due Date</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="">Select Due Date</option>
<option value="1">1st of every month</option>
<option value="5">5th of every month</option>
<option value="10">10th of every month</option>
<option value="15">15th of every month</option>
<option value="20">20th of every month</option>
<option value="25">25th of every month</option>
<option value="last">Last day of every month</option>
</select>
</div>
</form>
</div>
<div class="p-5 border-t border-gray-200 text-right">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md mr-2 close-modal">
Cancel
</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md">
Add Card
</button>
</div>
</div>
</div>
<!-- Add Transaction Modal -->
<div id="addTransactionModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
<div class="p-5 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold text-gray-800">Add New Transaction</h3>
<button class="text-gray-400 hover:text-gray-600 close-modal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-5">
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Transaction Type</label>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center bg-red-50 border border-red-200 rounded-md px-3 py-2">
<input type="radio" id="expense" name="type" value="expense" class="h-4 w-4 text-red-600" checked>
<label for="expense" class="ml-2 text-red-700">Expense</label>
</div>
<div class="flex items-center bg-green-50 border border-green-200 rounded-md px-3 py-2">
<input type="radio" id="income" name="type" value="income" class="h-4 w-4 text-green-600">
<label for="income" class="ml-2 text-green-700">Income</label>
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">₹</span>
<input type="text" placeholder="Enter amount" class="flex-1 border border-gray-300 rounded-r-md px-3 py-2 text-gray-700">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
<input type="date" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
<input type="text" placeholder="e.g. Grocery shopping at DMart" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="">Select a category</option>
<option value="food">Food & Dining</option>
<option value="shopping">Shopping</option>
<option value="transportation">Transportation</option>
<option value="bills">Bills & Utilities</option>
<option value="entertainment">Entertainment</option>
<option value="health">Health & Medical</option>
<option value="travel">Travel</option>
<option value="education">Education</option>
<option value="personal">Personal Care</option>
<option value="others">Others</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="">Select payment method</option>
<optgroup label="Credit Cards">
<option value="card1">HDFC Diners (..1234)</option>
<option value="card2">SBI Card (..5678)</option>
</optgroup>
<optgroup label="UPI">
<option value="upi1">Google Pay (john.doe@okicici)</option>
<option value="upi2">PhonePe (john.doe@ybl)</option>
</optgroup>
<optgroup label="Bank Accounts">
<option value="bank1">HDFC Savings (..4567)</option>
<option value="bank2">ICICI Savings (..7890)</option>
</optgroup>
<optgroup label="Others">
<option value="cash">Cash</option>
<option value="other">Other</option>
</optgroup>
</select>
</div>
</form>
</div>
<div class="p-5 border-t border-gray-200 text-right">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md mr-2 close-modal">
Cancel
</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md">
Add Transaction
</button>
</div>
</div>
</div>
<!-- Add Reminder Modal -->
<div id="addReminderModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-4">
<div class="p-5 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold text-gray-800">Add Payment Reminder</h3>
<button class="text-gray-400 hover:text-gray-600 close-modal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-5">
<form>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Reminder Title</label>
<input type="text" placeholder="e.g. Credit Card Bill Payment" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Amount</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">₹</span>
<input type="text" placeholder="e.g. 25000" class="flex-1 border border-gray-300 rounded-r-md px-3 py-2 text-gray-700">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
<input type="date" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="credit-card">Credit Card Bill</option>
<option value="loan">Loan EMI</option>
<option value="utility">Utility Bill</option>
<option value="rent">Rent</option>
<option value="insurance">Insurance Premium</option>
<option value="subscription">Subscription</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Related Account</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="">Select account (optional)</option>
<optgroup label="Credit Cards">
<option value="card1">HDFC Diners (..1234)</option>
<option value="card2">SBI Card (..5678)</option>
</optgroup>
<optgroup label="Bank Accounts">
<option value="bank1">HDFC Savings (..4567)</option>
<option value="bank2">ICICI Savings (..7890)</option>
</optgroup>
<optgroup label="Loans">
<option value="loan1">Home Loan (..2345)</option>
<option value="loan2">Car Loan (..6789)</option>
</optgroup>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Remind me</label>
<div class="grid grid-cols-2 gap-4 mb-2">
<div class="flex items-center">
<input type="checkbox" id="whatsapp_reminder" class="h-4 w-4 text-indigo-600 rounded">
<label for="whatsapp_reminder" class="ml-2 text-gray-700">WhatsApp</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="email_reminder" class="h-4 w-4 text-indigo-600 rounded">
<label for="email_reminder" class="ml-2 text-gray-700">Email</label>
</div>
</div>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="1">1 day before due date</option>
<option value="3">3 days before due date</option>
<option value="5">5 days before due date</option>
<option value="7">7 days before due date</option>
<option value="custom">Custom schedule</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
<textarea placeholder="Optional notes about this payment" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700" rows="2"></textarea>
</div>
</form>
</div>
<div class="p-5 border-t border-gray-200 text-right">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md mr-2 close-modal">
Cancel
</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md">
Set Reminder
</button>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settingsModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center">
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg mx-4">
<div class="p-5 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold text-gray-800">Settings</h3>
<button class="text-gray-400 hover:text-gray-600 close-modal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-5">
<div class="mb-6">
<h4 class="text-lg font-semibold mb-4 text-gray-800 border-b pb-2">Account Settings</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" placeholder="Your Name" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" placeholder="[email protected]" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
<input type="text" placeholder="Your Phone Number" class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-gray-700">
<option value="INR">Indian Rupee (₹)</option>
<option value="USD">US Dollar ($)</option>
<option value="EUR">Euro (€)</option>
<option value="GBP">British Pound (£)</option>
</select>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="text-lg font-semibold mb-4 text-gray-800 border-b pb-2">Notification Settings</h4>
<div class="space-y-3">
<div class="flex justify-between items-center">
<label class="text-gray-700">WhatsApp Notifications</label>
<div>
<input type="checkbox" id="whatsapp_switch" class="sr-only" checked>
<label for="whatsapp_switch" class="relative inline-flex items-center h-6 rounded-full w-11 cursor-pointer bg-gray-300">
<span class="absolute h-4 w-4 left-1 top-1 bg-white rounded-full transition-transform transform translate-x-0 checked:translate-x-5"></span>
</label>
</div>
</div>
<div class="flex justify-between items-center">
<label class="text-gray-700">Email Notifications</label>
<div>
<input type="checkbox" id="email_switch" class="sr-only" checked>
<label for="email_switch" class="relative inline-flex items-center h-6 rounded-full w-11 cursor-pointer bg-gray-300">
<span class="absolute h-4 w-4 left-1 top-1 bg-white rounded-full transition-transform transform translate-x-0 checked:translate-x-5"></span>
</label>
</div>
</div>
<div class="flex justify-between items-center">
<label class="text-gray-700">Payment Due Reminders</label>
<div>
<input type="checkbox" id="payment_switch" class="sr-only" checked>
<label for="payment_switch" class="relative inline-flex items-center h-6 rounded-full w-11 cursor-pointer bg-gray-300">
<span class="absolute h-4 w-4 left-1 top-1 bg-white rounded-full transition-transform transform translate-x-0 checked:translate-x-5"></span>
</label>
</div>
</div>
<div class="flex justify-between items-center">
<label class="text-gray-700">Budget Alerts</label>
<div>
<input type="checkbox" id="budget_switch" class="sr-only" checked>
<label for="budget_switch" class="relative inline-flex items-center h-6 rounded-full w-11 cursor-pointer bg-gray-300">
<span class="absolute h-4 w-4 left-1 top-1 bg-white rounded-full transition-transform transform translate-x-0 checked:translate-x-5"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-gray-800 border-b pb-2">Data Settings</h4>
<div class="space-y-3">
<div class="flex justify-between items-center">
<div>
<label class="text-gray-700 block">Auto Backup</label>
<span class="text-sm text-gray-500">Automatically backup your data</span>
</div>
<div>
<input type="checkbox" id="backup_switch" class="sr-only" checked>
<label for="backup_switch" class="relative inline-flex items-center h-6 rounded-full w-11 cursor-pointer bg-gray-300">
<span class="absolute h-4 w-4 left-1 top-1 bg-white rounded-full transition-transform transform translate-x-0 checked:translate-x-5"></span>
</label>
</div>
</div>
<div class="pt-2">
<button class="bg-red-100 hover:bg-red-200 text-red-700 px-4 py-2 rounded-md text-sm mr-2">
<i class="fas fa-trash-alt mr-2"></i> Clear All Data
</button>
<button class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-4 py-2 rounded-md text-sm">
<i class="fas fa-download mr-2"></i> Backup Now
</button>
</div>
</div>
</div>
</div>
<div class="p-5 border-t border-gray-200 text-right">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md mr-2 close-modal">
Cancel
</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md">
Save Changes
</button>
</div>
</div>
</div>
<!-- JavaScript Resources -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
// Function to handle tab switching
function setupTabs() {
const tabLinks = document.querySelectorAll('.tab-link');
tabLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const tabId = this.getAttribute('data-tab');
// Update active tab link
tabLinks.forEach(tl => {
const tabLinkElement = tl.querySelector('a');
if (tl.getAttribute('data-tab') === tabId) {
tabLinkElement.classList.add('bg-indigo-700');
} else {
tabLinkElement.classList.remove('bg-indigo-700');
}
});
// Update active tab content
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(tab => {
if (tab.id === tabId) {
tab.classList.add('active');
} else {
tab.classList.remove('active');
}
});
});
});
}
// Function to handle modals
function setupModals() {
// Credit Card Modal
document.getElementById('addCreditCardBtn').addEventListener('click', function() {
document.getElementById('addCreditCardModal').classList.remove('hidden');
document.getElementById('addCreditCardModal').classList.add('flex');
});
// Transaction Modal
document.getElementById('addTransactionBtn').addEventListener('click', function() {
document.getElementById('addTransactionModal').classList.remove('hidden');
document.getElementById('addTransactionModal').classList.add('flex');
});
document.getElementById('quickAddTransaction').addEventListener('click', function() {
document.getElementById('addTransactionModal').classList.remove('hidden');
document.getElementById('addTransactionModal').classList.add('flex');
});
// Reminder Modal
document.getElementById('addReminderBtn').addEventListener('click', function() {
document.getElementById('addReminderModal').classList.remove('hidden');
document.getElementById('addReminderModal').classList.add('flex');
});
document.getElementById('quickSetReminder').addEventListener('click', function() {
document.getElementById('addReminderModal').classList.remove('hidden');
document.getElementById('addReminderModal').classList.add('flex');
});
// Settings Modal
document.getElementById('settingsBtn').addEventListener('click', function() {
document.getElementById('settingsModal').classList.remove('hidden');
document.getElementById('settingsModal').classList.add('flex');
});
// Reports quick access
document.getElementById('quickViewReports').addEventListener('click', function() {
const tabLinks = document.querySelectorAll('.tab-link');
const reportsTab = Array.from(tabLinks).find(tl => tl.getAttribute('data-tab') === 'reports');
reportsTab.querySelector('a').click();
});
// Close modals
const closeButtons = document.querySelectorAll('.close-modal');
closeButtons.forEach(button => {
button.addEventListener('click', function() {
const modals = document.querySelectorAll('[id$="Modal"]');
modals.forEach(modal => {
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
});
}
// Initialize charts
function setupCharts() {
// Expense Chart (Dashboard)
const expenseCtx = document.getElementById('expenseChart').getContext('2d');
const expenseChart = new Chart(expenseCtx, {
type: 'doughnut',
data: {
labels: ['Food & Dining', 'Shopping', 'Transportation', 'Bills', 'Entertainment', 'Others'],
datasets: [{
data: [25, 20, 15, 18, 12, 10],
backgroundColor: [
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#C9CBCF'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
boxWidth: 15,
padding: 15
}
}
}
}
});
// UPI Usage Chart
const upiUsageCtx = document.getElementById('upiUsageChart').getContext('2d');
const upiUsageChart = new Chart(upiUsageCtx, {
type: 'pie',
data: {
labels: ['Google Pay', 'PhonePe', 'Paytm', 'BHIM', 'Amazon Pay'],
datasets: [{
data: [40, 30, 15, 10, 5],
backgroundColor: [
'#4285F4', '#5f259f', '#00BAF2', '#008483', '#FF9900'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
boxWidth: 15,
padding: 15
}
}
}
}
});
// UPI Trend Chart
const upiTrendCtx = document.getElementById('upiTrendChart').getContext('2d');
const upiTrendChart = new Chart(upiTrendCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Transaction Amount',
data: [15000, 18000, 16500, 22000, 25000, 23000],
borderColor: '#7C3AED',
backgroundColor: 'rgba(124, 58, 237, 0.1)',
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Income vs Expenses Chart
const incomeExpensesCtx = document.getElementById('incomeExpensesChart').getContext('2d');
const incomeExpensesChart = new Chart(incomeExpensesCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'Income',
data: [50000, 52000, 51000, 55000, 53000, 56000],
backgroundColor: '#10B981'
},
{
label: 'Expenses',
data: [35000, 36000, 38000, 40000, 39000, 41000],
backgroundColor: '#EF4444'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Balance Trend Chart
const balanceTrendCtx = document.getElementById('balanceTrendChart').getContext('2d');
const balanceTrendChart = new Chart(balanceTrendCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Account Balance',
data: [80000, 96000, 109000, 124000, 138000, 153000],
borderColor: '#2563EB',
backgroundColor: 'rgba(37, 99, 235, 0.1)',
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: false,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// FASTag Expenses Chart
const fastagExpensesCtx = document.getElementById('fastagExpensesChart').getContext('2d');
const fastagExpensesChart = new Chart(fastagExpensesCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'FASTag Expenses',
data: [1200, 950, 1500, 1350, 1100, 1300],
backgroundColor: '#F59E0B'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Top Tolls Chart
const topTollsCtx = document.getElementById('topTollsChart').getContext('2d');
const topTollsChart = new Chart(topTollsCtx, {
type: 'horizontalBar',
data: {
labels: ['Mumbai-Pune Expressway', 'DND Flyway', 'Bandra-Worli Sea Link', 'Delhi-Gurgaon Expressway', 'Bangalore Elevated Tollway'],
datasets: [{
label: 'Amount Spent',
data: [450, 350, 280, 220, 200],
backgroundColor: '#F59E0B'
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
y: {
grid: {
display: false
}
}
}
}
});
// Category Spending Chart
const categorySpendingCtx = document.getElementById('categorySpendingChart').getContext('2d');
const categorySpendingChart = new Chart(categorySpendingCtx, {
type: 'doughnut',
data: {
labels: ['Food & Dining', 'Shopping', 'Transportation', 'Bills', 'Entertainment', 'Others'],
datasets: [{
data: [4250, 7320, 3150, 5600, 2800, 3100],
backgroundColor: [
'#EF4444', '#3B82F6', '#F59E0B', '#10B981', '#8B5CF6', '#6B7280'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
boxWidth: 15,
padding: 15
}
}
}
}
});
// Category Trend Chart
const categoryTrendCtx = document.getElementById('categoryTrendChart').getContext('2d');
const categoryTrendChart = new Chart(categoryTrendCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'Food & Dining',
data: [3800, 4100, 3900, 4300, 4250, 4500],
borderColor: '#EF4444',
tension: 0.3,
fill: false
},
{
label: 'Shopping',
data: [6800, 7200, 6500, 7800, 7320, 7500],
borderColor: '#3B82F6',
tension: 0.3,
fill: false
},
{
label: 'Transportation',
data: [2900, 3000, 3200, 2800, 3150, 3300],
borderColor: '#F59E0B',
tension: 0.3,
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false
}
}
}
}
});
// Reports Charts
const incomeExpensesReportCtx = document.getElementById('incomeExpensesReportChart').getContext('2d');
const incomeExpensesReportChart = new Chart(incomeExp
Similar Posts
Honey Garlic Chicken – A Weeknight Favorite
Hey, Food Lovers! I’m thrilled to share one of my all-time favorite recipes with you: Honey Garlic Chicken. If you’re like me, always hunting for dinners that are tasty and easy, this one’s going to be your new go-to. I stumbled across this gem a few years ago while browsing food blogs, and it’s been…