Simple Managment webapp [LLM]

webapp/src/app/features/clients/client-list/client-list.component.html

@@ -0,0 +1,68 @@
+<div class="page-content">
+  <div class="page-header">
+    <h2>Clients</h2>
+    <button nz-button (click)="loadClients()">
+      <span nz-icon nzType="reload"></span>
+      Refresh
+    </button>
+  </div>
+
+  <nz-card>
+    <nz-table
+      #clientTable
+      [nzData]="clients()"
+      [nzLoading]="loading()"
+      [nzShowPagination]="false"
+      nzSize="middle"
+    >
+      <thead>
+        <tr>
+          <th nzWidth="5%"></th>
+          <th nzWidth="20%">Name</th>
+          <th nzWidth="15%">Type</th>
+          <th nzWidth="25%">Agent</th>
+          <th nzWidth="20%">Created</th>
+          <th nzWidth="15%">Client ID</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (client of clients(); track client.client_id) {
+          <tr>
+            <td>
+              <span
+                nz-icon
+                [nzType]="getClientIcon(client.type)"
+                nzTheme="outline"
+                class="client-icon"
+              ></span>
+            </td>
+            <td>{{ client.name || '-' }}</td>
+            <td>
+              <nz-tag>{{ getClientTypeLabel(client.type) }}</nz-tag>
+            </td>
+            <td>
+              <div class="agent-info">
+                <span>{{ client.agent_model }}</span>
+                <span class="agent-version">v{{ client.agent_version }}</span>
+              </div>
+            </td>
+            <td>
+              <span nz-tooltip [nzTooltipTitle]="client.timestamp_created">
+                {{ client.timestamp_created | relativeTime }}
+              </span>
+            </td>
+            <td>
+              <span class="mono client-id">{{ client.client_id }}</span>
+            </td>
+          </tr>
+        } @empty {
+          <tr>
+            <td colspan="6">
+              <nz-empty nzNotFoundContent="No clients registered"></nz-empty>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </nz-table>
+  </nz-card>
+</div>