Redesign installed items page to match design

- Back link + "Installed Items" title + "Check for updates" primary button - Filter button (stroked primary) with dropdown checkbox panel for item types - Filter chips (mat-chip-set) with "Clear all" button when active - Search field matching browse page design (320px, rounded-8, outlined) - Mat-table with columns: Name, Type (colored icon+text), Version, Installed date, Updates (up-to-date/available+update btn), Actions - Actions: info, open-in-new, remove (mdi:trash-can-outline) icon buttons - Updates column: green "Up to date" or "vX.X.X Available" + Update stroked warn - Item type filter passed as List<String> to API - Use TbIotHubDeleteDialogComponent for remove confirmation
6 months ago · 00930b1f77
4 changed files with 347 additions and 275 deletions
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.html
@ -15,141 +15,171 @@
    limitations under the License.

 -->
-<div class="tb-iot-hub-installed-items-container">
-  <a class="tb-iot-hub-back-link" (click)="navigateToMarketplace()">
-    <mat-icon>arrow_back</mat-icon>
-    {{ 'iot-hub.back-to-marketplace' | translate }}
-  </a>
-  <div class="tb-iot-hub-installed-items-header">
-    <h2>{{ 'iot-hub.installed-items' | translate }}</h2>
-    @if (!updatesChecked) {
-      <button mat-flat-button color="primary"
-              [disabled]="isCheckingUpdates"
-              (click)="checkForUpdates()">
-        @if (isCheckingUpdates) {
-          <mat-spinner diameter="18" class="tb-iot-hub-inline-spinner"></mat-spinner>
-        } @else {
-          <mat-icon>update</mat-icon>
-        }
-        {{ 'iot-hub.check-for-updates' | translate }}
-      </button>
-    }
+<div class="tb-installed-items-page">
+  <!-- Back link -->
+  <button mat-button color="primary" class="tb-installed-back-btn" (click)="navigateToMarketplace()">
+    <mat-icon>chevron_left</mat-icon>
+    {{ 'iot-hub.back-to-iot-hub' | translate }}
+  </button>
+
+  <!-- Header -->
+  <div class="tb-installed-header">
+    <h1 class="tb-installed-title">{{ 'iot-hub.installed-items' | translate }}</h1>
+    <button mat-flat-button color="primary" (click)="checkForUpdates()" [disabled]="isCheckingUpdates">
+      @if (isCheckingUpdates) {
+        <mat-spinner diameter="18"></mat-spinner>
+      } @else {
+        <mat-icon>sync</mat-icon>
+      }
+      {{ 'iot-hub.check-for-updates' | translate }}
+    </button>
  </div>

