Added new views, joined rules and categories

templates/accounts.html

@@ -8,22 +8,26 @@
   </div>
 </div>
 <div>
-  <table>
+  <table width="100%">
     <thead>
       <tr>
-        <th>Description</th>
-        <th>Date</th>
-        <th>Amount</th>
-        <th>Category</th>
+        <th width="40%">Description</th>
+        <th width="20%">Date</th>
+        <th width="10%">Amount</th>
+        <th width="10%">Acc</th>
+        <th width="15%">Category</th>
+        <th width="5%">Link</th>
       </tr>
     </thead>
     <tbody>
       {% for tx in transactions %}
       <tr>
         <td>{{tx.description}}</td>
-        <td>{{tx.transaction_timestamp}}</td>
+        <td>{{tx.tx_date}}</td>
         <td>{{tx.amount/100}}</td>
-        <td>{{tx.category}}</td>
+        <td>{{tx.accumulated/100}}</td>
+        <td>{% if tx.category %}{{categories[tx.category]}}{% endif %}</td>
+        <td><a href="/transaction/{{ tx.transaction_id }}">Go to</a></td>
       </tr>
       {% endfor %}
     </tbody>

templates/base.html

@@ -27,7 +27,6 @@
       <aside class="sidebar bg-stone-300 p-4 flex flex-col">
         <a class="hover:bg-stone-400" href="/">Summary</a>
         <a class="hover:bg-stone-400" href="/accounts">Accounts</a>
-        <a class="hover:bg-stone-400" href="/categories">Categories</a>
         <a class="hover:bg-stone-400" href="/classifiers">Classifiers</a>
       </aside>
       <div class="p-4 grow h-full overflow-auto">

templates/categories_new.html

@@ -1,28 +1,21 @@
 {% extends "base.html" %}
 {% block title %}Create category{% endblock title %}
 {% block body %}
-  <form action="/categories/new" method="post" class="flex flex-col">
-    <label class="grow">
-      Name
-      <input type="text" name="name" />
-    </label>
-    <label class="grow">
-      Description
-      <input type="text" name="description" />
-    </label>
-    <button type="submit">Submit</button>
+  <form action="/classifiers/new_category" method="post">
+    <div class="mb-2">
+      <label class="ars-input">
+        Name
+        <input type="text" name="name" />
+      </label>
+    </div>
+    <div class="mb-2">
+      <label class="ars-input">
+        Description
+        <input type="text" name="description" />
+      </label>
+    </div>
+    <div class="mb-2" style="text-align: right;">
+      <button class="ars-button" type="submit">Submit</button>
+    </div>
   </form>
-  <style>
-    label {
-      width: 100%;
-    }
-
-    input {
-      width: 100%;
-      border: 1px solid black;
-      border-radius: 3px;
-      padding: 0.25rem;
-      margin: 0.25rem;
-    }
-  </style>
 {% endblock body %}

templates/classifiers.html

@@ -1,35 +1,38 @@
 {% extends "base.html" %}
 {% block title %}Rules{% endblock title %}
 {% block body %}
-  <div>
-    <a href="/classifiers/new_category">New</a>
-  </div>
-  <table>
-    <thead>
-      <tr>
-        <th span="col">Id</th>
-        <th span="col">Name</th>
-        <th span="col">Description</th>
-      <tr>
-    </thead>
-    <tbody>
-      {% for category in categories %}
-      <tr>
-        <td>{{category.category_id}}</td>
-        <td>{{category.name}}</td>
-        <td>{{category.description}}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  <div class="mb-8">
+    <div>
+      <a href="/classifiers/new_category">New</a>
+    </div>
+    <table width="100%">
+      <thead>
+        <tr>
+          <th width="10%" span="col">Id</th>
+          <th width="30%" span="col">Name</th>
+          <th span="col">Description</th>
+        <tr>
+      </thead>
+      <tbody>
+        {% for category in categories %}
+        <tr>
+          <td>{{category.category_id}}</td>
+          <td>{{category.name}}</td>
+          <td>{{category.description}}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div
 
+  <div>
     <div>
       <a href="/classifiers/new_rule">New</a>
     </div>
-    <table>
+    <table width="100%">
       <thead>
         <tr>
-          <th>Categoría</th>
+          <th width="30%">Categoría</th>
           <th>Regla</th>
         </tr>
       </thead>
@@ -42,4 +45,5 @@
       {% endfor %}
       </tbody>
     </table>
+  </div>
 {% endblock body %}

templates/index.html

