Files
WYGIWYH/app/templates/insights/pages/index.html
T
2025-10-28 14:13:30 -03:00

122 lines
6.9 KiB
HTML

{% extends "layouts/base.html" %}
{% load crispy_forms_tags %}
{% load i18n %}
{% block title %}{% translate 'Insights' %}{% endblock %}
{% block content %}
<div class="tw:container-fluid">
<div class="tw:flex tw:flex-wrap tw:my-3 tw:h-full">
<div class="tw:w-full tw:lg:w-2/12 tw:md:w-3/12 tw:mb-3 tw:md:mb-0">
<div class="tw:sticky tw:top-3">
<div class="">
<div class="tw:mb-2 tw:w-full tw:lg:inline-flex tw:grid tw:gap-2 tw:flex-wrap tw:lg:justify-center" role="group"
_="on change
set type to event.target.value
add .tw:hidden to <#picker-form > div:not(.tw\\:hidden)/>
if type == 'month'
remove .tw:hidden from #month-form
end
if type == 'year'
remove .tw:hidden from #year-form
end
if type == 'month-range'
remove .tw:hidden from #month-range-form
end
if type == 'year-range'
remove .tw:hidden from #year-range-form
end
if type == 'date-range'
remove .tw:hidden from #date-range-form
end
then trigger updated"
id="picker-type">
<input type="radio" class="tw:join-item tw:btn tw:btn-sm tw:btn-outline tw:btn-primary tw:flex-grow" name="type" value="month" id="monthradio" autocomplete="off" aria-label="{% translate 'Month' %}" checked>
<input type="radio" class="tw:join-item tw:btn tw:btn-sm tw:btn-outline tw:btn-primary tw:flex-grow" name="type" value="year" id="yearradio" autocomplete="off" aria-label="{% translate 'Year' %}">
<input type="radio" class="tw:join-item tw:btn tw:btn-sm tw:btn-outline tw:btn-primary tw:flex-grow" name="type" value="month-range" id="monthrangeradio" autocomplete="off" aria-label="{% translate 'Month Range' %}">
<input type="radio" class="tw:join-item tw:btn tw:btn-sm tw:btn-outline tw:btn-primary tw:flex-grow" name="type" value="year-range" id="yearrangeradio" autocomplete="off" aria-label="{% translate 'Year Range' %}">
<input type="radio" class="tw:join-item tw:btn tw:btn-sm tw:btn-outline tw:btn-primary tw:flex-grow" name="type" value="date-range" id="daterangeradio" autocomplete="off" aria-label="{% translate 'Date Range' %}">
</div>
<form id="picker-form"
_="install init_datepicker
on change trigger updated">
<div id="month-form" class="">
{% crispy month_form %}
</div>
<div id="year-form" class="tw:hidden">
{% crispy year_form %}
</div>
<div id="month-range-form" class="tw:hidden">
{% crispy month_range_form %}
</div>
<div id="year-range-form" class="tw:hidden">
{% crispy year_range_form %}
</div>
<div id="date-range-form" class="tw:hidden">
{% crispy date_range_form %}
</div>
</form>
</div>
<div class="tw:menu tw:menu-vertical tw:flex-col" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Account Flow' %}
</button>
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'insights_sankey_by_currency' %}"
hx-include="#picker-form, #picker-type"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Currency Flow' %}
</button>
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'category_explorer_index' %}"
hx-include="#picker-form, #picker-type"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Category Explorer' %}
</button>
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'category_overview' %}"
hx-include="#picker-form, #picker-type"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Categories Overview' %}
</button>
<hr class="tw:border-base-300">
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'insights_late_transactions' %}"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Late Transactions' %}
</button>
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'insights_latest_transactions' %}"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Latest Transactions' %}
</button>
<button class="tw:btn tw:btn-ghost tw:justify-start" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
hx-get="{% url 'insights_emergency_fund' %}"
hx-indicator="#tab-content"
hx-target="#tab-content">{% trans 'Emergency Fund' %}
</button>
</div>
</div>
</div>
<div class="tw:w-full tw:md:w-9/12 tw:lg:w-10/12">
<div id="tab-content" class="show-loading"></div>
</div>
</div>
</div>
{% endblock %}