E2EE Group Finance Management
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

150 lines
3.2 KiB

<style>
.transaction {
margin: 1em 0.5em;
padding: 0.5em;
border-radius: 5px;
border: 2px solid var(--c1);
position: relative;
min-width: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
}
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0 0 0.5em 0;
}
header h1 {
margin: 0.5em 0;
text-align: center;
font-weight: 300;
}
.modifications {
display: flex;
justify-content: flex-end;
gap: 0.25em;
}
.modifications button {
float: right;
margin: 0;
border: none;
background-color: var(--c5);
border: 1px solid var(--c1);
padding: 0.5em 0.75em;
font-size: 0.6em;
vertical-align: middle;
}
.transaction .value {
text-align: center;
display: block;
background-color: var(--c2);
color: var(--c5);
border-radius: 5px;
font-size: 1.4em;
padding: 0.2em;
margin: 0.2em 0;
}
table {
border-collapse: collapse;
border-radius: 5px;
overflow: hidden;
width: 100%;
}
tr td {
padding: 0.25em 0;
text-align: center;
}
tr.debited {
background: var(--red);
}
tr.credited {
background: var(--green);
}
tr.credited:nth-child(odd),
tr.debited:nth-child(odd) {
filter: brightness(0.9);
}
.balance-impact {
font-size: 0.8em;
padding: 0.25em;
text-align: center;
margin-top: auto;
}
</style>
<script lang="typescript">
import type { Transaction } from "@app/classes/transaction.classes";
import { createEventDispatcher } from "svelte";
export let transaction: Transaction;
export let currencyFormatter: Intl.NumberFormat;
export let viewingMemberId: string;
// When `viewingMember` changes, recalcute the impact total of
// this transaction
$: impactTotal = transaction.impactOnMember(viewingMemberId);
const dispatch = createEventDispatcher();
</script>
<div class="transaction">
<header>
<h1>{transaction.title}</h1>
<div class="modifications">
<button
on:click="{() => {
dispatch('Edit', { transaction: transaction });
}}"
>
✏️
</button>
<button
on:click="{() => {
dispatch('Delete', { transaction: transaction });
}}"
>
</button>
</div>
</header>
<p class="value">{currencyFormatter.format(transaction.total / 100)}</p>
<table>
{#each transaction.credits as m (m.id)}
<tr class="credited">
<td>{m.name}</td>
<td>{currencyFormatter.format(m.amount / 100)}</td>
</tr>
{/each}
{#each transaction.debits as m (m.id)}
<tr class="debited">
<td>{m.name}</td>
<td>{currencyFormatter.format(m.amount / 100)}</td>
</tr>
{/each}
</table>
{#if impactTotal != 0}
<span class="balance-impact"
>Balance Impact: <strong
>{currencyFormatter.format(impactTotal / 100)}</strong
></span
>
{/if}
</div>