108 lines
4.7 KiB
HTML
108 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Adjust Balance — {{ account.name }}{% endblock %}
|
|
{% block page_title %}Adjust Balance{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-7 col-lg-5">
|
|
|
|
<div class="pcard mb-3" style="border-left: 4px solid {{ account.color }};">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div style="width:36px;height:36px;border-radius:9px;background:{{ account.color }}22;color:{{ account.color }};display:flex;align-items:center;justify-content:center;font-size:18px;">
|
|
<i class="bi {{ account.icon }}"></i>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight:600;font-size:14px;">{{ account.name }}</div>
|
|
<div style="font-size:11px;color:var(--muted);">{{ account.account_type | replace('_',' ') | title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 d-flex gap-3">
|
|
<div>
|
|
<div style="font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Current Balance</div>
|
|
<div class="mono {% if current_balance >= 0 %}text-income{% else %}text-expense{% endif %}" style="font-size:22px;font-weight:700;">
|
|
{{ current_balance | abs | currency }}{% if current_balance < 0 %} <span style="font-size:13px;font-weight:400;">(owed)</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pcard" style="border-top: 4px solid {{ account.color }};">
|
|
<p style="font-size:13px;color:var(--muted);">
|
|
Enter the correct balance. An adjustment transaction will be created for the difference to bring the account in line.
|
|
</p>
|
|
<form method="POST" novalidate id="adjustForm">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Correct Balance</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text" style="font-size:13px;">{{ current_user.currency_symbol }}</span>
|
|
<input type="number" name="new_balance" id="newBalance" class="form-control"
|
|
step="0.01" placeholder="0.00" autofocus
|
|
style="font-size:15px;font-weight:600;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live difference preview -->
|
|
<div id="diffPreview" class="mb-3 p-3" style="border-radius:8px;background:#f8fafc;display:none;">
|
|
<div style="font-size:12px;color:var(--muted);margin-bottom:4px;">Adjustment that will be created</div>
|
|
<div id="diffText" style="font-size:14px;font-weight:600;"></div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium" style="font-size:13px;">Reason <span style="font-weight:400;color:var(--muted);">(optional)</span></label>
|
|
<input type="text" name="notes" class="form-control" style="font-size:13px;"
|
|
placeholder="e.g. Bank reconciliation, opening balance">
|
|
</div>
|
|
|
|
<div class="d-flex gap-2">
|
|
<button type="submit" class="btn btn-primary" id="submitBtn" disabled>Apply Adjustment</button>
|
|
<a href="{{ url_for('accounts.index', tab='credit' if account.account_type == 'credit_card' else 'bank') }}"
|
|
class="btn btn-outline-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
const currentBalance = {{ current_balance }};
|
|
const symbol = '{{ current_user.currency_symbol }}';
|
|
|
|
document.getElementById('newBalance').addEventListener('input', function () {
|
|
const val = parseFloat(this.value);
|
|
const preview = document.getElementById('diffPreview');
|
|
const diffText = document.getElementById('diffText');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
if (isNaN(val)) {
|
|
preview.style.display = 'none';
|
|
submitBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
const diff = Math.round((val - currentBalance) * 100) / 100;
|
|
|
|
if (diff === 0) {
|
|
preview.style.background = '#f8fafc';
|
|
diffText.style.color = '#64748b';
|
|
diffText.textContent = 'No change — balance is already at this amount.';
|
|
submitBtn.disabled = true;
|
|
} else {
|
|
const isIncome = diff > 0;
|
|
preview.style.background = isIncome ? '#f0fdf4' : '#fef2f2';
|
|
diffText.style.color = isIncome ? '#10b981' : '#ef4444';
|
|
const sign = isIncome ? '+' : '-';
|
|
const absVal = Math.abs(diff).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
const type = isIncome ? 'Income (credit)' : 'Expense (debit)';
|
|
diffText.textContent = `${type}: ${sign}${symbol}${absVal}`;
|
|
submitBtn.disabled = false;
|
|
}
|
|
preview.style.display = 'block';
|
|
});
|
|
</script>
|
|
{% endblock %}
|