Many new functionalities

client/src/app/home-page.component.html

@@ -261,6 +261,63 @@
                 }
               </div>
             </section>
+
+            @if (session.isApprovalAdmin()) {
+              <section class="access-key-panel mt-4">
+                <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
+                  <div>
+                    <h3 class="h5 mb-1">User administration</h3>
+                    <p class="small text-secondary mb-0">Delete any user account directly from SQLite.</p>
+                  </div>
+                  <button
+                    class="btn btn-sm btn-outline-light"
+                    type="button"
+                    [disabled]="loadingAdminUsers()"
+                    (click)="reloadAdminUsers()"
+                  >
+                    Refresh
+                  </button>
+                </div>
+
+                @if (adminUsersError()) {
+                  <div class="alert alert-danger mb-3">{{ adminUsersError() }}</div>
+                }
+
+                <div class="d-grid gap-2">
+                  @if (loadingAdminUsers()) {
+                    <div class="empty-state p-3 text-center text-secondary">Loading users...</div>
+                  } @else if (adminUsers().length === 0) {
+                    <div class="empty-state p-3 text-center text-secondary">No users found.</div>
+                  } @else {
+                    @for (user of adminUsers(); track user.id) {
+                      <article class="access-key-card p-3">
+                        <div class="d-flex justify-content-between align-items-start gap-3">
+                          <div>
+                            <div class="fw-semibold">{{ user.displayName }}</div>
+                            <div class="small text-secondary">@{{ user.username }}</div>
+                            <div class="small text-secondary">
+                              {{ user.isActive ? 'Approved' : 'Pending approval' }}
+                              @if (user.approvedAt) {
+                                · {{ user.approvedAt | date: 'short' }}
+                              }
+                            </div>
+                            <div class="small text-secondary">Created: {{ user.createdAt | date: 'medium' }}</div>
+                          </div>
+                          <button
+                            class="btn btn-sm btn-outline-danger"
+                            type="button"
+                            [disabled]="deletingUserId() === user.id"
+                            (click)="deleteUser(user)"
+                          >
+                            {{ deletingUserId() === user.id ? 'Deleting...' : 'Delete user' }}
+                          </button>
+                        </div>
+                      </article>
+                    }
+                  }
+                </div>
+              </section>
+            }
           </div>
         </div>
       </section>