10 changed files with 251 additions and 259 deletions
--- a/nummi/main/locale/fr/LC_MESSAGES/django.mo
+++ b/nummi/main/locale/fr/LC_MESSAGES/django.mo
--- a/nummi/main/locale/fr/LC_MESSAGES/django.po
+++ b/nummi/main/locale/fr/LC_MESSAGES/django.po
@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: 0.0.1\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 10:54+0200\n"
+"POT-Creation-Date: 2023-04-17 18:15+0200\n"
 "PO-Revision-Date: 2022-12-21 17:30+0100\n"
 "Last-Translator: edpibu <git@edgarpierre.fr>\n"
 "Language-Team: edpibu <git@edgarpierre.fr>\n"
@ -35,14 +35,14 @@ msgstr "Utilisateur"

 #: .\main\models.py:45 .\main\models.py:79 .\main\models.py:87
 #: .\main\models.py:237 .\main\templates\main\base.html:39
-#: .\main\templates\main\table\snapshot.html:23
-#: .\main\templates\main\table\transaction.html:32
+#: .\main\templates\main\table\snapshot.html:10
+#: .\main\templates\main\table\transaction.html:15
 msgid "Account"
 msgstr "Compte"

 #: .\main\models.py:45 .\main\models.py:97 .\main\models.py:208
-#: .\main\models.py:278 .\main\templates\main\table\invoice.html:9
-#: .\main\templates\main\table\transaction.html:25
+#: .\main\models.py:278 .\main\templates\main\table\transaction.html:8
+#: .\main\templates\main\transaction_form.html:28
 msgid "Name"
 msgstr "Nom"

@ -60,8 +60,7 @@ msgstr "Comptes"

 #: .\main\models.py:97 .\main\models.py:121 .\main\models.py:227
 #: .\main\templates\main\base.html:49
-#: .\main\templates\main\plot\category.html:14
-#: .\main\templates\main\table\transaction.html:29
+#: .\main\templates\main\table\transaction.html:12
 msgid "Category"
 msgstr "Catégorie"

@ -90,7 +89,7 @@ msgstr "Valeur de fin"
 msgid "Start value"
 msgstr "Valeur de début"

-#: .\main\models.py:141 .\main\templates\main\table\snapshot.html:26
+#: .\main\models.py:141 .\main\templates\main\table\snapshot.html:13
 msgid "Difference"
 msgstr "Différence"

@ -99,8 +98,6 @@ msgid "Transaction difference"
 msgstr "Différence des transactions"

 #: .\main\models.py:154 .\main\models.py:283
-#: .\main\templates\main\table\invoice.html:10
-#: .\main\templates\main\table\invoice.html:21
 msgid "File"
 msgstr "Fichier"

@ -123,17 +120,17 @@ msgstr "Relevés"
 msgid "Transaction"
 msgstr "Transaction"

-#: .\main\models.py:210
+#: .\main\models.py:210 .\main\templates\main\table\transaction.html:17
 msgid "Description"
 msgstr "Description"

-#: .\main\models.py:212 .\main\templates\main\table\snapshot.html:25
-#: .\main\templates\main\table\transaction.html:26
+#: .\main\models.py:212 .\main\templates\main\table\snapshot.html:12
+#: .\main\templates\main\table\transaction.html:9
 msgid "Value"
 msgstr "Valeur"

-#: .\main\models.py:214 .\main\templates\main\table\snapshot.html:21
-#: .\main\templates\main\table\transaction.html:24
+#: .\main\models.py:214 .\main\templates\main\table\snapshot.html:8
+#: .\main\templates\main\table\transaction.html:7
 msgid "Date"
 msgstr "Date"

@ -141,7 +138,7 @@ msgstr "Date"
 msgid "Real date"
 msgstr "Date réelle"

-#: .\main\models.py:217 .\main\templates\main\table\transaction.html:27
+#: .\main\models.py:217 .\main\templates\main\table\transaction.html:10
 msgid "Trader"
 msgstr "Commerçant"

@ -154,8 +151,8 @@ msgstr "Paiement"
 #: .\main\templates\main\index.html:29
 #: .\main\templates\main\list\transaction.html:6
 #: .\main\templates\main\list\transaction.html:23
