diff options
Diffstat (limited to 'src/components/Balance.svelte')
| -rw-r--r-- | src/components/Balance.svelte | 29 |
1 files changed, 25 insertions, 4 deletions
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte index da26f6de..dfa5f616 100644 --- a/src/components/Balance.svelte +++ b/src/components/Balance.svelte @@ -6,8 +6,8 @@ import { t } from "$lib/translations"; let show = $state(); - let { user, rate, balance } = $props(); - let { currency } = $derived(user); + let { id, user, rate, balance } = $props(); + let { currency, locked } = $derived(user); let locale = loc(user); let toggleShow = (e) => { e.preventDefault(); @@ -23,11 +23,32 @@ <div> {#if user.haspin && !$pin} <button onclick={toggleShow} class="flex gap-2 text-xl"> - <iconify-icon noobserver icon="ph:eye-slash-bold" width="32"></iconify-icon> + <iconify-icon noobserver icon="ph:eye-slash-bold" width="32" + ></iconify-icon> <div class="my-auto">{$t("user.showBalance")}</div> </button> {:else if !isNaN(rate)} - <Amount amount={balance} {rate} {currency} {locale} align="left" /> + <div class="flex gap-4"> + <Amount + amount={Math.max(balance - (id === user.id ? (locked || 0) : 0), 0)} + {rate} + {currency} + {locale} + align="left" + /> + {#if locked && id === user.id} + <div class="text-red-600"> + <Amount + amount={locked} + {rate} + {currency} + {locale} + align="left" + locked={true} + /> + </div> + {/if} + </div> {:else} <div class="text-gray-200">—</div> {/if} |