jkuijperm/expenses_manager
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Created a base template and added to the others

Browse Source
This commit is contained in:
JKuijperM 2026-02-04 15:01:40 +01:00
parent 9511ea93ba
commit 595ba93e39
16 changed files with 710 additions and 691 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
expenses_manager/expenses/static/expenses/css/base.css
View File

@ -1,3 +1,43 @@
body {
margin: 0;
font-family: system-ui, sans-serif;
background: #f6f7f9;
}
.topbar {
background: #1f2937;
padding: 12px 20px;
}
.nav {
display: flex;
align-items: center;
gap: 16px;
}
.nav a {
color: #e5e7eb;
text-decoration: none;
font-weight: 500;
}
.nav a:hover {
text-decoration: underline;
}
.spacer {
flex: 1;
}
.user {
color: #9ca3af;
margin-right: 8px;
}
.content {
padding: 24px;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 500px));

34
expenses_manager/expenses/templates/expenses/account_confirm_delete.html
View File

@ -1,24 +1,18 @@
{% load static %}
<!DOCTYPE>
<html>
<head>
<title>Eliminar</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
<body>
{% extends "expenses/base.html" %}
{% block title %}Eliminar{% endblock %}
{% block content %}
<h1>Eliminar cuenta</h1>
<h1>Eliminar cuenta</h1>
<p>
¿Seguro que quieres eliminar la cuenta
<strong>{{ account.name }}</strong>
</p>
<p>
¿Seguro que quieres eliminar la cuenta
<strong>{{ account.name }}</strong>
</p>
<form method="post">
{% csrf_token %}
<button type="submit">Sí, eliminar</button>
<a href="{% url 'account_list' %}">Cancelar</a>
</form>
<form method="post">
{% csrf_token %}
<button type="submit">Sí, eliminar</button>
<a href="{% url 'account_list' %}">Cancelar</a>
</form>
</body>
</html>
{% endblock %}

40
expenses_manager/expenses/templates/expenses/account_form.html
View File

@ -1,27 +1,21 @@
{% load static %}
<!DOCTYPE>
<html>
<head>
<title>Cuenta</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
<body>
{% extends "expenses/base.html" %}
{% block title %}Cuenta{% endblock %}
{% block content %}
<h1>
{% if form.instance.pk %}
Editar cuenta
{% else %}
Nueva cuenta
{% endif %}
</h1>
<h1>
{% if form.instance.pk %}
Editar cuenta
{% else %}
Nueva cuenta
{% endif %}
</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Guardar</button>
<a href="{% url 'account_list' %}">Cancelar</a>
</form>
<button type="submit">Guardar</button>
<a href="{% url 'account_list' %}">Cancelar</a>
</form>
</body>
</html>
{% endblock %}

72
expenses_manager/expenses/templates/expenses/account_list.html
View File

@ -1,44 +1,38 @@
{% load static %}
<!DOCTYPE>
<html>
<head>
<title>Cuentas</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
<body>
{% extends "expenses/base.html" %}
{% block title %}Cuentas{% endblock %}
{% block content %}
<h1>Mis cuentas</h1>
<h1>Mis cuentas</h1>
<a href="{% url 'account_create' %}">➕ Nueva cuenta</a>
<a href="{% url 'account_create' %}">➕ Nueva cuenta</a>
<table>
<thead>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Saldo inicial</th>
<th>Saldo actual</th>
<th>Activa</th>
<th></th>
</tr>
</thead>
<tbody>
{% for account in accounts %}
<tr>
<th>Nombre</th>
<th>Saldo inicial</th>
<th>Saldo actual</th>
<th>Activa</th>
<th></th>
<td>{{ account.name }}</td>
<td>{{ account.initial_balance }}</td>
<td>{{ account.current_balance|floatformat:2 }}</td>
<td>{{ account.active }}</td>
<td>
<a href="{% url 'account_edit' account.id %}">Editar</a>
<a href="{% url 'account_delete' account.id %}">Eliminar</a>
</td>
</tr>
</thead>
<tbody>
{% for account in accounts %}
<tr>
<td>{{ account.name }}</td>
<td>{{ account.initial_balance }}</td>
<td>{{ account.current_balance|floatformat:2 }}</td>
<td>{{ account.active }}</td>
<td>
<a href="{% url 'account_edit' account.id %}">Editar</a>
<a href="{% url 'account_delete' account.id %}">Eliminar</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">No hay cuentas</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
{% empty %}
<tr>
<td colspan="5">No hay cuentas</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

