feat: add tabs, product type column, and discovered field

- Add three tabs to the devices page: All, Activated and Discovered with live counts in each tab label
- Add 'Product Type' column (ISM / vPro) derived from fwSku bitmask

Signed-off-by: ShradhaGupta31 <shradha.gupta@intel.com>

Author: ShradhaGupta31

src/app/devices/devices.component.html

@@ -46,6 +46,11 @@ <h3 class="flex justify-center">
         }
       </h3>
     } @else {
+      <mat-tab-group (selectedTabChange)="onTabChange($event.index)">
+        <mat-tab [label]="'All (' + allDevicesData.length + ')'"></mat-tab>
+        <mat-tab [label]="'Activated (' + activatedCount + ')'"></mat-tab>
+        <mat-tab [label]="'Discovered (' + discoveredCount + ')'"></mat-tab>
+      </mat-tab-group>
       <div class="flex-row flex-wrap flex-1">
         <div class="flex flex-66" style="width: 66%">
           <mat-form-field data-cy="filterSearch" style="width: 100%">
@@ -121,6 +126,13 @@ <h3 class="flex justify-center">
           </mat-cell>
         </ng-container>
         <!-- tags Column -->
+        <ng-container matColumnDef="productType">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>Product Type</mat-header-cell>
+          <mat-cell *matCellDef="let element" (click)="navigateTo(element.guid)">
+            {{ getProductType(element) }}
+          </mat-cell>
+        </ng-container>
+        <!-- tags Column -->
         <ng-container matColumnDef="tags">
           <mat-header-cell *matHeaderCellDef mat-sort-header>
             <!-- include this always hidden icon to match spacing in the cell -->

src/app/devices/devices.component.ts

@@ -47,6 +47,7 @@ import { MatButton, MatIconButton } from '@angular/material/button'
 import { MatToolbar } from '@angular/material/toolbar'
 import { MatSort } from '@angular/material/sort'
 import { MatInput } from '@angular/material/input'
+import { MatTabGroup, MatTab } from '@angular/material/tabs'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 
 @Component({
@@ -86,6 +87,8 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core'
     MatPaginator,
     MatHint,
     RouterModule,
+    MatTabGroup,
+    MatTab,
     TranslatePipe
   ]
 })
@@ -108,6 +111,46 @@ export class DevicesComponent implements OnInit, AfterViewInit {
   public powerStates: any
   public isCloudMode: boolean = environment.cloud
 
+  public activeTab = signal(0)
+  public allDevicesData: Device[] = []
+  private serverTotalCount = 0
+
+  get activatedCount(): number {
+    return this.allDevicesData.filter(
+      (d) => d.deviceInfo?.currentMode != null && d.deviceInfo.currentMode !== 'not activated'
+    ).length
+  }
+
+  get discoveredCount(): number {
+    return this.allDevicesData.filter((d) => d.deviceInfo?.discovered === true).length
+  }
+
+  onTabChange(index: number): void {
+    this.activeTab.set(index)
+    this.applyTabFilter()
+  }
+
+  private applyTabFilter(): void {
+    let filtered: Device[]
+    switch (this.activeTab()) {
+      case 1:
+        filtered = this.allDevicesData.filter(
+          (d) => d.deviceInfo?.currentMode != null && d.deviceInfo.currentMode !== 'not activated'
+        )
+        this.totalCount.set(filtered.length)
+        break
+      case 2:
+        filtered = this.allDevicesData.filter((d) => d.deviceInfo?.discovered === true)
+        this.totalCount.set(filtered.length)
+        break
+      default:
+        filtered = this.allDevicesData
+        this.totalCount.set(this.serverTotalCount)
+        break
+    }
+    this.devices.data = filtered
+  }
+
   get deleteDeviceLabel(): string {
     return this.isCloudMode
       ? this.translate.instant('devices.actions.deactivateCloud.value')
@@ -119,6 +162,7 @@ export class DevicesComponent implements OnInit, AfterViewInit {
     'hostname',
     'guid',
     'status',
+    'productType',
     'tags',
     'actions',
     'notification'
@@ -140,6 +184,7 @@ export class DevicesComponent implements OnInit, AfterViewInit {
       this.displayedColumns = [
         'select',
         'hostname',
+        'productType',
         'tags',
         'actions',
         'notification'
@@ -211,6 +256,7 @@ export class DevicesComponent implements OnInit, AfterViewInit {
       .pipe(
         switchMap((res) => {
           this.totalCount.set(res.totalCount)
+          this.serverTotalCount = res.totalCount
 
           if (!environment.cloud) {
             return of(res.data) // Return as-is for non-cloud
@@ -251,7 +297,8 @@ export class DevicesComponent implements OnInit, AfterViewInit {
         })
       )
       .subscribe((devices) => {
-        this.devices.data = devices
+        this.allDevicesData = devices
+        this.applyTabFilter()
 
         // Restore selection state on data retrieval
         this.selectedDevices.clear()
@@ -342,6 +389,16 @@ export class DevicesComponent implements OnInit, AfterViewInit {
     await this.router.navigate([`/devices/${path}`])
   }
 
+  getProductType(device: Device): string {
+    const skuNum = parseInt(device.deviceInfo?.fwSku ?? '', 10)
+    if (isNaN(skuNum)) return ''
+    const isISM = (skuNum & 0x10) > 0
+    const isVPro = (skuNum & 0x08) > 0
+    if (isISM) return 'ISM'
+    if (isVPro) return 'vPro'
+    return ''
+  }
+
   translateConnectionStatus(status?: boolean): string {
     switch (status) {
       case false:

src/models/models.ts

@@ -32,6 +32,7 @@ export interface DeviceInfo {
   features: string
   ipAddress: string
   lastUpdated?: Date
+  discovered?: boolean
 }
 export interface DeviceStats {
   totalCount: number