[ADD] journal explanations (WIP), reconcile button & animation

_static/accounting.css

@@ -99,3 +99,42 @@ li > p {
         background-color: #030035;
     }
 }
+
+#reconciliation #example button {
+    display: block;
+    margin: 0 auto;
+}
+/* When .reconcile-accounts is added to section, hide .invoice2 then .invoice1
+   rows */
+@keyframes invoice1 {
+    50% {
+        font-size: 100%;
+        /* should have no effect on tr */
+        /* don't touch horizontal padding to avoid moving content too much */
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    100% {
+        font-size: 0%;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+@keyframes invoice2 {
+    0% {
+        font-size: 100%;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    100% {
+        font-size: 0%;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+.reconcile-accounts .invoice1, .reconcile-accounts .invoice1 td {
+    animation: invoice1 5s ease-in forwards;
+}
+.reconcile-accounts .invoice2, .reconcile-accounts .invoice2 td {
+    animation: invoice2 2.5s ease-in forwards;
+}

_static/entries.js

@@ -48,21 +48,33 @@
     });
     var FormatEntry = React.createClass({
         render: function () {
-            return React.DOM.table(
+            var entry = this.props.entry;
-                {className: 'table table-condensed d-c-table'},
+            return React.DOM.div(
-                React.DOM.thead(
+                null,
-                    null,
+                React.DOM.table(
-                    React.DOM.tr(
+                    {className: 'table table-condensed d-c-table'},
+                    React.DOM.thead(
                         null,
-                        React.DOM.th(),
+                        React.DOM.tr(
-                        React.DOM.th(null, "Debit"),
+                            null,
-                        React.DOM.th(null, "Credit")
+                            React.DOM.th(),
+                            React.DOM.th(null, "Debit"),
+                            React.DOM.th(null, "Credit")
+                        )
+                    ),
+                    React.DOM.tbody(
+                        null,
+                        this.render_rows()
                     )
                 ),
-                React.DOM.tbody(
+                React.createElement(Listing, {
-                    null,
+                    heading: "Explanation",
-                    this.render_rows()
+                    items: entry && entry.get('explanation')
-                )
+                }),
+                React.createElement(Listing, {
+                    heading: "Configuration",
+                    items: entry && entry.get('configuration')
+                })
             );
         },
         render_rows: function () {
@@ -84,6 +96,23 @@
             );
         }
     });
+    var Listing = React.createClass({
+        render: function () {
+            if (!this.props.items || this.props.items.isEmpty()) {
+                return React.DOM.div();
+            }
+            return React.DOM.div(
+                null,
+                React.DOM.h4(null, this.props.heading, ':'),
+                React.DOM.ul(
+                    null,
+                    this.props.items.map(function (item, index) {
+                        return React.DOM.li({key: index}, item);
+                    }).toArray()
+                )
+            );
+        }
+    });
 
     var entries = Immutable.fromJS([
         {
@@ -91,57 +120,102 @@
             operations: [
                 {account: 'Cash', debit: 10000},
                 {account: 'Common Stock', credit: 10000}
-            ]
+            ],
+            explanation: [
+                "The founders invest capital in the company",
+                "That capital is a debt of the company towards the founders",
+                "It is represented as shares into the ownership of the company",
+                "It is not a liability because it's not expected to be settled"
+            ],
+            configuration: []
         }, {
             title: "Buy work tooling (immediate cash payment)",
             operations: [
                 {account: 'Tooling', debit: 3000},
                 {account: 'Cash', credit: 3000}
-            ]
+            ],
+            explanation: [
+                "One asset (cash) is traded for an other asset (tooling)",
+                "No new liabilities incurred",
+                "Long-term assets are not expended immediately"
+            ],
+            configuration: []
         }, {
             title: "Buy work tooling (invoiced, to pay later)",
             operations: [
                 {account: 'Tooling', debit: 3000},
                 {account: 'Accounts Payable', credit: 3000}
-            ]
+            ],
+            explanation: [
+                "An asset can be acquired through a liability",
+                "Trade credits are short-term debts between businesses"
+            ],
+            configuration: []
         }, {
             title: "Pay supplier invoice",
             operations: [
                 {account: 'Accounts Payable', debit: 3000},
                 {account: 'Cash', credit: 3000}
-            ]
+            ],
+            explanation: [
+                "Liabilities must be settled",
+                "Settling a liability is an outflow of resources (assets)"
+            ],
+            configuration: []
         }, {
             title: "Cash sale (paid immediately)",
             operations: [
                 {account: 'Cash', debit: 100},
                 {account: 'Sales', credit: 100}
-            ]
+            ],
+            explanation: [],
+            configuration: []
         }, {
             title: "Invoiced sale (trade credit)",
             operations: [
                 {account: 'Accounts Receivable', debit: 1000},
                 {account: 'Sales', credit: 1000}
-            ]
+            ],
+            explanation: [
+                "A sale is revenue",
+                "What a client owes is an asset"
+            ],
+            configuration: []
         }, {
             title: "Customer pays invoice",
             operations: [
                 {account: 'Cash', debit: 1000},
                 {account: 'Accounts Receivable', credit: 1000}
-            ]
+            ],
+            explanation: [
+                "A client paying an invoice is a financial movement from one asset to an other"
+            ],
+            configuration: []
         }, {
             title: "Customer pays invoice, 10% early payment rebate",
             operations: [
                 {account: 'Cash', debit: 900},
                 {account: 'Sales Discount', debit: 100},
                 {account: 'Accounts Receivable', credit: 1000}
-            ]
+            ],
+            explanation: [
+                "Sales discounts are contra revenues",
+                "They are negative revenues, lowering effective revenue",
+                "They are not expenses"
+            ],
+            configuration: []
         }, {
             title: "Cash sale with tax",
             operations: [
                 {account: 'Cash', debit: 109},
                 {account: 'Sales', credit: 100},
                 {account: 'Taxes Payable', credit: 9}
-            ]
+            ],
+            explanation: [
+                "Selling with tax means there is tax to pay",
+                "Tax to pay is a liability"
+            ],
+            configuration: []
         }, {
             title: "Fiscal year cloture — positive earnings and 50% dividends",
             operations: [
@@ -156,7 +230,12 @@
                 null,
                 {account: 'Retained Earnings', debit: 500},
                 {account: 'Dividend Payable', credit: 500}
-            ]
+            ],
+            explanation: [
+                "Closing a fiscal year means transferring all P&L accounts to retained earnings",
+                "If the retained earnings account is positive, a dividend may be paid to owners/shareholders",
+            ],
+            configuration: []
         }, {
             title: "Fiscal year cloture — negative earnings and dividend irrelevant",
             operations: [
@@ -168,7 +247,13 @@
                 null,
                 {account: 'Retained Earnings', debit: 1000},
                 {account: 'Income Summary', credit: 1000}
-            ]
+            ],
+            explanation: [
+                "Dividends are paid from a positive retained earnings account",
+                "Net losses will lower retained earnings",
+                "Dividends may still be paid if the account is positive because of previous years"
+            ],
+            configuration: []
         }
     ]);
 }());

