first commit

myteamwallet_frontend_modern/src/app/features/team/overview/overview.html

@@ -0,0 +1,53 @@
+<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 class="activity__amount" [class.negative]="displayAmount(activity) < 0">{{
+            displayAmount(activity) | currency: 'EUR'
+          }}</strong>
+        </article>
+      }
+    </div>
+  }
+</section>