-#: .\main\templates\main\snapshot_form.html:39
-#: .\main\templates\main\table\snapshot.html:27
+#: .\main\templates\main\snapshot_form.html:76
+#: .\main\templates\main\table\snapshot.html:14
 msgid "Transactions"
 msgstr "Transactions"

@ -189,9 +186,8 @@ msgid "Confirm"
 msgstr "Confirmer"

 #: .\main\templates\main\form\base.html:17
-#: .\main\templates\main\table\invoice.html:11
-#: .\main\templates\main\table\invoice.html:24
 #: .\main\templates\main\tag\form_buttons.html:4
+#: .\main\templates\main\transaction_form.html:35
 msgid "Delete"
 msgstr "Supprimer"

@ -220,39 +216,37 @@ msgstr "Aucune transaction à afficher"
 msgid "Log In"
 msgstr "Se connecter"

-#: .\main\templates\main\plot\category.html:15
-#: .\main\templates\main\plot\history.html:14
-msgid "Expenses"
-msgstr "Dépenses"
-
-#: .\main\templates\main\plot\category.html:16
-#: .\main\templates\main\plot\history.html:15
-msgid "Income"
-msgstr "Revenus"
-
-#: .\main\templates\main\plot\history.html:13
+#: .\main\templates\main\plot\history.html:7
 msgid "Month"
 msgstr "Mois"

-#: .\main\templates\main\table\invoice.html:30
-msgid "No invoice"
-msgstr "Aucune facture"
+#: .\main\templates\main\plot\history.html:8
+msgid "Expenses"
+msgstr "Dépenses"

-#: .\main\templates\main\table\invoice.html:37
+#: .\main\templates\main\plot\history.html:9
+msgid "Income"
+msgstr "Revenus"
+
+#: .\main\templates\main\table\snapshot.html:18
+msgid "New statement"
+msgstr "Nouveau relevé"
+
+#: .\main\templates\main\table\snapshot.html:53
+msgid "View all statements"
+msgstr "Voir tous les relevés"
+
+#: .\main\templates\main\table\transaction.html:21
+msgid "New transaction"
+msgstr "Ajouter une transaction"
+
+#: .\main\templates\main\table\transaction.html:64
+msgid "View all transactions"
+msgstr "Voir toutes les transactions"
+
+#: .\main\templates\main\transaction_form.html:40
 msgid "New invoice"
 msgstr "Nouvelle facture"

-#~ msgid "New statement"
-#~ msgstr "Nouveau relevé"
-
-#~ msgid "View all statements"
-#~ msgstr "Voir tous les relevés"
-
-#~ msgid "New transaction"
-#~ msgstr "Ajouter une transaction"
-
-#~ msgid "View all transactions"
-#~ msgstr "Voir toutes les transactions"
-
 #~ msgid "Valid"
 #~ msgstr "Valide"