_static/reconciliation.js

@@ -0,0 +1,34 @@
+(function () {
+    document.addEventListener('DOMContentLoaded', function () {
+        var $rec = $('#reconciliation #example');
+        var $btn = $('<button class="btn btn-success" type="button">')
+            .text("Reconcile")
+            .appendTo($rec);
+
+        var $1 = $rec.find('td:contains("Invoice 1"), td:contains("Payment 1")')
+            .parent()
+            .addClass('invoice1');
+        var $2 = $rec.find('td:contains("Invoice 2"), td:contains("Payment 2")')
+            .parent()
+            .addClass('invoice2');
+
+        // will be called multiple times (each tr + each td), doesn't matter
+        // since the behavior is constant
+        $rec.on('animationend webkitAnimationEnd MSAnimationEnd', function (e) {
+            switch (e.originalEvent.animationName) {
+            case 'invoice1':
+                $1.hide();
+                break;
+            case 'invoice2':
+                $2.hide();
+                break;
+            }
+        });
+
+        $btn.click(function () {
+            $rec.addClass('reconcile-accounts');
+            $btn.prop('disabled', true);
+        });
+    });
+})();
+

conf.py

@@ -269,7 +269,8 @@ def setup(app):
     app.add_javascript('prefixfree.min.js')
     app.add_javascript('atom.js')
     app.add_javascript('immutable.js')
-    app.add_javascript('react.js')
+    app.add_javascript('react.min.js')
     app.add_javascript('accounts.js')
     app.add_javascript('chart-of-accounts.js')
     app.add_javascript('entries.js')
+    app.add_javascript('reconciliation.js')

index.rst

@@ -100,15 +100,15 @@ context. Common journals are:
 
    Explanation:
 
-     . You generate a revenue of $1,000
+     - You generate a revenue of $1,000
-     . You have a tax to pay of $90
+     - You have a tax to pay of $90
-     . The customer owes $1,090
+     - The customer owes $1,090
 
    Configuration:
 
-     . Income: defined on the product, or the product category
+     - Income: defined on the product, or the product category
-     . Account Receivable: defined on the customer
+     - Account Receivable: defined on the customer
-     . Tax: defined on the tax set on the invoice line
+     - Tax: defined on the tax set on the invoice line
 
      The fiscal position used on the invoice may have a rule that
      replaces the Income Account or the tax defined on the product by another
@@ -118,18 +118,17 @@ context. Common journals are:
 
    Explanation:
 
-     . Your customer owes $1,090 less
+     - Your customer owes $1,090 less
-     . Your receive $1,090 on your bank account
+     - Your receive $1,090 on your bank account
 
    Configuration:
 
-     . Bank Account: defined on the related bank journal
+     - Bank Account: defined on the related bank journal
-     . Account Receivable: defined on the customer
+     - Account Receivable: defined on the customer
 
    .. todo::
 
       * help explaining what the operation is about?
-      * use radio buttons instead of the selection box
 
 Reconciliation
 ==============
@@ -160,9 +159,6 @@ The system can then use reconciliation to automatically mark invoices as paid
 Example
 -------
 
-* A customer got two invoices (invoice 1 and invoice 2) for 121€ and 63€
-* He sent two payments (payment 1 and payment 2) of 75€ each
-
 Reconciling on *Accounts Receivable* with all operations involving that
 specific customer will result in:
 
@@ -188,13 +184,6 @@ specific customer will result in:
 |Total To Pay             |50                       |                         |
 +-------------------------+-------------------------+-------------------------+
 
-.. todo::
-
-   Add a button "Reconcile", when clicked:
-
-   - slowly hide: Invoice 2, Payment 2
-   - then, slowly hide: Invoice 1, Payment 1.1, Payment 1.2
-
 Bank Reconciliation
 -------------------