NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] convert accounts listing to interactive

Browse Source 
* convert listickles to React widget
* add interactive hooks to introduction/definition paragraphs
* add highlighting to various items based on (2)

todo: ragged bottom edge using a SVG border-image?
This commit is contained in:
Xavier Morel 2015-02-17 16:40:09 +01:00
parent 931c1c8ec3
commit f8c3d0a326
5 changed files with 256 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
_static/accounting.css Normal file
View File

@ -0,0 +1,74 @@
li > p {
margin: 0;
cursor: pointer;
}
.related {
background-color: #cbdbf8 !important;
}
.secondary {
background-color: #dce6f8 !important;
}
.accounts-table {
font-size: 90%;
}
.accounts-table dl {
margin: 0;
}
.accounts-table h4 {
text-align: center;
color: rgb(152, 155, 158);
}
/* table root */
.accounts-table > div {
display: flex;
align-items: flex-start;
}
/* P&L & Balance Sheet columns */
.accounts-table > div > div {
flex: 1;
padding: 5px;
margin: 5%;
background-color: rgb(241, 244, 250);
border: 3px solid rgb(223, 231, 240);
border-radius: 3px;
}
/* sections */
.accounts-table > div > div div {
display: flex;
flex-direction: column;
}
.accounts-table > div > div div > h5 {
order: 99;
font-weight: bold;
text-transform: uppercase;
color: rgb(164, 168, 171);
padding: 0.3em 0;
border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 1 0 10 / 3px 0 3px;
}
.accounts-table > div > div div div > h5 {
/* slightly smaller than normal 14px h5 size */
font-size: 12.5px;
border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 1 0 1;
}
.accounts-table dt {
color: rgb(176, 178, 181);
font-weight: normal;
}
.accounts-table dt span {
font-style: italic;
}
.accounts-table dt span:last-child {
font-style: normal;
}
.accounts-table dd {
color: rgb(50, 50, 50);
}

137
_static/accounts.js Normal file
View File

@ -0,0 +1,137 @@
(function () {
'use strict';
function highlight(primary, secondary) {
return {
className: React.addons.classSet({
related: primary,
secondary: secondary
})
};
}
var AccountsTable = React.createClass({
render: function () {
return React.DOM.div(
null,
React.DOM.div(// P&L
highlight(this.props.current === 'p-l'),
React.DOM.h4(null, "Profit & Loss"),
React.DOM.div(
null,
React.DOM.h5(null, "Net Profit"),
React.DOM.div(
highlight(null, this.props.current === 'gross-profit'),
React.DOM.h5(
highlight(this.props.current === 'gross-profit'),
"Gross Profit"),
React.DOM.dl(
null,
React.DOM.dt(null, "Income"),
React.DOM.dd(
null,
"Revenue",
React.DOM.br(),
"Sales"),
React.DOM.dt(null, "Less ", "Cost of Sales"),
React.DOM.dd(null, "Direct Costs")
)
),
React.DOM.dl(
null,
React.DOM.dt(null, "Plus ", "Other Income"),
React.DOM.dd(null, "Other Income"),
React.DOM.dt(
highlight(this.props.current === 'opex'),
"Less ", "Expenses"),
React.DOM.dd(
highlight(null, this.props.current === 'opex'),
"Expenses", React.DOM.br(),
"Depreciation", React.DOM.br(),
"Overheads", React.DOM.br()
)
)
)
),
React.DOM.div(//Balance Sheet
highlight( this.props.current === 'balance'),
React.DOM.h4(null, "Balance Sheet"),
React.DOM.div(
null,
React.DOM.h5(null, "Net Assets"),
React.DOM.div(
null,
React.DOM.h5(highlight(this.props.current === 'assets'), "Total Assets"),
React.DOM.dl(
highlight(null, this.props.current === 'assets'),
React.DOM.dt(null, "Current Assets"),
React.DOM.dd(
null,
"Current Assets", React.DOM.br(),
"Prepayments", React.DOM.br()
),
React.DOM.dt(null, "Plus ", "Bank"),
React.DOM.dd(null, "Bank Accounts"),
React.DOM.dt(null, "Plus ", "Fixed Assets"),
React.DOM.dd(null, "Fixed Assets"),
React.DOM.dt(null, "Plus ", "Non-current Assets"),
React.DOM.dd(null, "Non-current Assets")
)
),
React.DOM.dl(
highlight(this.props.current === 'liabilities'),
React.DOM.dt(null, "Less ", "Current Liabilities"),
React.DOM.dd(null, "Current Liabilities"),
React.DOM.dt(null, "Less ", "Non-current liabilities"),
React.DOM.dd(null, "Liabilities", React.DOM.br(), "Non-current Liabilities")
)
),
React.DOM.div(
highlight(null, this.props.current === 'equity'),
React.DOM.h5(highlight(this.props.current === 'equity'), "Total Equity"),
React.DOM.dl(
null,
React.DOM.dt(null, "Equity"),
React.DOM.dd(null, "Equity"),
React.DOM.dt(null, "Plus ", "Net Profit")
)
)
)
);
}
});
document.addEventListener('DOMContentLoaded', function () {
var target = document.querySelector('.accounts-table');
function render(current) {
React.render(
React.createElement(AccountsTable, {current: current}),
target);
}
var list = document.querySelectorAll('.intro-list > li > p');
Array.prototype.forEach.call(list, function (node) {
node.addEventListener('mouseover', function (e) {
if (!e.currentTarget.contains(e.target)) { return; }
e.currentTarget.classList.add('secondary');
render(e.currentTarget.className.split(/\s+/).reduce(function (acc, cls) {
if (acc) { return acc; }
var m = /^intro-(.*)$/.exec(cls);
return m && m[1];
}, null));
});
node.addEventListener('mouseout', function (e) {
// mouseout always precedes mousenter even when going into a
// child element. Since re-render should be pretty fast (just
// setting or unsetting a pair of classes) don't try to avoid
// any thrashing, things should be fast enough either way. If
// they're not, batch operations on requestAnimationFrame
// instead.
e.currentTarget.classList.remove('secondary');
render(null);
});
})
render(null);
});
})();