--- a/nummi/main/static/main/css/plot.css
+++ b/nummi/main/static/main/css/plot.css
@ -1,4 +1,31 @@
-table.full-width col.bar {width: auto}
+.plot table {
+	border-collapse: collapse;
+	width: 100%;
+	table-layout: auto;
+}
+.plot thead {
+	background: var(--bg-01);
+}
+.plot col.desc, .plot col.value {width: 8rem}
+.plot col.icon {width: 1ch}
+.plot tr {
+	padding-bottom: .5rem;
+	border: .1rem solid var(--gray);
+}
+.plot th {text-align: left}
+.plot th.r {text-align: right}
+.plot th.l {text-align: left}
+.plot td.c {text-align: center}
+
+.plot td, .plot th, .plot td.bar div {
+	position: relative;
+	height: 2rem;
+	line-height: 2rem;
+	white-space: nowrap;
+}
+.plot td, .plot th {
+	padding: .5rem var(--gap);
+}

 .plot td.bar {
 	position: relative;
@ -6,8 +33,17 @@ table.full-width col.bar {width: auto}
 }
 .plot td.bar div {
 	position: absolute;
-	height: .5rem;
-	top: 0;
+	top: .5rem;
+}
+.plot td.m {
+	text-align: right;
+}
+.plot tbody th {
+	font-feature-settings: var(--num);
+}
+.plot td.value {
+	font-feature-settings: var(--num);
+	text-align: right;
 }

 .plot td.bar div:not(.tot) {
--- a/nummi/main/static/main/css/table.css
+++ b/nummi/main/static/main/css/table.css
@ -1,28 +1,60 @@
-table {
-	border-collapse: collapse;
+.table {
+	display: grid;
+	margin: 2em 0;
+	border-radius: var(--radius);
+	overflow: hidden;
+	border-bottom: var(--border) solid var(--theme);
 }
-table.full-width {
-	width: 100%;
+.table.col2 {grid-template-columns: repeat(2, auto)}
+.table.col3 {grid-template-columns: repeat(3, auto)}
+.table.col4 {grid-template-columns: repeat(4, auto)}
+.table.col5 {grid-template-columns: repeat(5, auto)}
+.table.col6 {grid-template-columns: repeat(6, auto)}
+.table.col1-1 {grid-template-columns: min-content auto}
+.table.col1-1-1 {grid-template-columns: min-content auto min-content}
+.table.col2-4 {grid-template-columns: repeat(2, min-content) repeat(4, auto)}
+.table.col1-5 {grid-template-columns: min-content repeat(5, auto)}
+.table.col2-5 {grid-template-columns: repeat(2, min-content) repeat(5, auto)}
+.table.col1-6 {grid-template-columns: min-content repeat(6, auto)}
+.table.col1-7 {grid-template-columns: min-content repeat(7, auto)}
+
+.table > div {
+	display: contents;
 }
-thead {
-	background: var(--bg-01);
-}
-table.full-width col {width: 8rem}
-table col.icon {width: 1ch}
-tr {
-	border: .1rem solid var(--gray);
-	height: 2rem;
-	line-height: 2rem;
-}
-td, th {
-	padding: 0 var(--gap);
-	position: relative;
+
+.table > div > * {
+	padding: 1em;
 	white-space: nowrap;
-	text-overflow: ellipsis;
 }
-.date, .value {
+.table > div:nth-child(odd) > * {background: var(--bg-01)}
+.table > div:nth-child(even) > * {background: var(--bg)}
+
+.table > div.header > * {
+	background: var(--theme);
+}
+
+.table > div > .center {
+	text-align: center;
+}
+.table > div > .right {
+	text-align: right;
+}
+.table > div > .num {
 	font-feature-settings: var(--num);
 }
-.l {text-align: left}
-.r, .value {text-align: right}
-.c, .date {text-align: center}
+.table > div > span.value {
+	filter: brightness(95%);
+	font-weight: 600;
+}
+
+.table > div > span.text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.table > div.full-line > * {
+	grid-column: 1 / -1;
+	text-align: center;
+}
+.table > .invoice.new > a {
+	grid-column: 2 / -1;
+}
--- a/nummi/main/templates/main/plot/category.html
+++ b/nummi/main/templates/main/plot/category.html
@ -1,7 +1,7 @@
 {% load main_extras %}
 {% load i18n %}
 <div class="plot">
-    <table class="full-width">
+    <table>
        <colgroup>
            <col class="desc">
            <col class="icon">
@ -12,8 +12,8 @@
        <thead>
            <tr>
                <th scope="col" colspan="2">{% translate "Category" %}</th>
-                <th scope="col" colspan="2">{% translate "Expenses" %}</th>
-                <th scope="col" colspan="2">{% translate "Income" %}</th>
+                <th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
+                <th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
            </tr>
        </thead>
        <tbody>
--- a/nummi/main/templates/main/plot/history.html
+++ b/nummi/main/templates/main/plot/history.html
@ -1,7 +1,7 @@
 {% load main_extras %}
 {% load i18n %}
 <div class="plot">
-    <table class="full-width">
+    <table>
        <colgroup>
            <col class="desc">
            <col class="value">
@ -11,15 +11,15 @@
        <thead>
            <tr>
                <th scope="col">{% translate "Month" %}</th>
-                <th scope="col" colspan="2">{% translate "Expenses" %}</th>
-                <th scope="col" colspan="2">{% translate "Income" %}</th>
+                <th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
+                <th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
            </tr>
        </thead>
        <tbody>
            {% spaceless %}
                {% for date in history.data %}
                    <tr>
-                        <th class="date" scope="row">{{ date.month|date:"Y-m" }}</th>
+                        <th scope="row">{{ date.month|date:"Y-m" }}</th>
                        <td class="value">{{ date.sum_m|pmrvalue }}</td>
                        <td class="bar m">
                            <div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>
--- a/nummi/main/templates/main/table/invoice.html
+++ b/nummi/main/templates/main/table/invoice.html
@ -1,42 +0,0 @@
-{% load main_extras %}
-{% load i18n %}
-<div id="invoices">
-    <table>
-        <colgroup>
-            <col class="desc" span="3">
-        </colgroup>
-        <thead>
-            <th>{% translate "Name" %}</th>
-            <th>{% translate "File" %}</th>
-            <th>{% translate "Delete" %}</th>
-        </thead>
-        <tbody>
-            {% if transaction.invoices %}
-                {% for invoice in transaction.invoices %}
-                    <tr>
-                        <th scope="row" class="l">
-                            <a href="{{ invoice.get_absolute_url }}">{{ invoice.name }}</a>
-                        </th>
-                        <td>
-                            <a href="{{ invoice.file.url }}">{% translate "File" %}</a>
-                        </td>
-                        <td>
-                            <a href="{{ invoice.get_delete_url }}">{% translate "Delete" %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                {% else %}
-                    <tr>
-                        <td colspan="3">{% translate "No invoice" %}</td>
-                    </tr>
-                {% endif %}
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td colspan="3">
-                        <a href="{% url "invoice" transaction.pk %}">{% translate "New invoice" %}</a>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
-    </div>
--- a/nummi/main/templates/main/table/snapshot.html
+++ b/nummi/main/templates/main/table/snapshot.html
@ -1,74 +1,56 @@
 {% load main_extras %}
 {% load i18n %}
-<div id="snapshots">
-    <table class="full-width">
-        <colgroup>
-            <col class="icon" span="2">
-            <col class="date">
-            {% if not account %}
-                <col class="icon">
-                <col class="desc">
-            {% endif %}
-            <col class="value" span="3">
-        </colgroup>
-        <thead>
-            <th>
-                <i class="fa fa-check"></i>
-            </th>
-            <th>
-                <i class="fa fa-paperclip"></i>
-            </th>
-            <th>{% translate "Date" %}</th>
-            {% if not account %}
-                <th colspan="2">{% translate "Account" %}</th>
-            {% endif %}
-            <th>{% translate "Value" %}</th>
-            <th>{% translate "Difference" %}</th>
-            <th>{% translate "Transactions" %}</th>
-        </thead>
-        <tbody>
-            {% for snap in snapshots %}
-                <tr>
-                    <td class="c">
-                        <i class="fa fa-{% if snap.sum == snap.diff %}check green{% else %}xmark red{% endif %}"></i>
-                    </td>
-                    <td class="c">
-                        {% if snap.file %}
-                            <a href="{{ snap.file.url }}">
-                                <i class="fa fa-paperclip"></i>
-                            </a>
-                        {% endif %}
-                    </td>
-                    <th class="date" scope="row">
-                        <a href="{% url "snapshot" pk=snap.id %}">{{ snap.date|date:"Y-m-d" }}</a>
-                    </th>
-                    {% if not account %}
-                        <td class="r">
-                            <i class="fa fa-{{ snap.account.icon }}"></i>
-                        </td>
-                        <td>
-                            <a href="{% url "account" pk=snap.account.id %}">{{ snap.account }}</a>
-                        </td>
-                        <td class="value">{{ snap.value|value }}</td>
-                        <td class="value">{{ snap.diff|pmvalue }}</td>
-                        <td class="value">{{ snap.sum|pmvalue }}</td>
-                    {% endif %}
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-</div>
-{% comment %}
-<div id="snapshots" class="table {% if account %}col2-4{% else %}col2-5{% endif %}">
+<div id="snapshots"
+     class="table {% if account %}col2-4{% else %}col2-5{% endif %}">
+    <div class="header">
+        <strong class="diff center"><i class="fa fa-check"></i></strong>
+        <strong class="attach center"><i class="fa fa-paperclip"></i></strong>
+        <strong class="date center">{% translate "Date" %}</strong>
+        {% if not account %}
+            <strong class="account center">{% translate "Account" %}</strong>
+        {% endif %}
+        <strong class="value center">{% translate "Value" %}</strong>
+        <strong class="diff center">{% translate "Difference" %}</strong>
+        <strong class="diff center">{% translate "Transactions" %}</strong>
+    </div>
    {% if new_snapshot_url %}
        <div class="full-line">
            <a href="{{ new_snapshot_url }}">{% translate "New statement" %}</a>
        </div>
    {% endif %}
+    {% for snap in snapshots %}
+        <div class="snapshot">
+            <span class="valid center">
+                {% if snap.sum == snap.diff %}
+                    <i class="fa fa-check green"></i>
+                {% else %}
+                    <i class="fa fa-xmark red"></i>
+                {% endif %}
+            </span>
+            <span class="attach center">
+                {% if snap.file %}
+                    <a href="{{ snap.file.url }}">
+                        <i class="fa fa-paperclip"></i>
+                    </a>
+                {% endif %}
+            </span>
+            <span class="date num center">
+                <a href="{% url 'snapshot' pk=snap.id %}">{{ snap.date|date:"Y-m-d" }}</a>
+            </span>
+            {% if not account %}
+                <span class="account text center">
+                    <i class="fa fa-{{ snap.account.icon }}"></i>
+                    <a href="{% url 'account' pk=snap.account.id %}">{{ snap.account }}</a>
+                </span>
+            {% endif %}
+            <span class="value num right">{{ snap.value|value }}</span>
+            <span class="diff num right">{{ snap.diff|pmvalue }}</span>
+            <span class="sum num right">{{ snap.sum|pmvalue }}</span>
+        </div>
+    {% endfor %}
    {% if snapshots_url %}
        <div class="full-line">
            <a href="{{ snapshots_url }}">{% translate "View all statements" %}</a>
        </div>
    {% endif %}
 </div>
-{% endcomment %}
--- a/nummi/main/templates/main/table/transaction.html
+++ b/nummi/main/templates/main/table/transaction.html
@ -1,80 +1,21 @@
 {% load main_extras %}
 {% load i18n %}
-<div id="transactions">
-    <table class="full-width">
-        <colgroup>
-            <col class="icon">
-            <col class="date">
-            <col class="desc">
-            <col class="value">
-            <col class="desc">
-            {% if not category %}
-                <col class="icon">
-                <col class="desc">
-            {% endif %}
-            {% if not account %}
-                <col class="icon">
-                <col class="desc">
-            {% endif %}
-        </colgroup>
-        <thead>
-            <th>
-                <i class="fa fa-paperclip"></i>
-            </th>
-            <th>{% translate "Date" %}</th>
-            <th>{% translate "Name" %}</th>
-            <th>{% translate "Value" %}</th>
-            <th>{% translate "Trader" %}</th>
-            {% if not category %}
-                <th colspan="2">{% translate "Category" %}</th>
-            {% endif %}
-            {% if not account %}
-                <th colspan="2">{% translate "Account" %}</th>
-            {% endif %}
-        </thead>
-        <tbody>
-            {% for trans in transactions %}
-                <tr>
-                    <td class="c">
-                        {% for invoice in trans.invoices %}
-                            <a href="{{ invoice.file.url }}">
-                                <i class="fa fa-paperclip"></i>
-                            </a>
-                        {% endfor %}
-                    </td>
-                    <td class="date">{{ trans.date|date:"Y-m-d" }}</td>
-                    <th scope="row" class="l">
-                        <a href="{% url "transaction" pk=trans.id %}">{{ trans.name }}</a>
-                    </th>
-                    <td class="value">{{ trans.value|pmvalue }}</td>
-                    <td>{{ trans.trader|default_if_none:"–" }}</td>
-                    {% if not category %}
-                        {% if trans.category %}
-                            <td class="r">
-                                <i class="fa fa-{{ trans.category.icon }}"></i>
-                            </td>
-                            <td>
-                                <a href="{% url "category" pk=trans.category.id %}">{{ trans.category }}</a>
-                            </td>
-                        {% else %}
-                            <td class="c" colspan="2">–</td>
-                        {% endif %}
-                    {% endif %}
-                    {% if not account %}
-                        <td class="r">
-                            <i class="fa fa-{{ trans.account.icon }}"></i>
-                        </td>
-                        <td>
-                            <a href="{% url "account" pk=trans.account.id %}">{{ trans.account }}</a>
-                        </td>
-                    {% endif %}
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-</div>
-{% comment %}
-<div id="transactions" class="table col1-{% if account or category %}6{% else %}7{% endif %}">
+<div id="transactions"
+     class="table col1-{% if account or category %}6{% else %}7{% endif %}">
+    <div class="header">
+        <strong class="attach center"><i class="fa fa-paperclip"></i></strong>
+        <strong class="date center">{% translate "Date" %}</strong>
+        <strong class="name">{% translate "Name" %}</strong>
+        <strong class="value center">{% translate "Value" %}</strong>
+        <strong class="trader center">{% translate "Trader" %}</strong>
+        {% if not category %}
+            <strong class="category center">{% translate "Category" %}</strong>
+        {% endif %}
+        {% if not account %}
+            <strong class="account center">{% translate "Account" %}</strong>
+        {% endif %}
+        <strong class="description">{% translate "Description" %}</strong>
+    </div>
    {% if new_transaction_url %}
        <div class="full-line">
            <a href="{{ new_transaction_url }}">{% translate "New transaction" %}</a>
@ -82,6 +23,39 @@
    {% endif %}
    {% for trans in transactions %}
        <div class="transaction">
+            <span class="attach center">
+                {% for invoice in trans.invoices %}
+                    {% spaceless %}
+                        <a href="{{ invoice.file.url }}">
+                            <i class="fa fa-paperclip"></i>
+                        </a>
+                    {% endspaceless %}
+                {% endfor %}
+            </span>
+            <span class="date num center">{{ trans.date|date:"Y-m-d" }}</span>
+            <span class="name text"><a href="{% url 'transaction' pk=trans.id %}">{{ trans.name }}</a></span>
+            <span class="value num right">{{ trans.value|pmvalue }}</span>
+            <span class="trader text center">{{ trans.trader|default_if_none:"–" }}</span>
+            {% if not category %}
+                <span class="category text center">
+                    {% if trans.category %}
+                        <i class="fa fa-{{ trans.category.icon }}"></i>
+                        <a href="{% url 'category' pk=trans.category.id %}">{{ trans.category }}</a>
+                    {% else %}
+                        –
+                    {% endif %}
+                </span>
+            {% endif %}
+            {% if not account %}
+                <span class="account text center">
+                    {% if trans.account %}
+                        <i class="fa fa-{{ trans.account.icon }}"></i>
+                        <a href="{% url 'account' pk=trans.account.id %}">{{ trans.account }}</a>
+                    {% else %}
+                        –
+                    {% endif %}
+                </span>
+            {% endif %}
            <span class="description text">{{ trans.description }}</span>
        </div>
    {% endfor %}
@ -91,4 +65,3 @@
        </div>
    {% endif %}
 </div>
-{% endcomment %}
--- a/nummi/main/templates/main/transaction_form.html
+++ b/nummi/main/templates/main/transaction_form.html
@ -22,6 +22,23 @@
    {% endspaceless %}
    {% if not form.instance.adding %}
        <h2>{% translate "Invoices" %}</h2>
-        {% include "main/table/invoice.html" %}
+        <div id="invoices" class="table col1-1-1">
+            <div class="header">
+                <strong class="attach center"><i class="fa fa-file"></i></strong>
+                <strong class="name">{% translate "Name" %}</strong>
+                <strong class="attach right"><i class="fa fa-trash-can"></i></strong>
+            </div>
+            {% for inv in transaction.invoices %}
+                <div class="invoice">
+                    <a href="{{ inv.file.url }}" class="center"><i class="fa-regular fa-file"></i></a>
+                    <a href="{{ inv.get_absolute_url }}">{{ inv.name }}</a>
+                    <a href="{{ inv.get_delete_url }}" class="right">{% translate "Delete" %}</a>
+                </div>
+            {% endfor %}
+            <div class="invoice new">
+                <span class="center"><i class="fa fa-file-circle-plus"></i></span>
+                <a href="{% url "invoice" transaction.pk %}">{% translate "New invoice" %}</a>
+            </div>
+        </div>
    {% endif %}
 {% endblock %}