<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Expense Vault</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
:root {
--bg: #0a0d14;
--surface: #111520;
--surface2: #161b2e;
--border: rgba(255,255,255,0.07);
--teal: #00d4aa;
--teal-dim: rgba(0,212,170,0.12);
--teal-glow: rgba(0,212,170,0.25);
--purple: #7c5cfc;
--purple-dim: rgba(124,92,252,0.12);
--red: #ff4d6d;
--red-dim: rgba(255,77,109,0.12);
--amber: #ffb347;
--amber-dim: rgba(255,179,71,0.12);
--text: #e8eaf0;
--text-muted: #6b7280;
--text-dim: #9ca3af;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 8px 32px rgba(0,0,0,0.4);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:'DM Sans',sans-serif;
min-height:100vh;
overflow-x:hidden;
}
/* Background */
body::before{
content:'';
position:fixed;
top:-200px;left:-200px;
width:600px;height:600px;
background:radial-gradient(circle,rgba(0,212,170,0.06) 0%,transparent 70%);
pointer-events:none;z-index:0;
}
body::after{
content:'';
position:fixed;
bottom:-200px;right:-200px;
width:600px;height:600px;
background:radial-gradient(circle,rgba(124,92,252,0.06) 0%,transparent 70%);
pointer-events:none;z-index:0;
}
/* ── NAV ── */
.navbar{
position:sticky;top:0;z-index:100;
background:rgba(10,13,20,0.85);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
padding:0 24px;
}
.nav-inner{
max-width:900px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
height:64px;
}
.brand{
display:flex;align-items:center;gap:10px;
font-family:'Syne',sans-serif;font-weight:800;font-size:1.25rem;
color:var(--text);text-decoration:none;
}
.brand-icon{
width:36px;height:36px;border-radius:10px;
background:linear-gradient(135deg,var(--teal),var(--purple));
display:grid;place-items:center;font-size:1rem;color:#fff;
}
.brand span{color:var(--teal);}
.nav-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:12px;padding:4px;}
.nav-tab{
padding:8px 18px;border-radius:9px;border:none;
background:transparent;color:var(--text-muted);
font-family:'DM Sans',sans-serif;font-size:0.875rem;font-weight:500;
cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:7px;
}
.nav-tab.active{background:var(--teal);color:#000;font-weight:600;}
.nav-tab:not(.active):hover{background:var(--border);color:var(--text);}
/* ── LAYOUT ── */
.container{max-width:900px;margin:0 auto;padding:28px 20px;position:relative;z-index:1;}
/* ── PAGES ── */
.page{display:none;animation:fadeUp .35s ease both;}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
/* ── CARDS ── */
.card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:24px;
box-shadow:var(--shadow);
}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.card-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:var(--text);}
.card-sub{font-size:0.78rem;color:var(--text-muted);margin-top:3px;}
/* ── STATS ROW ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.stat-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:18px;
position:relative;overflow:hidden;
}
.stat-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--accent,var(--teal));
}
.stat-card.purple{--accent:var(--purple);}
.stat-card.amber{--accent:var(--amber);}
.stat-label{font-size:0.72rem;color:var(--text-muted);font-weight:500;letter-spacing:.05em;text-transform:uppercase;}
.stat-value{font-family:'Syne',sans-serif;font-weight:800;font-size:1.6rem;margin-top:6px;color:var(--text);}
.stat-icon{
position:absolute;top:16px;right:16px;
width:34px;height:34px;border-radius:9px;
background:var(--teal-dim);display:grid;place-items:center;
font-size:.85rem;color:var(--teal);
}
.stat-card.purple .stat-icon{background:var(--purple-dim);color:var(--purple);}
.stat-card.amber .stat-icon{background:var(--amber-dim);color:var(--amber);}
.stat-note{font-size:0.72rem;color:var(--text-muted);margin-top:4px;}
/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:7px;}
.form-group.full{grid-column:1/-1;}
label{font-size:0.78rem;font-weight:600;color:var(--text-dim);letter-spacing:.04em;text-transform:uppercase;}
input,select,textarea{
background:var(--surface2);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:11px 14px;
color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.9rem;
outline:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
input:focus,select:focus,textarea:focus{
border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow);
}
select option{background:var(--surface2);}
.input-wrap{position:relative;}
.input-prefix{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
font-size:0.9rem;font-weight:600;color:var(--teal);pointer-events:none;
}
.input-wrap input{padding-left:28px;}
.btn{
padding:12px 22px;border-radius:var(--radius-sm);border:none;
font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;
cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{
background:linear-gradient(135deg,var(--teal) 0%,#00b4d8 100%);
color:#000;width:100%;justify-content:center;margin-top:6px;
box-shadow:0 4px 20px rgba(0,212,170,0.35);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,212,170,0.45);}
.btn-primary:active{transform:translateY(0);}
/* ── CATEGORY CHIPS ── */
.cat-chips{display:flex;flex-wrap:wrap;gap:7px;}
.cat-chip{
padding:6px 13px;border-radius:20px;border:1px solid var(--border);
background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:500;
cursor:pointer;transition:all .2s;
}
.cat-chip.active,
.cat-chip:hover{border-color:var(--teal);background:var(--teal-dim);color:var(--teal);}
/* ── TODAY LIST ── */
.expense-item{
display:flex;align-items:center;gap:14px;
padding:14px 0;border-bottom:1px solid var(--border);
animation:fadeUp .25s ease both;
}
.expense-item:last-child{border-bottom:none;}
.exp-icon{
width:40px;height:40px;border-radius:11px;
display:grid;place-items:center;font-size:.9rem;flex-shrink:0;
}
.exp-info{flex:1;}
.exp-desc{font-weight:500;font-size:.9rem;color:var(--text);}
.exp-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px;}
.exp-amount{
font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;color:var(--teal);
white-space:nowrap;
}
.exp-actions{display:flex;gap:6px;margin-left:8px;}
.icon-btn{
width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
background:transparent;color:var(--text-muted);font-size:.8rem;
cursor:pointer;transition:all .2s;display:grid;place-items:center;
}
.icon-btn.edit:hover{border-color:var(--purple);background:var(--purple-dim);color:var(--purple);}
.icon-btn.del:hover{border-color:var(--red);background:var(--red-dim);color:var(--red);}
.empty-state{
text-align:center;padding:40px 0;color:var(--text-muted);
}
.empty-state i{font-size:2.5rem;margin-bottom:12px;opacity:.3;}
.empty-state p{font-size:.875rem;}
/* ── HISTORY PAGE ── */
.history-controls{
display:grid;grid-template-columns:1fr 1fr auto;gap:12px;
margin-bottom:24px;align-items:end;
}
.history-summary{
background:linear-gradient(135deg,var(--teal-dim),var(--purple-dim));
border:1px solid rgba(0,212,170,0.2);
border-radius:var(--radius);padding:18px 24px;
display:flex;align-items:center;justify-content:space-between;
margin-bottom:20px;
}
.hs-label{font-size:.78rem;color:var(--teal);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.hs-date{font-size:.85rem;color:var(--text-dim);margin-top:3px;}
.hs-amount{font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;color:var(--text);}
.hs-count{font-size:.78rem;color:var(--text-muted);margin-top:3px;}
.day-group{margin-bottom:20px;}
.day-header{
display:flex;align-items:center;justify-content:space-between;
padding:8px 14px;background:var(--surface2);
border-radius:var(--radius-sm);margin-bottom:10px;border:1px solid var(--border);
}
.day-label{font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;color:var(--text);}
.day-badge{
font-size:.75rem;font-weight:600;padding:3px 10px;
border-radius:20px;background:var(--teal-dim);color:var(--teal);
font-family:'Syne',sans-serif;
}
.history-item{
display:flex;align-items:center;gap:14px;
padding:12px 14px;border-radius:var(--radius-sm);
background:var(--surface);border:1px solid var(--border);
margin-bottom:8px;transition:border-color .2s;
}
.history-item:hover{border-color:rgba(0,212,170,0.2);}
/* ── EDIT MODAL ── */
.modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);
z-index:1000;display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:28px;width:90%;max-width:460px;
box-shadow:0 24px 60px rgba(0,0,0,0.6);
transform:translateY(20px);transition:transform .25s;
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.modal-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;}
.modal-close{
width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
background:transparent;color:var(--text-muted);cursor:pointer;
font-size:.9rem;display:grid;place-items:center;transition:all .2s;
}
.modal-close:hover{border-color:var(--red);color:var(--red);background:var(--red-dim);}
.modal-actions{display:flex;gap:10px;margin-top:20px;}
.btn-ghost{
flex:1;padding:11px;border-radius:var(--radius-sm);border:1px solid var(--border);
background:transparent;color:var(--text-muted);font-family:'DM Sans',sans-serif;
font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;
}
.btn-ghost:hover{border-color:var(--text-muted);color:var(--text);}
.btn-save{
flex:2;padding:11px;border-radius:var(--radius-sm);border:none;
background:linear-gradient(135deg,var(--teal),#00b4d8);
color:#000;font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:700;
cursor:pointer;transition:all .2s;
}
.btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--teal-glow);}
/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;}
.toast{
padding:12px 18px;border-radius:var(--radius-sm);
font-size:.85rem;font-weight:500;color:#000;
animation:toastIn .3s ease both;min-width:220px;
display:flex;align-items:center;gap:9px;
box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.toast.success{background:var(--teal);}
.toast.error{background:var(--red);color:#fff;}
.toast.info{background:var(--purple);color:#fff;}
@keyframes toastIn{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(30px);}}
/* ── CAT COLORS ── */
.cat-food{background:rgba(255,179,71,.15);color:#ffb347;}
.cat-fuel{background:rgba(0,212,170,.15);color:#00d4aa;}
.cat-bills{background:rgba(124,92,252,.15);color:#7c5cfc;}
.cat-grocery{background:rgba(52,211,153,.15);color:#34d399;}
.cat-health{background:rgba(248,113,113,.15);color:#f87171;}
.cat-shopping{background:rgba(251,191,36,.15);color:#fbbf24;}
.cat-education{background:rgba(56,189,248,.15);color:#38bdf8;}
.cat-other{background:rgba(156,163,175,.15);color:#9ca3af;}
/* ── RESPONSIVE ── */
@media(max-width:640px){
.stats-row{grid-template-columns:1fr 1fr;}
.stats-row .stat-card:last-child{grid-column:1/-1;}
.form-grid{grid-template-columns:1fr;}
.history-controls{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
.history-controls .btn{grid-column:1/-1;}
.nav-tab span{display:none;}
.nav-tab{padding:8px 14px;}
.history-summary{flex-direction:column;align-items:flex-start;gap:10px;}
}
@media(max-width:400px){
.stats-row{grid-template-columns:1fr;}
}
/* scrollbar */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar">
<div class="nav-inner">
<a class="brand" href="#">
<div class="brand-icon"><i class="fa-solid fa-wallet"></i></div>
Expense<span>Vault</span>
</a>
<div class="nav-tabs">
<button class="nav-tab active" data-page="dashboard" onclick="switchPage('dashboard')">
<i class="fa-solid fa-house-chimney"></i><span>Dashboard</span>
</button>
<button class="nav-tab" data-page="history" onclick="switchPage('history')">
<i class="fa-solid fa-clock-rotate-left"></i><span>History</span>
</button>
</div>
</div>
</nav>
<!-- TOAST CONTAINER -->
<div class="toast-wrap" id="toastWrap"></div>
<!-- EDIT MODAL -->
<div class="modal-overlay" id="editModal">
<div class="modal">
<div class="modal-header">
<div class="modal-title"><i class="fa-solid fa-pen-to-square" style="color:var(--purple);margin-right:8px;"></i>Edit Expense</div>
<button class="modal-close" onclick="closeModal()"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="form-grid">
<div class="form-group full">
<label>Description</label>
<input type="text" id="editDesc" placeholder="What did you spend on?"/>
</div>
<div class="form-group">
<label>Amount (Rs)</label>
<div class="input-wrap">
<span class="input-prefix">₨</span>
<input type="number" id="editAmount" placeholder="0"/>
</div>
</div>
<div class="form-group">
<label>Category</label>
<select id="editCategory">
<option value="food">🍔 Food</option>
<option value="fuel">⛽ Fuel / Gas</option>
<option value="bills">💡 Bills</option>
<option value="grocery">🛒 Grocery</option>
<option value="health">💊 Health</option>
<option value="shopping">🛍️ Shopping</option>
<option value="education">📚 Education</option>
<option value="other">📦 Other</option>
</select>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" id="editDate"/>
</div>
<div class="form-group">
<label>Time</label>
<input type="time" id="editTime"/>
</div>
</div>
<div class="modal-actions">
<button class="btn-ghost" onclick="closeModal()">Cancel</button>
<button class="btn-save" onclick="saveEdit()"><i class="fa-solid fa-check"></i> Save Changes</button>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<!-- ═══════════ DASHBOARD PAGE ═══════════ -->
<div class="page active" id="page-dashboard">
<!-- Stats -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-icon"><i class="fa-solid fa-sun"></i></div>
<div class="stat-label">Today</div>
<div class="stat-value" id="statToday">₨0</div>
<div class="stat-note" id="statTodayCount">0 transactions</div>
</div>
<div class="stat-card purple">
<div class="stat-icon"><i class="fa-solid fa-calendar"></i></div>
<div class="stat-label">This Month</div>
<div class="stat-value" id="statMonth">₨0</div>
<div class="stat-note" id="statMonthCount">0 days tracked</div>
</div>
<div class="stat-card amber">
<div class="stat-icon"><i class="fa-solid fa-chart-line"></i></div>
<div class="stat-label">All Time</div>
<div class="stat-value" id="statAll">₨0</div>
<div class="stat-note" id="statAllCount">0 total entries</div>
</div>
</div>
<!-- Add Expense Form -->
<div class="card" style="margin-bottom:24px;">
<div class="card-header">
<div>
<div class="card-title"><i class="fa-solid fa-plus-circle" style="color:var(--teal);margin-right:8px;"></i>Add Expense</div>
<div class="card-sub">Record what you spent today</div>
</div>
</div>
<div class="form-grid">
<div class="form-group full">
<label>Description</label>
<input type="text" id="desc" placeholder="e.g. Milk, Petrol, Electricity Bill..." maxlength="80"/>
</div>
<div class="form-group">
<label>Amount (Rs)</label>
<div class="input-wrap">
<span class="input-prefix">₨</span>
<input type="number" id="amount" placeholder="0" min="0"/>
</div>
</div>
<div class="form-group">
<label>Category</label>
<select id="category">
<option value="food">🍔 Food</option>
<option value="fuel">⛽ Fuel / Gas</option>
<option value="bills">💡 Bills</option>
<option value="grocery">🛒 Grocery</option>
<option value="health">💊 Health</option>
<option value="shopping">🛍️ Shopping</option>
<option value="education">📚 Education</option>
<option value="other">📦 Other</option>
</select>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" id="expDate"/>
</div>
<div class="form-group">
<label>Time</label>
<input type="time" id="expTime"/>
</div>
</div>
<button class="btn btn-primary" onclick="addExpense()">
<i class="fa-solid fa-plus"></i> Add Expense
</button>
</div>
<!-- Today's Expenses -->
<div class="card">
<div class="card-header">
<div>
<div class="card-title"><i class="fa-solid fa-receipt" style="color:var(--amber);margin-right:8px;"></i>Today's Expenses</div>
<div class="card-sub" id="todayDateLabel"></div>
</div>
<div style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;color:var(--teal);" id="todayTotalBadge">₨0</div>
</div>
<div id="todayList">
<div class="empty-state">
<i class="fa-solid fa-mug-hot"></i>
<p>No expenses yet today.<br/>Add your first one above!</p>
</div>
</div>
</div>
</div>
<!-- ═══════════ HISTORY PAGE ═══════════ -->
<div class="page" id="page-history">
<!-- Filter Controls -->
<div class="card" style="margin-bottom:20px;">
<div class="card-header" style="margin-bottom:14px;">
<div class="card-title"><i class="fa-solid fa-filter" style="color:var(--purple);margin-right:8px;"></i>Filter History</div>
</div>
<div class="history-controls">
<div class="form-group">
<label>Select Date</label>
<input type="date" id="filterDate" onchange="renderHistory()"/>
</div>
<div class="form-group">
<label>Category</label>
<select id="filterCat" onchange="renderHistory()">
<option value="all">All Categories</option>
<option value="food">🍔 Food</option>
<option value="fuel">⛽ Fuel / Gas</option>
<option value="bills">💡 Bills</option>
<option value="grocery">🛒 Grocery</option>
<option value="health">💊 Health</option>
<option value="shopping">🛍️ Shopping</option>
<option value="education">📚 Education</option>
<option value="other">📦 Other</option>
</select>
</div>
<button class="btn btn-primary" style="margin-top:0;" onclick="clearFilters()">
<i class="fa-solid fa-rotate-left"></i> Reset
</button>
</div>
</div>
<!-- Summary Banner -->
<div class="history-summary" id="historySummary">
<div>
<div class="hs-label"><i class="fa-solid fa-calendar-check" style="margin-right:6px;"></i>Selected Period</div>
<div class="hs-date" id="hsSummaryDate">All time</div>
</div>
<div style="text-align:right;">
<div class="hs-amount" id="hsSummaryTotal">₨0</div>
<div class="hs-count" id="hsSummaryCount">0 transactions</div>
</div>
</div>
<!-- History List -->
<div id="historyList"></div>
</div>
</div>
<script>
// ══════════════════════════════════════════
// DATA LAYER
// ══════════════════════════════════════════
const STORAGE_KEY = 'expvault_v2';
let expenses = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
let editingId = null;
function save() {
localStorage.setItem(STORAGE_KEY, JSON.stringify(expenses));
}
function uid() {
return Date.now().toString(36) + Math.random().toString(36).slice(2);
}
// ══════════════════════════════════════════
// CAT CONFIG
// ══════════════════════════════════════════
const CAT = {
food: { icon:'🍔', label:'Food' },
fuel: { icon:'⛽', label:'Fuel / Gas' },
bills: { icon:'💡', label:'Bills' },
grocery: { icon:'🛒', label:'Grocery' },
health: { icon:'💊', label:'Health' },
shopping: { icon:'🛍️', label:'Shopping' },
education: { icon:'📚', label:'Education' },
other: { icon:'📦', label:'Other' },
};
// ══════════════════════════════════════════
// NAV
// ══════════════════════════════════════════
function switchPage(page) {
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
document.getElementById('page-' + page).classList.add('active');
document.querySelector(`[data-page="${page}"]`).classList.add('active');
if (page === 'history') renderHistory();
if (page === 'dashboard') renderDashboard();
}
// ══════════════════════════════════════════
// ADD EXPENSE
// ══════════════════════════════════════════
function addExpense() {
const desc = document.getElementById('desc').value.trim();
const amount = parseFloat(document.getElementById('amount').value);
const cat = document.getElementById('category').value;
const date = document.getElementById('expDate').value;
const time = document.getElementById('expTime').value;
if (!desc) { toast('Please enter a description', 'error'); return; }
if (!amount || amount <= 0) { toast('Enter a valid amount', 'error'); return; }
if (!date) { toast('Select a date', 'error'); return; }
if (!time) { toast('Select a time', 'error'); return; }
const entry = { id: uid(), desc, amount, cat, date, time };
expenses.push(entry);
save();
toast(`₨${amount.toLocaleString()} added — ${desc}`, 'success');
document.getElementById('desc').value = '';
document.getElementById('amount').value = '';
setDefaultDateTime();
renderDashboard();
}
// ══════════════════════════════════════════
// DELETE
// ══════════════════════════════════════════
function deleteExpense(id) {
if (!confirm('Delete this expense?')) return;
expenses = expenses.filter(e => e.id !== id);
save();
toast('Expense deleted', 'error');
renderDashboard();
if (document.getElementById('page-history').classList.contains('active')) renderHistory();
}
// ══════════════════════════════════════════
// EDIT MODAL
// ══════════════════════════════════════════
function openEdit(id) {
const e = expenses.find(x => x.id === id);
if (!e) return;
editingId = id;
document.getElementById('editDesc').value = e.desc;
document.getElementById('editAmount').value = e.amount;
document.getElementById('editCategory').value = e.cat;
document.getElementById('editDate').value = e.date;
document.getElementById('editTime').value = e.time;
document.getElementById('editModal').classList.add('open');
}
function closeModal() {
document.getElementById('editModal').classList.remove('open');
editingId = null;
}
function saveEdit() {
const desc = document.getElementById('editDesc').value.trim();
const amount = parseFloat(document.getElementById('editAmount').value);
const cat = document.getElementById('editCategory').value;
const date = document.getElementById('editDate').value;
const time = document.getElementById('editTime').value;
if (!desc || !amount || amount <= 0 || !date || !time) {
toast('Please fill all fields correctly', 'error'); return;
}
const idx = expenses.findIndex(e => e.id === editingId);
if (idx !== -1) {
expenses[idx] = { ...expenses[idx], desc, amount, cat, date, time };
save();
toast('Expense updated!', 'info');
}
closeModal();
renderDashboard();
if (document.getElementById('page-history').classList.contains('active')) renderHistory();
}
// Close on overlay click
document.getElementById('editModal').addEventListener('click', function(e) {
if (e.target === this) closeModal();
});
// ══════════════════════════════════════════
// RENDER DASHBOARD
// ══════════════════════════════════════════
function renderDashboard() {
const today = todayStr();
// Stats
const todayExp = expenses.filter(e => e.date === today);
const todaySum = todayExp.reduce((a, e) => a + e.amount, 0);
const monthKey = today.slice(0, 7);
const monthExp = expenses.filter(e => e.date.startsWith(monthKey));
const monthSum = monthExp.reduce((a, e) => a + e.amount, 0);
const monthDays = new Set(monthExp.map(e => e.date)).size;
const allSum = expenses.reduce((a, e) => a + e.amount, 0);
document.getElementById('statToday').textContent = '₨' + todaySum.toLocaleString();
document.getElementById('statTodayCount').textContent = todayExp.length + ' transactions';
document.getElementById('statMonth').textContent = '₨' + monthSum.toLocaleString();
document.getElementById('statMonthCount').textContent = monthDays + ' days tracked';
document.getElementById('statAll').textContent = '₨' + allSum.toLocaleString();
document.getElementById('statAllCount').textContent = expenses.length + ' total entries';
// Today label
const now = new Date();
document.getElementById('todayDateLabel').textContent =
now.toLocaleDateString('en-PK', { weekday:'long', year:'numeric', month:'long', day:'numeric' });
document.getElementById('todayTotalBadge').textContent = '₨' + todaySum.toLocaleString();
// Today list
const list = document.getElementById('todayList');
if (todayExp.length === 0) {
list.innerHTML = `<div class="empty-state">
<i class="fa-solid fa-mug-hot"></i>
<p>No expenses yet today.<br/>Add your first one above!</p>
</div>`;
return;
}
const sorted = [...todayExp].sort((a, b) => b.time.localeCompare(a.time));
list.innerHTML = sorted.map(e => expenseItemHTML(e)).join('');
}
// ══════════════════════════════════════════
// RENDER HISTORY
// ══════════════════════════════════════════
function renderHistory() {
const filterDate = document.getElementById('filterDate').value;
const filterCat = document.getElementById('filterCat').value;
let filtered = [...expenses];
if (filterDate) filtered = filtered.filter(e => e.date === filterDate);
if (filterCat !== 'all') filtered = filtered.filter(e => e.cat === filterCat);
// Summary
const total = filtered.reduce((a, e) => a + e.amount, 0);
document.getElementById('hsSummaryTotal').textContent = '₨' + total.toLocaleString();
document.getElementById('hsSummaryCount').textContent = filtered.length + ' transactions';
if (filterDate) {
const d = new Date(filterDate + 'T00:00:00');
document.getElementById('hsSummaryDate').textContent =
d.toLocaleDateString('en-PK', { weekday:'long', year:'numeric', month:'long', day:'numeric' });
} else {
document.getElementById('hsSummaryDate').textContent =
filterCat !== 'all' ? (CAT[filterCat]?.label || 'All') + ' — All Time' : 'All time';
}
const container = document.getElementById('historyList');
if (filtered.length === 0) {
container.innerHTML = `<div class="empty-state" style="padding:60px 0;">
<i class="fa-solid fa-magnifying-glass"></i>
<p>No expenses found for the selected filter.</p>
</div>`;
return;
}
// Group by date
const groups = {};
filtered.forEach(e => {
if (!groups[e.date]) groups[e.date] = [];
groups[e.date].push(e);
});
// Sort dates desc
const sortedDates = Object.keys(groups).sort((a, b) => b.localeCompare(a));
container.innerHTML = sortedDates.map(date => {
const items = groups[date].sort((a, b) => b.time.localeCompare(a.time));
const dayTotal = items.reduce((a, e) => a + e.amount, 0);
const d = new Date(date + 'T00:00:00');
const dateLabel = isToday(date) ? 'Today' :
isYesterday(date) ? 'Yesterday' :
d.toLocaleDateString('en-PK', { weekday:'short', day:'numeric', month:'short', year:'numeric' });
return `<div class="day-group">
<div class="day-header">
<span class="day-label">${dateLabel}</span>
<span class="day-badge">₨${dayTotal.toLocaleString()}</span>
</div>
${items.map(e => historyItemHTML(e)).join('')}
</div>`;
}).join('');
}
function clearFilters() {
document.getElementById('filterDate').value = '';
document.getElementById('filterCat').value = 'all';
renderHistory();
}
// ══════════════════════════════════════════
// HTML TEMPLATES
// ══════════════════════════════════════════
function expenseItemHTML(e) {
const c = CAT[e.cat] || CAT.other;
return `<div class="expense-item">
<div class="exp-icon cat-${e.cat}">${c.icon}</div>
<div class="exp-info">
<div class="exp-desc">${escHtml(e.desc)}</div>
<div class="exp-meta">${c.label} • ${e.time}</div>
</div>
<div class="exp-amount">₨${parseFloat(e.amount).toLocaleString()}</div>
<div class="exp-actions">
<button class="icon-btn edit" title="Edit" onclick="openEdit('${e.id}')"><i class="fa-solid fa-pen"></i></button>
<button class="icon-btn del" title="Delete" onclick="deleteExpense('${e.id}')"><i class="fa-solid fa-trash"></i></button>
</div>
</div>`;
}
function historyItemHTML(e) {
const c = CAT[e.cat] || CAT.other;
return `<div class="history-item">
<div class="exp-icon cat-${e.cat}">${c.icon}</div>
<div class="exp-info">
<div class="exp-desc">${escHtml(e.desc)}</div>
<div class="exp-meta">${c.label} • ${e.time}</div>
</div>
<div class="exp-amount" style="margin-left:auto;">₨${parseFloat(e.amount).toLocaleString()}</div>
<div class="exp-actions">
<button class="icon-btn edit" title="Edit" onclick="openEdit('${e.id}')"><i class="fa-solid fa-pen"></i></button>
<button class="icon-btn del" title="Delete" onclick="deleteExpense('${e.id}')"><i class="fa-solid fa-trash"></i></button>
</div>
</div>`;
}
// ══════════════════════════════════════════
// TOAST
// ══════════════════════════════════════════
function toast(msg, type = 'success') {
const wrap = document.getElementById('toastWrap');
const el = document.createElement('div');
el.className = `toast ${type}`;
const icons = { success:'fa-check-circle', error:'fa-circle-xmark', info:'fa-circle-info' };
el.innerHTML = `<i class="fa-solid ${icons[type]||icons.success}"></i>${msg}`;
wrap.appendChild(el);
setTimeout(() => {
el.style.animation = 'toastOut .3s ease both';
setTimeout(() => el.remove(), 300);
}, 3000);
}
// ══════════════════════════════════════════
// HELPERS
// ══════════════════════════════════════════
function todayStr() {
return new Date().toISOString().slice(0, 10);
}
function isToday(d) { return d === todayStr(); }
function isYesterday(d) {
const y = new Date(); y.setDate(y.getDate() - 1);
return d === y.toISOString().slice(0, 10);
}
function escHtml(s) {
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
function setDefaultDateTime() {
const now = new Date();
document.getElementById('expDate').value = now.toISOString().slice(0, 10);
document.getElementById('expTime').value = now.toTimeString().slice(0, 5);
}
// ══════════════════════════════════════════
// INIT
// ══════════════════════════════════════════
setDefaultDateTime();
renderDashboard();
</script>
</body>
</html>