A member's dividend on share capital and patronage refund for a year: bases, rates and amounts, the withholding tax and the net.
Bayanihan Multi-Purpose Cooperative
Lourdes VillanuevaM-004217
| Item | Base | Rate | Amount |
|---|---|---|---|
| Dividend on share capitalAverage share capital | ₱18,437.50 | 6.5% | ₱1,198.44 |
| Patronage refundInterest paid on loans | ₱24,512.80 | 12% | ₱2,941.54 |
| Total before tax | ₱4,139.98 | ||
| Withholding tax | 10% | minus ₱414.00 | |
| Net | ₱3,725.98 |
Lakeshore Teachers Credit Union
Harriet OkaforCU-88213
| Item | Base | Rate | Amount |
|---|---|---|---|
| Dividend on share capitalAverage share balance | $2,350.00 | 3.25% | $76.38 |
| Net | $76.38 |
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/dividend_statement.qweimport ui/theme.qwe use theme_cssuse ui/dividend_statement.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>The code of the preview above.
view DividendStatementDemo() = <div.demo-stack> <DividendStatement id="dividend-statement-demo" year={2025} member="Lourdes Villanueva" number="M-004217" coop="Bayanihan Multi-Purpose Cooperative" currency="PHP" share_base={18437.50} dividend_rate={6.5} patronage_base="24512.80" patronage_rate={12} tax_rate={10} paid="2026-03-31" credited="Savings account •••• 4821" note="Approved by the General Assembly of March 14, 2026."/> <DividendStatement id="dividend-statement-demo-cu" year={2025} member="Harriet Okafor" number="CU-88213" coop="Lakeshore Teachers Credit Union" share_base={2350} dividend_rate={3.25} share_label="Average share balance" credited="Share savings •••• 0377"/> </div>// DividendStatement: what a member of a co-op or credit union earned for a year:// the dividend (interest) on their share capital and the patronage refund on// what they paid or bought, each with its base and rate, then the withholding tax// and the net. The amounts are worked out here, exactly, in the currency.//// <DividendStatement year={2025} member="Lourdes Villanueva" number="M-004217" currency="PHP"// share_base={18000} dividend_rate={6.5} patronage_base={24500} patronage_rate={12}// tax_rate={10} paid="2026-03-31" credited="Savings account •••• 4821"/>//// year: the year it is for. member, number: who. coop: the co-op's name at the top.// share_base: what the dividend is on (the average share capital, by default// called so; share_label renames it); dividend_rate: its rate, in percent (6.5// for 6.5%). patronage_base: what the refund is on (interest paid on loans, or// purchases: patronage_label, "Interest paid on loans"); patronage_rate: its rate// in percent. Either pair may be left out. tax_rate: the withholding tax in// percent of the total (left out, no tax line); tax_label ("Withholding tax").// Rates and bases are numbers, decimals or numeric text; amounts are rounded to// the currency's cents half up. currency: ISO code ("USD"); locale: how to write// amounts (the program's). paid: the date it was paid, ISO. credited: where the// net went ("Savings account •••• 4821"). note: a line at the bottom. id: the// element's id.//// dividend_statement_figures(...) gives the amounts as money, for a program's own use.import ui/theme.qwe use ui_clslet dividend_statement_css = css`.ui-dividend-statement { display: grid; gap: 18px; min-width: 0; max-width: 640px; padding: 24px 26px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-fg); font: 14px/1.45 var(--ui-font); }.ui-dividend-statement-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }.ui-dividend-statement-coop { margin: 0 0 2px; color: var(--ui-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }.ui-dividend-statement .ui-dividend-statement-title { display: block; margin: 0; font-size: 19px; font-weight: 650; line-height: 1.25; }.ui-dividend-statement-who { margin: 0; text-align: right; }.ui-dividend-statement-who b { display: block; font-weight: 600; }.ui-dividend-statement-who span { color: var(--ui-muted); font-family: var(--ui-mono); font-size: 13px; }.ui-dividend-statement-scroll { overflow-x: auto; }.ui-dividend-statement table { width: 100%; border-collapse: collapse; }.ui-dividend-statement th { padding: 8px 10px; border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }.ui-dividend-statement td, .ui-dividend-statement tbody th { padding: 10px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }.ui-dividend-statement tbody th { color: var(--ui-fg); font-size: 14px; font-weight: 500; white-space: normal; }.ui-dividend-statement-basis { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 400; }.ui-dividend-statement .ui-dividend-statement-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }.ui-dividend-statement .ui-dividend-statement-gross th, .ui-dividend-statement .ui-dividend-statement-gross td { font-weight: 600; }.ui-dividend-statement-tax td.ui-dividend-statement-num:last-child { color: var(--ui-danger); }.ui-dividend-statement .ui-dividend-statement-net th, .ui-dividend-statement .ui-dividend-statement-net td { border-bottom: 0; border-top: 2px solid var(--ui-fg); font-size: 16px; font-weight: 700; }.ui-dividend-statement-net td:last-child { color: var(--ui-success); }.ui-dividend-statement-foot { display: grid; gap: 4px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: 13px; }.ui-dividend-statement-foot p { margin: 0; }.ui-dividend-statement-foot b { color: var(--ui-fg); font-weight: 500; }@media (max-width: 520px) { .ui-dividend-statement { padding: 18px 16px; } .ui-dividend-statement-who { text-align: left; } }@media print { .ui-dividend-statement { border: 0; padding: 0; background: #fff; color: #000; } }`// A rate in percent as written: "6.5%", "12%".fn dividend_statement_rate(r) -> str = `${str(dec(r))}%`// An amount of money (or a plain amount) in its currency.fn dividend_statement_money(m, locale: str?) -> str = locale != null ? money.format(m, locale) : money.format(m)// The statement's amounts as money: { dividend, patronage, gross, tax, net }; dividend,// patronage and tax are null where their base or rate is.fn dividend_statement_figures(share_base, dividend_rate, patronage_base, patronage_rate, tax_rate, currency: str) { let zero = money.zero(currency) let part = (base, rate) => base == null || rate == null ? null : money.mul(money.of(dec(base), currency, "half_up"), dec(rate) / 100, "half_up") let dividend = part(share_base, dividend_rate) let patronage = part(patronage_base, patronage_rate) let gross = money.add(dividend ?? zero, patronage ?? zero) let tax = tax_rate == null ? null : money.mul(gross, dec(tax_rate) / 100, "half_up") { dividend, patronage, gross, tax, net: tax == null ? gross : money.sub(gross, tax) }}// An ISO date as "Mar 31, 2026"; other text as it is.fn dividend_statement_date(d, locale: str?) -> str = date.valid(str(d), "date") ? date.format(str(d), { locale: locale ?? "en-US", style: "medium" }) : str(d)view DividendStatement(year, member: str, number: str? = null, coop: str? = null, share_base = null, dividend_rate = null, share_label: str = "Average share capital", patronage_base = null, patronage_rate = null, patronage_label: str = "Interest paid on loans", tax_rate = null, tax_label: str = "Withholding tax", currency: str = "USD", locale: str? = null, paid = null, credited: str? = null, note: str? = null, id: str? = null, class: str? = null) { style global dividend_statement_css let f = dividend_statement_figures(share_base, dividend_rate, patronage_base, patronage_rate, tax_rate, currency) let shown = (m) => dividend_statement_money(m, locale) let base = (x) => shown(money.of(dec(x), currency, "half_up")) <article class={ui_cls(["ui-dividend-statement", class])} id={id} aria-label={`Dividend statement ${year}, ${member}`}> <header.ui-dividend-statement-head> <div> {coop != null && <p.ui-dividend-statement-coop>{coop}</p>} <h3.ui-dividend-statement-title>Dividend and patronage refund, {year}</h3> </div> <p.ui-dividend-statement-who><b>{member}</b>{number != null && <span>{number}</span>}</p> </header> <div.ui-dividend-statement-scroll> <table> <thead><tr> <th scope="col">Item</th> <th.ui-dividend-statement-num scope="col">Base</th> <th.ui-dividend-statement-num scope="col">Rate</th> <th.ui-dividend-statement-num scope="col">Amount</th> </tr></thead> <tbody> {f.dividend != null && <tr.ui-dividend-statement-dividend> <th scope="row">Dividend on share capital<span.ui-dividend-statement-basis>{share_label}</span></th> <td.ui-dividend-statement-num>{base(share_base)}</td> <td.ui-dividend-statement-num>{dividend_statement_rate(dividend_rate)}</td> <td.ui-dividend-statement-num>{shown(f.dividend)}</td> </tr>} {f.patronage != null && <tr.ui-dividend-statement-patronage> <th scope="row">Patronage refund<span.ui-dividend-statement-basis>{patronage_label}</span></th> <td.ui-dividend-statement-num>{base(patronage_base)}</td> <td.ui-dividend-statement-num>{dividend_statement_rate(patronage_rate)}</td> <td.ui-dividend-statement-num>{shown(f.patronage)}</td> </tr>} {f.tax != null && [ <tr.ui-dividend-statement-gross> <th scope="row">Total before tax</th><td></td><td></td> <td.ui-dividend-statement-num>{shown(f.gross)}</td> </tr>, <tr.ui-dividend-statement-tax> <th scope="row">{tax_label}</th><td></td> <td.ui-dividend-statement-num>{dividend_statement_rate(tax_rate)}</td> <td.ui-dividend-statement-num><span aria-hidden="true">−</span><span.ui-sr>minus </span>{shown(f.tax)}</td> </tr>, ]} <tr.ui-dividend-statement-net> <th scope="row">Net</th><td></td><td></td> <td.ui-dividend-statement-num>{shown(f.net)}</td> </tr> </tbody> </table> </div> {(paid != null || credited != null || note != null) && <footer.ui-dividend-statement-foot> {paid != null && <p>Paid <b><time datetime={str(paid)}>{dividend_statement_date(paid, locale)}</time></b>{credited != null && [" to ", <b>{credited}</b>]}</p>} {paid == null && credited != null && <p>Credited to <b>{credited}</b></p>} {note != null && <p>{note}</p>} </footer>} </article>}On DividendStatement: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.