Simple Managment webapp [LLM]

webapp/src/app/features/senders/sender-list/sender-list.component.html

@@ -0,0 +1,48 @@
+<div class="page-content">
+  <div class="page-header">
+    <h2>Senders</h2>
+    <button nz-button (click)="loadSenders()">
+      <span nz-icon nzType="reload"></span>
+      Refresh
+    </button>
+  </div>
+
+  <nz-card>
+    <nz-table
+      #senderTable
+      [nzData]="senders()"
+      [nzLoading]="loading()"
+      [nzShowPagination]="false"
+      nzSize="middle"
+    >
+      <thead>
+        <tr>
+          <th nzWidth="40%">Sender Name</th>
+          <th nzWidth="20%">Message Count</th>
+          <th nzWidth="40%">Last Used</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (sender of senders(); track sender.name) {
+          <tr>
+            <td>
+              <span class="sender-name">{{ sender.name || '(No name)' }}</span>
+            </td>
+            <td>{{ sender.count }}</td>
+            <td>
+              <span nz-tooltip [nzTooltipTitle]="sender.last_timestamp">
+                {{ sender.last_timestamp | relativeTime }}
+              </span>
+            </td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="3">
+              <nz-empty nzNotFoundContent="No senders found"></nz-empty>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </nz-table>
+  </nz-card>
+</div>

webapp/src/app/features/senders/sender-list/sender-list.component.scss

@@ -0,0 +1,14 @@
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+  }
+}
+
+.sender-name {
+  font-weight: 500;
+}

webapp/src/app/features/senders/sender-list/sender-list.component.ts

@@ -0,0 +1,51 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzEmptyModule } from 'ng-zorro-antd/empty';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { ApiService } from '../../../core/services/api.service';
+import { SenderNameStatistics } from '../../../core/models';
+import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+
+@Component({
+  selector: 'app-sender-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    NzTableModule,
+    NzButtonModule,
+    NzIconModule,
+    NzEmptyModule,
+    NzCardModule,
+    NzToolTipModule,
+    RelativeTimePipe,
+  ],
+  templateUrl: './sender-list.component.html',
+  styleUrl: './sender-list.component.scss'
+})
+export class SenderListComponent implements OnInit {
+  private apiService = inject(ApiService);
+
+  senders = signal<SenderNameStatistics[]>([]);
+  loading = signal(false);
+
+  ngOnInit(): void {
+    this.loadSenders();
+  }
+
+  loadSenders(): void {
+    this.loading.set(true);
+    this.apiService.getSenderNames().subscribe({
+      next: (response) => {
+        this.senders.set(response.senders);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      }
+    });
+  }
+}