36
expenses_manager/expenses/templates/expenses/base.html Normal file
View File

@ -0,0 +1,36 @@
{% load static %}
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}Expenses manager{% endblock %}</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<header class="topbar">
<nav class="nav">
<a href="{% url 'home' %}">Home</a>
<a href="{% url 'dashboard' %}">Dashboard</a>
<a href="{% url 'expense_list' %}">Gastos</a>
<a href="{% url 'account_list' %}">Cuentas</a>
<a href="{% url 'income_list' %}">Ingresos</a>
<a href="{% url 'tag_list' %}">Etiquetas</a>
<span class="spacer"></span>
<span class="user">
{{ request.user.username }}
</span>
<!-- <a href="{ url 'logout' }">Salir</a> -->
</nav>
</header>
<main class="content">
{% block content %}{% endblock %}
</main>
</body>
</html>

475
expenses_manager/expenses/templates/expenses/dashboard.html
View File

@ -1,258 +1,253 @@
<!DOCTYPE html>
{% extends "expenses/base.html" %}
{% block title %}Dashboard{% endblock %}
<html>
<head>
<title>Dashboard</title>
</head>
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h1>
Dashboard
{% if selected_account_obj %}
— {{ selected_account_obj.name }}
{% endif %}
</h1>
<!-- ========================= -->
<!-- Filters -->
<!-- ========================= -->
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
<a href="{% url 'dashboard' %}?period=this_month">Este mes</a> |
<a href="{% url 'dashboard' %}?period=last_month">Mes anterior</a> |
<a href="{% url 'dashboard' %}?period=this_year">Este año</a>
</div>
<br>
<h1>
Dashboard
{% if selected_account_obj %}
— {{ selected_account_obj.name }}
{% endif %}
</h1>
<!-- ========================= -->
<!-- Filters -->
<!-- ========================= -->
<div>
<a href="{% url 'dashboard' %}?period=this_month">Este mes</a> |
<a href="{% url 'dashboard' %}?period=last_month">Mes anterior</a> |
<a href="{% url 'dashboard' %}?period=this_year">Este año</a>
</div>
<br>
<form method="get" class="filters">
<label>
Año:
<select name="year">
{% for y in year_list %}
<option value="{{ y }}"
{% if y == selected_year %}selected{% endif %}
>
{{y}}
</option>
{% endfor %}
</select>
</label>
<label>
Mes:
<select name="month">
<option value="">Todos</option>
{% for m in months %}
<option value="{{ m }}"
{% if m == selected_month %}selected{% endif %}
>
{{ m }}
</option>
{% endfor %}
</select>
</label>
<label>
<input type="checkbox" name="compare" value="1"
{% if compare_enabled %}checked{% endif %}>
Comparar con periodo anterior
</label>
<label for="account">Cuenta:</label>
<select name="account" id="account">
<option value="">Todas</option>
{% for acc in accounts %}
<option value="{{ acc.id }}"
{% if selected_account == acc.id %}selected{% endif %}
<form method="get" class="filters">
<label>
Año:
<select name="year">
{% for y in year_list %}
<option value="{{ y }}"
{% if y == selected_year %}selected{% endif %}
>
{{ acc.name }}
{{y}}
</option>
{% endfor %}
</select>
</label>
<button type="submit">Aplicar</button>
</form>
<label>
Mes:
<select name="month">
<option value="">Todos</option>
{% for m in months %}
<option value="{{ m }}"
{% if m == selected_month %}selected{% endif %}
>
{{ m }}
</option>
{% endfor %}
</select>
</label>
<p>
Mostrando:
<strong>{{ selected_year }}</strong>
{% if selected_month %}/<strong>{{ selected_month }}</strong>{% endif %}
</p>
<p>Comparado con el periodo inmediatamente anterior</p>
<label>
<input type="checkbox" name="compare" value="1"
{% if compare_enabled %}checked{% endif %}>
Comparar con periodo anterior
</label>
<hr>
<!-- ========================= -->
<!-- KPIs -->
<!-- ========================= -->
<div class="kpis">
<div class="kpi">
<h3>Saldo actual</h3>
{{ kpi_balance|floatformat:2 }}€
</div>
<div class="kpi">
<h3>Total</h3>
<p>{{ kpi_total }}€</p>
</div>
<div class="kpi">
<h3>Nº de gastos</h3>
<p>{{ kpi_count }}</p>
</div>
<div class="kpi">
<h3>Categorías</h3>
<p>{{ kpi_categories }}</p>
</div>
</div>
{% if compare_enabled %}
<section class="kpi compare">
<h3>Comparación con periodo anterior</h3>
{% if kpi_previous_total == 0 %}
<p><em>No hay datos en el periodo anterior</em></p>
{% else %}
<p>
Total anterior: <strong>{{ kpi_previous_total|floatformat:2 }}</strong>
</p>
{% endif %}
<div>
Diferencia:
{% if kpi_trend == "up" %}
<span style="color:red;">▲ {{ kpi_difference|floatformat:2 }}€</span>
{% elif kpi_trend == "down" %}
<span style="color:green;">▼ {{ kpi_difference_abs|floatformat:2 }}€</span>
{% else %}
<span>0€</span>
{% endif %}
</div>
<p>
Variación:
{% if kpi_percentage is not None %}
{{ kpi_percentage|floatformat:2 }}%
{% else %}
Variación: N/D
{% endif %}
</p>
</section>
{% endif %}
<!-- ========================= -->
<!-- Expenses by category -->
<!-- ========================= -->
<h2>Gastos por categoría</h2>
{% if not by_category %}
<p>No hay gastos para este periodo.</p>
{% else %}
<table>
<thead>
<tr>
<th>Categoría</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for row in by_category %}
<tr>
<td>{{ row.category__name }}</td>
<td>{{ row.total }}</td>
</tr>
{% empty %}
<tr>
<td colspan="2">Sin datos</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if compare_enabled %}
<h3>Comparativa por categoría</h3>
<table>
<thead>
<tr>
<th>Categoría</th>
<th>Actual</th>
<th>Anterior</th>
<th>Diferencia</th>
</tr>
</thead>
<tbody>
{% for row in category_comparison %}
<tr>
<td>{{ row.category }}</td>
<td>{{ row.current|floatformat:2 }}€</td>
<td>{{ row.previous }}</td>
<td>
{% if row.difference > 0 %}
<span style="color:red;">▲ {{ row.difference|floatformat:2 }}€</span>
{% elif row.difference < 0 %}
<span style="color:green;">▼ {{ row.difference_abs|floatformat:2 }}€</span>
{% else %}
=
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<hr>
<!-- ========================= -->
<!-- Expenses by month -->
<!-- ========================= -->
<h2>Gastos por mes</h2>
<ul>
{% for row in by_month %}
<li>Mes {{ row.month }} → {{ row.total }}</li>
<label for="account">Cuenta:</label>
<select name="account" id="account">
<option value="">Todas</option>
{% for acc in accounts %}
<option value="{{ acc.id }}"
{% if selected_account == acc.id %}selected{% endif %}
>
{{ acc.name }}
</option>
{% endfor %}
</ul>
</select>
<!-- ========================= -->
<!-- Chart -->
<!-- ========================= -->
<h3>Distribución mensual (año completo)</h3>
<button type="submit">Aplicar</button>
</form>
<canvas id="expensesChart"></canvas>
<p>
Mostrando:
<strong>{{ selected_year }}</strong>
{% if selected_month %}/<strong>{{ selected_month }}</strong>{% endif %}
</p>
<p>Comparado con el periodo inmediatamente anterior</p>
<script>
const labels = {{ chart_labels|safe }};
const data = {{ chart_data|safe }};
const ctx = document.getElementById('expensesChart');
<hr>
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:[{
label: 'Gastos',
data: data,
}]
}
});
</script>
<hr>
<!-- ========================= -->
<!-- KPIs -->
<!-- ========================= -->
</body>
</html>
<div class="kpis">
<div class="kpi">
<h3>Saldo actual</h3>
{{ kpi_balance|floatformat:2 }}€
</div>
<div class="kpi">
<h3>Total</h3>
<p>{{ kpi_total }}€</p>
</div>
<div class="kpi">
<h3>Nº de gastos</h3>
<p>{{ kpi_count }}</p>
</div>
<div class="kpi">
<h3>Categorías</h3>
<p>{{ kpi_categories }}</p>
</div>
</div>
{% if compare_enabled %}
<section class="kpi compare">
<h3>Comparación con periodo anterior</h3>
{% if kpi_previous_total == 0 %}
<p><em>No hay datos en el periodo anterior</em></p>
{% else %}
<p>
Total anterior: <strong>{{ kpi_previous_total|floatformat:2 }}</strong>
</p>
{% endif %}
<div>
Diferencia:
{% if kpi_trend == "up" %}
<span style="color:red;">▲ {{ kpi_difference|floatformat:2 }}€</span>
{% elif kpi_trend == "down" %}
<span style="color:green;">▼ {{ kpi_difference_abs|floatformat:2 }}€</span>
{% else %}
<span>0€</span>
{% endif %}
</div>
<p>
Variación:
{% if kpi_percentage is not None %}
{{ kpi_percentage|floatformat:2 }}%
{% else %}
Variación: N/D
{% endif %}
</p>
</section>
{% endif %}
<!-- ========================= -->
<!-- Expenses by category -->
<!-- ========================= -->
<h2>Gastos por categoría</h2>
{% if not by_category %}
<p>No hay gastos para este periodo.</p>
{% else %}
<table>
<thead>
<tr>
<th>Categoría</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for row in by_category %}
<tr>
<td>{{ row.category__name }}</td>
<td>{{ row.total }}</td>
</tr>
{% empty %}
<tr>
<td colspan="2">Sin datos</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if compare_enabled %}
<h3>Comparativa por categoría</h3>
<table>
<thead>
<tr>
<th>Categoría</th>
<th>Actual</th>
<th>Anterior</th>
<th>Diferencia</th>
</tr>
</thead>
<tbody>
{% for row in category_comparison %}
<tr>
<td>{{ row.category }}</td>
<td>{{ row.current|floatformat:2 }}€</td>
<td>{{ row.previous }}</td>
<td>
{% if row.difference > 0 %}
<span style="color:red;">▲ {{ row.difference|floatformat:2 }}€</span>
{% elif row.difference < 0 %}
<span style="color:green;">▼ {{ row.difference_abs|floatformat:2 }}€</span>
{% else %}
=
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<hr>
<!-- ========================= -->
<!-- Expenses by month -->
<!-- ========================= -->
<h2>Gastos por mes</h2>
<ul>
{% for row in by_month %}
<li>Mes {{ row.month }} → {{ row.total }}</li>
{% endfor %}
</ul>
<!-- ========================= -->
<!-- Chart -->
<!-- ========================= -->
<h3>Distribución mensual (año completo)</h3>
<canvas id="expensesChart"></canvas>
<script>
const labels = {{ chart_labels|safe }};
const data = {{ chart_data|safe }};
const ctx = document.getElementById('expensesChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:[{
label: 'Gastos',
data: data,
}]
}
});
</script>
<hr>
{% endblock %}