-  <div class="tb-iot-hub-installed-search-row">
-    <mat-form-field appearance="outline" class="tb-iot-hub-installed-search-field">
-      <mat-icon matPrefix>search</mat-icon>
-      <input matInput
-             [placeholder]="'iot-hub.search-installed-items' | translate"
-             [value]="textSearch"
-             (input)="onSearchChange($any($event.target).value)">
-      @if (textSearch) {
-        <button matSuffix mat-icon-button (click)="onSearchChange('')">
-          <mat-icon>close</mat-icon>
+  <!-- Filter + Search row -->
+  <div class="tb-installed-toolbar">
+    <div class="tb-installed-filter-area">
+      <button mat-stroked-button color="primary" class="tb-installed-filter-btn" (click)="toggleFilter()">
+        <mat-icon>filter_list</mat-icon>
+        {{ 'iot-hub.filter' | translate }}
+      </button>
+      @if (hasActiveFilters()) {
+        <mat-chip-set class="tb-installed-filter-chips">
+          @for (type of activeTypeFilters; track type) {
+            <mat-chip (removed)="removeTypeFilter(type)">
+              {{ getItemTypeLabel(type) }}
+              <mat-icon matChipRemove>close</mat-icon>
+            </mat-chip>
+          }
+        </mat-chip-set>
+        <button class="tb-installed-clear-btn" (click)="clearAllFilters()">
+          {{ 'iot-hub.clear-all' | translate }}
        </button>
      }
-    </mat-form-field>
+    </div>
+    <div class="tb-installed-search">
+      <mat-icon class="tb-installed-search-icon">search</mat-icon>
+      <input class="tb-installed-search-input"
+             [placeholder]="'iot-hub.search' | translate"
+             [value]="textSearch"
+             (input)="onSearchChange($any($event.target).value)">
+    </div>
  </div>

-  <div class="tb-iot-hub-installed-table-container">
-    @if (isLoading) {
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    }
+  <!-- Filter dropdown -->
+  @if (filterOpen) {
+    <div class="tb-installed-filter-dropdown">
+      @for (type of allItemTypes; track type) {
+        <mat-checkbox [checked]="isTypeFilterActive(type)" (change)="toggleTypeFilter(type)">
+          {{ getItemTypeLabel(type) }}
+        </mat-checkbox>
+      }
+    </div>
+  }

-    <table mat-table [dataSource]="dataSource" matSort>
+  <!-- Table -->
+  <div class="tb-installed-table-container">
+    <table mat-table [dataSource]="dataSource" matSort matSortActive="createdTime" matSortDirection="desc">
+      <!-- Name -->
      <ng-container matColumnDef="itemName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'iot-hub.item-name' | translate }}</th>
        <td mat-cell *matCellDef="let item">{{ item.itemName }}</td>
      </ng-container>

+      <!-- Type -->
      <ng-container matColumnDef="itemType">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'iot-hub.item-type' | translate }}</th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'iot-hub.item-type' | translate }}</th>
        <td mat-cell *matCellDef="let item">
-          <span class="tb-iot-hub-type-chip" [ngClass]="getItemTypeChipClass(item.itemType)">{{ getItemTypeLabel(item.itemType) }}</span>
+          <span class="tb-installed-type" [ngClass]="getItemTypeChipClass(item.itemType)">
+            <mat-icon class="tb-installed-type-icon">{{ getItemTypeIcon(item.itemType) }}</mat-icon>
+            {{ getItemTypeLabel(item.itemType) }}
+          </span>
        </td>
      </ng-container>

+      <!-- Version -->
      <ng-container matColumnDef="version">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'iot-hub.item-version' | translate }}</th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'iot-hub.item-version' | translate }}</th>
        <td mat-cell *matCellDef="let item">{{ item.version }}</td>
      </ng-container>

+      <!-- Installed date -->
      <ng-container matColumnDef="createdTime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'iot-hub.installed-date' | translate }}</th>
        <td mat-cell *matCellDef="let item">{{ item.createdTime | date:'mediumDate' }}</td>
      </ng-container>

+      <!-- Updates -->
      <ng-container matColumnDef="updates">
