feat: finish adding DCA Tracker tool

This commit is contained in:
Herculino Trotta
2024-11-12 11:40:50 -03:00
parent 7ebe3b6b5b
commit ba52e8740f
14 changed files with 887 additions and 369 deletions

View File

@@ -0,0 +1,11 @@
{% extends 'extends/offcanvas.html' %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}{% translate 'Add DCA entry' %}{% endblock %}
{% block body %}
<form hx-post="{% url 'dca_entry_add' strategy_id=strategy.id %}" hx-target="#generic-offcanvas" novalidate>
{% crispy form %}
</form>
{% endblock %}

View File

@@ -0,0 +1,11 @@
{% extends 'extends/offcanvas.html' %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}{% translate 'Edit DCA entry' %}{% endblock %}
{% block body %}
<form hx-post="{% url 'exchange_rate_edit' pk=exchange_rate.id %}" hx-target="#generic-offcanvas" novalidate>
{% crispy form %}
</form>
{% endblock %}

View File

@@ -0,0 +1,11 @@
{% extends 'extends/offcanvas.html' %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}{% translate 'Add DCA strategy' %}{% endblock %}
{% block body %}
<form hx-post="{% url 'dca_strategy_add' %}" hx-target="#generic-offcanvas" novalidate>
{% crispy form %}
</form>
{% endblock %}

View File

