<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker</title>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<!-- ══════════════════════════════════════ AUTH
══════════════════════════════════════ -->
<section id="authScreen" class="auth-page">
<div class="auth-brand">
<div class="logo-box auth-logo">💰</div>
<h1>Expense Tracker</h1>
<p>Manage your finances with ease</p>
</div>
<div class="auth-card">
<h2>Welcome</h2>
<p class="auth-sub">Sign in to your account or create a new one</p>
<div class="auth-tabs">
<button id="loginTabBtn" class="tab active" type="button">↪ Login</button>
<button id="registerTabBtn" class="tab" type="button">⚇ Register</button>
</div>
<form id="loginForm" class="auth-form">
<label for="loginEmail">Email</label>
<input id="loginEmail" type="email" placeholder="[Link]@[Link]" required>
<label for="loginPassword">Password</label>
<input id="loginPassword" type="password" placeholder="••••••••" required>
<button class="btn-primary full" type="submit">↪ Sign In</button>
</form>
<form id="registerForm" class="auth-form hidden">
<label for="registerName">Name</label>
<input id="registerName" type="text" placeholder="Enter your name" required>
<label for="registerEmail">Email</label>
<input id="registerEmail" type="email" placeholder="[Link]@[Link]" required>
<label for="registerPassword">Password</label>
<input id="registerPassword" type="password" placeholder="Create password" required>
<label for="registerConfirmPassword">Confirm Password</label>
<input id="registerConfirmPassword" type="password" placeholder="Confirm password" required>
<button class="btn-primary full" type="submit">⚇ Create Account</button>
</form>
<p id="authMessage" class="auth-message"></p>
</div>
</section>
<!-- ══════════════════════════════════════ APP
══════════════════════════════════════ -->
<div id="appShell" class="app-shell hidden">
<header class="topbar">
<div class="topbar-left">
<div class="logo-box small">💰</div>
<h2>Expense Tracker</h2>
</div>
<div class="topbar-right">
<span id="welcomeText">Welcome!</span>
<span id="topbarRoleBadge" class="topbar-role-badge hidden"></span>
<button id="logoutBtn" class="logout-btn" type="button">↪ Logout</button>
</div>
</header>
<div class="app-body">
<aside class="sidebar">
<nav>
<button class="nav-item active" data-page="dashboard" type="button">⌂ Dashboard</button>
<button class="nav-item" data-page="add-expense" type="button">⊕ Add Expense</button>
<button class="nav-item" data-page="all-expenses" type="button">☰ All Expenses</button>
<button class="nav-item" data-page="settings" type="button">⚙ Settings</button>
<!-- Admin nav button — hidden for regular users -->
<div class="sidebar-divider hidden" id="adminNavDivider"></div>
<button class="nav-item hidden" data-page="admin-panel" type="button" id="adminNavBtn">🛡
Admin Panel</button>
</nav>
</aside>
<main class="main-content">
<!-- ── DASHBOARD ── -->
<section class="page active" id="dashboard">
<div class="page-head">
<h1>Dashboard</h1>
<p>Overview of your spending</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3>Total Expenses</h3>
<h2 id="dashboardTotal">₱0.00</h2>
</div>
<div class="stat-card">
<h3>This Month</h3>
<h2 id="dashboardMonthTotal">₱0.00</h2>
</div>
<div class="stat-card">
<h3>Total Transactions</h3>
<h2 id="dashboardCount">0</h2>
</div>
</div>
<!-- Budget Overview -->
<div class="panel">
<div class="panel-head">
<h3>Budget Overview</h3>
</div>
<div class="panel-content budget-grid">
<div class="budget-item">
<span>This Week</span>
<strong id="weeklyBudgetStatus">₱0.00 / ₱0.00</strong>
<small id="weeklyBudgetHint">Remaining: ₱0.00</small>
</div>
<div class="budget-item">
<span>This Month</span>
<strong id="monthlyBudgetStatus">₱0.00 / ₱0.00</strong>
<small id="monthlyBudgetHint">Remaining: ₱0.00</small>
</div>
<div class="budget-item">
<span>This Year</span>
<strong id="yearlyBudgetStatus">₱0.00 / ₱0.00</strong>
<small id="yearlyBudgetHint">Remaining: ₱0.00</small>
</div>
</div>
<!-- Category Budget Allocation -->
<div class="alloc-section">
<div class="alloc-header">
<div class="alloc-title-wrap">
<span class="alloc-title">📂 Category Budget Allocation</span>
<span class="alloc-subtitle">Equal split across all categories</span>
</div>
<div class="alloc-tab-group">
<button class="alloc-tab active" data-period="weekly" type="button">Week</button>
<button class="alloc-tab" data-period="monthly" type="button">Month</button>
<button class="alloc-tab" data-period="yearly" type="button">Year</button>
</div>
</div>
<div id="categoryAllocationList" class="category-allocation-list"></div>
</div>
</div>
<!-- Spending Analytics Charts -->
<div class="panel chart-panel">
<div class="panel-head">
<h3>📊 Spending Analytics</h3>
<div class="chart-tab-group">
<button class="chart-tab-btn active" data-view="today" type="button">Today</button>
<button class="chart-tab-btn" data-view="month" type="button">Month</button>
<button class="chart-tab-btn" data-view="year" type="button">Year</button>
</div>
</div>
<div class="panel-content">
<div id="chartViewToday" class="chart-view active">
<div class="chart-inner">
<div class="chart-canvas-wrap"><canvas id="todayChart"></canvas></div>
<div id="todayLegend" class="chart-legend"></div>
</div>
<p id="todayEmpty" class="chart-empty hidden">No expenses logged today.</p>
</div>
<div id="chartViewMonth" class="chart-view">
<div class="chart-inner">
<div class="chart-canvas-wrap wide"><canvas id="monthChart"></canvas></div>
</div>
<p id="monthEmpty" class="chart-empty hidden">No expenses this month.</p>
</div>
<div id="chartViewYear" class="chart-view">
<div class="chart-inner">
<div class="chart-canvas-wrap wide"><canvas id="yearChart"></canvas></div>
</div>
<p id="yearEmpty" class="chart-empty hidden">No expenses this year.</p>
</div>
</div>
</div>
<!-- Recent Expenses -->
<div class="panel">
<div class="panel-head"><h3>Recent Expenses</h3></div>
<div id="recentExpensesContainer" class="panel-content"></div>
</div>
</section>
<!-- ── ADD EXPENSE ── -->
<section class="page" id="add-expense">
<div class="page-head">
<h1>Add Expense</h1>
<p>Save a new expense</p>
</div>
<div class="form-card">
<form id="expenseForm">
<label for="amount">Amount</label>
<input id="amount" type="number" step="0.01" min="0.01" placeholder="0.00" required>
<label for="categorySelect">Category</label>
<select id="categorySelect" required></select>
<label for="description">Description</label>
<textarea id="description" placeholder="What did you spend on?" required></textarea>
<label for="expenseDate">Date</label>
<input id="expenseDate" type="date" required>
<div class="form-actions">
<button class="btn-primary" type="submit">Add Expense</button>
<button class="btn-light" id="cancelExpenseBtn" type="reset">Cancel</button>
</div>
</form>
</div>
</section>
<!-- ── ALL EXPENSES ── -->
<section class="page" id="all-expenses">
<div class="page-head between">
<div>
<h1>All Expenses</h1>
<p id="allExpenseCount">0 transactions</p>
</div>
<div class="total-box">
<span>Total</span>
<strong id="allExpenseTotal">₱0.00</strong>
</div>
</div>
<div class="panel expenses-panel">
<div id="expensesList" class="expenses-list"></div>
</div>
</section>
<!-- ── SETTINGS ── -->
<section class="page" id="settings">
<div class="page-head">
<h1>Settings</h1>
<p>Manage budgets and categories</p>
</div>
<!-- Budget form -->
<div class="settings-card">
<div class="panel-head settings-top"><h3>Budget Settings</h3></div>
<div class="budget-cascade-info">
<div class="cascade-rule">
<span class="cascade-icon">📅</span>
<div><strong>Set Yearly</strong> → Monthly & Weekly auto-calculated</div>
</div>
<div class="cascade-rule">
<span class="cascade-icon">🗓</span>
<div><strong>Set Monthly</strong> → Weekly auto-calculated · Yearly untouched</div>
</div>
<div class="cascade-rule">
<span class="cascade-icon">📆</span>
<div><strong>Set Weekly</strong> → Monthly & Yearly untouched</div>
</div>
</div>
<form id="budgetForm" class="budget-form">
<div class="budget-field">
<label for="currencyInput">Currency</label>
<input type="text" id="currencyInput" maxlength="3" placeholder="PHP" required>
</div>
<div class="budget-field" id="yearlyBudgetField">
<div class="budget-label-row">
<label for="yearlyBudgetInput">Yearly Budget</label>
<span class="cascade-source-badge">Master</span>
</div>
<input type="number" id="yearlyBudgetInput" min="0" step="0.01" placeholder="0.00">
<small class="budget-cascade-hint" id="yearlyHint"></small>
</div>
<div class="budget-field" id="monthlyBudgetField">
<div class="budget-label-row">
<label for="monthlyBudgetInput">Monthly Budget</label>
<span class="auto-badge hidden" id="monthlyAutoBadge">⚡ Auto</span>
</div>
<input type="number" id="monthlyBudgetInput" min="0" step="0.01" placeholder="0.00">
<small class="budget-cascade-hint" id="monthlyHint"></small>
</div>
<div class="budget-field" id="weeklyBudgetField">
<div class="budget-label-row">
<label for="weeklyBudgetInput">Weekly Budget</label>
<span class="auto-badge hidden" id="weeklyAutoBadge">⚡ Auto</span>
</div>
<input type="number" id="weeklyBudgetInput" min="0" step="0.01" placeholder="0.00">
<small class="budget-cascade-hint" id="weeklyHint"></small>
</div>
<button type="submit" class="btn-primary budget-save-btn">💾 Save Budget Settings</button>
</form>
<p id="budgetSaveMsg" class="budget-save-msg hidden"></p>
</div>
<!-- Default categories — read-only -->
<div class="settings-card">
<div class="panel-head settings-top">
<h3>Default Categories</h3>
<span class="admin-badge">🔒 Admin Managed</span>
</div>
<p class="admin-note">These are the default categories available to all users. Only an admin can
add, edit, or remove them via the Supabase dashboard.</p>
<div id="settingsCategoryGrid" class="settings-category-grid"></div>
</div>
<!-- User custom categories -->
<div class="settings-card">
<div class="panel-head settings-top">
<h3>My Custom Categories</h3>
<span class="user-cat-count-badge" id="userCatCount">0 custom</span>
</div>
<p class="admin-note">Create your own categories. You can delete any category you created as
long as it has no expenses linked to it.</p>
<form id="addUserCategoryForm" class="user-cat-form">
<div class="user-cat-inputs">
<div class="user-cat-field">
<label for="newCategoryName">Category Name</label>
<input type="text" id="newCategoryName" placeholder="e.g. Gym, Hobbies…"
maxlength="40" required>
</div>
<div class="user-cat-field narrow">
<label for="newCategoryIcon">Icon (emoji)</label>
<input type="text" id="newCategoryIcon" placeholder="🏷" maxlength="4">
</div>
<div class="user-cat-field narrow">
<label for="newCategoryColor">Color</label>
<select id="newCategoryColor">
<option value="pink">🌸 Pink</option>
<option value="blue">🔵 Blue</option>
<option value="lavender">💜 Lavender</option>
<option value="yellow">🟡 Yellow</option>
<option value="mint">🟢 Mint</option>
<option value="sky">🩵 Sky</option>
<option value="gray" selected>⬜ Gray</option>
</select>
</div>
</div>
<button type="submit" class="btn-primary user-cat-submit">＋ Add Category</button>
<p id="userCatMsg" class="user-cat-msg hidden"></p>
</form>
<div id="userCategoryGrid" class="settings-category-grid" style="margin-top:16px;"></div>
</div>
</section>
<!-- ══════════════════════════════════════ ADMIN PANEL
══════════════════════════════════════ -->
<section class="page" id="admin-panel">
<div class="page-head between">
<div>
<h1>Admin Panel</h1>
<p id="adminPanelSubtitle">Manage users, expenses, and categories</p>
</div>
<span id="adminRoleBadge" class="role-badge role-admin">🛡 Admin</span>
</div>
<!-- Admin Summary Stats -->
<div class="stats-grid" id="adminStatsGrid">
<div class="stat-card">
<h3>Total Users</h3>
<h2 id="adminStatUsers">—</h2>
</div>
<div class="stat-card">
<h3>Total Expenses</h3>
<h2 id="adminStatExpenses">—</h2>
</div>
<div class="stat-card">
<h3>All-User Spend</h3>
<h2 id="adminStatTotalSpent">—</h2>
</div>
</div>
<!-- Admin Sub-tab Bar -->
<div class="admin-tab-bar">
<button class="admin-tab active" data-admin-tab="users" type="button">👥 Users</button>
<button class="admin-tab" data-admin-tab="expenses" type="button">💸 All
Expenses</button>
<button class="admin-tab" data-admin-tab="categories" type="button">📂
Categories</button>
</div>
<!-- ── USERS TAB ── -->
<div class="admin-tab-content active" id="adminTabUsers">
<div class="panel">
<div class="panel-head">
<h3>All Users</h3>
<span id="adminUserCount" class="user-cat-count-badge">0 users</span>
</div>
<div class="panel-content" id="adminUsersList">
<div class="empty-state"><p>Loading users…</p></div>
</div>
</div>
</div>
<!-- ── ALL EXPENSES TAB ── -->
<div class="admin-tab-content" id="adminTabExpenses">
<div class="panel">
<div class="panel-head admin-expenses-head">
<h3>All Expenses</h3>
<div class="admin-filter-row">
<input type="text" id="adminExpenseSearch" placeholder="🔍 Search description…"
class="admin-search-input">
<select id="adminExpenseUserFilter" class="admin-filter-select">
<option value="">All Users</option>
</select>
</div>
</div>
<div class="admin-expense-meta">
<span id="adminExpenseCount">0 results</span>
<strong id="adminExpenseFilterTotal">₱0.00</strong>
</div>
<div class="panel-content" id="adminExpensesList">
<div class="empty-state"><p>Loading expenses…</p></div>
</div>
</div>
</div>
<!-- ── CATEGORIES TAB ── -->
<div class="admin-tab-content" id="adminTabCategories">
<!-- Default categories section -->
<div class="settings-card">
<div class="panel-head settings-top">
<h3>Default Categories</h3>
<span class="admin-badge">🌐 Global</span>
</div>
<p class="admin-note">Toggle 🔒 lock to control if users can use each category. Super admins can
add or delete default categories.</p>
<!-- Add default category (super_admin only) -->
<div id="adminAddDefaultCatSection" class="hidden">
<div class="admin-section-label">➕ Add New Default Category</div>
<form id="adminAddDefaultCatForm" class="user-cat-form">
<div class="user-cat-inputs">
<div class="user-cat-field">
<label for="adminNewCatName">Category Name</label>
<input type="text" id="adminNewCatName" placeholder="e.g. Investments…"
maxlength="40" required>
</div>
<div class="user-cat-field narrow">
<label for="adminNewCatIcon">Icon (emoji)</label>
<input type="text" id="adminNewCatIcon" placeholder="🏷" maxlength="4">
</div>
<div class="user-cat-field narrow">
<label for="adminNewCatColor">Color</label>
<select id="adminNewCatColor">
<option value="pink">🌸 Pink</option>
<option value="blue">🔵 Blue</option>
<option value="lavender">💜 Lavender</option>
<option value="yellow">🟡 Yellow</option>
<option value="mint">🟢 Mint</option>
<option value="sky">🩵 Sky</option>
<option value="gray" selected>⬜ Gray</option>
</select>
</div>
</div>
<button type="submit" class="btn-primary user-cat-submit">＋ Add Default Category</button>
</form>
<p id="adminCatMsg" class="user-cat-msg hidden"></p>
</div>
<div id="adminDefaultCatGrid" class="settings-category-grid" style="margin-top:16px;"></div>
</div>
<!-- User-created categories section -->
<div class="settings-card" style="margin-top:20px;">
<div class="panel-head settings-top">
<h3>User-Created Categories</h3>
<span id="adminUserCatCount" class="user-cat-count-badge">0 categories</span>
</div>
<p class="admin-note">Lock a user's custom category to prevent them from deleting it. Unlock
to allow deletion.</p>
<div id="adminUserCatGrid" class="settings-category-grid" style="margin-top:16px;"></div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════ END ADMIN PANEL
══════════════════════════════════════ -->
</main>
</div>
</div>
<script src="[Link]
<script src="[Link]
<script src="[Link]"></script>
</body>
</html>