-        <th mat-header-cell *matHeaderCellDef>{{ updatesChecked ? ('iot-hub.updates' | translate) : '' }}</th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'iot-hub.updates' | translate }}</th>
        <td mat-cell *matCellDef="let item">
          @if (updatesChecked) {
-            @if (getPublishedVersionInfo(item); as publishedInfo) {
-              @if (publishedInfo.publishedVersionId !== item.itemVersionId) {
-                <button mat-stroked-button class="tb-iot-hub-update-button"
-                        [matTooltip]="'iot-hub.view-item-details' | translate"
-                        matTooltipPosition="above"
-                        (click)="viewUpdateDetails(publishedInfo, item)">
-                  <mat-icon>info_outline</mat-icon>
-                  {{ publishedInfo.publishedVersion }}
-                </button>
-                <button mat-stroked-button color="primary" class="tb-iot-hub-update-button"
-                        (click)="updateItem(item, publishedInfo)">
+            @if (getPublishedVersionInfo(item); as pubInfo) {
+              @if (pubInfo.publishedVersionId !== item.itemVersionId) {
+                <span class="tb-installed-update-available">
+                  <mat-icon>arrow_upward</mat-icon>
+                  v{{ pubInfo.publishedVersion }} {{ 'iot-hub.available' | translate }}
+                </span>
+                <button mat-stroked-button color="warn" class="tb-installed-update-btn" (click)="updateItem(item, pubInfo)">
                  {{ 'iot-hub.update' | translate }}
                </button>
              } @else {
-                <span class="tb-iot-hub-up-to-date">{{ 'iot-hub.up-to-date' | translate }}</span>
+                <span class="tb-installed-up-to-date">
+                  <mat-icon>check</mat-icon>
+                  {{ 'iot-hub.up-to-date' | translate }}
+                </span>
              }
            } @else {
-              <span class="tb-iot-hub-up-to-date">{{ 'iot-hub.up-to-date' | translate }}</span>
+              <span class="tb-installed-up-to-date">
+                <mat-icon>check</mat-icon>
+                {{ 'iot-hub.up-to-date' | translate }}
+              </span>
            }
          }
        </td>
      </ng-container>

+      <!-- Actions -->
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let item">
-          <button mat-icon-button
-                  [matTooltip]="'iot-hub.view-item-details' | translate"
-                  matTooltipPosition="above"
-                  (click)="viewItemDetails(item); $event.stopPropagation()">
-            <mat-icon>info_outline</mat-icon>
-          </button>
-          @if (getEntityId(item)) {
-            <button mat-icon-button color="primary"
-                    [matTooltip]="'iot-hub.open-installed-entity' | translate"
-                    matTooltipPosition="above"
-                    (click)="openEntity(item); $event.stopPropagation()">
+          <div class="tb-installed-actions">
+            <button mat-icon-button (click)="viewItemDetails(item)" matTooltip="{{ 'iot-hub.view-item-details' | translate }}">
+              <mat-icon>info_outline</mat-icon>
+            </button>
+            <button mat-icon-button (click)="openEntity(item)" matTooltip="{{ 'iot-hub.open-installed-entity' | translate }}">
              <mat-icon>open_in_new</mat-icon>
            </button>
-          }
-          <button mat-icon-button color="warn"
-                  [matTooltip]="'action.delete' | translate"
-                  matTooltipPosition="above"
-                  (click)="deleteItem(item); $event.stopPropagation()">
-            <mat-icon>delete</mat-icon>
-          </button>
+            <button mat-icon-button (click)="deleteItem(item)" matTooltip="{{ 'iot-hub.remove' | translate }}">
+              <tb-icon>mdi:trash-can-outline</tb-icon>
+            </button>
+          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
-      <tr class="mat-row" *matNoDataRow>
-        <td class="mat-cell" [attr.colspan]="displayedColumns.length">
-          <div class="tb-iot-hub-installed-empty">
-            {{ 'iot-hub.no-installed-items' | translate }}
-          </div>
-        </td>
-      </tr>
    </table>

-    <mat-paginator
-      [length]="totalElements"
-      [pageSize]="pageSize"
-      [pageIndex]="pageIndex"
-      [pageSizeOptions]="[10, 20, 50]"
-      (page)="onPageChange($event)">
-    </mat-paginator>
+    @if (isLoading) {
+      <div class="tb-installed-loading">
+        <mat-spinner diameter="40"></mat-spinner>
+      </div>
+    }
+
+    @if (!isLoading && dataSource.length === 0) {
+      <div class="tb-installed-empty">
+        {{ 'iot-hub.no-installed-items' | translate }}
+      </div>
+    }
  </div>
+
+  <!-- Paginator -->
+  <mat-paginator
+    [length]="totalElements"
+    [pageSize]="pageSize"
+    [pageIndex]="pageIndex"
+    [pageSizeOptions]="[10, 25, 50]"
+    (page)="onPageChange($event)"
+    showFirstLastButtons>
+  </mat-paginator>
 </div>
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.scss
@ -14,246 +14,233 @@
 * limitations under the License.
 */

+@import "../../../../../scss/constants";
+
 :host {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 16px 24px;
-  overflow: auto;
+  display: block;
+  padding: 16px;
 }

-.tb-iot-hub-installed-items-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
+.tb-installed-items-page {
  background: white;
-  padding: 24px;
-  border-radius: 4px;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 40px 40px 24px;
 }

-.tb-iot-hub-back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.54);
-  cursor: pointer;
-  text-decoration: none;
-  border-bottom: none;
-  margin-bottom: 12px;
-
-  mat-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-  }
-
-  &:hover {
-    color: rgba(0, 0, 0, 0.87);
-    text-decoration: none;
-    border-bottom: none;
-  }
+// Back button
+.tb-installed-back-btn {
+  margin-bottom: 40px;
 }

