180 lines
10 KiB
Plaintext
180 lines
10 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. Pick an emoji icon for each category to make them easy to spot.
|
|
</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.</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>
|
|
|
|
@* ── 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>
|
|
</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>
|
|
|
|
@* ── 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>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#categories" class="list-group-item list-group-item-action">🏷️ Categories</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>
|