58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
<section class="overview-page">
|
|
<header>
|
|
<p class="eyebrow">Teamübersicht</p>
|
|
<h1>{{ team()?.name ?? 'TeamWallet' }}</h1>
|
|
</header>
|
|
<div class="balance-grid">
|
|
<mat-card class="balance-card balance-card--primary"
|
|
><mat-card-content
|
|
><span>Teamkasse</span><strong>{{ team()?.balance ?? 0 | currency: 'EUR' }}</strong
|
|
><small>Verfügbarer Kassenstand</small></mat-card-content
|
|
></mat-card
|
|
>
|
|
<mat-card class="balance-card"
|
|
><mat-card-content
|
|
><span>Offene Beiträge</span
|
|
><strong>{{ team()?.outstanding ?? 0 | currency: 'EUR' }}</strong
|
|
><small>Summe aktiver Mitglieder</small></mat-card-content
|
|
></mat-card
|
|
>
|
|
</div>
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Zuletzt passiert</p>
|
|
<h2>Aktivitäten</h2>
|
|
</div>
|
|
</div>
|
|
@if (loadingActivities()) {
|
|
<div class="state"><mat-spinner diameter="32" /></div>
|
|
} @else if (activities().length === 0) {
|
|
<div class="state">
|
|
<mat-icon>receipt_long</mat-icon><strong>Noch keine Buchungen</strong
|
|
><span>Neue Aktivitäten erscheinen hier.</span>
|
|
</div>
|
|
} @else {
|
|
<div class="activity-list">
|
|
@for (activity of activities(); track activity.id) {
|
|
<article class="activity">
|
|
<div class="activity__icon">
|
|
<mat-icon>{{ activityIcon(activity) }}</mat-icon>
|
|
</div>
|
|
<div class="activity__copy">
|
|
<strong>{{ activity.playerName ?? 'Teamkasse' }}</strong
|
|
><span>{{ activity.note || activity.type }}</span
|
|
><small>{{ activity.date | date: 'dd.MM.yyyy' }}</small>
|
|
</div>
|
|
<strong>
|
|
<app-transaction-amount
|
|
[amount]="activity.amount"
|
|
[type]="activity.type"
|
|
[context]="activity.isTeamWalletTransaction ? 'team' : 'player'"
|
|
/>
|
|
</strong>
|
|
</article>
|
|
}
|
|
</div>
|
|
}
|
|
</section>
|