@@ -1,33 +1,91 @@
 {% extends "base.html" %}
 {% block title %}Index{% endblock title %}
 {% block body %}
-<div><h2 class="text-lg">Accounts</h2></div>
-<div>
-  {% for account in accounts %}
-    <a class="p-2 hover:bg-stone-200" href="/accounts/id/{{account.account_id}}">{{account.account_name}}</a>
-  {% endfor %}
-</div>
-<div><h2 class="text-lg">Last transactions</h2></div>
-<div>
-  <table>
+<div class="mb-4">
+  <h2 class="text-lg">Accounts</h2>
+  <table width="100%">
     <thead>
       <tr>
+        <th width="10%">ID</th>
         <th>Description</th>
-        <th>Date</th>
-        <th>Amount</th>
-        <th>Category</th>
+        <th width="30%">Accumulated</th>
+        <th width="20%">Go to</th>
+      </tr>
+    </thead>
+    <tbody>
+    {% for account in accounts %}
+      <tr>
+        <td style="text-align: center;">{{ account.id }}</td>
+        <td style="text-align: center;">{{ account.description }}</td>
+        <td style="text-align: center;">{{ account.accumulated | round(precision=2) }}</td>
+        <td style="text-align: center;">
+          <a class="p-2 hover:bg-stone-200" href="/accounts/id/{{ account.id }}">{{ account.description }}</a>
+        </td>
+      </tr>
+    {% endfor %}
+    </tbody>
+  </table>
+</div>
+<div class="mb-4">
+  <h2 class="text-lg">Last month summary</h2>
+  <div style="width: 200px; height: 200px;">
+    <canvas id="chart" style="width: 200px; height: 200px;"></canvas>
+  </div>
+</div>
+<div>
+  <h2 class="text-lg">Last transactions</h2>
+  <table width="100%">
+    <thead>
+      <tr>
+        <th width="40%">Description</th>
+        <th width="20%">Date</th>
+        <th width="20%">Amount</th>
+        <th width="20%">Category</th>
       </tr>
     </thead>
     <tbody>
       {% for tx in transactions %}
-      <tr>
+      <tr onclick="document.href='transactions/{{tx.transaction_id}}'">
         <td>{{tx.description}}</td>
-        <td>{{tx.transaction_timestamp}}</td>
+        <td>{{tx.tx_date}}</td>
         <td>{{tx.amount/100}}</td>
-        <td>{{tx.category}}</td>
+          <td>{% if tx.category %}{{categories[tx.category]}}{% endif %}</td>
       </tr>
       {% endfor %}
     </tbody>
   </table>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script>
+    const ctx = document.getElementById('chart');
+    new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: [
+          {% for i in income -%}
+            'Income: {{ categories[i.0] }}',
+          {% endfor -%}
+          {% for e in expenses -%}
+            'Expenses: {{ categories[e.0] }}',
+          {% endfor -%}
+        ],
+        datasets: [{
+          label: 'Amount',
+          data: [
+          {% for i in income -%}
+            {{ i.1/100 }},
+          {% endfor -%}
+          {% for e in expenses -%}
+            {{ e.1/100 }},
+          {% endfor -%}
+          ],
+          backgroundColor: [
+            {% for c in colors -%}
+            '#{{c}}',
+            {% endfor -%}
+          ]
+        }]
+      }
+    })
+  </script>
 </div>
 {% endblock body %}

templates/transaction.html

@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% block title %}Transaction {{tx_id}}{% endblock title %}
+{% block body %}
+<div class="mb-4">
+  <form method="post">
+    <div class="mb-2">
+      <label class="ars-input">
+        Name
+        <input type="text" name="description" value="{{tx.description}}" />
+      </label>
+    </div>
+    <div class="mb-2">
+      <label class="ars-input">
+        Date
+        <input type="text" name="date" value="{{tx.tx_date}}" />
+      </label>
+    </div>
+    <div class="mb-2">
+      <label class="ars-input">
+        Amount
+        <input type="text" name="amount" value="{{ tx.amount/100 }}" />
+      </label>
+    </div>
+    <div class="mb-2">
+      <label class="ars-input">
+        Category
+        <select style="width: 100%;" name="category">
+          <option></option>
+          {% for c in categories %}
+          <option {% if tx.category and c.category_id==tx.category %}selected{% endif %} value="{{ c.category_id }}">
+            {{ c.name }}
+          </option>
+          {% endfor %}
+        </select>
+      </label>
+    </div>
+    <div style="text-align: right;">
+      <input class="ars-button" type="submit" value="Update" />
+  </form>
+</div>
+{% endblock body %}