pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add opening and closing balance to transactions card

Browse Source
This commit is contained in:
Wim Brand
2024-07-11 18:01:24 +02:00
parent 2bfb2f0957
commit f388fc9c6f
2 changed files with 46 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte
View File

@@ -19,6 +19,8 @@ let transactions = {
total_bandwidth_charge: 0, total_bandwidth_charge: 0,
total_deposited: 0, total_deposited: 0,
total_deducted: 0, total_deducted: 0,
balance_start: 0,
balance_end: 0,
} }
const load_transactions = async () => { const load_transactions = async () => {
@@ -45,6 +47,13 @@ const load_transactions = async () => {
total_bandwidth_charge: 0, total_bandwidth_charge: 0,
total_deposited: 0, total_deposited: 0,
total_deducted: 0, total_deducted: 0,
balance_start: 0,
balance_end: 0,
}
if (month.rows && month.rows.length > 0) {
month.balance_start = month.rows[0].new_balance
month.balance_end = month.rows[month.rows.length-1].new_balance
} }
month.rows.forEach(row => { month.rows.forEach(row => {
@@ -105,30 +114,44 @@ onMount(() => {
<Button click={next_month} icon="chevron_right"/> <Button click={next_month} icon="chevron_right"/>
</div> </div>
<ul> <table>
<li> <tr>
Total charge: <Euro amount={transactions.total_deducted} precision="4"/> <td>Opening balance</td>
</li> <td><Euro amount={transactions.balance_start} precision="4"/></td>
<li> </tr>
Subscription charge: <Euro amount={transactions.total_subscription_charge} precision="4"/> <tr>
</li> <td>Closing balance</td>
<li> <td><Euro amount={transactions.balance_end} precision="4"/></td>
Storage charge: <Euro amount={transactions.total_storage_charge} precision="4"/> </tr>
(used {formatDataVolume(transactions.total_storage_used, 3)}) <tr>
</li> <td>Total charge</td>
<li> <td><Euro amount={transactions.total_deducted} precision="4"/></td>
Bandwidth charge: <Euro amount={transactions.total_bandwidth_charge} precision="4"/> </tr>
(used {formatDataVolume(transactions.total_bandwidth_used, 3)}) <tr>
</li> <td>Subscription charge</td>
<li> <td><Euro amount={transactions.total_subscription_charge} precision="4"/></td>
Deposited: <Euro amount={transactions.total_deposited} precision="4"/> </tr>
</li> <tr>
</ul> <td>Storage charge</td>
<td>
<Euro amount={transactions.total_storage_charge} precision="4"/>
(used {formatDataVolume(transactions.total_storage_used, 3)})
</td>
</tr>
<tr>
<td>Bandwidth charge</td>
<td>
<Euro amount={transactions.total_bandwidth_charge} precision="4"/>
(used {formatDataVolume(transactions.total_bandwidth_used, 3)})
</td>
</tr>
<tr>
<td>Deposited</td>
<td><Euro amount={transactions.total_deposited} precision="4"/></td>
</tr>
</table>
<style> <style>
ul {
margin: 0;
}
.toolbar { .toolbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
svelte/src/user_home/dashboard/Dashboard.svelte
View File

@@ -149,7 +149,7 @@ onMount(() => {
<div class="cards"> <div class="cards">
{#each cards as card, i (card.id)} {#each cards as card, i (card.id)}
{#if card.size === 0} {#if card.size === 0}
<div class="card"> <div class="card size_1">
<div class="title_box"> <div class="title_box">
{#if card.link} {#if card.link}
<Button link_href={card.link} icon="link" flat/> <Button link_href={card.link} icon="link" flat/>