teamwallet/myteamwallet_frontend_modern/src/app/features/team/overview/overview.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>

  <section class="chart-block chart-block--balance">
    <div class="section-heading">
      <div>
        <p class="eyebrow">Kennzahlen</p>
        <h2>Kassenstand-Verlauf</h2>
      </div>
    </div>
    <mat-card class="chart-card">
      <mat-card-content>
        @if (loadingStats()) {
          <div class="state"><mat-spinner diameter="32" /></div>
        } @else if (balanceHistory().length === 0) {
          <div class="state">
            <mat-icon>show_chart</mat-icon><strong>Noch keine Kassenstand-Historie</strong
            ><span>Sobald Buchungen vorliegen, siehst du den Verlauf hier.</span>
          </div>
        } @else {
          <div class="chart-canvas-box">
            <app-chart-canvas type="line" [data]="balanceChartData()" [options]="balanceChartOptions" />
          </div>
        }
      </mat-card-content>
    </mat-card>
  </section>

  <section class="chart-block chart-block--flow">
    <div class="section-heading">
      <div>
        <p class="eyebrow">Kennzahlen</p>
        <h2>Einnahmen &amp; Ausgaben</h2>
      </div>
    </div>
    <mat-card class="chart-card">
      <mat-card-content>
        @if (loadingStats()) {
          <div class="state"><mat-spinner diameter="32" /></div>
        } @else if (monthlyFlow().length === 0) {
          <div class="state">
            <mat-icon>bar_chart</mat-icon><strong>Noch keine Bewegungen</strong
            ><span>Einnahmen und Ausgaben erscheinen hier pro Monat.</span>
          </div>
        } @else {
          <div class="chart-canvas-box">
            <app-chart-canvas type="bar" [data]="flowChartData()" [options]="flowChartOptions" />
          </div>
        }
      </mat-card-content>
    </mat-card>
  </section>

  <section class="chart-block chart-block--outstanding">
    <div class="section-heading">
      <div>
        <p class="eyebrow">Kennzahlen</p>
        <h2>Offene Beiträge (Top 10)</h2>
      </div>
    </div>
    <mat-card class="chart-card">
      <mat-card-content>
        @if (loadingStats()) {
          <div class="state"><mat-spinner diameter="32" /></div>
        } @else if (topOutstanding().length === 0) {
          <div class="state">
            <mat-icon>emoji_events</mat-icon><strong>Keine offenen Beiträge</strong
            ><span>Alle aktiven Mitglieder sind ausgeglichen.</span>
          </div>
        } @else {
          <div class="chart-canvas-box">
            <app-chart-canvas
              type="bar"
              [data]="topOutstandingChartData()"
              [options]="topOutstandingChartOptions"
            />
          </div>
        }
        <a mat-button class="chart-card__link" routerLink="../members"
          ><mat-icon>group</mat-icon>Alle Spieler ansehen</a
        >
      </mat-card-content>
    </mat-card>
  </section>

  <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>