@@ -0,0 +1,222 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
<div>{{ strategy.name }}</div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-3 gx-3">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total Invested" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.total_invested"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total Received" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.total_received"
:prefix="strategy.target_currency.prefix"
:suffix="strategy.target_currency.suffix"
:decimal_places="strategy.target_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Average Entry Price" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.average_entry_price"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Current Total Value" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.current_total_value"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total P/L" %}</h5>
<div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
<c-amount.display
:amount="strategy.total_profit_loss"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places">
</c-amount.display>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total % P/L" %}</h5>
<div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
{{ strategy.total_profit_loss_percentage|floatformat:2 }}%
</div>
</div>
</div>
</div>
</div>
<!-- Entries Table -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
{% spaceless %}
<div class="card-title tw-text-xl">{% trans "Entries" %}<span>
<a class="text-decoration-none p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"
hx-get="{% url 'dca_entry_add' strategy_id=strategy.id%}"
hx-target="#generic-offcanvas">
<i class="fa-solid fa-circle-plus fa-fw"></i>
</a>
</span>
</div>
{% endspaceless %}
{% if entries %}
<div class="table-responsive">
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th></th>
<th>{% trans "Date" %}</th>
<th>{% trans "Amount Paid" %}</th>
<th>{% trans "Amount Received" %}</th>
<th>{% trans "Current Value" %}</th>
<th>{% trans "P/L" %}</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr>
<td class="col-auto">
<div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
<a class="btn btn-secondary btn-sm"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Edit" %}"
hx-get="{% url 'dca_entry_edit' entry_id=entry.id strategy_id=entry.strategy.id %}"
hx-target="#generic-offcanvas"
hx-swap="innerHTML">
<i class="fa-solid fa-pencil fa-fw"></i></a>
<a class="btn btn-secondary btn-sm text-danger"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'dca_entry_delete' entry_id=entry.id strategy_id=entry.strategy.id %}"
hx-trigger='confirmed'
hx-swap="innerHTML"
data-bypass-on-ctrl="true"
data-title="{% translate "Are you sure?" %}"
data-text="{% translate "You won't be able to revert this!" %}"
data-confirm-text="{% translate "Yes, delete it!" %}"
_="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
</div>
</td>
<td>{{ entry.date|date:"SHORT_DATE_FORMAT" }}</td>
<td><c-amount.display
:amount="entry.amount_paid"
:prefix="entry.strategy.payment_currency.prefix"
:suffix="entry.strategy.payment_currency.suffix"
:decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
<td><c-amount.display
:amount="entry.amount_received"
:prefix="entry.strategy.target_currency.prefix"
:suffix="entry.strategy.target_currency.suffix"
:decimal_places="entry.strategy.target_currency.decimal_places"></c-amount.display></td>
<td><c-amount.display
:amount="entry.current_value"
:prefix="entry.strategy.payment_currency.prefix"
:suffix="entry.strategy.payment_currency.suffix"
:decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
<td>
{% if entry.profit_loss_percentage > 0 %}
<span class="badge text-bg-success"><i class="fa-solid fa-up-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
{% elif entry.profit_loss_percentage < 0 %}
<span class="badge text-bg-danger"><i class="fa-solid fa-down-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<c-msg.empty
title="{% translate 'No entries for this DCA' %}"
subtitle="{% translate "Try adding one" %}" :remove-padding="True"></c-msg.empty>
{% endif %}
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Performance Over Time" %}</h5>
<canvas id="performanceChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script defer>
// Add Chart.js initialization for performance visualization
var perfomancectx = document.getElementById('performanceChart').getContext('2d');
new Chart(perfomancectx, {
type: 'line',
data: {
labels: [{% for entry in entries_data %}'{{ entry.entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
datasets: [{
label: '{% trans "P/L %" %}',
data: [{% for entry in entries_data %}{{ entry.profit_loss_percentage|floatformat:"-40u" }}{% if not forloop.last %}, {% endif %}{% endfor %}],
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: false
}
}
}
});
</script>

View File

@@ -0,0 +1,11 @@
{% extends 'extends/offcanvas.html' %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}{% translate 'Edit DCA strategy' %}{% endblock %}
{% block body %}
<form hx-post="{% url 'dca_entry_edit' entry_id=dca_entry.id strategy_id=dca_entry.strategy.id %}" hx-target="#generic-offcanvas" novalidate>
{% crispy form %}
</form>
{% endblock %}

View File

@@ -0,0 +1,54 @@
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
<div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
{% spaceless %}
<div>{% translate 'Dollar Cost Average Strategies' %}<span>
<a class="text-decoration-none tw-text-2xl p-1 category-action"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Add" %}"
hx-get="{% url 'dca_strategy_add' %}"
hx-target="#generic-offcanvas">
<i class="fa-solid fa-circle-plus fa-fw"></i></a>
</span></div>
{% endspaceless %}
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 gy-3 gx-3">
{% for strategy in strategies %}
<div class="col">
<div class="card h-100">
<a href="{% url 'dca_strategy_detail_index' strategy_id=strategy.id %}" hx-boost="true" class="text-decoration-none card-body">
<div class="">
<div class="card-title tw-text-xl">{{ strategy.name }}</div>
<div class="card-text tw-text-gray-400">{{ strategy.notes }}</div>
</div>
</a>
<div class="card-footer text-end">
<a class="text-decoration-none tw-text-gray-400 p-1"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Edit" %}"
hx-get="{% url 'dca_strategy_edit' strategy_id=strategy.id %}"
hx-target="#generic-offcanvas">
<i class="fa-solid fa-pencil fa-fw"></i>
</a>
<a class="text-danger text-decoration-none p-1"
role="button"
data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'dca_strategy_delete' strategy_id=strategy.id %}"
hx-trigger='confirmed'
data-bypass-on-ctrl="true"
data-title="{% translate "Are you sure?" %}"
data-text="{% translate "You won't be able to revert this!" %}"
data-confirm-text="{% translate "Yes, delete it!" %}"
_="install prompt_swal">
<i class="fa-solid fa-trash fa-fw"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

View File

@@ -0,0 +1,6 @@
{% extends "layouts/base.html" %}
{% load i18n %}
{% block content %}
<div hx-get="{% url 'dca_strategy_detail' strategy_id=strategy.id %}" hx-trigger="load, updated from:window" class="show-loading"></div>
{% endblock %}

View File

@@ -0,0 +1,8 @@
{% extends "layouts/base.html" %}
{% load i18n %}
{% block title %}{% translate 'Dollar Cost Average Strategies' %}{% endblock %}
{% block content %}
<div hx-get="{% url 'dca_strategy_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
{% endblock %}

View File

