feat(cotton): add info_card component

app/templates/cotton/ui/card.html

@@ -0,0 +1,5 @@
+<div class="card tw-relative h-100 shadow">
+  <div class="card-body">
+    {{ slot }}
+  </div>
+</div>

app/templates/cotton/ui/info_card.html

@@ -0,0 +1,9 @@
+<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-{{ color }}-300 tw-text-{{ color }}-800 text-center align-items-center d-flex justify-content-center rounded-2">
+    <i class="{{ icon }}"></i>
+  </div>
+  <div class="card-body">
+    <h5 class="tw-text-{{ color }}-400 fw-bold" {{ attrs }}>{{ title }}{% if help_text %}{% include 'includes/help_icon.html' with content=help_text %}{% endif %}</h5>
+    {{ slot }}
+  </div>
+</div>

app/templates/monthly_overview/fragments/monthly_summary.html

@@ -1,17 +1,10 @@
 {% 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">
+    <c-ui.info-card color="yellow" icon="fa-solid fa-calendar-day" title="{% trans 'Daily Spending Allowance' %}" help_text={% trans "This is the final total divided by the remaining days in the month" %}>
-      <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
+      <div class="d-flex justify-content-between mt-3">
-      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>
@@ -39,18 +32,11 @@
             {% endfor %}
           </div>
         </div>
-      </div>
+    </c-ui.info-card>
-    </div>
   </div>
 {#  Income#}
   <div class="col">
-    <div class="card tw-relative h-100 shadow">
+      <c-ui.info-card color="green" icon="fa-solid fa-arrow-right-to-bracket" title="{% trans 'Income' %}">
-      <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">{% translate 'current' %}</div>
@@ -110,18 +96,11 @@
             {% endfor %}
           </div>
         </div>
-      </div>
+      </c-ui.info-card>
-    </div>
   </div>
 {#  Expenses#}
   <div class="col">
-    <div class="card tw-relative h-100 shadow">
+      <c-ui.info-card color="red" icon="fa-solid fa-arrow-right-from-bracket" title="{% trans 'Expenses' %}">
-      <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 fw-bold">{% translate 'Expenses' %}</h5>
         <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
             <div class="tw-text-gray-400">{% translate 'current' %}</div>
@@ -181,18 +160,11 @@
             {% endfor %}
           </div>
         </div>
-      </div>
+      </c-ui.info-card>
-    </div>
   </div>
 {#  Total#}
   <div class="col">
-    <div class="card tw-relative h-100 shadow">
+    <c-ui.info-card color="blue" icon="fa-solid fa-scale-balanced" title="{% trans 'Total' %}">
-      <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 fw-bold">{% translate 'Total' %}</h5>
         <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
             <div class="tw-text-gray-400">{% translate 'current' %}</div>
@@ -278,10 +250,14 @@
             {% endfor %}
           </div>
         </div>
-      </div>
+    </c-ui.info-card>
-    </div>
+  </div>
+  <div class="col">
+    <c-ui.info-card color="yellow" icon="fa-solid fa-percent" title="{% trans 'Distribution' %}">
+      {% for p in percentages.values %}
+        <p class="tw-text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }} ({{ p.currency.code }})</p>
+        <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
+      {% endfor %}
+    </c-ui.info-card>
   </div>
 </div>
-{% for p in percentages.values %}
-<c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
-{% endfor %}

app/templates/net_worth/net_worth.html

@@ -14,61 +14,42 @@
       <div class="col-12 col-xl-5">
         <div class="row row-cols-1 g-4 mb-3">
           <div class="col">
-            <div class="card tw-relative h-100 shadow">
+            <c-ui.info-card color="yellow" icon="fa-solid fa-coins" title="{% trans 'By currency' %}" _="on click showAllDatasetsCurrency()">
-              <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
+              {% for currency in currency_net_worth.values %}
-            align-items-center d-flex justify-content-center rounded-2">
+                <div class="d-flex justify-content-between mt-2">
-                <i class="fa-solid fa-coins"></i>
+                  <div class="d-flex align-items-baseline w-100">
-              </div>
+                    <div class="currency-name text-start font-monospace tw-text-gray-300"
-              <div class="card-body">
+                         _="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
-                <h5 class="tw-text-yellow-400 fw-bold mb-3"
+                      {{ currency.currency.name }}
-                    _="on click showAllDatasetsCurrency()">
-                  {% translate 'By currency' %}
-                </h5>
-                {% for currency in currency_net_worth.values %}
-                  <div class="d-flex justify-content-between mt-2">
-                    <div class="d-flex align-items-baseline w-100">
-                      <div class="currency-name text-start font-monospace tw-text-gray-300"
-                           _="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
-                        {{ currency.currency.name }}
-                      </div>
-                      <div class="dotted-line flex-grow-1"></div>
-                      <div>
-                        <c-amount.display
-                            :amount="currency.total_final"
-                            :prefix="currency.currency.prefix"
-                            :suffix="currency.currency.suffix"
-                            :decimal_places="currency.currency.decimal_places"
-                            color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"
-                            text-end></c-amount.display>
-                      </div>
                     </div>
-                  </div>
+                    <div class="dotted-line flex-grow-1"></div>
-                  {% if currency.exchanged and currency.exchanged.total_final %}
                     <div>
                       <c-amount.display
-                          :amount="currency.exchanged.total_final"
+                          :amount="currency.total_final"
-                          :prefix="currency.exchanged.currency.prefix"
+                          :prefix="currency.currency.prefix"
-                          :suffix="currency.exchanged.currency.suffix"
+                          :suffix="currency.currency.suffix"
-                          :decimal_places="currency.exchanged.currency.decimal_places"
+                          :decimal_places="currency.currency.decimal_places"
-                          text-end
+                          color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"
-                          color="grey"></c-amount.display>
+                          text-end></c-amount.display>
                     </div>
-                  {% endif %}
+                  </div>
-                {% endfor %}
+                </div>
-              </div>
+                {% if currency.exchanged and currency.exchanged.total_final %}
-            </div>
+                  <div>
+                    <c-amount.display
+                        :amount="currency.exchanged.total_final"
+                        :prefix="currency.exchanged.currency.prefix"
+                        :suffix="currency.exchanged.currency.suffix"
+                        :decimal_places="currency.exchanged.currency.decimal_places"
+                        text-end
+                        color="grey"></c-amount.display>
+                  </div>
+                {% endif %}
+              {% endfor %}
+            </c-ui.info-card>
           </div>
           <div class="col">
-            <div class="card tw-relative h-100 shadow">
+              <c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}" _="on click showAllDatasetsAccount()">
-              <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-wallet"></i>
-              </div>
-              <div class="card-body">
-                <h5 class="tw-text-blue-400 fw-bold mb-3"
-                    _="on click showAllDatasetsAccount()">
-                  {% translate 'By account' %}
-                </h5>
                 {% regroup account_net_worth.values by account.group as account_data %}
                 {% for data in account_data %}
                   {% if data.grouper %}
@@ -136,8 +117,7 @@
                     {% endfor %}
                   {% endif %}
                 {% endfor %}
-              </div>
+              </c-ui.info-card>
-            </div>
           </div>
         </div>
       </div>