[ADD] journal explanations (WIP), reconcile button & animation
This commit is contained in:
Xavier Morel
@@ -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;
|
||||
}
|
||||
|
||||
+108
-23
@@ -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: []
|
||||
}
|
||||
]);
|
||||
}());
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user