41
expenses_manager/expenses/templates/expenses/expense_confirm_delete.html
View File

@ -1,27 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>Borrar gasto</title>
</head>
{% extends "expenses/base.html" %}
<body>
<h1>Borrar gasto</h1>
{% block title %}Borrar gasto{% endblock %}
<p>
¿Seguro que quieres borrar este gasto?
</p>
{% block content %}
<h1>Borrar gasto</h1>
<ul>
<li>Fecha: {{ expense.date }}</li>
<li>Importe: {{ expense.amount }}</li>
<li>Categoría: {{ expense.category.name }}</li>
</ul>
<p>
¿Seguro que quieres borrar este gasto?
</p>
<form method="post">
{% csrf_token %}
<button type="submit">Sí, borrar</button>
</form>
<ul>
<li>Fecha: {{ expense.date }}</li>
<li>Importe: {{ expense.amount }}</li>
<li>Categoría: {{ expense.category.name }}</li>
</ul>
<a href="{% url 'expense_list' %}">Cancelar</a>
</body>
</html>
<form method="post">
{% csrf_token %}
<button type="submit">Sí, borrar</button>
</form>
<a href="{% url 'expense_list' %}">Cancelar</a>
{% endblock %}

59
expenses_manager/expenses/templates/expenses/expense_form.html
View File