-.tb-iot-hub-installed-items-header {
+// Header: title + check for updates
+.tb-installed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  margin-bottom: 24px;
-
-  h2 {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0;
-    color: rgba(0, 0, 0, 0.87);
-  }
+  margin-bottom: 32px;
 }

-.tb-iot-hub-inline-spinner {
-  display: inline-block;
-  margin-right: 8px;
+.tb-installed-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 48px;
+  color: rgba(0, 0, 0, 0.87);
+  margin: 0;
 }

-.tb-iot-hub-installed-search-row {
+// Toolbar: filter + search
+.tb-installed-toolbar {
  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
 }

-.tb-iot-hub-installed-search-field {
-  flex: 1;
-
-  ::ng-deep {
-    .mat-mdc-text-field-wrapper {
-      height: 42px;
-      padding: 0 12px;
-    }
-
-    .mat-mdc-form-field-flex {
-      height: 42px;
-      align-items: center;
-    }
-
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__notch,
-    .mdc-notched-outline__trailing {
-      border-color: #d5dbe3;
-    }
-
-    .mdc-notched-outline__leading {
-      border-radius: 8px 0 0 8px;
-    }
-
-    .mdc-notched-outline__trailing {
-      border-radius: 0 8px 8px 0;
-    }
-
-    .mat-mdc-form-field-infix {
-      padding-top: 0;
-      padding-bottom: 0;
-      min-height: unset;
-    }
+.tb-installed-filter-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

-    .mdc-notched-outline__notch {
-      display: none;
-    }
+.tb-installed-filter-btn {
+  &.mat-primary {
+    --mat-button-outlined-outline-color: #{$tb-primary-color};
+  }
+}

-    .mat-mdc-floating-label {
-      display: none;
-    }
+.tb-installed-filter-chips {
+  .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
+    --mat-chip-elevated-container-color: rgba(0, 0, 0, 0.04);
+  }
+}

-    .mat-mdc-form-field-subscript-wrapper {
-      display: none;
-    }
+.tb-installed-clear-btn {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.54);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 6px 8px;
+  font-family: inherit;

-    input.mat-mdc-input-element {
-      font-size: 14px;
-      color: #3e4a59;
+  &:hover {
+    color: rgba(0, 0, 0, 0.87);
+  }
+}

-      &::placeholder {
-        color: #8b95a2;
-        opacity: 1;
-      }
-    }
+// Search field
+.tb-installed-search {
+  width: 320px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: white;
+}

-    .mat-icon {
-      color: #8b95a2;
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
-    }
+.tb-installed-search-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  color: rgba(0, 0, 0, 0.38);
+  flex-shrink: 0;
+}

-    .mat-mdc-form-field-icon-prefix {
-      padding: 0 8px 0 0;
+.tb-installed-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+  font-family: inherit;

-      > .mat-icon {
-        padding: 0;
-      }
-    }
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.38);
+  }
+}

-    .mat-mdc-form-field-icon-suffix {
-      padding: 0;
+// Filter dropdown
+.tb-installed-filter-dropdown {
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  padding: 8px 0;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;

-      .mat-mdc-icon-button {
-        width: 32px;
-        height: 32px;
-        padding: 4px;
-      }
-    }
-  }
+  mat-checkbox {
+    display: block;
+    padding: 8px 16px;

-  &.mat-focused ::ng-deep {
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__notch,
-    .mdc-notched-outline__trailing {
-      border-color: #8b95a2;
-      border-width: 1px;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
    }
  }
 }

