243 lines
15 KiB
Plaintext
243 lines
15 KiB
Plaintext
@page "/help"
|
|
@attribute [Authorize]
|
|
|
|
<PageTitle>Help</PageTitle>
|
|
|
|
<h3 class="mb-2">Help</h3>
|
|
<p class="text-muted mb-4">Guides and tips to help you get the most out of Budgeteer.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
|
|
@* ── Getting Started ── *@
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">🚀 Getting Started</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Welcome to <strong>Budgeteer</strong> — a personal finance dashboard to track your accounts, transactions and spending categories.</p>
|
|
<ol class="mb-0">
|
|
<li class="mb-2">
|
|
<strong>Create an account</strong> — Head to <a href="/accounts">Accounts</a> and add at least one financial account (e.g. "Current Account", "Savings"). Set the opening balance and choose a currency.
|
|
</li>
|
|
<li class="mb-2">
|
|
<strong>Set up categories</strong> — Visit <a href="/categories">Categories</a> to organise your spending. A set of default categories (including Salary) are provided automatically.
|
|
</li>
|
|
<li class="mb-2">
|
|
<strong>Configure your salary</strong> — Visit <a href="/salary">Salary</a> to add your regular income sources. Each salary generates recurring Income transactions automatically and highlights paydays on the chart.
|
|
</li>
|
|
<li class="mb-2">
|
|
<strong>Record transactions</strong> — Go to <a href="/transactions">Transactions</a> or use the <strong>+ Add</strong> button on the <a href="/">Dashboard</a> to log income and expenses.
|
|
</li>
|
|
<li>
|
|
<strong>Review your dashboard</strong> — The <a href="/">Dashboard</a> shows a balance trend chart and lists your recent and upcoming transactions.
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Dashboard ── *@
|
|
<div class="card mb-4" id="dashboard">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">📊 Dashboard</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/">Dashboard</a> is your home screen and gives you an at-a-glance view of your finances.</p>
|
|
|
|
<h6>Balance Trend Chart</h6>
|
|
<p>The chart shows projected balances for each account over a time window starting from today. Use the preset buttons (<strong>7d</strong>, <strong>30d</strong>, <strong>90d</strong>, <strong>1y</strong>) to look ahead, or pick custom dates with the date pickers. Payday dates from your <a href="/salary">Salary</a> sources are highlighted with a 💰 marker and a subtle green band.</p>
|
|
|
|
<h6>Recent & Upcoming Tabs</h6>
|
|
<ul>
|
|
<li><strong>Recent</strong> — Transactions that have already occurred, sorted by most recent first.</li>
|
|
<li><strong>Upcoming</strong> — Future transactions (including recurring ones) with projected account balances shown alongside each entry.</li>
|
|
</ul>
|
|
|
|
<h6>Quick Actions</h6>
|
|
<ul>
|
|
<li><strong>Click a transaction</strong> to expand it and reveal Edit and Delete buttons.</li>
|
|
<li>Use the <strong>search box</strong> to filter by description, account, category or amount.</li>
|
|
<li>When you have multiple accounts, use the <strong>account filter buttons</strong> below the tabs to show or hide specific accounts.</li>
|
|
<li>The <strong>+ Add</strong> button opens a quick-add modal — after saving, the form stays open so you can add multiple transactions in a row.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Accounts ── *@
|
|
<div class="card mb-4" id="accounts">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">🏦 Accounts</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/accounts">Accounts</a> page lets you manage your financial accounts.</p>
|
|
<ul>
|
|
<li><strong>Add an account</strong> — Enter a name, starting balance, currency and colour. The colour is used throughout the app to identify the account.</li>
|
|
<li><strong>Edit</strong> — Click the Edit button on any account card to change its name, currency or colour.</li>
|
|
<li><strong>Adjust balance</strong> — Click the displayed balance amount to manually correct it.</li>
|
|
<li><strong>Delete</strong> — Removes the account and <em>all</em> associated transactions. This cannot be undone.</li>
|
|
</ul>
|
|
<p class="mb-0">Account balances are also shown in the navigation sidebar — click them to jump to the Accounts page.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Transactions ── *@
|
|
<div class="card mb-4" id="transactions">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">💸 Transactions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/transactions">Transactions</a> page provides a full sortable and searchable table of all your transactions.</p>
|
|
|
|
<h6>Adding a Transaction</h6>
|
|
<ul>
|
|
<li>Fill in the description, amount, date, type (Income or Expense), account and optionally a category.</li>
|
|
<li>Amounts are always entered as positive numbers — the type field determines whether it adds to or subtracts from the account balance.</li>
|
|
</ul>
|
|
|
|
<h6>Recurring Transactions</h6>
|
|
<ul>
|
|
<li>Set a recurrence of <strong>Daily</strong>, <strong>Weekly</strong>, <strong>Monthly</strong> or <strong>Yearly</strong> when creating a transaction.</li>
|
|
<li>Optionally set an end date (up to 1 year from the transaction date). If left blank, it defaults to 1 year.</li>
|
|
<li>Future occurrences appear in the <strong>Upcoming</strong> tab on the Dashboard.</li>
|
|
<li>When editing a recurring transaction, changes apply to that occurrence <em>and all future ones</em> in the series.</li>
|
|
<li>When deleting, you can choose to delete just one occurrence or the entire future series.</li>
|
|
</ul>
|
|
|
|
<h6>Sorting & Filtering</h6>
|
|
<ul>
|
|
<li>Click any column header to sort the table.</li>
|
|
<li>Use the search box and account/type/category drop-downs to narrow results.</li>
|
|
<li>Select multiple transactions with checkboxes for bulk deletion.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Salary ── *@
|
|
<div class="card mb-4" id="salary">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">💰 Salary</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/salary">Salary</a> page lets you define regular income sources that generate recurring transactions automatically.</p>
|
|
|
|
<h6>Adding a Salary</h6>
|
|
<ul>
|
|
<li><strong>Name</strong> — A label for this income source (e.g. "Main Job", "Freelance").</li>
|
|
<li><strong>Amount</strong> — The net amount credited each payday.</li>
|
|
<li><strong>Account</strong> — Which account receives the payment.</li>
|
|
<li><strong>Recurrence</strong> — How often you are paid: <strong>Weekly</strong>, <strong>Monthly</strong> or <strong>Yearly</strong>.</li>
|
|
<li><strong>First Payday</strong> — The date of the first payment. The day of month (or week) is derived from this and repeats indefinitely.</li>
|
|
</ul>
|
|
|
|
<h6>How Salary Transactions Work</h6>
|
|
<ul>
|
|
<li>Salary transactions are generated automatically as Income entries up to the end of the current time window, and refreshed whenever you visit or change the date range on any page.</li>
|
|
<li>They appear on the <a href="/transactions">Transactions</a> page with a 💰 badge and cannot be deleted from there — manage them on the Salary page instead.</li>
|
|
<li>Payday dates are highlighted on the <a href="/">Dashboard</a> balance chart with a 💰 marker and subtle green band so you can see upcoming income at a glance.</li>
|
|
<li>The category is automatically set to <strong>Salary</strong>.</li>
|
|
</ul>
|
|
|
|
<h6>Deleting a Salary</h6>
|
|
<p class="mb-0">Deleting a salary removes all future unpaid transactions for that income source. Past transactions remain in your history for accurate record-keeping.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Categories ── *@
|
|
<div class="card mb-4" id="categories">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">🏷️ Categories</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/categories">Categories</a> page lets you create and manage spending categories.</p>
|
|
<ul>
|
|
<li><strong>Add a category</strong> — Enter a name and pick an emoji icon from the icon picker.</li>
|
|
<li><strong>Edit</strong> — Click the Edit button on a category card to change its name or icon.</li>
|
|
<li><strong>Delete</strong> — Removes the category. Transactions using it will become uncategorised.</li>
|
|
<li><strong>Default categories</strong> — A set of built-in categories (Groceries, Salary, Rent / Mortgage, etc.) are created automatically and shown with a <strong>Default</strong> badge. These cannot be edited or deleted.</li>
|
|
</ul>
|
|
<p class="mb-0">Categories are optional — you can assign them to transactions to get better insight into your spending patterns.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Reports ── *@
|
|
<div class="card mb-4" id="reports">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">📈 Reports</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/reports">Reports</a> page gives you a visual breakdown of your spending and income over a chosen time period.</p>
|
|
|
|
<h6>Filters</h6>
|
|
<ul>
|
|
<li>Use the preset buttons (<strong>7d</strong>, <strong>30d</strong>, <strong>90d</strong>, <strong>1y</strong>) or pick custom start/end dates to set the time range.</li>
|
|
<li>Toggle individual accounts on or off to include or exclude them from the charts and summary.</li>
|
|
</ul>
|
|
|
|
<h6>Charts</h6>
|
|
<ul>
|
|
<li><strong>Expenses by Category</strong> — a doughnut chart showing how your spending is distributed across categories.</li>
|
|
<li><strong>Income by Category</strong> — a doughnut chart showing the sources of your income.</li>
|
|
<li><strong>Monthly Income vs Expenses</strong> — a bar chart comparing total income and expenses for each month in the selected range.</li>
|
|
</ul>
|
|
|
|
<h6>Category Summary Table</h6>
|
|
<p class="mb-0">Below the charts is a table listing every category with its total income, total expenses and net amount. A totals row at the bottom shows the overall figures for the period.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Settings ── *@
|
|
<div class="card mb-4" id="settings">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">⚙️ Settings</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>The <a href="/settings">Settings</a> page provides account management options:</p>
|
|
<ul>
|
|
<li><strong>Change password</strong> — Enter your current password and choose a new one.</li>
|
|
<li><strong>Reset data</strong> — Wipe all your accounts, transactions and categories to start fresh. Your login credentials are kept.</li>
|
|
<li><strong>Delete account</strong> — Permanently removes your user account and all associated data. This action cannot be undone.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Tips ── *@
|
|
<div class="card mb-4" id="tips">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">💡 Tips</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="mb-0">
|
|
<li>Use the Dashboard <strong>+ Add</strong> button for rapid entry — the modal stays open after each save so you can batch-add transactions.</li>
|
|
<li>Set up recurring transactions for regular bills and income to keep your upcoming view accurate.</li>
|
|
<li>Use the <a href="/salary">Salary</a> page for regular pay — it is protected from accidental deletion and highlights paydays on the chart. Use the <strong>90d</strong> or <strong>1y</strong> window to plan ahead.</li>
|
|
<li>Assign colours to your accounts to easily distinguish them on the chart and in transaction lists.</li>
|
|
<li>Hover over elements for tooltips with additional context throughout the app.</li>
|
|
<li>Click your account balances in the sidebar to quickly navigate to account management.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* ── Sidebar quick links ── *@
|
|
<div class="col-lg-4">
|
|
<div class="card position-sticky" style="top: 1rem;">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Quick Navigation</h6>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
<a href="/help#dashboard" class="list-group-item list-group-item-action">📊 Dashboard</a>
|
|
<a href="/help#accounts" class="list-group-item list-group-item-action">🏦 Accounts</a>
|
|
<a href="/help#transactions" class="list-group-item list-group-item-action">💸 Transactions</a>
|
|
<a href="/help#salary" class="list-group-item list-group-item-action">💰 Salary</a>
|
|
<a href="/help#categories" class="list-group-item list-group-item-action">🏷️ Categories</a>
|
|
<a href="/help#reports" class="list-group-item list-group-item-action">📈 Reports</a>
|
|
<a href="/help#settings" class="list-group-item list-group-item-action">⚙️ Settings</a>
|
|
<a href="/help#tips" class="list-group-item list-group-item-action">💡 Tips</a>
|
|
</div>
|
|
<div class="card-footer text-center">
|
|
<a href="/about" class="text-muted" style="font-size: 0.85rem;">About Budgeteer</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|