05/31 Phase 2
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block page_title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-8 col-lg-5">
|
||||
<div class="pcard">
|
||||
<form method="POST" novalidate>
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.name.label(class="form-label fw-medium", style="font-size:13px;") }}
|
||||
{{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="Category name") }}
|
||||
{% for e in form.name.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.category_type.label(class="form-label fw-medium", style="font-size:13px;") }}
|
||||
{{ form.category_type(class="form-select") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium" style="font-size:13px;">Color</label>
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
{% for c in colors %}
|
||||
<label style="cursor:pointer;">
|
||||
<input type="radio" name="color" value="{{ c }}" style="display:none;" {% if (category and category.color == c) or (not category and loop.first) %}checked{% endif %}>
|
||||
<div style="width:26px;height:26px;border-radius:6px;background:{{ c }};border:3px solid transparent;" class="color-swatch" data-color="{{ c }}"></div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ form.color(type="hidden", id="colorInput") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-medium" style="font-size:13px;">Icon</label>
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
{% for icon_val in icons %}
|
||||
<label style="cursor:pointer;" title="{{ icon_val }}">
|
||||
<input type="radio" name="icon" value="{{ icon_val }}" style="display:none;" {% if category and category.icon == icon_val %}checked{% elif not category and loop.first %}checked{% endif %}>
|
||||
<div style="width:34px;height:34px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid transparent;" class="icon-swatch">
|
||||
<i class="bi {{ icon_val }}"></i>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ form.icon(type="hidden", id="iconInput") }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
{{ form.submit(class="btn btn-primary") }}
|
||||
<a href="{{ url_for('categories.index') }}" class="btn btn-outline-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.querySelectorAll('.color-swatch').forEach(function(sw) {
|
||||
const inp = sw.closest('label').querySelector('input');
|
||||
inp.addEventListener('change', function() {
|
||||
document.getElementById('colorInput').value = this.value;
|
||||
document.querySelectorAll('.color-swatch').forEach(s => { s.style.borderColor='transparent'; s.style.outline='none'; });
|
||||
sw.style.borderColor = '#fff';
|
||||
sw.style.outline = '2px solid ' + this.value;
|
||||
});
|
||||
if (inp.checked) { sw.style.borderColor='#fff'; sw.style.outline='2px solid '+sw.dataset.color; document.getElementById('colorInput').value=sw.dataset.color; }
|
||||
});
|
||||
document.querySelectorAll('.icon-swatch').forEach(function(sw) {
|
||||
const inp = sw.closest('label').querySelector('input');
|
||||
inp.addEventListener('change', function() {
|
||||
document.getElementById('iconInput').value = this.value;
|
||||
document.querySelectorAll('.icon-swatch').forEach(s => { s.style.background='#f1f5f9'; s.style.borderColor='transparent'; });
|
||||
sw.style.background='#dbeafe'; sw.style.borderColor='#3b82f6';
|
||||
});
|
||||
if (inp.checked) { sw.style.background='#dbeafe'; sw.style.borderColor='#3b82f6'; document.getElementById('iconInput').value=inp.value; }
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,87 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Categories{% endblock %}
|
||||
{% block page_title %}Categories{% endblock %}
|
||||
|
||||
{% block topbar_actions %}
|
||||
<a href="{{ url_for('categories.new', type='expense') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Expense</a>
|
||||
<a href="{{ url_for('categories.new', type='income') }}" class="btn btn-sm btn-primary ms-1" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Income</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="pcard">
|
||||
<div class="pcard-title mb-3">Expense Categories</div>
|
||||
{% if expense_cats %}
|
||||
<table class="pfm-table">
|
||||
<thead><tr><th>Category</th><th>Type</th><th class="text-end">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{% for cat in expense_cats %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div style="width:28px;height:28px;border-radius:7px;background:{{ cat.color }}22;color:{{ cat.color }};display:flex;align-items:center;justify-content:center;font-size:14px;">
|
||||
<i class="bi {{ cat.icon }}"></i>
|
||||
</div>
|
||||
<span style="font-size:13px;font-weight:500;">{{ cat.name }}</span>
|
||||
{% if cat.is_system %}<span style="font-size:10px;background:#f1f5f9;color:var(--muted);border-radius:4px;padding:1px 5px;">system</span>{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-size:12px;color:var(--muted);">{{ cat.category_type | title }}</span></td>
|
||||
<td class="text-end">
|
||||
<a href="{{ url_for('categories.edit', id=cat.id) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;">Edit</a>
|
||||
{% if not cat.is_system %}
|
||||
<form method="POST" action="{{ url_for('categories.delete', id=cat.id) }}" style="display:inline;" onsubmit="return confirm('Remove this category?')">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger ms-1" style="font-size:11px;padding:2px 8px;">Del</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p class="text-muted small">No expense categories.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="pcard">
|
||||
<div class="pcard-title mb-3">Income Categories</div>
|
||||
{% if income_cats %}
|
||||
<table class="pfm-table">
|
||||
<thead><tr><th>Category</th><th>Type</th><th class="text-end">Actions</th></tr></thead>
|
||||
<tbody>
|
||||
{% for cat in income_cats %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div style="width:28px;height:28px;border-radius:7px;background:{{ cat.color }}22;color:{{ cat.color }};display:flex;align-items:center;justify-content:center;font-size:14px;">
|
||||
<i class="bi {{ cat.icon }}"></i>
|
||||
</div>
|
||||
<span style="font-size:13px;font-weight:500;">{{ cat.name }}</span>
|
||||
{% if cat.is_system %}<span style="font-size:10px;background:#f1f5f9;color:var(--muted);border-radius:4px;padding:1px 5px;">system</span>{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td><span style="font-size:12px;color:var(--muted);">{{ cat.category_type | title }}</span></td>
|
||||
<td class="text-end">
|
||||
<a href="{{ url_for('categories.edit', id=cat.id) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;">Edit</a>
|
||||
{% if not cat.is_system %}
|
||||
<form method="POST" action="{{ url_for('categories.delete', id=cat.id) }}" style="display:inline;" onsubmit="return confirm('Remove this category?')">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger ms-1" style="font-size:11px;padding:2px 8px;">Del</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p class="text-muted small">No income categories.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user