feat: add calendar view

app/templates/calendar_view/fragments/list.html

@@ -0,0 +1,69 @@
+{% load natural %}
+{% load i18n %}
+
+<div>
+  <div class="tw-hidden lg:tw-grid lg:tw-grid-cols-7 tw-gap-4 lg:tw-gap-0">
+    <div class="border-start border-top border-bottom p-2 text-center">
+      {% translate 'MON' %}
+    </div>
+    <div class="border-top border-bottom p-2 text-center">
+      {% translate 'TUE' %}
+    </div>
+    <div class="border-top border-bottom p-2 text-center">
+      {% translate 'WED' %}
+    </div>
+    <div class="border-top border-bottom p-2 text-center">
+      {% translate 'THU' %}
+    </div>
+    <div class="border-top border-bottom p-2 text-center">
+      {% translate 'FRI' %}
+    </div>
+    <div class="border-top border-bottom p-2 text-center">
+      {% translate 'SAT' %}
+    </div>
+    <div class="border-end border-top border-bottom p-2 text-center">
+      {% translate 'SUN' %}
+    </div>
+  </div>
+  <div class="tw-grid tw-grid-cols-1 tw-grid-rows-1 lg:tw-grid-cols-7 lg:tw-grid-rows-6 tw-gap-4 lg:tw-gap-0">
+    {% for date in dates %}
+      {% if date %}
+      <div class="card h-100 hover:tw-bg-zinc-900 rounded-0{% if not date.transactions %} !tw-hidden lg:!tw-flex{% endif %}{% if today == date.date %} tw-border-yellow-300 border-primary{% endif %} " role="button"
+        hx-get="{% url 'calendar_transactions_list' day=date.date.day month=date.date.month year=date.date.year %}"
+        hx-target="#persistent-generic-offcanvas-left">
+        <div class="card-header border-0 bg-transparent text-end tw-flex justify-content-between p-2 !tw-text-gray-400 w-100">
+          <div class="lg:tw-hidden text-start w-100">{{ date.date|date:"l"|lower }}</div>
+          <div class="text-end w-100">{{ date.day }}</div>
+        </div>
+        <div class="card-body p-2">
+          {% for transaction in date.transactions %}
+            {% if transaction.is_paid %}
+              {% if transaction.type == "IN" and not transaction.account.is_asset %}
+                <i class="fa-solid fa-circle-check tw-text-green-400"></i>
+              {% elif transaction.type == "IN" and transaction.account.is_asset %}
+                <i class="fa-solid fa-circle-check tw-text-green-300"></i>
+              {% elif transaction.type == "EX" and not transaction.account.is_asset %}
+                <i class="fa-solid fa-circle-check tw-text-red-400"></i>
+              {% elif transaction.type == "EX" and transaction.account.is_asset %}
+                <i class="fa-solid fa-circle-check tw-text-red-300"></i>
+              {% endif %}
+            {% else %}
+              {% if transaction.type == "IN" and not transaction.account.is_asset %}
+                <i class="fa-regular fa-circle tw-text-green-400"></i>
+              {% elif transaction.type == "IN" and transaction.account.is_asset %}
+                <i class="fa-regular fa-circle tw-text-green-300"></i>
+              {% elif transaction.type == "EX" and not transaction.account.is_asset %}
+                <i class="fa-regular fa-circle tw-text-red-400"></i>
+              {% elif transaction.type == "EX" and transaction.account.is_asset %}
+                <i class="fa-regular fa-circle tw-text-green-300"></i>
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+      {% else %}
+        <div class="!tw-hidden lg:!tw-block card h-100 rounded-0"></div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>

app/templates/calendar_view/fragments/list_transactions.html

@@ -0,0 +1,18 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'Transactions on' %} {{ date|date:"SHORT_DATE_FORMAT" }}{% endblock %}
+
+{% block body %}
+<div hx-get="{% url 'calendar_transactions_list' day=date.day month=date.month year=date.year %}" hx-trigger="updated from:window" hx-vals='{"disable_selection": true}'  hx-target="closest .offcanvas" class="show-loading">
+{% for transaction in transactions %}
+  <c-transaction.item
+    :transaction="transaction"
+    :disable-selection="True"></c-transaction.item>
+{% empty %}
+  <c-msg.empty
+      title="{% translate 'No transactions on this date' %}"></c-msg.empty>
+{% endfor %}
+</div>
+{% endblock %}