Simple Managment webapp [LLM]

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

@@ -16,10 +16,21 @@
   <nz-card>
     <nz-tabset (nzSelectedIndexChange)="onTabChange($event)">
       <nz-tab nzTitle="All"></nz-tab>
-      <nz-tab nzTitle="Outgoing"></nz-tab>
+      <nz-tab nzTitle="Own"></nz-tab>
+      <nz-tab nzTitle="Deactivated"></nz-tab>
+      <nz-tab nzTitle="External"></nz-tab>
       <nz-tab nzTitle="Incoming"></nz-tab>
     </nz-tabset>
 
+    @if (getTabDescription()) {
+      <nz-alert
+        nzType="info"
+        [nzMessage]="getTabDescription()!"
+        nzShowIcon
+        style="margin-bottom: 16px;"
+      ></nz-alert>
+    }
+
     <nz-table
       #subscriptionTable
       [nzData]="subscriptions()"
@@ -31,7 +42,7 @@
     <ng-template #noResultTpl></ng-template>
       <thead>
         <tr>
-          <th nzWidth="10%">Direction</th>
+          <th nzWidth="10%">Type</th>
           <th nzWidth="20%">Channel</th>
           <th nzWidth="20%">Subscriber</th>
           <th nzWidth="20%">Owner</th>
@@ -44,8 +55,8 @@
         @for (sub of subscriptions(); track sub.subscription_id) {
           <tr>
             <td>
-              <nz-tag [nzColor]="isOutgoing(sub) ? 'blue' : 'purple'">
-                {{ getDirectionLabel(sub) }}
+              <nz-tag [nzColor]="getTypeLabel(sub).color">
+                {{ getTypeLabel(sub).label }}
               </nz-tag>
             </td>
             <td>