@ -1,36 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>
{% if form.instance.pk %}
Editar gasto
{% else %}
Nuevo gasto
{% endif %}
</title>
</head>
{% extends "expenses/base.html" %}
{% block title %}
{% if form.instance.pk %}
Editar gasto
{% else %}
Nuevo gasto
{% endif %}
{% endblock %}
<body>
<h1>
{% block content %}
<h1>
{% if form.instance.pk %}
Editar gasto
{% else %}
Nuevo gasto
{% endif %}
</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">
{% if form.instance.pk %}
Editar gasto
Guardar gasto
{% else %}
Nuevo gasto
Crear gasto
{% endif %}
</h1>
</button>
</form>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">
{% if form.instance.pk %}
Guardar gasto
{% else %}
Crear gasto
{% endif %}
</button>
</form>
<a href="{% url 'expense_list' %}">Volver</a>
</body>
</html>
<a href="{% url 'expense_list' %}">Volver</a>
{% endblock %}

247
expenses_manager/expenses/templates/expenses/expense_list.html
View File

@ -1,142 +1,141 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Gastos</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
<body>
<h1>Mis gastos</h1>
{% extends "expenses/base.html" %}
<form method="get">
<select name="year">
<option value="">Año</option>
{% for y in year_list %}
<option value="{{ y }}"
{% if selected_year == y %}selected{% endif %}
>
{{ y }}
</option>
{% endfor %}
</select>
<select name="month">
<option value="">Mes</option>
{% for m in months %}
<option value="{{ m }}"
{% if selected_month == m %}selected{% endif %}
>
{{ m }}
</option>
{% endfor %}
</select>
{% block title %}
Gastos
{% endblock %}
{% block content %}
<h1>Mis gastos</h1>
<label>
Categoría:
<select name="category">
<option value="">Todas</option>
{% for cat in categories %}
<option value="{{ cat.id }}"
{% if selected_category == cat.id %}selected{% endif%}
>
{{ cat.name }}
</option>
{% endfor %}
</select>
</label>
<select name="account">
<option value="">Cuenta</option>
{% for acc in accounts %}
<option value="{{ acc.id }}"
{% if selected_account == acc.id %}selected{% endif %}
>
{{ acc.name }}
<form method="get">
<select name="year">
<option value="">Año</option>
{% for y in year_list %}
<option value="{{ y }}"
{% if selected_year == y %}selected{% endif %}
>
{{ y }}
</option>
{% endfor %}
</select>
<select name="month">
<option value="">Mes</option>
{% for m in months %}
<option value="{{ m }}"
{% if selected_month == m %}selected{% endif %}
>
{{ m }}
</option>
{% endfor %}
</select>
<label>
Categoría:
<select name="category">
<option value="">Todas</option>
{% for cat in categories %}
<option value="{{ cat.id }}"
{% if selected_category == cat.id %}selected{% endif%}
>
{{ cat.name }}
</option>
{% endfor %}
</select>
</label>
<label for="tag">Filtrar por tags:</label>
<div class="active-tags">
{% for tag in tags_with_state %}
<a href="?{{ tag.query }}"
class="tag {% if tag.active %}active{% endif %}">
{{ tag.name }} {% if tag.active %} ✕{% endif %}
</a>
{% endfor %}
</div>>
<select name="account">
<option value="">Cuenta</option>
{% for acc in accounts %}
<option value="{{ acc.id }}"
{% if selected_account == acc.id %}selected{% endif %}
>
{{ acc.name }}
</option>
{% endfor %}
</select>
<button type="submit">Filtrar</button>
<a href="{% url 'expense_list' %}">Limpiar</a>
</form>
<label for="tag">Filtrar por tags:</label>
<div class="active-tags">
{% for tag in tags_with_state %}
<a href="?{{ tag.query }}"
class="tag {% if tag.active %}active{% endif %}">
{{ tag.name }} {% if tag.active %} ✕{% endif %}
</a>
{% endfor %}
</div>>
<br>
<button type="submit">Filtrar</button>
<a href="{% url 'expense_list' %}">Limpiar</a>
</form>
<a href="{% url 'expense_create' %}">Añadir gasto</a>
<br>
<br>
<a href="{% url 'expense_create' %}">Añadir gasto</a>
<section>
<strong>Total:</strong> {{ kpi_total|floatformat:2 }}€ |
<strong>Gastos:</strong> {{ kpi_count }} |
<strong>Categorías:</strong> {{ kpi_categories }}
</section>
<br>
<table>
<thead>
<section>
<strong>Total:</strong> {{ kpi_total|floatformat:2 }}€ |
<strong>Gastos:</strong> {{ kpi_count }} |
<strong>Categorías:</strong> {{ kpi_categories }}
</section>
<table>
<thead>
<tr>
<th>Fecha</th>
<th>Categoría</th>
<th>Importe</th>
<th>Cuenta</th>
<th>Etiquetas</th>
<th></th>
</tr>
</thead>
<tbody>
{% for expense in page_obj %}
<tr>
<th>Fecha</th>
<th>Categoría</th>
<th>Importe</th>
<th>Cuenta</th>
<th>Etiquetas</th>
<th></th>
<td>{{ expense.date }}</td>
<td>{{ expense.category.name }}</td>
<td>{{ expense.amount }}</td>
<td>{{ expense.account.name }}</td>
<td>
{% for tag in expense.tags.all %}
<span class="tag">
{{ tag.name }}
</span>
{% empty %}
<span>-</span>
{% endfor %}
</td>
<td>
<a href="{% url 'expense_edit' expense.id %}">Editar</a>
<a href="{% url 'expense_delete' expense.id %}">Eliminar</a>
</td>
</tr>
</thead>
<tbody>
{% for expense in page_obj %}
<tr>
<td>{{ expense.date }}</td>
<td>{{ expense.category.name }}</td>
<td>{{ expense.amount }}</td>
<td>{{ expense.account.name }}</td>
<td>
{% for tag in expense.tags.all %}
<span class="tag">
{{ tag.name }}
</span>
{% empty %}
<span>-</span>
{% endfor %}
</td>
<td>
<a href="{% url 'expense_edit' expense.id %}">Editar</a>
<a href="{% url 'expense_delete' expense.id %}">Eliminar</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="4">No hay gastos</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
<a href="?page=1{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">&laquo; Primero</a>
<a href="?page={{ page_obj.previous_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Anterior</a>
{% endif %}
{% empty %}
<tr>
<td colspan="4">No hay gastos</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
<a href="?page=1{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">&laquo; Primero</a>
<a href="?page={{ page_obj.previous_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Anterior</a>
{% endif %}
<span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
<span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Siguiente</a>
<a href="?page={{ page_obj.paginator.num_pages }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Último &raquo;</a>
{% endif %}
</span>
</div>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Siguiente</a>
<a href="?page={{ page_obj.paginator.num_pages }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Último &raquo;</a>
{% endif %}
</span>
</div>
</body>
</html>
{% endblock %}

