feat: first batch of work

app/templates/yearly_overview/fragments/account_data.html

@@ -1,6 +1,6 @@
 {% load tools %}
 {% load i18n %}
-<div class="tw:grid tw:grid-cols-1 tw:gap-4 tw:mb-3">
+<div class="grid grid-cols-1 gap-4 mb-3">
   {% for account_id, account in totals.items %}
     <div>
       <c-ui.account_card :account="account" :account_id="account_id"

app/templates/yearly_overview/fragments/currency_data.html

@@ -1,6 +1,6 @@
 {% load tools %}
 {% load i18n %}
-<div class="tw:grid tw:grid-cols-1 tw:gap-4 tw:mb-3">
+<div class="grid grid-cols-1 gap-4 mb-3">
   {% for currency_id, currency in totals.items %}
     <div>
       <c-ui.currency_card :currency="currency" :currency_id="currency_id"

app/templates/yearly_overview/pages/overview_by_account.html

@@ -17,9 +17,9 @@
 
 {% block filter_pills %}
   <input type="hidden" name="account" value="">
-  <div class="tw:join tw:join-vertical tw:flex-col" id="filter-pills" role="tablist"
+  <div class="join join-vertical flex-col" id="filter-pills" role="tablist"
        hx-indicator="#data-content">
-    <button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
+    <button class="btn btn-outline btn-primary btn-active justify-start join-item"
             role="tab"
             hx-get="{% url 'yearly_overview_account_data' year=year %}"
             hx-target="#data-content"
@@ -28,12 +28,12 @@
             hx-swap="innerHTML"
             onclick="document.querySelector('[name=account]').value = ''"
             _="on click
-               remove .tw:btn-active from <button/> in #filter-pills
-               add .tw:btn-active to me">
+               remove .btn-active from <button/> in #filter-pills
+               add .btn-active to me">
       {% translate 'All' %}
     </button>
     {% for account in accounts %}
-      <button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
+      <button class="btn btn-outline btn-primary justify-start join-item"
               role="tab"
               hx-get="{% url 'yearly_overview_account_data' year=year %}"
               hx-target="#data-content"
@@ -42,9 +42,9 @@
               hx-swap="innerHTML"
               onclick="document.querySelector('[name=account]').value = '{{ account.id }}'"
               _="on click
-                 remove .tw:btn-active from <button/> in #filter-pills
-                 add .tw:btn-active to me">
-        {% if account.group.name %}<span class="tw:badge tw:badge-secondary tw:me-2">{{ account.group.name }}</span>{% endif %} {{ account.name }}
+                 remove .btn-active from <button/> in #filter-pills
+                 add .btn-active to me">
+        {% if account.group.name %}<span class="badge badge-secondary me-2">{{ account.group.name }}</span>{% endif %} {{ account.name }}
       </button>
     {% endfor %}
   </div>

app/templates/yearly_overview/pages/overview_by_currency.html

@@ -19,9 +19,9 @@
 
 {% block filter_pills %}
   <input type="hidden" name="currency" value="">
-  <div class="tw:join tw:join-vertical tw:flex-col" id="filter-pills" role="tablist"
+  <div class="join join-vertical flex-col" id="filter-pills" role="tablist"
        hx-indicator="#data-content">
-    <button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
+    <button class="btn btn-outline btn-primary btn-active justify-start join-item"
             role="tab"
             hx-get="{% url 'yearly_overview_currency_data' year=year %}"
             hx-target="#data-content"
@@ -30,12 +30,12 @@
             hx-swap="innerHTML"
             onclick="document.querySelector('[name=currency]').value = ''"
             _="on click
-               remove .tw:btn-active from <button/> in #filter-pills
-               add .tw:btn-active to me">
+               remove .btn-active from <button/> in #filter-pills
+               add .btn-active to me">
       {% translate 'All' %}
     </button>
     {% for currency in currencies %}
-      <button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
+      <button class="btn btn-outline btn-primary justify-start join-item"
               role="tab"
               hx-get="{% url 'yearly_overview_currency_data' year=year %}"
               hx-target="#data-content"
@@ -44,8 +44,8 @@
               hx-swap="innerHTML"
               onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'"
               _="on click
-                 remove .tw:btn-active from <button/> in #filter-pills
-                 add .tw:btn-active to me">
+                 remove .btn-active from <button/> in #filter-pills
+                 add .btn-active to me">
         {{ currency.name }}
       </button>
     {% endfor %}

app/templates/yearly_overview/pages/yearly_overview_base.html

@@ -11,35 +11,33 @@
 {% endblock %}
 
 {% block content %}
-  <div class="tw:h-full tw:text-center tw:mb-4 tw:pt-2">
-    <div class="tw:btn-group tw:gap-3" role="group">
-      <a href="{% url 'yearly_overview_currency' year=year %}" class="tw:btn {% if type != 'currency' %}tw:btn-outline tw:btn-primary{% else %}tw:btn-primary{% endif %} tw:rounded-full" hx-boost>
-        <i class="fa-solid fa-solid fa-coins fa-fw tw:me-2"></i>{% trans 'Currency' %}
+  <div class="h-full text-center mb-4 pt-2">
+    <div class="btn-group gap-3" role="group">
+      <a href="{% url 'yearly_overview_currency' year=year %}" class="btn {% if type != 'currency' %}btn-outline btn-primary{% else %}btn-primary{% endif %} rounded-full" hx-boost>
+        <i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
       </a>
 