-.tb-iot-hub-installed-table-container {
+// Table
+.tb-installed-table-container {
+  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  overflow: hidden;

  table {
    width: 100%;
  }
+}

-  .mat-column-itemName {
-    width: 100%;
-  }
-
-  .mat-column-itemType {
-    width: 170px;
-    min-width: 170px;
-    max-width: 170px;
-  }
+// Type cell with colored icon + text
+.tb-installed-type {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 500;
+}

-  .mat-column-version {
-    width: 100px;
-    min-width: 100px;
-    max-width: 100px;
-  }
+.tb-installed-type-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}

-  .mat-column-createdTime {
-    width: 100px;
-    min-width: 100px;
-    max-width: 100px;
-  }
+.tb-type-widget { color: #2e7d32; }
+.tb-type-dashboard { color: #1565c0; }
+.tb-type-solution-template { color: #2666a9; }
+.tb-type-calc-field { color: #006d92; }
+.tb-type-rule-chain { color: #95694b; }
+.tb-type-device { color: #4b8a79; }

-  .mat-column-updates {
-    width: 200px;
-    min-width: 200px;
-    max-width: 200px;
-  }
+// Updates column
+.tb-installed-update-available {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.76);
+  margin-right: 8px;

-  .mat-column-actions {
-    width: 144px;
-    min-width: 144px;
-    max-width: 144px;
-    text-align: right;
-    white-space: nowrap;
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
  }
 }

-.tb-iot-hub-type-chip {
-  padding: 2px 10px;
-  border-radius: 12px;
+.tb-installed-update-btn {
  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-
-  &.tb-type-widget { background: #e3f2fd; color: #1565c0; }
-  &.tb-type-dashboard { background: #e8f5e9; color: #2e7d32; }
-  &.tb-type-calc-field { background: #fff3e0; color: #e65100; }
-  &.tb-type-rule-chain { background: #f3e5f5; color: #7b1fa2; }
-  &.tb-type-device { background: #eceff1; color: #455a64; }
-  &.tb-type-solution-template { background: #e0f7fa; color: #00695c; }
 }

-.tb-iot-hub-up-to-date {
-  color: #2e7d32;
+.tb-installed-up-to-date {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
  font-size: 13px;
-  font-weight: 500;
-}
+  color: #198038;

-.tb-iot-hub-update-button {
-  font-size: 12px;
-  line-height: 28px;
-  height: 28px;
-  padding: 0 12px;
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}

-  & + .tb-iot-hub-update-button {
-    margin-left: 8px;
+// Actions column
+.tb-installed-actions {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  justify-content: flex-end;
+
+  .mat-mdc-icon-button {
+    width: 36px;
+    height: 36px;
+    padding: 6px;
+    --mdc-icon-button-state-layer-size: 36px;
+    --mdc-icon-button-icon-color: rgba(0, 0, 0, 0.54);
+    color: rgba(0, 0, 0, 0.54);
  }
 }

-.tb-iot-hub-installed-empty {
-  padding: 48px 24px;
+// Loading / Empty
+.tb-installed-loading {
+  display: flex;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.tb-installed-empty {
  text-align: center;
+  padding: 48px 0;
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
 }
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-installed-items.component.ts
@ -35,6 +35,7 @@ import { EntityType } from '@shared/models/entity-type.models';
 import { getEntityDetailsPageURL } from '@core/utils';
 import { TbIotHubItemDetailDialogComponent, IotHubItemDetailDialogData } from './iot-hub-item-detail-dialog.component';
 import { TbIotHubUpdateDialogComponent, IotHubUpdateDialogData } from './iot-hub-update-dialog.component';
+import { TbIotHubDeleteDialogComponent, IotHubDeleteDialogData } from './iot-hub-delete-dialog.component';

@Component({
  selector: 'tb-iot-hub-installed-items',
@ -56,6 +57,11 @@ export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit {
  updatesChecked = false;
  isCheckingUpdates = false;

+  // Type filter
+  filterOpen = false;
+  activeTypeFilters = new Set<string>();
+  allItemTypes: string[] = ['WIDGET', 'DASHBOARD', 'SOLUTION_TEMPLATE', 'CALCULATED_FIELD', 'RULE_CHAIN', 'DEVICE'];
+
  private searchSubject = new Subject<string>();

  @ViewChild(MatSort, {static: true}) sort: MatSort;
@ -104,14 +110,60 @@ export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit {
    this.loadData();
  }

+  toggleFilter(): void {
+    this.filterOpen = !this.filterOpen;
+  }
+
+  isTypeFilterActive(type: string): boolean {
+    return this.activeTypeFilters.has(type);
+  }
+
+  toggleTypeFilter(type: string): void {
+    if (this.activeTypeFilters.has(type)) {
+      this.activeTypeFilters.delete(type);
+    } else {
+      this.activeTypeFilters.add(type);
+    }
+    this.pageIndex = 0;
+    this.loadData();
+  }
+
+  removeTypeFilter(type: string): void {
+    this.activeTypeFilters.delete(type);
+    this.pageIndex = 0;
+    this.loadData();
+  }
+
+  clearAllFilters(): void {
+    this.activeTypeFilters.clear();
+    this.pageIndex = 0;
+    this.loadData();
+  }
+
+  hasActiveFilters(): boolean {
+    return this.activeTypeFilters.size > 0;
+  }
+
+  getItemTypeIcon(itemType: string): string {
+    switch (itemType) {
+      case 'WIDGET': return 'widgets';
+      case 'DASHBOARD': return 'dashboard';
+      case 'SOLUTION_TEMPLATE': return 'integration_instructions';
+      case 'CALCULATED_FIELD': return 'functions';
+      case 'RULE_CHAIN': return 'settings_ethernet';
+      case 'DEVICE': return 'memory';
+      default: return 'category';
+    }
+  }
+
  deleteItem(item: IotHubInstalledItem): void {
-    this.dialogService.confirm(
-      this.translate.instant('iot-hub.remove-installed-item-title'),
-      this.translate.instant('iot-hub.remove-installed-item-text', {name: item.itemName}),
-      this.translate.instant('action.no'),
-      this.translate.instant('action.yes')
-    ).subscribe(result => {
-      if (result) {
+    const dialogRef = this.dialog.open(TbIotHubDeleteDialogComponent, {
+      panelClass: ['tb-dialog'],
+      autoFocus: false,
+      data: { itemName: item.itemName, itemType: item.itemType } as IotHubDeleteDialogData
+    });
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
        this.iotHubApiService.deleteInstalledItem(item.id.id).subscribe({
          next: () => {
            this.store.dispatch(new ActionNotificationShow({
@ -260,7 +312,8 @@ export class TbIotHubInstalledItemsComponent implements OnInit, AfterViewInit {
      direction: this.sort?.direction === 'asc' ? Direction.ASC : Direction.DESC
    };
    const pageLink = new PageLink(this.pageSize, this.pageIndex, this.textSearch || null, sortOrder);
-    this.iotHubApiService.getInstalledItems(pageLink, null, {ignoreLoading: true}).subscribe({
+    const typeFilters = this.activeTypeFilters.size > 0 ? Array.from(this.activeTypeFilters) : null;
+    this.iotHubApiService.getInstalledItems(pageLink, typeFilters, {ignoreLoading: true}).subscribe({
      next: (data) => {
        this.dataSource = data.data;
        this.totalElements = data.totalElements;
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -3705,6 +3705,8 @@
        "search-placeholder": "Search in IoT Hub...",
        "search": "Search...",
        "items-per-page": "Items per page",
+        "filter": "Filter",
+        "available": "Available",
        "items-page-desc-widgets": "Jumpstart your IoT journey with pre-configured widgets designed for your industry. Deploy proven architectures instantly and focus your energy on what matters: your unique business logic.",
        "items-page-desc-dashboards": "Explore dashboards to find pre-built visualization templates and interactive UI layouts you can deploy in minutes to bring your IoT data to life.",
        "items-page-desc-solution-templates": "Complete IoT solution packages with dashboards, rule chains, and device configurations. Get started with proven architectures.",