mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-07-11 23:32:56 +02:00
changes
This commit is contained in:
Herculino Trotta
@@ -0,0 +1,38 @@
|
||||
{% load natural %}
|
||||
{% load i18n %}
|
||||
{% regroup transactions by date|customnaturaldate as transactions_by_date %}
|
||||
|
||||
<div>
|
||||
{% for x in transactions_by_date %}
|
||||
<div>
|
||||
<div class="my-3 w-100 tw-text-base border-bottom bg-body">
|
||||
<a class="text-decoration-none d-inline-block w-100"
|
||||
role="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#{{ x.grouper|slugify }}"
|
||||
aria-expanded="true"
|
||||
aria-controls="collapseExample">
|
||||
{{ x.grouper }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse show" id="{{ x.grouper|slugify }}">
|
||||
<div class="ps-3">
|
||||
{% for trans in x.list %}
|
||||
{% include 'transactions/fragments/item.html' with transaction=trans %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% empty %}
|
||||
<div class="row p-5">
|
||||
<div class="col p-5">
|
||||
<div class="text-center">
|
||||
<i class="fa-solid fa-circle-xmark tw-text-6xl"></i>
|
||||
<p class="lead mt-4 mb-0">{% translate "No transactions this month" %}</p>
|
||||
<p class="tw-text-gray-500">{% translate "Try adding one" %}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -0,0 +1,49 @@
|
||||
{% extends 'extends/offcanvas.html' %}
|
||||
{% load month_name %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block title %}{% translate 'Pick a month' %}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% regroup month_year_data by year as years_list %}
|
||||
|
||||
<ul class="nav nav-pills nav-fill" id="yearTabs" role="tablist">
|
||||
{% for x in years_list %}
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link{% if x.grouper == current_year %} active{% endif %}"
|
||||
id="{{ x.grouper }}"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#{{ x.grouper }}-pane"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="{{ x.grouper }}-pane"
|
||||
aria-selected="{% if x.grouper == current_year %}true{% else %}false{% endif %}">
|
||||
{{ x.grouper }}
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="tab-content" id="yearTabsContent" hx-boost="true">
|
||||
{% for x in years_list %}
|
||||
<div class="tab-pane fade{% if x.grouper == current_year %} show active{% endif %} mt-2"
|
||||
id="{{ x.grouper }}-pane"
|
||||
role="tabpanel"
|
||||
aria-labelledby="{{ x.grouper }}"
|
||||
tabindex="0">
|
||||
<ul class="list-group list-group-flush" id="month-year-list">
|
||||
{% for month_data in x.list %}
|
||||
<li class="list-group-item hover:tw-bg-zinc-900
|
||||
{% if month_data.month == current_month and month_data.year == current_year %} disabled bg-primary{% endif %}"
|
||||
{% if month_data.month == current_month and month_data.year == current_year %}aria-disabled="true"{% endif %}>
|
||||
<a class="text-decoration-none stretched-link {% if month_data.month == current_month and month_data.year == current_year %} text-black{% endif %}"
|
||||
href="{% url "monthly_overview" month=month_data.month year=month_data.year %}">
|
||||
{{ month_data.month|month_name }}
|
||||
<span class="badge text-bg-secondary">{{ month_data.transaction_count }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,166 @@
|
||||
{% load i18n %}
|
||||
{% load currency_display %}
|
||||
<div class="row row-cols-1 g-4 mb-3">
|
||||
{# Daily Spending#}
|
||||
<div class="col">
|
||||
<div class="card tw-relative h-100 shadow">
|
||||
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-yellow-300 tw-text-yellow-800 text-center
|
||||
align-items-center d-flex justify-content-center rounded-2">
|
||||
<i class="fa-solid fa-calendar-day"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="tw-text-yellow-400 fw-bold">{% translate 'Daily Spending Allowance' %}{% include 'includes/help_icon.html' with content=_('This is the final total divided by the remaining days in the month') %}</h5>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">{% translate 'today' %}</div>
|
||||
</div>
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.daily_spending_allowance %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Income#}
|
||||
<div class="col">
|
||||
<div class="card tw-relative h-100 shadow">
|
||||
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-green-300 tw-text-green-800 text-center
|
||||
align-items-center d-flex justify-content-center rounded-2">
|
||||
<i class="fa-solid fa-arrow-right-to-bracket"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="tw-text-green-400 fw-bold">{% translate 'Income' %}</h5>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">current</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between text-start font-monospace">
|
||||
{% for entry in totals.paid_income %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-1">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">projected</div>
|
||||
</div>
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.projected_income %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Expenses#}
|
||||
<div class="col">
|
||||
<div class="card tw-relative h-100 shadow">
|
||||
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-red-300 tw-text-red-800 text-center
|
||||
align-items-center d-flex justify-content-center rounded-2">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="tw-text-red-400">{% translate 'Expenses' %}</h5>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">current</div>
|
||||
</div>
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.paid_expenses %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-1">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">projected</div>
|
||||
</div>
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.projected_expenses %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Total#}
|
||||
<div class="col">
|
||||
<div class="card tw-relative h-100 shadow">
|
||||
<div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-blue-300 tw-text-blue-800 text-center
|
||||
align-items-center d-flex justify-content-center rounded-2">
|
||||
<i class="fa-solid fa-scale-balanced"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="tw-text-blue-400">{% translate 'Total' %}</h5>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">current</div>
|
||||
</div>
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.total_current %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-3">
|
||||
<div class="text-end font-monospace">
|
||||
<div class="tw-text-gray-400">projected</div>
|
||||
</div>
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.total_projected %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-1">
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="text-start font-monospace">
|
||||
{% for entry in totals.total_final %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#<div class="p-2 rounded-2 shadow tw-text-sm card mt-4">#}
|
||||
{# <p class="font-monospace text-light text-uppercase text-center fw-bold m-0 tw-text-base">#}
|
||||
{# {% translate "Account Overview" %}</p>#}
|
||||
{# <hr class="my-1">#}
|
||||
{# <div>#}
|
||||
{# {% for account in account_summary %}#}
|
||||
{# <div class="row">#}
|
||||
{# <div class="col-6">#}
|
||||
{# <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">{{ account.name }}</div>#}
|
||||
{# </div>#}
|
||||
{# <div class="col-6 text-end font-monospace">#}
|
||||
{# <div class="amount" data-original-value="{% currency_display amount=account.balance prefix=account.currency__prefix suffix=account.currency__suffix decimal_places=account.currency__decimal_places %}"></div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="my-1"></div>#}
|
||||
{# {% endfor %}#}
|
||||
{# </div>#}
|
||||
{#</div>#}
|
||||
@@ -0,0 +1,125 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load i18n %}
|
||||
{% load month_name %}
|
||||
{% load static %}
|
||||
{% load webpack_loader %}
|
||||
|
||||
{% block title %}Monthly Overview :: {{ month|month_name }}/{{ year }}{% endblock %}
|
||||
|
||||
{% block body_hyperscript %}
|
||||
on keyup[code is 'KeyE' and target.nodeName is 'BODY'] from body trigger 'add_expense' end
|
||||
on keyup[code is 'KeyI' and target.nodeName is 'BODY'] from body trigger 'add_income' end
|
||||
on keyup[code is 'KeyB' and target.nodeName is 'BODY'] from body trigger 'balance' end
|
||||
on keyup[code is 'KeyT' and target.nodeName is 'BODY'] from body trigger 'add_transfer' end
|
||||
on keyup[code is 'KeyN' and target.nodeName is 'BODY'] from body trigger 'installment' end
|
||||
on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_month' end
|
||||
on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_month' end
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container px-md-3 py-3 column-gap-5">
|
||||
<div class="row mb-3 gx-xl-4 gy-3 mb-4">
|
||||
{# Date picker#}
|
||||
<div class="col-12 col-xl-4 flex-row align-items-center d-flex">
|
||||
<div class="tw-text-base h-100 align-items-center d-flex">
|
||||
<a role="button"
|
||||
class="pe-4 py-2"
|
||||
hx-boost="true"
|
||||
hx-trigger="click, previous_month from:window"
|
||||
href="{% url 'monthly_overview' month=previous_month year=previous_year %}"><i
|
||||
class="fa-solid fa-chevron-left"></i></a>
|
||||
</div>
|
||||
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
|
||||
hx-get="{% url 'available_dates' %}"
|
||||
hx-target="#generic-offcanvas-left"
|
||||
hx-trigger="click, date_picker from:window"
|
||||
hx-vals='{"month": {{ month }}, "year": {{ year }}}' role="button">
|
||||
{{ month|month_name }} {{ year }}
|
||||
</div>
|
||||
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
|
||||
<a role="button"
|
||||
class="ps-3 py-2"
|
||||
hx-boost="true"
|
||||
hx-trigger="click, next_month from:window"
|
||||
href="{% url 'monthly_overview' month=next_month year=next_year %}">
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{# Action buttons#}
|
||||
<div class="col-12 col-xl-8">
|
||||
<div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
|
||||
<button class="btn btn-sm btn-outline-success"
|
||||
hx-get="{% url 'transaction_add' %}"
|
||||
hx-target="#generic-offcanvas"
|
||||
hx-trigger="click, add_income from:window"
|
||||
hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "IN"}'>
|
||||
<i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
|
||||
{% translate "Income" %}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger"
|
||||
hx-get="{% url 'transaction_add' %}"
|
||||
hx-target="#generic-offcanvas"
|
||||
hx-trigger="click, add_expense from:window"
|
||||
hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "EX"}'>
|
||||
<i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
|
||||
{% translate "Expense" %}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-warning"
|
||||
hx-get="{% url 'installments_add' %}"
|
||||
hx-trigger="click, installment from:window"
|
||||
hx-target="#generic-offcanvas">
|
||||
<i class="fa-solid fa-divide me-2"></i>
|
||||
{% translate "Installment" %}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info"
|
||||
hx-get="{% url 'transactions_transfer' %}"
|
||||
hx-target="#generic-offcanvas"
|
||||
hx-trigger="click, add_transfer from:window"
|
||||
hx-vals='{"year": {{ year }}, "month": {{ month }}}'>
|
||||
<i class="fa-solid fa-money-bill-transfer me-2"></i>
|
||||
{% translate "Transfer" %}
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info"
|
||||
hx-get="{% url 'account_reconciliation' %}"
|
||||
hx-trigger="click, balance from:window"
|
||||
hx-target="#generic-offcanvas">
|
||||
<i class="fa-solid fa-scale-balanced me-2"></i>
|
||||
{% translate "Balance" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Monthly summary#}
|
||||
<div class="row gx-xl-4 gy-3">
|
||||
<div class="col-12 col-xl-4 order-0 order-xl-2">
|
||||
<div id="summary" hx-get="{% url 'monthly_summary' month=month year=year %}" class=" sticky-sidebar"
|
||||
hx-trigger="load, transaction_updated from:window, monthly_summary_update from:window">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-8 order-2 order-xl-1">
|
||||
{# Filter transactions#}
|
||||
<div class="row mb-1">
|
||||
<div class="col-12">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false" data-bs-auto-close="false">
|
||||
<i class="fa-solid fa-filter fa-fw me-2"></i>{% translate 'Filter transactions' %}
|
||||
</button>
|
||||
<form hx-get="{% url 'monthly_transactions_list' month=month year=year %}" hx-trigger="change, submit, search"
|
||||
hx-target="#transactions" id="filter" hx-indicator="#transactions" class="dropdown-menu p-4
|
||||
w-lg-50 tw-w-full lg:tw-w-2/4"
|
||||
_="install init_tom_select">
|
||||
{% crispy filter.form %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="transactions"
|
||||
hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
|
||||
hx-trigger="load, transaction_updated from:window" hx-include="#filter"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user