Search payments by categories explicitely

It was already possible to search by categories in the full text input,
but it could have matched other fields as well.

Explicitely add a select to search by categories.

Also put the search form in a left aside. The mobile view is not done
for the moment.

16 files changed, 597 insertions, 555 deletions

diff --git a/assets/main.css b/assets/main.css
index 4c286da..6a0be98 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -7,6 +7,7 @@
   --color-green: #9FD2A5;
   --color-blue: #6CA2A4;
   --color-gray: #EEEEEE;
+  --color-gray-light: #F8F8F8;
   --color-yellow: #FFF09E;
 
   /* Sizes */
@@ -25,9 +26,9 @@
 
 /* Reset */
 
-html { box-sizing: border-box; }
+html { box-sizing: border-box; height: 100%; }
 *, *:before, *:after { box-sizing: inherit; }
-body { margin: 0; }
+body { margin: 0; height: 100%; }
 p { margin: 0; }
 a { color: inherit; text-decoration: none; }
 h1 { font-size: inherit; font-weight: normal; margin: 0; }
@@ -62,9 +63,6 @@ body {
 
 .g-Header {
     width: 100%;
-}
-
-.g-Header__Primary {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -92,37 +90,52 @@ body {
     text-decoration: underline;
 }
 
-.g-Header__Secondary {
+.g-Nav {
+    width: 100%;
     display: flex;
     background-color: var(--color-red);
     color: white;
     overflow-y: auto;
 }
 
-.g-Header__Link {
+.g-Nav__Link {
     padding: var(--size-mouse) var(--size-dog);
 }
 
-.g-Header__Link:hover {
+.g-Nav__Link:hover {
     background-color: var(--color-brown);
 }
 
-.g-Header__Link:focus {
+.g-Nav__Link:focus {
     background-color: var(--color-brown);
 }
 
-.g-Header__Link--Current {
+.g-Nav__Link--Current {
     background-color: var(--color-brown);
 }
 
 .g-Main {
     display: flex;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.g-Aside {
+    height: 100%;
+    display: flex;
     flex-direction: column;
-    align-items: center;
+    background-color: var(--color-gray-light);
+    border-right: 2px solid #DDDDDD;
+    padding: var(--size-horse) var(--size-bear);
+}
+
+.g-Section {
+    display: flex;
     width: 100%;
-    padding: 0 var(--size-bear);
+    flex-direction: column;
+    align-items: center;
     margin: var(--size-horse) 0;
-    overflow-x: hidden;
 }
 
 .g-Title {
@@ -229,10 +242,11 @@ body {
 
 .g-Form__Label {
     margin-bottom: var(--size-mouse);
+    position: relative;
 }
 
 .g-Form__Input {
-    margin-bottom: var(--size-lion);
+    margin: var(--size-mouse) 0 var(--size-lion);
     background-color: white;
     border: 1px solid black;
     height: var(--size-camel);
@@ -245,7 +259,7 @@ body {
 }
 
 .g-Form__Select {
-    margin-bottom: var(--size-lion);
+    margin: var(--size-mouse) 0 var(--size-lion);
     background-color: white;
     border: 1px solid black;
     height: var(--size-camel);
@@ -253,6 +267,13 @@ body {
     width: 100%;
 }
 
+.g-Form__ResetSelect {
+    cursor: pointer;
+    position: absolute;
+    top: -3px;
+    right: 0;
+}
+
 .g-Form__Error {
     color: var(--color-red);
     text-align: center;
@@ -261,18 +282,6 @@ body {
 
 /* Buttons */
 
-.g-Button__Search {
-    cursor: pointer;
-    background-color: var(--color-gray);
-    color: white;
-    border: none;
-    height: var(--size-camel);
-    padding: 0 var(--size-dog);
-    border-top: 1px solid black;
-    border-right: 1px solid black;
-    border-bottom: 1px solid black;
-}
-
 .g-Button__Validate {
     display: flex;
     align-items: center;
@@ -338,33 +347,9 @@ body {
     }
 }
 
-.g-Payments__FrequenciesAndSearch {
-    display: flex;
-    align-items: center;
-}
-
-.g-Payments__Search {
-    display: flex;
-    margin: 0 var(--size-bear) 0 0;
-}
-
-.g-Payments__SearchInput {
-    margin-bottom: 0;
-    width: 150px;
-}
-
-.g-Payments__Frequencies {
+.g-Payments__Filters {
     display: flex;
-    margin: 0 var(--size-dog);
-}
-
-.g-Payments__Frequency {
-    margin: 0 var(--size-mouse);
-}
-
-.g-Payments__Frequency--Selected {
-    color: var(--color-red);
-    font-weight: bold;
+    flex-direction: column;
 }
 
 @media screen and (max-width: 500px) {
@@ -383,6 +368,7 @@ body {
     background-color: var(--color-green);
     border-radius: var(--size-bee);
     color: white;
+    padding: var(--size-bee);
     margin-bottom: var(--size-bear);
     text-align: center;
 }
diff --git a/assets/main.js b/assets/main.js
index aee4862..3dd4b6e 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -6,6 +6,10 @@ if (path == '/login') {
 
   trim_inputs_on_blur()
 
+} else if (path == '/') { // Payment table
+
+  allow_select_reset()
+
 } else if (path == '/payment') { // Payment creation
 
   trim_inputs_on_blur()
@@ -53,10 +57,34 @@ function trim_inputs_on_blur() {
   })
 }
 
+function allow_select_reset() {
+  document.querySelectorAll('select').forEach(select => {
+    const canBeReset = Array.from(select.options).find(option => option.disabled)
+    if (canBeReset) {
+      const button = document.createElement('input')
+      button.type = 'button'
+      button.value = 'Effacer'
+      button.className = 'g-Form__ResetSelect'
+      button.onclick = function() {
+        select.selectedIndex = 0
+      }
+      if (select.selectedIndex === 0) {
+        button.style = 'visibility: hidden'
+      }
+      select.onchange = function() {
+        button.style = 'visibility: visible'
+      }
+      select.parentNode.appendChild(button)
+    }
+  })
+}
+
 function control_remove_button() {
-  const removeInput = document.getElementById('remove-input')
+  const removeInput = document.getElementsByName('remove-input')[0]
   const removeButton = document.getElementById('remove-button')
 
+  console.log(removeInput, removeButton)
+
   if (removeInput && removeButton) {
       removeInput.addEventListener('input', () => {
           if (removeInput.value.trim() == removeInput.getAttribute('data-name')) {
@@ -69,8 +97,8 @@ function control_remove_button() {
 }
 
 function auto_fill_category() {
-  const name = document.getElementById('name')
-  const category = document.getElementById('category_id')
+  const name = document.getElementsByName('name')[0]
+  const category = document.getElementsByName('category_id')[0]
 
   function onNameChange() {
       const query = name.value.trim()
diff --git a/src/db/payments.rs b/src/db/payments.rs
index 624ba9f..3b85dab 100644
--- a/src/db/payments.rs
+++ b/src/db/payments.rs
@@ -133,7 +133,6 @@ OFFSET ?
 fn search_query(search: String) -> String {
     let payments_name = utils::format_key_for_search("payments.name");
     let users_name = utils::format_key_for_search("users.name");
-    let categories_name = utils::format_key_for_search("categories.name");
 
     search
         .split_ascii_whitespace()
@@ -144,11 +143,10 @@ AND (
     {} LIKE ?
     OR payments.cost LIKE ?
     OR {} LIKE ?
-    OR {} LIKE ?
     OR strftime('%d/%m/%Y', date) LIKE ?
 )
         "#,
-                payments_name, users_name, categories_name
+                payments_name, users_name
             )
         })
         .collect::<Vec<String>>()
@@ -165,7 +163,6 @@ fn bind_search<'a, Row: FromRow<'a, SqliteRow>>(
             .bind(s.clone())
             .bind(s.clone())
             .bind(s.clone())
-            .bind(s.clone())
     })
 }
 
diff --git a/templates/balance.html b/templates/balance.html
index 15da854..b97ea40 100644
--- a/templates/balance.html
+++ b/templates/balance.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     {% if exceeding_payers %}
       <ul class="g-Balance__ExceedingPayers">
         {% for exceeding_payer in exceeding_payers %}
diff --git a/templates/base.html b/templates/base.html
index a4ebf71..4787ae7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,74 +8,70 @@
 <link rel="icon" href="{{ assets | get(key="icon.png") }}">
 
 <header class="g-Header">
-
-  <div class="g-Header__Primary">
-    <div class="g-Header__Title">Budget</div>
-    {% if connected_user %}
-      <form action="/logout" method="POST">
-        {{ connected_user.name }}
-        <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
-      </form>
-    {% endif %}
-  </div>
-
+  <div class="g-Header__Title">Budget</div>
   {% if connected_user %}
-    <div class="g-Header__Secondary">
+    <form action="/logout" method="POST">
+      {{ connected_user.name }}
+      <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
+    </form>
+  {% endif %}
+</header>
 
-      <a
-        href="/"
-        class="
-          g-Header__Link
-          {% if header == "Payments" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Paiements
-      </a>
+{% if connected_user %}
+  <nav class="g-Nav">
 
-      <a
-        href="/incomes"
-        class="
-          g-Header__Link
-          {% if header == "Incomes" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Revenus
-      </a>
+    <a
+      href="/"
+      class="
+        g-Nav__Link
+        {% if header == "Payments" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Paiements
+    </a>
 
-      <a
-        href="/categories"
-        class="
-          g-Header__Link
-          {% if header == "Categories" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Catégories
-      </a>
+    <a
+      href="/incomes"
+      class="
+        g-Nav__Link
+        {% if header == "Incomes" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Revenus
+    </a>
 
-      <a
-        href="/balance"
-        class="
-          g-Header__Link
-          {% if header == "Balance" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Équilibre
-      </a>
+    <a
+      href="/categories"
+      class="
+        g-Nav__Link
+        {% if header == "Categories" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Catégories
+    </a>
 
-      <a
-        href="/statistics"
-        class="
-          g-Header__Link
-          {% if header == "Statistics" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Statistiques
-      </a>
+    <a
+      href="/balance"
+      class="
+        g-Nav__Link
+        {% if header == "Balance" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Équilibre
+    </a>
 
-    </div>
-  {% endif %}
+    <a
+      href="/statistics"
+      class="
+        g-Nav__Link
+        {% if header == "Statistics" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Statistiques
+    </a>
 
-</header>
+  </nav>
+{% endif %}
 
 <main class="g-Main">
   {% block main %}{% endblock main %}
diff --git a/templates/category/create.html b/templates/category/create.html
index e206898..af95e16 100644
--- a/templates/category/create.html
+++ b/templates/category/create.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a class="g-Link g-Media__Large" href="/categories">
         Retour aux categories
@@ -22,30 +22,32 @@
         <div class="g-Form__Error">{{ error }}</div>
       {% endif %}
 
-      <label class="g-Form__Label" for="name">Nom</label>
-      <input
-        name="name"
-        class="g-Form__Input"
-        id="name"
-        value="{{ form.name | default(value="") }}"
-        required
-        {% if not form %} autofocus {% endif %}
-      />
-
-      <label class="g-Form__Label" for="color">Couleur</label>
-      <input
-        name="color"
-        type="color"
-        class="g-Form__Input g-Form__InputColor"
-        id="color"
-        value="{{ form.color | default(value="") }}"
-        required
-      />
+      <label class="g-Form__Label">
+        Nom
+        <input
+          name="name"
+          class="g-Form__Input"
+          value="{{ form.name | default(value="") }}"
+          required
+          {% if not form %} autofocus {% endif %}
+        />
+      </label>
+
+      <label class="g-Form__Label">
+        Couleur
+        <input
+          name="color"
+          type="color"
+          class="g-Form__Input g-Form__InputColor"
+          value="{{ form.color | default(value="") }}"
+          required
+        />
+      </label>
 
       <div>
         <input class="g-Button__Validate" type="submit" value="Créer" />
       </div>
     </form>
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/category/table.html b/templates/category/table.html
index 896304a..ad42258 100644
--- a/templates/category/table.html
+++ b/templates/category/table.html
@@ -6,33 +6,36 @@
 
 {% block main %}
 
-  <div class="g-Paragraph g-Payments__Header">
-    <a class="g-Button__Validate" href="/category">Nouveau</a>
-  </div>
+  <section class="g-Section">
 
-  {% if not categories %}
+    {% if not categories %}
+      <div class="g-Payments__NoResults">
+        Il n’y a aucune catégorie.
+      </div>
+    {% endif %}
 
-    <div class="g-Payments__NoResults">
-      Il n’y a aucune catégorie.
+    <div class="g-Paragraph">
+      <a class="g-Button__Validate" href="/category">Ajouter une catégorie</a>
     </div>
 
-  {% else %}
-
-    <div class="g-Table">
-      {% for category in categories %}
-        <a
-          class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
-          href="/category/{{ category.id }}"
-        >
-          <span
-            class="g-Table__Cell"
-            style="color: {{ category.color }}"
+    {% if categories %}
+      <div class="g-Table">
+        {% for category in categories %}
+          <a
+            class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
+            href="/category/{{ category.id }}"
           >
-            {{ category.name }}
-          </span>
-        </a>
-      {% endfor %}
-    </div>
+            <span
+              class="g-Table__Cell"
+              style="color: {{ category.color }}"
+            >
+              {{ category.name }}
+            </span>
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+  </section>
 
-  {% endif %}
 {% endblock main %}
diff --git a/templates/category/update.html b/templates/category/update.html
index a4c1481..48dda06 100644
--- a/templates/category/update.html
+++ b/templates/category/update.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a class="g-Link g-Media__Large" href="/categories">
         Retour aux catégories
@@ -30,24 +30,26 @@
       >
         <h1 class="g-H1">Modification</h1>
 
-        <label class="g-Form__Label" for="name">Nom</label>
-        <input
-          name="name"
-          class="g-Form__Input"
-          id="name"
-          value="{{ form.name | default(value=category.name) }}"
-          required
-        />
-
-        <label class="g-Form__Label" for="color">Couleur</label>
-        <input
-          name="color"
-          type="color"
-          class="g-Form__Input g-Form__InputColor"
-          id="color"
-          value="{{ form.color | default(value=category.color) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Nom
+          <input
+            name="name"
+            class="g-Form__Input"
+            value="{{ form.name | default(value=category.name) }}"
+            required
+          />
+        </label>
+
+        <label class="g-Form__Label">
+          Couleur
+          <input
+            name="color"
+            type="color"
+            class="g-Form__Input g-Form__InputColor"
+            value="{{ form.color | default(value=category.color) }}"
+            required
+          />
+        </label>
 
         <div>
           <input class="g-Button__Validate" type="submit" value="Modifier" />
@@ -67,19 +69,18 @@
             utilisée.
           </p>
         {% else %}
-          <label class="g-Form__Label" for="remove-input">
+          <label class="g-Form__Label">
             Veuillez recopier le nom de la catégorie : « {{ category.name }} ».
+            <input name="remove-input" class="g-Form__Input" data-name="{{ category.name }}" />
           </label>
 
-          <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ category.name }}" />
-
           <div>
-            <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+            <input id="remove-button" class="g-Button__Danger" type="submit" value="Supprimer" disabled />
           </div>
         {% endif %}
       </form>
 
     {% endif %}
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/income/create.html b/templates/income/create.html
index b74dddd..3c899ca 100644
--- a/templates/income/create.html
+++ b/templates/income/create.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -29,61 +29,67 @@
         <div class="g-Form__Error">{{ error }}</div>
       {% endif %}
 
-      <label class="g-Form__Label" for="amount">Montant</label>
-      <input
-        name="amount"
-        type="number"
-        class="g-Form__Input"
-        id="amount"
-        value="{{ form.amount | default(value="") }}"
-        required
-        {% if not form %} autofocus {% endif %}
-      />
+      <label class="g-Form__Label">
+        Montant
+        <input
+          name="amount"
+          type="number"
+          class="g-Form__Input"
+          value="{{ form.amount | default(value="") }}"
+          required
+          {% if not form %} autofocus {% endif %}
+        />
+      </label>
 
       {% set user_id = form.user_id | default(value="" ~ connected_user.id) %}
 
-      <label class="g-Form__Label" for="user_id">Personne</label>
-      <select name="user_id" id="user_id" class="g-Form__Select" required>
-        {% for user in users %}
-          <option
-            value="{{ user.id }}"
-            {% if "" ~ user.id == user_id %} selected {% endif %}
-          >
-            {{ user.name }}
-          </option>
-        {% endfor %}
-      </select>
+      <label class="g-Form__Label">
+        Personne
+        <select name="user_id" class="g-Form__Select" required>
+          {% for user in users %}
+            <option
+              value="{{ user.id }}"
+              {% if "" ~ user.id == user_id %} selected {% endif %}
+            >
+              {{ user.name }}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
 
       {% set month_index = form.month | default(value="" ~ current_month) %}
 
-      <label class="g-Form__Label" for="month">Mois</label>
-      <select name="month" id="month" class="g-Form__Select" required>
-        {% for month in months %}
-          <option
-            value="{{ loop.index }}"
-            {% if "" ~ loop.index == month_index %}
-              selected
-            {% endif %}
-          >
-            {{ month }}
-          </option>
-        {% endfor %}
-      </select>
+      <label class="g-Form__Label">
+        Mois
+        <select name="month" class="g-Form__Select" required>
+          {% for month in months %}
+            <option
+              value="{{ loop.index }}"
+              {% if "" ~ loop.index == month_index %}
+                selected
+              {% endif %}
+            >
+              {{ month }}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
 
-      <label class="g-Form__Label" for="year">Année</label>
-      <input
-        name="year"
-        type="number"
-        class="g-Form__Input"
-        id="year"
-        value="{{ form.year | default(value=now() | date(format="%Y")) }}"
-        required
-      />
+      <label class="g-Form__Label">
+        Année
+        <input
+          name="year"
+          type="number"
+          class="g-Form__Input"
+          value="{{ form.year | default(value=now() | date(format="%Y")) }}"
+          required
+        />
+      </label>
 
       <div>
         <input class="g-Button__Validate" type="submit" value="Créer" />
       </div>
     </form>
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/income/table.html b/templates/income/table.html
index efd82a7..60cd6e0 100644
--- a/templates/income/table.html
+++ b/templates/income/table.html
@@ -8,48 +8,49 @@
 
 {% block main %}
 
-  <div class="g-Paragraph g-Payments__Header">
+  <section class="g-Section">
+
+    {% if not incomes %}
+      <div class="g-Table__NoResults">
+        Il n’y a aucun revenu.
+      </div>
+    {% endif %}
+
     <a
-      class="g-Button__Validate"
+      class="g-Paragraph g-Button__Validate"
       href="/income?page={{ page | default(value=1) }}"
     >
-      Nouveau
+      Ajouter un revenu
     </a>
-  </div>
 
-  {% if not incomes %}
+    {% if incomes %}
+      <div class="g-Table">
+        <div class="g-Table__Row g-Table__Row--Header">
+          <span class="g-Table__Cell">Montant</span>
+          <span class="g-Table__Cell">Personne</span>
+          <span class="g-Table__Cell">Mois</span>
+        </div>
+        {% for income in incomes %}
+          <a
+            class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
+            href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
+          >
+            <span class="g-Table__Cell g-Table__NumericCell">
+              {{ income.amount | euros() }}
+            </span>
+            <span class="g-Table__Cell">{{ income.user }}</span>
+            <span class="g-Table__Cell">{{ income.date }}</span>
+          </a>
+        {% endfor %}
+      </div>
 
-    <div class="g-Payments__NoResults">
-      Il n’y a aucun revenu.
-    </div>
+      {{ paging::paging(
+        url="/incomes",
+        page=page,
+        max_page=max_page
+      ) }}
+    {% endif %}
 
-  {% else %}
+  </section>
 
-    <div class="g-Table">
-      <div class="g-Table__Row g-Table__Row--Header">
-        <span class="g-Table__Cell">Montant</span>
-        <span class="g-Table__Cell">Personne</span>
-        <span class="g-Table__Cell">Mois</span>
-      </div>
-      {% for income in incomes %}
-        <a
-          class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
-          href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
-        >
-          <span class="g-Table__Cell g-Table__NumericCell">
-            {{ income.amount | euros() }}
-          </span>
-          <span class="g-Table__Cell">{{ income.user }}</span>
-          <span class="g-Table__Cell">{{ income.date }}</span>
-        </a>
-      {% endfor %}
-    </div>
-
-    {{ paging::paging(
-      url="/incomes",
-      page=page,
-      max_page=max_page
-    ) }}
-
-  {% endif %}
 {% endblock main %}
diff --git a/templates/income/update.html b/templates/income/update.html
index 6dd649a..855d5c4 100644
--- a/templates/income/update.html
+++ b/templates/income/update.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -33,53 +33,59 @@
       >
         <h1 class="g-H1">Modification</h1>
 
-        <label class="g-Form__Label" for="amount">Montant</label>
-        <input
-          name="amount"
-          type="number"
-          class="g-Form__Input"
-          id="amount"
-          value="{{ form.amount | default(value=income.amount) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Montant
+          <input
+            name="amount"
+            type="number"
+            class="g-Form__Input"
+            value="{{ form.amount | default(value=income.amount) }}"
+            required
+          />
+        </label>
 
         {% set user_id = form.user_id | default(value="" ~ income.user_id) %}
 
-        <label class="g-Form__Label" for="user_id">Personne</label>
-        <select name="user_id" id="user_id" class="g-Form__Select" required>
-          {% for user in users %}
-            <option
-              value="{{ user.id }}"
-              {% if "" ~ user.id == user_id %} selected {% endif %}
-            >
-              {{ user.name }}
-            </option>
-          {% endfor %}
-        </select>
+        <label class="g-Form__Label">
+          Personne
+          <select name="user_id" class="g-Form__Select" required>
+            {% for user in users %}
+              <option
+                value="{{ user.id }}"
+                {% if "" ~ user.id == user_id %} selected {% endif %}
+              >
+                {{ user.name }}
+              </option>
+            {% endfor %}
+          </select>
+        </label>
 
         {% set month_index = form.month | default(value="" ~ income.month) %}
 
-        <label class="g-Form__Label" for="month">Mois</label>
-        <select name="month" id="month" class="g-Form__Select" required>
-          {% for month in months %}
-            <option
-              value="{{ loop.index }}"
-              {% if "" ~ loop.index == month_index %} selected {% endif %}
-            >
-              {{ month }}
-            </option>
-          {% endfor %}
-        </select>
-
-        <label class="g-Form__Label" for="year">Année</label>
-        <input
-          name="year"
-          type="number"
-          class="g-Form__Input"
-          id="year"
-          value="{{ form.year | default(value=income.year) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Mois
+          <select name="month" class="g-Form__Select" required>
+            {% for month in months %}
+              <option
+                value="{{ loop.index }}"
+                {% if "" ~ loop.index == month_index %} selected {% endif %}
+              >
+                {{ month }}
+              </option>
+            {% endfor %}
+          </select>
+        </label>
+
+        <label class="g-Form__Label">
+          Année
+          <input
+            name="year"
+            type="number"
+            class="g-Form__Input"
+            value="{{ form.year | default(value=income.year) }}"
+            required
+          />
+        </label>
 
         <div>
           <input class="g-Button__Validate" type="submit" value="Modifier" />
@@ -99,19 +105,18 @@
             utilisée.
           </p>
         {% else %}
-          <label class="g-Form__Label" for="remove-input">
+          <label class="g-Form__Label">
             Veuillez recopier le montant du revenu : « {{ income.amount }} ».
+            <input name="remove-input" class="g-Form__Input" data-name="{{ income.amount }}" />
           </label>
 
-          <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ income.amount }}" />
-
           <div>
-            <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+            <input id="remove-button" class="g-Button__Danger" type="submit" value="Supprimer" disabled />
           </div>
         {% endif %}
       </form>
 
     {% endif %}
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/login.html b/templates/login.html
index fd4cfe9..0c2e151 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -13,11 +13,15 @@
         <div class="g-Form__Error">{{ error }}</div>
       {% endif %}
 
-      <label class="g-Form__Label" for="email">Email</label>
-      <input name="email" class="g-Form__Input" id="email" required autofocus />
-
-      <label class="g-Form__Label" for="password">Mot de passe</label>
-      <input name="password" type="password" class="g-Form__Input" id="password" required />
+      <label class="g-Form__Label">
+        Email
+        <input name="email" class="g-Form__Input" required autofocus />
+      </label>
+
+      <label class="g-Form__Label">
+        Mot de passe
+        <input name="password" type="password" class="g-Form__Input" required />
+      </label>
 
       <div>
         <input class="g-Login__Button g-Button__Validate" type="submit" value="Connexion" />
diff --git a/templates/payment/create.html b/templates/payment/create.html
index 5bae767..8defad3 100644
--- a/templates/payment/create.html
+++ b/templates/payment/create.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -34,47 +34,51 @@
         <div class="g-Form__Error">{{ error }}</div>
       {% endif %}
 
-      <label class="g-Form__Label" for="name">Nom</label>
-      <input
-        name="name"
-        class="g-Form__Input"
-        id="name"
-        value="{{ form.name | default(value="") }}"
-        required
-        {% if not form %} autofocus {% endif %}
-      />
+      <label class="g-Form__Label">
+        Nom
+        <input
+          name="name"
+          class="g-Form__Input"
+          value="{{ form.name | default(value="") }}"
+          required
+          {% if not form %} autofocus {% endif %}
+        />
+      </label>
 
-      <label class="g-Form__Label" for="cost">Coût</label>
-      <input
-        name="cost"
-        type="number"
-        class="g-Form__Input"
-        id="cost"
-        value="{{ form.cost | default(value="") }}"
-        required
-      />
+      <label class="g-Form__Label">
+        Coût
+        <input
+          name="cost"
+          type="number"
+          class="g-Form__Input"
+          value="{{ form.cost | default(value="") }}"
+          required
+        />
+      </label>
 
       {% set user_id = form.user_id | default(value="" ~ connected_user.id) %}
 
-      <label class="g-Form__Label" for="user_id">Personne</label>
-      <select name="user_id" id="user_id" class="g-Form__Select" required>
-        {% for user in users %}
-          <option
-            value="{{ user.id }}"
-            {% if "" ~ user.id == user_id %}
-              selected
-            {% endif %}
-          >
-            {{ user.name }}
-          </option>
-        {% endfor %}
-      </select>
+      <label class="g-Form__Label">
+        Personne
+        <select name="user_id" class="g-Form__Select" required>
+          {% for user in users %}
+            <option
+              value="{{ user.id }}"
+              {% if "" ~ user.id == user_id %}
+                selected
+              {% endif %}
+            >
+              {{ user.name }}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
 
       {% set category_id = form.category_id | default(value="") %}
 
-      <label class="g-Form__Label" for="category_id">
+      <label class="g-Form__Label">
         Catégorie
-        <select name="category_id" id="category_id" class="g-Form__Select" required>
+        <select name="category_id" class="g-Form__Select" required>
           {% for category in categories %}
             <option
               value="{{ category.id }}"
@@ -90,15 +94,16 @@
       {% set date = form.date | default(value=now() | date(format="%Y-%m-%d")) %}
 
       {% if query.frequency != "Monthly" %}
-        <label class="g-Form__Label" for="date">Date</label>
-        <input
-          name="date"
-          type="date"
-          class="g-Form__Input"
-          id="date"
-          value="{{ date }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Date
+          <input
+            name="date"
+            type="date"
+            class="g-Form__Input"
+            value="{{ date }}"
+            required
+          />
+        </label>
       {% else %}
         <input
           name="date"
@@ -117,6 +122,6 @@
         <input class="g-Button__Validate" type="submit" value="Créer" />
       </div>
     </form>
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/payment/table.html b/templates/payment/table.html
index 5234e05..da15b22 100644
--- a/templates/payment/table.html
+++ b/templates/payment/table.html
@@ -8,139 +8,138 @@
 
 {% block main %}
 
-  <div class="g-Paragraph g-Payments__Header">
-    <div class="g-Payments__FrequenciesAndSearch">
-      <div class="g-Payments__Frequencies">
-        {% if query.frequency == "Monthly" %}
-          <a
-            class="g-Payments__Frequency g-Link"
-            href="/{{ payments_params(frequency="Punctual") }}"
-          >
-            Ponctuels
-          </a>
-          /
-          <span class="g-Payments__Frequency g-Payments__Frequency--Selected">
-            Mensuels
-          </span>
-        {% else %}
-          <span class="g-Payments__Frequency g-Payments__Frequency--Selected">
-            Ponctuels
-          </span>
-          /
-          <a
-            class="g-Payments__Frequency g-Link"
-            href="/{{ payments_params(frequency="Monthly") }}"
-          >
-            Mensuels
-          </a>
-        {% endif %}
+  <aside class="g-Aside">
+    <form action="/" method="GET" class="g-Payments__Filters">
+      <label class="g-Form__Label">
+        Fréquence
+        <select name="frequency" class="g-Form__Select">
+          <option value="Punctual" {% if query.frequency == "Punctual" %} selected {% endif %}>
+            Ponctuelle
+          </option>
+          <option value="Monthly" {% if query.frequency == "Monthly" %} selected {% endif %}>
+            Mensuelle
+          </option>
+        </select>
+      </label>
+
+      <label class="g-Form__Label">
+        Recherche
+        <input
+          type="search"
+          name="search"
+          class="g-Form__Input"
+          value="{{ query.search }}"
+        />
+      </label>
+
+      <label class="g-Form__Label">
+        Catégorie
+        <select name="category" class="g-Form__Select">
+          <option selected disabled hidden></option>
+          {% for category in categories %}
+            <option
+              value="{{ category.id }}"
+              style="color: {{ category.color }}"
+              {% if category.id == query.category %} selected {% endif %}
+            >
+              {{ category.name }}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
+
+      <input type="submit" class="g-Button__Validate" value="Rechercher">
+    </form>
+  </aside>
+
+  <section class="g-Section">
+    {% if not payments %}
+
+      <div class="g-Payments__NoResults">
+        Aucun paiement ne correspond à votre recherche.
       </div>
 
-      {% if query.frequency != "Monthly" %}
-        <form action="/" method="GET" class="g-Payments__Search">
-          <input
-            type="search"
-            name="search"
-            class="g-Form__Input g-Payments__SearchInput"
-            value="{{ query.search }}"
-          />
-
-          <label class="g-Form__Label">
-            Catégorie
-            <select name="category" class="g-Form__Select">
-              <option disabled selected value></option>
-              {% for category in categories %}
-                <option
-                  value="{{ category.id }}"
-                  style="color: {{ category.color }}"
-                  {% if category.id == query.category %} selected {% endif %}
-                >
-                  {{ category.name }}
-                </option>
-              {% endfor %}
-            </select>
-          </label>
-
-          <input type="submit" class="g-Button__Search" value="🔍">
-        </form>
-      {% endif %}
-    </div>
-
-    <a
-      class="g-Button__Validate g-Payments__New"
-      href="/payment{{ payments_params(
-        page=query.page,
-        search=query.search,
-        frequency=query.frequency
-      ) }}"
-    >
-      Nouveau
-    </a>
-  </div>
-
-  {% if not payments %}
-
-    <div class="g-Payments__NoResults">
-      Aucun paiement ne correspond à votre recherche.
-    </div>
-
-  {% else %}
-
-    <div class="g-Paragraph">
-      {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
-    </div>
-
-    <div class="g-Table">
-      <div class="g-Table__Row g-Table__Row--Header">
-        <span class="g-Table__Cell">Nom</span>
-        <span class="g-Table__Cell">Coût</span>
-        <span class="g-Table__Cell">Personne</span>
-        <span class="g-Media__Large g-Table__Cell">Catégorie</span>
-        {% if query.frequency != "Monthly" %}
-          <span class="g-Table__Cell">Date</span>
-        {% endif %}
+      <a
+        class="g-Button__Validate g-Payments__New"
+        href="/payment{{ payments_params(
+          page=query.page,
+          search=query.search,
+          frequency=query.frequency
+        ) }}"
+      >
+        Nouveau
+      </a>
+
+    {% else %}
+
+      <div class="g-Paragraph">
+        {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
       </div>
-      {% for payment in payments %}
-        <a
-          class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}"
-          href="/payment/{{ payment.id }}{{ payments_params(
-            page=query.page,
-            search=query.search,
-            frequency=query.frequency
-          ) }}"
-        >
-          <span class="g-Table__Cell">{{ payment.name }}</span>
-          <span class="
-            g-Table__Cell
-            g-Table__NumericCell
-            {% if payment.cost < 0 %} g-Payments__Refund {% endif %}
-          ">
-            {{ payment.cost | euros() }}
-          </span>
-          <span class="g-Table__Cell">{{ payment.user }}</span>
-          <span class="g-Table__Cell g-Media__Large">
-            <span style="color: {{ payment.category_color }}">
-              {{ payment.category_name }}
-            </span>
-          </span>
+
+      <a
+        class="g-Paragraph g-Button__Validate g-Payments__New"
+        href="/payment{{ payments_params(
+          page=query.page,
+          search=query.search,
+          frequency=query.frequency
+        ) }}"
+      >
+        Ajouter un paiement
+      </a>
+
+      <div class="g-Table">
+        <div class="g-Table__Row g-Table__Row--Header">
+          <span class="g-Table__Cell">Nom</span>
+          <span class="g-Table__Cell">Coût</span>
+          <span class="g-Table__Cell">Personne</span>
+          <span class="g-Media__Large g-Table__Cell">Catégorie</span>
           {% if query.frequency != "Monthly" %}
-            <span class="g-Table__Cell">
-              {{ payment.date }}
-            </span>
+            <span class="g-Table__Cell">Date</span>
           {% endif %}
-        </a>
-      {% endfor %}
-    </div>
-
-    {{ paging::paging(
-      url="/" ~ payments_params(
-        search=query.search,
-        frequency=query.frequency,
-        category=query.category
-      ),
-      page=page,
-      max_page=max_page
-    ) }}
-
-  {% endif %}
+        </div>
+        {% for payment in payments %}
+          <a
+            class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}"
+            href="/payment/{{ payment.id }}{{ payments_params(
+              page=query.page,
+              search=query.search,
+              frequency=query.frequency
+            ) }}"
+          >
+            <span class="g-Table__Cell">{{ payment.name }}</span>
+            <span class="
+              g-Table__Cell
+              g-Table__NumericCell
+              {% if payment.cost < 0 %} g-Payments__Refund {% endif %}
+            ">
+              {{ payment.cost | euros() }}
+            </span>
+            <span class="g-Table__Cell">{{ payment.user }}</span>
+            <span class="g-Table__Cell g-Media__Large">
+              <span style="color: {{ payment.category_color }}">
+                {{ payment.category_name }}
+              </span>
+            </span>
+            {% if query.frequency != "Monthly" %}
+              <span class="g-Table__Cell">
+                {{ payment.date }}
+              </span>
+            {% endif %}
+          </a>
+        {% endfor %}
+      </div>
+
+      {{ paging::paging(
+        url="/" ~ payments_params(
+          search=query.search,
+          frequency=query.frequency,
+          category=query.category
+        ),
+        page=page,
+        max_page=max_page
+      ) }}
+
+    {% endif %}
+  </section>
+
 {% endblock main %}
diff --git a/templates/payment/update.html b/templates/payment/update.html
index 25e6915..4e244f4 100644
--- a/templates/payment/update.html
+++ b/templates/payment/update.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -42,66 +42,73 @@
       >
         <h1 class="g-H1">Modification</h1>
 
-        <label class="g-Form__Label" for="name">Nom</label>
-        <input
-          name="name"
-          class="g-Form__Input"
-          id="name"
-          value="{{ form.name | default(value=payment.name) }}"
-          required
-        />
-
-        <label class="g-Form__Label" for="cost">Coût</label>
-        <input
-          name="cost"
-          type="number"
-          class="g-Form__Input"
-          id="cost"
-          value="{{ form.cost | default(value=payment.cost) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Nom
+          <input
+            name="name"
+            class="g-Form__Input"
+            value="{{ form.name | default(value=payment.name) }}"
+            required
+          />
+        </label>
+
+        <label class="g-Form__Label">
+          Coût
+          <input
+            name="cost"
+            type="number"
+            class="g-Form__Input"
+            value="{{ form.cost | default(value=payment.cost) }}"
+            required
+          />
+        </label>
 
         {% set user_id = form.user_id | default(value="" ~ payment.user_id) %}
 
-        <label class="g-Form__Label" for="user_id">Personne</label>
-        <select name="user_id" id="user_id" class="g-Form__Select" required>
-          {% for user in users %}
-            <option
-              value="{{ user.id }}"
-              {% if "" ~ user.id == user_id %} selected {% endif %}
-            >
-              {{ user.name }}
-            </option>
-          {% endfor %}
-        </select>
+        <label class="g-Form__Label">
+          Personne
+          <select name="user_id" class="g-Form__Select" required>
+            {% for user in users %}
+              <option
+                value="{{ user.id }}"
+                {% if "" ~ user.id == user_id %} selected {% endif %}
+              >
+                {{ user.name }}
+              </option>
+            {% endfor %}
+          </select>
+        </label>
 
         {% set category_id = form.category_id | default(value="" ~ payment.category_id) %}
 
-        <label class="g-Form__Label" for="category_id">Catégorie</label>
-        <select name="category_id" id="category_id" class="g-Form__Select" required>
-          {% for category in categories %}
-            <option
-              value="{{ category.id }}"
-              style="color: {{ category.color }}"
-              {% if "" ~ category.id == category_id %} selected {% endif %}
-            >
-              {{ category.name }}
-            </option>
-          {% endfor %}
-        </select>
+        <label class="g-Form__Label">
+          Catégorie
+          <select name="category_id" class="g-Form__Select" required>
+            {% for category in categories %}
+              <option
+                value="{{ category.id }}"
+                style="color: {{ category.color }}"
+                {% if "" ~ category.id == category_id %} selected {% endif %}
+              >
+                {{ category.name }}
+              </option>
+            {% endfor %}
+          </select>
+        </label>
 
         {% set date = form.date | default(value=payment.date) %}
 
         {% if payment.frequency == "Punctual" %}
-          <label class="g-Form__Label" for="date">Date</label>
-          <input
-            name="date"
-            type="date"
-            class="g-Form__Input"
-            id="date"
-            value="{{ date }}"
-            required
-          />
+          <label class="g-Form__Label">
+            Date
+            <input
+              name="date"
+              type="date"
+              class="g-Form__Input"
+              value="{{ date }}"
+              required
+            />
+          </label>
         {% else %}
           <input
             name="date"
@@ -127,18 +134,18 @@
       >
         <h1 class="g-H1">Suppression</h1>
 
-        <label class="g-Form__Label" for="remove-input">
+        <label class="g-Form__Label">
           Veuillez recopier le nom du paiement : « {{ payment.name }} ».
+          <input name="remove-input" class="g-Form__Input" data-name="{{ payment.name }}" />
         </label>
 
-        <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ payment.name }}" />
 
         <div>
-          <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+          <input id="remove-button"class="g-Button__Danger" type="submit" value="Supprimer" disabled />
         </div>
       </form>
 
     {% endif %}
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/statistics.html b/templates/statistics.html
index badbc6d..21e8fcd 100644
--- a/templates/statistics.html
+++ b/templates/statistics.html
@@ -6,10 +6,12 @@
 
 {% block main %}
 
-  <div class="g-Chart">
-    <canvas id="g-Chart__Canvas">
-    </canvas>
-  </div>
+  <section class="g-Section">
+    <div class="g-Chart">
+      <canvas id="g-Chart__Canvas">
+      </canvas>
+    </div>
+  </section>
 
   <div id="categories" hidden>
     {{ json_categories }}