Add colors, fix bugs

financer-web-client/src/main/resources/static/changelog.txt

@@ -1,3 +1,8 @@
+v24 -> v25:
+- Add color column in account overview
+- Fix a bug that caused the chart generation to crash
+- Exclude START bookings from expense history
+
 v23 -> v24:
 - Mark accounts that are overspend, meaning their spending in the current period is greater than the average spending of
   that account

financer-web-client/src/main/resources/static/css/main.css

@@ -1,6 +1,13 @@
 /* Variable declarations */
 :root {
     --error-color: #D30000/*#ff6666*/;
+    --bank-color: #008FFB;
+    --cash-color: #FFCB00;
+    --income-color: #00A900;
+    --liability-color: #D36000;
+    --expense-color: #D30000;
+    --start-color: #AB005D;
+    --type-row-width: 5px;
 }
 /* --------------------- */
 
@@ -139,4 +146,45 @@ input[type=submit] {
 .errorMessage {
     color: var(--error-color);
     display: block;
+}
+
+.bank-row {
+    background-color: var(--bank-color) !important;
+    width: var(--type-row-width);
+    padding: 0px !important
+}
+
+.cash-row {
+    background-color: var(--cash-color) !important;
+    width: var(--type-row-width);
+    padding: 0px !important
+}
+
+.income-row {
+    background-color: var(--income-color) !important;
+    width: var(--type-row-width);
+    padding: 0px !important
+}
+
+.liability-row {
+    background-color: var(--liability-color) !important;
+    width: var(--type-row-width);
+    padding: 0px !important
+}
+
+.expense-row {
+    background-color: var(--expense-color) !important;
+    width: var(--type-row-width);
+    padding: 0px !important
+}
+
+.start-row {
+    background-color: var(--start-color) !important;
+    width: var(--type-row-width);
+    padding: 0px !important
+}
+
+#type-row {
+    width: var(--type-row-width);
+    padding: 0px !important
 }

financer-web-client/src/main/resources/static/readme.txt

@@ -19,13 +19,40 @@
 
     1. About
     ========
-    This is the manual for the financer application - a simple app to manage your personal finances.
+    This is the manual for the financer application - a simple app to support you in managing your personal finances.
+
+    The main goal of the financer application is to keep things simple by not attempting to provide sophisticated
+    automation. Instead it is merely a tool that provides basic key values to support you.
 
     2. Overview
     ===========
 
     3. Architectural overview
     =========================
+    The financer application currently consists of two components - a server and a client. They communicate via a JSON
+    REST API. The only available client is a web client that supports a boiled down view for mobile devices, though.
+
+    Both client (-web-client) and server (-server) reside in dedicated Maven modules, with a common (-common) module
+    that holds common model classes and DTOs. Both components are layered:
+
+                                                                 ____________     C
+                                                                | Controller |    L
+                                                                |------------|    I
+                                                                | Chart      |    E
+                         S     ____________                     |------------|    N
+                         E    | Controller |<-------REST--------| Template   |    T
+                         R    |------------|                    '------------'
+                         V    | Service    |
+                         E    |------------|
+                         R    | DBA        |
+                              '------------'
+                                    |
+                                    |
+                                ,-------,
+                                |  DB   |
+                                '-------'
+
+    Each component is contained in a distinct artifact.
 
     4. Account types
     ================
@@ -115,6 +142,24 @@
 
     6. Account groups
     =================
+    Account groups are a simple way to group account into topics. Imagine the following accounts:
+     - Rent
+     - Electricity
+     - Water
+     - Groceries
+     - Takeaway
+     - Coffee shop
+     - Cinema
+     - Netflix
+
+    They could be grouped via the following three groups:
+     - Housing for Rent, Electricity and Water
+     - Food for Groceries, Takeaway and Coffee shop
+     - Entertainment for Cinema and Netflix
+
+    This additional hierarchy level is actively used by reports to provide a better picture about where money is spent.
+    The financer application makes no hard guidelines on how to model your accounts and account groups, so you can model
+    them matching your needs.
 
     7. Transactions
     ===============

financer-web-client/src/main/resources/templates/account/accountOverview.html

@@ -66,6 +66,7 @@
 </div>
 <table id="account-overview-table">
     <tr>
+        <th id="type-row" />
         <th class="hideable-column" th:text="#{financer.account-overview.table-header.id}"/>
         <th th:text="#{financer.account-overview.table-header.key}"/>
         <th th:text="#{financer.account-overview.table-header.balance}"/>
@@ -76,6 +77,12 @@
         <th class="hideable-column" th:text="#{financer.account-overview.table-header.status}"/>
     </tr>
     <tr th:each="acc : ${accounts}">
+        <th class="bank-row" th:if="${acc.type == T(de.financer.model.AccountType).BANK}" />
+        <th class="cash-row" th:if="${acc.type == T(de.financer.model.AccountType).CASH}" />
+        <th class="income-row" th:if="${acc.type == T(de.financer.model.AccountType).INCOME}" />
+        <th class="liability-row" th:if="${acc.type == T(de.financer.model.AccountType).LIABILITY}" />
+        <th class="expense-row" th:if="${acc.type == T(de.financer.model.AccountType).EXPENSE}" />
+        <th class="start-row" th:if="${acc.type == T(de.financer.model.AccountType).START}" />
         <td class="hideable-column" th:text="${acc.id}"/>
         <td>
             <a th:href="@{/accountDetails(key=${acc.key})}" th:text="${acc.key}"/>