-      <a href="{% url 'yearly_overview_account' year=year %}" class="tw:btn {% if type != 'account' %}tw:btn-outline tw:btn-primary{% else %}tw:btn-primary{% endif %} tw:rounded-full" hx-boost>
-        <i class="fa-solid fa-wallet fa-fw tw:me-2"></i>{% trans 'Account' %}
+      <a href="{% url 'yearly_overview_account' year=year %}" class="btn {% if type != 'account' %}btn-outline btn-primary{% else %}btn-primary{% endif %} rounded-full" hx-boost>
+        <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
       </a>
     </div>
   </div>
-  <div class="tw:container tw:px-md-3 tw:py-3 tw:gap-x-5" id="yearly-content">
-    <div class="tw:flex tw:flex-wrap tw:mb-4 tw:gap-x-xl-4 tw:gap-y-3">
+  <div class="container px-md-3 py-3 gap-x-5" id="yearly-content">
+    <div class="flex flex-wrap mb-4 gap-x-xl-4 gap-y-3">
       {#    Date picker#}
-      <div class="tw:w-full tw:xl:w-auto tw:flex-row tw:items-center tw:flex">
-        <div class="tw:text-base tw:h-full tw:items-center tw:flex">
+      <div class="w-full xl:w-auto flex-row items-center flex">
+        <div class="text-base h-full items-center flex btn btn-ghost">
           <a role="button"
-             class="tw:pe-4 tw:py-2"
              hx-boost="true"
              hx-trigger="click, previous_year from:window"
              href="{% block previous_year_url %}{% endblock %}">
             <i class="fa-solid fa-chevron-left"></i></a>
         </div>
-        <div class="tw:text-3xl tw:font-bold tw:font-mono tw:w-full tw:text-center">
+        <div class="text-3xl font-bold font-mono w-full text-center">
           {{ year }}
         </div>
-        <div class="tw:text-base tw:mx-2 tw:h-full tw:items-center tw:flex">
+        <div class="text-base mx-2 h-full items-center flex btn btn-ghost">
           <a role="button"
-             class="tw:ps-3 tw:py-2"
              hx-boost="true"
              hx-trigger="click, next_year from:window"
              href="{% block next_year_url %}{% endblock %}">
@@ -47,16 +45,13 @@
           </a>
         </div>
       </div>
-      {#    Action buttons#}
-      <div class="tw:w-full tw:xl:flex-1">
-      </div>
     </div>
-    <div class="tw:flex tw:flex-wrap">
-      <div class="tw:w-full tw:lg:w-2/12">
+    <div class="flex flex-wrap">
+      <div class="w-full lg:w-2/12">
         <input type="hidden" name="month" value="">
-        <div class="tw:flex-col tw:join tw:join-vertical" id="month-pills" role="tablist"
+        <div class="flex-col join join-vertical" id="month-pills" role="tablist"
              hx-indicator="#data-content">
-          <button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
+          <button class="btn btn-outline btn-primary btn-active justify-start join-item"
                   role="tab"
                   hx-get="{% block data_url %}{% endblock %}"
                   hx-target="#data-content"
@@ -65,12 +60,12 @@
                   hx-swap="innerHTML"
                   onclick="document.querySelector('[name=month]').value = ''"
                   _="on click
-                       remove .tw:btn-active from <button/> in #month-pills
-                       add .tw:btn-active to me">
+                       remove .btn-active from <button/> in #month-pills
+                       add .btn-active to me">
             {% translate 'Year' %}
           </button>
           {% for month in months %}
-            <button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
+            <button class="btn btn-outline btn-primary justify-start join-item"
                     role="tab"
                     hx-get="{% block month_data_url %}{% endblock %}"
                     hx-target="#data-content"
@@ -79,20 +74,20 @@
                     hx-swap="innerHTML"
                     onclick="document.querySelector('[name=month]').value = '{{ month }}'"
                     _="on click
-                       remove .tw:btn-active from <button/> in #month-pills
-                       add .tw:btn-active to me">
+                       remove .btn-active from <button/> in #month-pills
+                       add .btn-active to me">
               {{ month|month_name }}
             </button>
           {% endfor %}
         </div>
       </div>
 
-      <hr class="tw:my-4 tw:block tw:lg:hidden">
-      <div class="tw:w-full tw:lg:w-3/12">
+      <hr class="my-4 block lg:hidden">
+      <div class="w-full lg:w-3/12">
         {% block filter_pills %}{% endblock %}
       </div>
 
-      <div class="tw:w-full tw:lg:w-7/12">
+      <div class="w-full lg:w-7/12">
         <div id="data-content"
              class="show-loading"
              hx-get="{% block content_data_url %}{% endblock %}"