@@ -1,228 +0,0 @@
{% extends "layouts/base.html" %}
{% load i18n %}
{% block content %}
<div class="container">
<h1>{{ strategy.name }}</h1>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total Invested" %}</h5>
{# <p class="card-text">{{ strategy.total_invested }} {{ strategy.payment_currency }}</p>#}
<div class="card-text">
<c-amount.display
:amount="strategy.total_invested"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total Received" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.total_received"
:prefix="strategy.target_currency.prefix"
:suffix="strategy.target_currency.suffix"
:decimal_places="strategy.target_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Average Entry Price" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.average_entry_price"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Current Total Value" %}</h5>
<div class="card-text">
<c-amount.display
:amount="strategy.current_total_value"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places"></c-amount.display>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total P/L" %}</h5>
<div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
<c-amount.display
:amount="strategy.total_profit_loss"
:prefix="strategy.payment_currency.prefix"
:suffix="strategy.payment_currency.suffix"
:decimal_places="strategy.payment_currency.decimal_places">
</c-amount.display>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Total % P/L" %}</h5>
<div class="card-text {% if strategy.total_profit_loss >= 0 %}text-success{% else %}text-danger{% endif %}">
{{ strategy.total_profit_loss_percentage|floatformat:2 }}%
</div>
</div>
</div>
</div>
</div>
<!-- Monthly Chart -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<canvas id="monthlyChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Entries Table -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Entries" %}</h5>
<div class="table-responsive">
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th>{% trans "Date" %}</th>
<th>{% trans "Amount Paid" %}</th>
<th>{% trans "Amount Received" %}</th>
<th>{% trans "Current Value" %}</th>
<th>{% trans "P/L" %}</th>
<th>{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr>
<td>{{ entry.date|date:"SHORT_DATE_FORMAT" }}</td>
<td><c-amount.display
:amount="entry.amount_paid"
:prefix="entry.strategy.payment_currency.prefix"
:suffix="entry.strategy.payment_currency.suffix"
:decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
<td><c-amount.display
:amount="entry.amount_received"
:prefix="entry.strategy.target_currency.prefix"
:suffix="entry.strategy.target_currency.suffix"
:decimal_places="entry.strategy.target_currency.decimal_places"></c-amount.display></td>
<td><c-amount.display
:amount="entry.current_value"
:prefix="entry.strategy.payment_currency.prefix"
:suffix="entry.strategy.payment_currency.suffix"
:decimal_places="entry.strategy.payment_currency.decimal_places"></c-amount.display></td>
<td>
{% if entry.profit_loss_percentage > 0 %}
<span class="badge text-bg-success"><i class="fa-solid fa-up-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
{% elif entry.profit_loss_percentage < 0 %}
<span class="badge text-bg-danger"><i class="fa-solid fa-down-long me-2"></i>{{ entry.profit_loss_percentage|floatformat:"2g" }}%</span>
{% endif %}
</td>
<td>
<!-- Add action buttons -->
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">{% trans "Performance Over Time" %}</h5>
<canvas id="performanceChart"></canvas>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js_body %}
<script>
// Add Chart.js initialization for performance visualization
const perfomancectx = document.getElementById('performanceChart').getContext('2d');
const performanceChart = new Chart(perfomancectx, {
type: 'line',
data: {
labels: [{% for entry in entries_data %}'{{ entry.entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
datasets: [{
label: '{% trans "P/L %" %}',
data: [{% for entry in entries_data %}{{ entry.profit_loss_percentage|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
<script>
// Add Chart.js initialization for performance visualization
const ctx = document.getElementById('monthlyChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: [{% for entry in monthly_data %}'{{ entry.date|date:"Y-m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
datasets: [{
label: '{% trans "P/L %" %}',
data: [{% for entry in monthly_data %}{{ entry.total_paid|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
{% endblock %}

View File

@@ -56,6 +56,19 @@
href="{% url 'recurring_trasanctions_index' %}">{% translate 'Recurring Transactions' %}</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% active_link views='dca_strategy_index||dca_strategy_detail_index' %}"
href="#" role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
{% translate 'Tools' %}
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item {% active_link views='dca_strategy_index||dca_strategy_detail_index' %}"
href="{% url 'dca_strategy_index' %}">{% translate 'Dollar Cost Average Tracker' %}</a></li>
<li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {% active_link views='tags_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index' %}"
href="#" role="button"