Simple Managment webapp [LLM]

webapp/src/app/core/models/subscription.model.ts

@@ -31,5 +31,6 @@ export interface ConfirmSubscriptionRequest {
 export interface SubscriptionListResponse {
   subscriptions: Subscription[];
   next_page_token?: string;
-  page_size?: number;
+  page_size: number;
+  total_count: number;
 }

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -45,9 +45,9 @@
     </div>
   }
 
-  <nz-card>
   <nz-table
     #messageTable
+    nzBordered
     [nzData]="messages()"
     [nzLoading]="loading()"
     [nzShowPagination]="false"
@@ -119,5 +119,4 @@
       (nzPageIndexChange)="goToPage($event)"
     ></nz-pagination>
   </div>
-  </nz-card>
 </div>

webapp/src/app/features/messages/message-list/message-list.component.ts

@@ -9,7 +9,6 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
-import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
@@ -30,7 +29,6 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzIconModule,
     NzEmptyModule,
     NzSpinModule,
-    NzCardModule,
     NzToolTipModule,
     NzPaginationModule,
     RelativeTimePipe,

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.html

@@ -13,7 +13,6 @@
     </div>
   </div>
 
-  <nz-card>
   <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
     <nz-tab nzTitle="All"></nz-tab>
     <nz-tab nzTitle="Own"></nz-tab>
@@ -33,6 +32,7 @@
 
   <nz-table
     #subscriptionTable
+    nzBordered
     [nzData]="subscriptions()"
     [nzLoading]="loading()"
     [nzShowPagination]="false"
@@ -127,7 +127,16 @@
         }
       </tbody>
   </nz-table>
-  </nz-card>
+
+  <div class="pagination-controls">
+    <nz-pagination
+      [nzPageIndex]="currentPage()"
+      [nzPageSize]="pageSize"
+      [nzTotal]="totalCount()"
+      [nzDisabled]="loading()"
+      (nzPageIndexChange)="goToPage($event)"
+    ></nz-pagination>
+  </div>
 </div>
 
 <!-- Create Subscription Modal -->

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.scss

@@ -30,3 +30,9 @@
   font-size: 13px;
   margin-bottom: 16px;
 }
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}

webapp/src/app/features/subscriptions/subscription-list/subscription-list.component.ts

@@ -6,7 +6,6 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
-import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { NzModalModule } from 'ng-zorro-antd/modal';
@@ -14,6 +13,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzAlertModule } from 'ng-zorro-antd/alert';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
@@ -46,7 +46,6 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
     NzIconModule,
     NzTagModule,
     NzEmptyModule,
-    NzCardModule,
     NzTabsModule,
     NzPopconfirmModule,
     NzModalModule,
@@ -54,6 +53,7 @@ const TAB_CONFIGS: Record<SubscriptionTab, TabConfig> = {
     NzInputModule,
     NzToolTipModule,
     NzAlertModule,
+    NzPaginationModule,
     RelativeTimePipe,
   ],
   templateUrl: './subscription-list.component.html',
@@ -70,6 +70,11 @@ export class SubscriptionListComponent implements OnInit {
   loading = signal(false);
   activeTab: SubscriptionTab = 'all';
 
+  // Pagination
+  currentPage = signal(1);
+  pageSize = 50;
+  totalCount = signal(0);
+
   // Create subscription modal
   showCreateModal = signal(false);
   newChannelOwner = '';
@@ -86,11 +91,21 @@ export class SubscriptionListComponent implements OnInit {
 
     this.loading.set(true);
 
-    const filter = TAB_CONFIGS[this.activeTab].filter;
+    const filter: SubscriptionFilter = {
+      ...TAB_CONFIGS[this.activeTab].filter,
+      page_size: this.pageSize,
+    };
+
+    // Use page-index based pagination: $1 = page 1, $2 = page 2, etc.
+    const page = this.currentPage();
+    if (page > 1) {
+      filter.next_page_token = `$${page}`;
+    }
 
     this.apiService.getSubscriptions(userId, filter).subscribe({
       next: (response) => {
         this.subscriptions.set(response.subscriptions);
+        this.totalCount.set(response.total_count);
         this.loading.set(false);
         this.resolveUserNames(response.subscriptions);
       },
@@ -121,6 +136,12 @@ export class SubscriptionListComponent implements OnInit {
   onTabChange(index: number): void {
     const tabs: SubscriptionTab[] = ['all', 'own', 'deactivated', 'external', 'incoming'];
     this.activeTab = tabs[index];
+    this.currentPage.set(1);
+    this.loadSubscriptions();
+  }
+
+  goToPage(page: number): void {
+    this.currentPage.set(page);
     this.loadSubscriptions();
   }