5
_static/prefixfree.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
conf.py
View File

@ -265,8 +265,11 @@ texinfo_documents = [
#texinfo_no_detailmenu = False
def setup(app):
app.add_stylesheet('accounting.css')
app.add_javascript('prefixfree.min.js')
app.add_javascript('atom.js')
app.add_javascript('immutable.js')
app.add_javascript('react.js')
app.add_javascript('accounts.js')
app.add_javascript('chart-of-accounts.js')
app.add_javascript('fiscalyear.js')

57
index.rst
View File

@ -8,31 +8,48 @@ Financial accounting is used to know the situation of a company (its balance
sheet) and its performance (Profit and Loss, P&L). It is set up by reporting
every financial transaction in the relevant accounts of a Chart of Accounts.
**P&L** is always analysed on a specific period rather than since the
company's founding (e.g. 2014, Q3 2012, …).
.. rst-class:: intro-list
Gross profits is revenues (sales, interest, royalties) minus cost of goods
sold (raw materials, storage costs, production labor costs).
* .. rst-class:: intro-p-l
Operating expenses include administration, sales and R&D salaries as well as
rent and utilities, legal costs, insurance, ... anything beyond fabrication
itself.
**P&L** is always analysed on a specific period rather than since the
company's founding (e.g. 2014, Q3 2012, …).
**Balance sheet** is a snapshot of the situation at a specific moment, listing
the company's assets and its liabilities at that point.
* .. rst-class:: intro-gross-profit
**Assets** represent the company's wealth. A person's assets would be a house
or car ("fixed" or "tangible" assets), bank accounts or cash ("liquid" or
"current" assets). For a company, a client owing money is an asset. An
employee is not an asset as it is not owned by the company (slavery being
illegal under the International Covenant on Civil and Political Rights's
article 8).
**Gross profits** is revenues (sales, interest, royalties) minus cost of
goods sold (raw materials, storage costs, production labor costs).
**Liabilities** are obligations from past events resulting in future use or
transfer of current assets (utility bills, debts, payroll, unpaid suppliers).
* .. rst-class:: intro-opex
**Equity** is assets which have no liability counterpart: shares, other stocks
and surplus.
**Operating expenses** include administration, sales and R&D salaries as
well as rent and utilities, legal costs, insurance, ... anything beyond
fabrication itself.
* .. rst-class:: intro-balance
The **Balance sheet** is a snapshot of the situation at a specific moment,
listing the company's assets and its liabilities at that point.
* .. rst-class:: intro-assets
**Assets** represent the company's wealth. A person's assets would be a
house or car ("fixed" or "tangible" assets), bank accounts or cash ("liquid"
or "current" assets). For a company, a client owing money is an asset. An
employee is not an asset as it is not owned by the company (slavery being
illegal under the International Covenant on Civil and Political Rights's
article 8).
* .. rst-class:: intro-liabilities
**Liabilities** are obligations from past events resulting in future use or
transfer of current assets (utility bills, debts, payroll, unpaid
suppliers).
* .. rst-class:: intro-equity
**Equity** is assets which have no liability counterpart: shares, other
stocks and surplus.
Assets have necessarily been financed via liabilities or equity: a company can
buy work space through profits, borrowing money or injected capital (for
@ -42,7 +59,7 @@ A difference is made between assets (e.g. a building) and expenses (e.g. fuel)
in assets having intrinsic value over time, versus expenses having value in
them being consumed for the company to "work".
.. rst-class:: force-right
.. rst-class:: force-right accounts-table
.. figure:: images/accounts.png
:align: center