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

This commit is contained in:
Xavier Morel 2015-03-10 13:02:16 +01:00
parent 5299abc241
commit b3753aecac
5 changed files with 193 additions and 45 deletions

View File

@ -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;
}

View File

@ -48,21 +48,33 @@
});
var FormatEntry = React.createClass({
render: function () {
return React.DOM.table(
{className: 'table table-condensed d-c-table'},
React.DOM.thead(
null,
React.DOM.tr(
var entry = this.props.entry;
return React.DOM.div(
null,
React.DOM.table(
{className: 'table table-condensed d-c-table'},
React.DOM.thead(
null,
React.DOM.th(),
React.DOM.th(null, "Debit"),
React.DOM.th(null, "Credit")
React.DOM.tr(
null,
React.DOM.th(),
React.DOM.th(null, "Debit"),
React.DOM.th(null, "Credit")
)
),
React.DOM.tbody(
null,
this.render_rows()
)
),
React.DOM.tbody(
null,
this.render_rows()
)
React.createElement(Listing, {
heading: "Explanation",
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: []
}
]);
}());

34
_static/reconciliation.js Normal file
View File

@ -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);
});
});
})();

View File

@ -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')

View File

@ -100,15 +100,15 @@ context. Common journals are:
Explanation:
. You generate a revenue of $1,000
. You have a tax to pay of $90
. The customer owes $1,090
- You generate a revenue of $1,000
- You have a tax to pay of $90
- The customer owes $1,090
Configuration:
. Income: defined on the product, or the product category
. Account Receivable: defined on the customer
. Tax: defined on the tax set on the invoice line
- Income: defined on the product, or the product category
- Account Receivable: defined on the customer
- 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 receive $1,090 on your bank account
- Your customer owes $1,090 less
- Your receive $1,090 on your bank account
Configuration:
. Bank Account: defined on the related bank journal
. Account Receivable: defined on the customer
- Bank Account: defined on the related bank journal
- 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
-------------------