112
expenses_manager/expenses/templates/expenses/home.html
View File

@ -1,69 +1,63 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
{% extends "expenses/base.html" %}
<body>
{% block title %}Home{% endblock %}
<h1>Home</h1>
{% block content %}
<section>
<h2>Resumen del mes</h2>
<p>Total: {{ kpi_total }}</p>
<p>Gastos: {{ kpi_count }}</p>
<p>Categorías: {{ kpi_categories }}</p>
</section>
<h1>Home</h1>
<section>
<h2>Últimos gastos</h2>
<ul>
{% for expense in last_expenses %}
<li>
{{ expense.date }} -
{{ expense.category.name }} -
{{ expense.amount }}
</li>
{% empty %}
<li>No hay gastos</li>
{% endfor %}
</ul>
</section>
<section>
<h2>Resumen del mes</h2>
<p>Total: {{ kpi_total }}</p>
<p>Gastos: {{ kpi_count }}</p>
<p>Categorías: {{ kpi_categories }}</p>
</section>
<section>
<div class="dashboard-grid">
<div class="card card-chart">
<h2>Últimos meses</h2>
<canvas id="miniChart"></canvas>
</div>
<section>
<h2>Últimos gastos</h2>
<ul>
{% for expense in last_expenses %}
<li>
{{ expense.date }} -
{{ expense.category.name }} -
{{ expense.amount }}
</li>
{% empty %}
<li>No hay gastos</li>
{% endfor %}
</ul>
</section>
<section>
<div class="dashboard-grid">
<div class="card card-chart">
<h2>Últimos meses</h2>
<canvas id="miniChart"></canvas>
</div>
</div>
<script>
const labels = {{ mini_chart_labels|safe }};
const data = {{ mini_chart_data|safe }};
const ctx = document.getElementById('miniChart');
<script>
const labels = {{ mini_chart_labels|safe }};
const data = {{ mini_chart_data|safe }};
const ctx = document.getElementById('miniChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:[{
label: 'Gastos',
data: data,
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
</script>
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:[{
label: 'Gastos',
data: data,
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
</script>
</section>
</section>
</body>
</html>
{% endblock %}

40
expenses_manager/expenses/templates/expenses/income_confirm_delete.html
View File

@ -1,27 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Borrar ingreso</title>
</head>
{% extends "expenses/base.html" %}
{% block title %}Borrar ingreso{% endblock %}
<body>
<h1>Borrar ingreso</h1>
{% block content %}
<h1>Borrar ingreso</h1>
<p>
¿Seguro que quieres borrar este ingreso?
</p>
<p>
¿Seguro que quieres borrar este ingreso?
</p>
<ul>
<li>Fecha: {{ income.date }}</li>
<li>Importe: {{ income.amount }}</li>
<li>Categoría: {{ income.category.name }}</li>
</ul>
<ul>
<li>Fecha: {{ income.date }}</li>
<li>Importe: {{ income.amount }}</li>
<li>Categoría: {{ income.category.name }}</li>
</ul>
<form method="post">
{% csrf_token %}
<button type="submit">Sí, borrar</button>
</form>
<form method="post">
{% csrf_token %}
<button type="submit">Sí, borrar</button>
</form>
<a href="{% url 'income_list' %}">Cancelar</a>
</body>
</html>
<a href="{% url 'income_list' %}">Cancelar</a>
{% endblock %}

48
expenses_manager/expenses/templates/expenses/income_form.html
View File

@ -1,36 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>
{% extends "expenses/base.html" %}
{% block title %}
{% if form.instance.pk %}
Editar ingreso
{% else %}
Nuevo ingreso
{% endif %}
</title>
</head>
{% endblock %}
<body>
<h1>
{% block content %}
<h1>
{% if form.instance.pk %}
Editar ingreso
{% else %}
Nuevo ingreso
{% endif %}
</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">
{% if form.instance.pk %}
Editar ingreso
Guardar ingreso
{% else %}
Nuevo ingreso
Crear ingreso
{% endif %}
</h1>
</button>
</form>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">
{% if form.instance.pk %}
Guardar ingreso
{% else %}
Crear ingreso
{% endif %}
</button>
</form>
<a href="{% url 'income_list' %}">Volver</a>
</body>
</html>
<a href="{% url 'income_list' %}">Volver</a>
{% endblock %}

72
expenses_manager/expenses/templates/expenses/income_list.html
View File

@ -1,44 +1,38 @@
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Ingresos</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
<body>
<h1>Mis ingresos</h1>
{% extends "expenses/base.html" %}
{% block title %}Ingresos{% endblock %}
{% block content %}
<h1>Mis ingresos</h1>
<a href="{% url 'income_create' %}">➕ Nuevo ingreso</a>
<a href="{% url 'income_create' %}">➕ Nuevo ingreso</a>
<table>
<thead>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Cuenta</th>
<th>Cantidad</th>
<th>Fecha ingreso</th>
<th></th>
</tr>
</thead>
<tbody>
{% for income in incomes %}
<tr>
<th>Nombre</th>
<th>Cuenta</th>
<th>Cantidad</th>
<th>Fecha ingreso</th>
<th></th>
<td>{{ income.name }}</td>
<td>{{ income.account }}</td>
<td>{{ income.amount|floatformat:2 }}</td>
<td>{{ income.date }}</td>
<td>
<a href="{% url 'income_edit' income.id %}">Editar</a>
<a href="{% url 'income_delete' income.id %}">Eliminar</a>
</td>
</tr>
</thead>
<tbody>
{% for income in incomes %}
<tr>
<td>{{ income.name }}</td>
<td>{{ income.account }}</td>
<td>{{ income.amount|floatformat:2 }}</td>
<td>{{ income.date }}</td>
<td>
<a href="{% url 'income_edit' income.id %}">Editar</a>
<a href="{% url 'income_delete' income.id %}">Eliminar</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">No hay ingresos</td>
</tr>
{% endfor %}
</tbody>
</table>
{% empty %}
<tr>
<td colspan="5">No hay ingresos</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
{% endblock %}

23
expenses_manager/expenses/templates/expenses/tag_confirm_delete.html
View File

@ -1,15 +1,12 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Eliminar etiqueta</h1>
{% extends "expenses/base.html" %}
{% block title %}Etiquetas{% endblock %}
{% block content %}
<h1>Eliminar etiqueta</h1>
<form method="post">
{% csrf_token %}
<button type="submit">Eliminar</button>
</form>
<form method="post">
{% csrf_token %}
<button type="submit">Eliminar</button>
</form>
<a href="{% url 'tag_list' %}">Cancelar</a>
</body>
</html>
<a href="{% url 'tag_list' %}">Cancelar</a>
{% endblock %}

25
expenses_manager/expenses/templates/expenses/tag_form.html
View File

@ -1,16 +1,13 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Etiqueta</h1>
{% extends "expenses/base.html" %}
{% block title %}Etiquetas{% endblock %}
{% block content %}
<h1>Etiqueta</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Guardar</button>
</form>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Guardar</button>
</form>
<a href="{% url 'tag_list' %}">Volver</a>
</body>
</html>
<a href="{% url 'tag_list' %}">Volver</a>
{% endblock %}

37
expenses_manager/expenses/templates/expenses/tag_list.html
View File

@ -1,20 +1,19 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Etiquetas</h1>
{% extends "expenses/base.html" %}
{% block title %}Etiquetas{% endblock %}
{% block content %}
<h1>Etiquetas</h1>
<ul>
{% for tag in tags %}
<li>
{{ tag.name }}
<a href="{% url 'tag_edit' tag.id %}">Editar</a>
<a href="{% url 'tag_delete' tag.id %}">Eliminar</a>
</li>
{% empty %}
<li>No hay etiquetas</li>
{% endfor %}
</ul>
</body>
</html>
<a href="{% url 'tag_create' %}">➕ Nueva etiqueta</a>
<ul>
{% for tag in tags %}
<li>
{{ tag.name }}
<a href="{% url 'tag_edit' tag.id %}">Editar</a>
<a href="{% url 'tag_delete' tag.id %}">Eliminar</a>
</li>
{% empty %}
<li>No hay etiquetas</li>
{% endfor %}
</ul>
{% endblock %}