feat: major device management enhancements

- Add direct web access button for device WebFig
- Add web proxy-based access with auto-login via MikroWizard
- Fix updatable/upgradable filters and add more filter options
- Redesign devices table UI with improved UX
- Add bulk scan feature with CSV import capability
- Add parallel scanning functionality
- Add upgrade firmware feature
- Add scan history button with enhanced report viewing

src/app/views/devices/devices.component.html

@@ -8,19 +8,25 @@
           </c-col>
           <c-col xs [lg]="9">
             <h6 style="text-align: right;">
-              <button cButton color="danger" class="mx-1" size="sm" style="color: #fff;">{{updates.length}} Updatable
+              <button cButton color="success" (click)="openAddDeviceModal()" class="mx-1"
-              </button>
+                size="sm" style="color: #fff;"><i class="fa-solid fa-plus"></i> Bulk Add </button>
-              <button cButton color="warning" class="mx-1" size="sm" style="color: #fff;">{{upgrades.length}}
-                Upgradable</button>
-              |
               <button cButton color="dark" (click)="scanwizard(1,'')" [cModalToggle]="ScannerModal.id" class="mx-1"
-                size="sm" style="color: #fff;"><i class="fa-solid fa-magnifying-glass"></i> Scanner</button>
+                size="sm" style="color: #fff;"><i class="fa-solid fa-magnifying-glass"></i> Scan</button>
+              <button cButton color="primary" (click)="show_exec()" class="mx-1"
+                size="sm" style="color: #fff;"><i class="fa-solid fa-history"></i> History</button>
             </h6>
           </c-col>
         </c-row>
       </c-card-header>
       <c-card-body>
-        <c-row>
+        <c-row> 
+          <c-col [lg]="9">
+            <button cButton color="danger" class="mx-1" size="sm" style="color: #fff;" (click)="filterUpdatable()">{{updates.length}} Updatable
+            </button>
+            <button cButton color="warning" class="mx-1" size="sm" style="color: #fff;" (click)="filterUpgradable()">{{upgrades.length}}
+              Upgradable</button>
+            <button cButton color="secondary" class="mx-1" size="sm" (click)="clearFilter()">Clear Filter</button>
+          </c-col>
           <c-col [lg]="3">
             <c-input-group *ngIf="groups.length>0">
               <span cInputGroupText>Group</span>
@@ -37,6 +43,10 @@
           (selectedRows)="onSelectedRows($event)" [autoResizeWidth]=true>
           <gui-grid-column header="Name" field="name">
             <ng-template let-value="item.name" let-item="item" let-index="index">
+              <button cButton size="sm" variant="ghost" color="primary" (click)="webAccess(item)" 
+                style="padding: 2px 4px; margin-right: 5px; border: none;" cTooltip="Web Access">
+                <i class="fas fa-globe" style="font-size: 12px;"></i>
+              </button>
               <img *ngIf="item.status=='updating'" width="20px" src="assets/img/loading.svg" />
               <i *ngIf="item.status=='updated'" cTooltip="Tooltip text"
                 style="color: green; margin-right: 3px;font-size: .7em;" class="fa-solid fa-check"></i>
@@ -55,7 +65,7 @@
               <div>{{value}}</div>
               <i *ngIf="item.update_availble" cTooltip="Firmware Update availble"
                 class="fa-solid fa-up-long text-primary mx-1"></i>
-              <i *ngIf="item.update_availble" cTooltip="Device Firmware not Upgraded"
+              <i *ngIf="item.upgrade_availble" cTooltip="Device Firmware not Upgraded"
                 class="fa-solid fa-microchip text-danger mx-1"></i>
             </ng-template>
           </gui-grid-column>
@@ -115,9 +125,9 @@
                   <button size="sm" (click)="single_device_action(item,'update')" style="padding: 4px 7px;"
                     cListGroupItem><i class="text-primary fa-solid fa-upload"></i><small>
                       Update Firmware</small></button>
-                  <!-- <button size="sm" (click)="single_device_action(item,'upgrade')" style="padding: 4px 7px;"
+                  <button size="sm" (click)="single_device_action(item,'upgrade')" style="padding: 4px 7px;"
                     cListGroupItem><i class="text-primary fa-solid fa-microchip"></i><small>
-                      Upgrade Firmware</small></button> -->
+                      Upgrade Firmware</small></button>
                   <button size="sm" (click)="single_device_action(item,'devlogs')" style="padding: 4px 7px;"
                     cListGroupItem><i class="fa-regular fa-rectangle-list"></i><small>
                       Device Logs</small></button>
@@ -154,8 +164,9 @@
                           Firmware</button></li>
                       <li><button cDropdownItem
                           (click)="ConfirmAction='update';ConfirmModalVisible=true">Update</button></li>
-                      <!-- <li><button cDropdownItem>Upgrade</button></li>
+                      <li><button cDropdownItem
-                      <li><button cDropdownItem>Update and Upgrade</button></li> -->
+                          (click)="ConfirmAction='upgrade';ConfirmModalVisible=true">Upgrade</button></li>
+                      <!-- <li><button cDropdownItem>Update and Upgrade</button></li> -->
                     </ul>
                   </c-dropdown>
                 </c-nav-item>
@@ -259,8 +270,6 @@
     </div>
   </c-modal-body>
   <c-modal-footer>
-    <h6 style="margin: 0 auto;" *ngIf="scanwizard_step==1"><button cButton color="primary" (click)="show_exec()"
-        style="margin: 0 auto;" variant="outline">Device scan logs</button></h6>
     <small *ngIf="scan_type=='ip'">Empty username and password means system default
       configuration</small>
   </c-modal-footer>
@@ -269,39 +278,68 @@
 
 <c-modal #ExecutedDataModal backdrop="static" size="xl" [(visible)]="ExecutedDataModalVisible" id="ExecutedDataModal">
   <c-modal-header>
-    <h5 cModalTitle>Scan History : </h5>
+    <h5 cModalTitle>Task History</h5>
     <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButtonClose></button>
   </c-modal-header>
-  <c-modal-body>
+  <c-modal-body style="min-height: 400px; max-height: 70vh; overflow-y: auto;">
-    <c-input-group class="mb-3">
+    <div class="mb-3">
-      <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
+      <c-input-group>
-        [source]="ExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel" [paging]="paging">
+        <span cInputGroupText>Filter by Type</span>
-        <gui-grid-column header="Start time" field="start">
+        <select [(ngModel)]="selectedTaskType" (change)="filterByTaskType()" cSelect>
-          <ng-template let-value="item['started']" let-item="item" let-index="index">
+          <option value="all">All Tasks</option>
-            &nbsp; {{value}} </ng-template>
+          <option value="ip-scan">IP Scan</option>
-        </gui-grid-column>
+          <option value="bulk-add">Bulk Add</option>
-        <gui-grid-column header="Start ip" field="start_ip">
+        </select>
-          <ng-template let-value="item['start_ip']" let-item="item" let-index="index">
+      </c-input-group>
-            &nbsp; {{value}} </ng-template>
+    </div>
-        </gui-grid-column>
+    <gui-grid [autoResizeWidth]="true" *ngIf="ExecutedDataModalVisible" [searching]="searching"
-        <gui-grid-column header="End ip" field="end_ip">
+      [source]="filteredExecutedData" [columnMenu]="columnMenu" [sorting]="sorting" [infoPanel]="infoPanel" [paging]="paging">
-          <ng-template let-value="item['end_ip']" let-item="item" let-index="index">
+      <gui-grid-column header="Type" field="task_type" [width]="100">
-            &nbsp; {{value}} </ng-template>
+        <ng-template let-value="item['task_type']" let-item="item" let-index="index">
-        </gui-grid-column>
+          <i *ngIf="item.task_type === 'ip-scan'" class="fas fa-search" style="margin-right: 3px; color: #0d6efd;"></i>
-        <gui-grid-column header="End time" field="end">
+          <i *ngIf="item.task_type === 'bulk-add'" class="fas fa-plus-circle" style="margin-right: 3px; color: #198754;"></i>
-          <ng-template let-value="item['ended']" let-item="item" let-index="index">
+          <span style="font-size: 11px;">{{getTaskTypeLabel(value)}}</span>
-            {{value}}
+        </ng-template>
-          </ng-template>
+      </gui-grid-column>
-        </gui-grid-column>
+      <gui-grid-column header="Time" field="time" [width]="220">
-        <gui-grid-column header="Logs" field="mac" align="center">
+        <ng-template let-value="value" let-item="item" let-index="index">
-          <ng-template let-value="item['result']" let-item="item" let-index="index">
+          <div style="font-size: 10px; line-height: 1.3;">
-            <button (click)="exportToCsv(value)" color="primary" cButton>download</button>
+            <div><strong>Start:</strong> {{item.started}}</div>
-          </ng-template>
+            <div><strong>End:</strong> {{item.ended}}</div>
-        </gui-grid-column>
+          </div>
-      </gui-grid>
+        </ng-template>
-      <br />
+      </gui-grid-column>
-    </c-input-group>
+      <gui-grid-column header="Details" field="details">
-    <hr />
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <div *ngIf="item.task_type === 'ip-scan'" style="font-size: 12px; line-height: 1.3;">
+            <div>{{item.start_ip}} - {{item.end_ip}}</div>
+            <div>User: {{item.username}}</div>
+          </div>
+          <div *ngIf="item.task_type === 'bulk-add'" style="font-size: 12px; line-height: 1.3;">
+            <div>{{item.device_count}} devices</div>
+            <div style="word-break: break-all;">{{item.task_id}}</div>
+          </div>
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column header="Results" field="results" align="center" [width]="70">
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <div style="font-size: 11px;">
+            <span style="color: green;">✓ {{item.success_count}}</span>
+            <span *ngIf="item.failed_count > 0" style="color: red; margin-left: 5px;">✗ {{item.failed_count}}</span>
+          </div>
+        </ng-template>
+      </gui-grid-column>
+      <gui-grid-column header="Actions" field="actions" align="center" [width]="160">
+        <ng-template let-value="value" let-item="item" let-index="index">
+          <button (click)="showTaskDetails(item)" color="info" size="sm" cButton class="me-1">
+            <i class="fas fa-eye"></i> Details
+          </button>
+          <button (click)="exportToCsv(item.result)" color="primary" size="sm" cButton>
+            <i class="fas fa-download"></i> CSV
+          </button>
+        </ng-template>
+      </gui-grid-column>
+    </gui-grid>
   </c-modal-body>
   <c-modal-footer>
     <button (click)="ExecutedDataModalVisible=!ExecutedDataModalVisible" cButton color="secondary">
@@ -320,6 +358,10 @@
       update?</span>
     <span *ngIf="ConfirmAction=='update'">Are you sure that You want to <code>update firmware</code> of selected
       devices?</span>
+    <span *ngIf="ConfirmAction=='upgrade'">Are you sure that You want to <code>upgrade firmware</code> of selected
+      devices?</span>
+    <span *ngIf="ConfirmAction=='reboot'">Are you sure that You want to <code>reboot</code> the selected
+      devices?</span>
     <ng-container *ngIf="ConfirmAction=='delete'">
       Are you sure that You want to<code>Delete Device {{selected_device.name}} ?</code><br />
       <hr>
@@ -338,6 +380,12 @@
     <button *ngIf="ConfirmAction=='update'" (click)="update_firmware()" cButton color="danger">
       Yes
     </button>
+    <button *ngIf="ConfirmAction=='upgrade'" (click)="upgrade_firmware()" cButton color="danger">
+      Yes
+    </button>
+    <button *ngIf="ConfirmAction=='reboot'" (click)="upgrade_firmware()" cButton color="danger">
+      Yes
+    </button>
     <button *ngIf="ConfirmAction=='delete'" (click)="delete_device()" cButton color="danger">
       Yes,Delete Device
     </button>
@@ -396,4 +444,213 @@
   </c-modal-footer>
 </c-modal>
 
+<!-- Add Device Modal -->
+<c-modal #AddDeviceModal backdrop="static" size="lg" [(visible)]="addDeviceModalVisible" id="AddDeviceModal">
+  <c-modal-header>
+    <h5 cModalTitle>Add Devices from CSV</h5>
+    <button cButtonClose (click)="closeAddDeviceModal()"></button>
+  </c-modal-header>
+  <c-modal-body>
+    <div *ngIf="addDeviceStep === 1">
+      <h6>Upload CSV File</h6>
+      <p>Please upload a CSV file containing device information with columns: IP Address, Username, Password, API Port</p>
+      <input type="file" accept=".csv" (change)="onFileSelected($event)" class="form-control mb-3">
+      <div *ngIf="csvPreview.length > 0">
+        <h6>Preview (First 3 rows):</h6>
+        <table class="table table-sm table-bordered">
+          <thead>
+            <tr>
+              <th *ngFor="let header of csvHeaders">{{header}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let row of csvPreview">
+              <td *ngFor="let cell of row">{{cell}}</td>
+            </tr>
+          </tbody>
+        </table>
+        <h6>Column Mapping:</h6>
+        <div class="row">
+          <div class="col-md-6">
+            <label>IP Address Column:</label>
+            <select [(ngModel)]="columnMapping.ip" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+          <div class="col-md-6">
+            <label>Username Column:</label>
+            <select [(ngModel)]="columnMapping.username" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+        </div>
+        <div class="row mt-2">
+          <div class="col-md-6">
+            <label>Password Column:</label>
+            <select [(ngModel)]="columnMapping.password" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+          <div class="col-md-6">
+            <label>API Port Column:</label>
+            <select [(ngModel)]="columnMapping.port" class="form-select">
+              <option value="">Select Column</option>
+              <option *ngFor="let header of csvHeaders; let i = index" [value]="i">{{header}}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="addDeviceStep === 2" class="text-center">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <h5 class="mt-3">{{uploadStatus}}</h5>
+    </div>
+    <div *ngIf="addDeviceStep === 3">
+      <h5>Upload Complete</h5>
+      <div class="alert alert-success">
+        <strong>Success:</strong> {{uploadResult.success}} devices added successfully<br>
+        <strong>Failed:</strong> {{uploadResult.failed}} devices failed to add
+      </div>
+      <button cButton color="primary" (click)="downloadResults()" *ngIf="uploadResult.resultFile">
+        <i class="fas fa-download"></i> Download Results
+      </button>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button *ngIf="addDeviceStep === 1" cButton color="primary" (click)="uploadDevices()" [disabled]="!isValidMapping()">
+      Add Devices
+    </button>
+    <button *ngIf="addDeviceStep === 3" cButton color="success" (click)="closeAddDeviceModal()">
+      Close
+    </button>
+    <button *ngIf="addDeviceStep !== 2" cButton color="secondary" (click)="closeAddDeviceModal()">
+      Cancel
+    </button>
+  </c-modal-footer>
+</c-modal>
+
+<!-- Web Access Modal -->
+<c-modal #WebAccessModal backdrop="static" [(visible)]="showWebAccessModal" id="WebAccessModal">
+  <c-modal-header>
+    <h6 cModalTitle>Web Access Options</h6>
+    <button cButtonClose (click)="closeWebAccessModal()"></button>
+  </c-modal-header>
+  <c-modal-body>
+    <p>Choose how to access the device:</p>
+    <div class="d-grid gap-2">
+      <button *ngIf="ispro" cButton color="primary" (click)="openProxyAccess()">
+        <i class="fas fa-shield-alt"></i> Proxy Access, through Mikrowizard server
+      </button>
+      <button cButton color="secondary" (click)="openDirectAccess()">
+        <i class="fas fa-external-link-alt"></i> Direct Access
+      </button>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button cButton color="secondary" (click)="closeWebAccessModal()">Cancel</button>
+  </c-modal-footer>
+</c-modal>
+
+<!-- Task Details Modal -->
+<c-modal #TaskDetailsModal backdrop="static" size="xl" [(visible)]="detailsModalVisible" id="TaskDetailsModal" 
+         style="z-index: 1060; backdrop-filter: blur(2px);">
+  <c-modal-header style="background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);">
+    <h5 cModalTitle>{{getTaskTypeLabel(selectedTaskDetails?.task_type)}} Results</h5>
+    <button (click)="closeDetailsModal()" cButtonClose></button>
+  </c-modal-header>
+  <c-modal-body *ngIf="selectedTaskDetails" style="background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); max-height: 70vh; overflow-y: auto;">
+    <div class="mb-3">
+      <c-row>
+        <c-col md="6">
+          <strong>Task Type:</strong> {{getTaskTypeLabel(selectedTaskDetails.task_type)}}<br>
+          <strong>Started:</strong> {{selectedTaskDetails.started}}<br>
+          <strong>Completed:</strong> {{selectedTaskDetails.ended}}
+        </c-col>
+        <c-col md="6">
+          <div *ngIf="selectedTaskDetails.task_type === 'ip-scan'">
+            <strong>IP Range:</strong> {{selectedTaskDetails.start_ip}} - {{selectedTaskDetails.end_ip}}<br>
+            <strong>Username:</strong> {{selectedTaskDetails.username}}
+          </div>
+          <div *ngIf="selectedTaskDetails.task_type === 'bulk-add'">
+            <strong>Task ID:</strong> {{selectedTaskDetails.task_id}}<br>
+            <strong>Total Devices:</strong> {{selectedTaskDetails.device_count}}
+          </div>
+        </c-col>
+      </c-row>
+    </div>
+    <hr>
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h6 class="mb-0">Detailed Results:</h6>
+      <div class="col-md-4">
+        <input type="text" class="form-control form-control-sm" placeholder="Search IP or error..." 
+               [(ngModel)]="detailsSearchTerm" (input)="onDetailsSearch()">
+      </div>
+    </div>
+    <table class="table table-striped table-hover table-responsive">
+      <thead>
+        <tr>
+          <th>IP Address</th>
+          <th>Status</th>
+          <th *ngIf="selectedTaskDetails.task_type === 'bulk-add'">Error Details</th>
+          <th *ngIf="selectedTaskDetails.task_type === 'ip-scan'">Error Details</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let result of detailsPaginatedResults">
+          <td>{{result.ip}}</td>
+          <td>
+            <c-badge [color]="result.added ? 'success' : 'danger'">
+              {{result.added ? 'Success' : 'Failed'}}
+            </c-badge>
+          </td>
+          <td *ngIf="selectedTaskDetails.task_type === 'bulk-add'">
+            {{result.failures || 'N/A'}}
+          </td>
+          <td *ngIf="selectedTaskDetails.task_type === 'ip-scan'">
+            {{result.faileres || 'N/A'}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <nav *ngIf="getTotalDetailsPages() > 1" class="mt-3">
+      <ul class="pagination pagination-sm justify-content-center">
+        <li class="page-item" [class.disabled]="detailsCurrentPage === 1">
+          <button class="page-link" (click)="onDetailsPageChange(detailsCurrentPage - 1)" [disabled]="detailsCurrentPage === 1">
+            Previous
+          </button>
+        </li>
+        <li class="page-item" *ngFor="let page of [].constructor(getTotalDetailsPages()); let i = index" 
+            [class.active]="detailsCurrentPage === i + 1">
+          <button class="page-link" (click)="onDetailsPageChange(i + 1)">
+            {{i + 1}}
+          </button>
+        </li>
+        <li class="page-item" [class.disabled]="detailsCurrentPage === getTotalDetailsPages()">
+          <button class="page-link" (click)="onDetailsPageChange(detailsCurrentPage + 1)" 
+                  [disabled]="detailsCurrentPage === getTotalDetailsPages()">
+            Next
+          </button>
+        </li>
+      </ul>
+    </nav>
+    <div class="mt-3">
+      <c-badge color="success" class="me-2">Success: {{selectedTaskDetails.success_count}}</c-badge>
+      <c-badge color="danger">Failed: {{selectedTaskDetails.failed_count}}</c-badge>
+    </div>
+  </c-modal-body>
+  <c-modal-footer>
+    <button (click)="exportToCsv(selectedTaskDetails.result)" color="primary" cButton class="me-2">
+      <i class="fas fa-download"></i> Download CSV
+    </button>
+    <button (click)="closeDetailsModal()" cButton color="secondary">
+      Close
+    </button>
+  </c-modal-footer>
+</c-modal>
+
 <c-toaster position="fixed" placement="top-end"></c-toaster>

src/app/views/devices/devices.component.ts

@@ -39,7 +39,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
   public tz: string;
   public ispro:boolean=false;
 
-  constructor(
+  constructor( 
     private data_provider: dataProvider,
     private route: ActivatedRoute,
     private router: Router,
@@ -72,6 +72,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
   @ViewChild("grid", { static: true }) gridComponent: GuiGridComponent;
   @ViewChildren(ToasterComponent) viewChildren!: QueryList<ToasterComponent>;
   public source: Array<any> = [];
+  public originalSource: Array<any> = [];
   public columns: Array<GuiColumn> = [];
   public loading: boolean = true;
   public rows: any = [];
@@ -94,6 +95,28 @@ export class DevicesComponent implements OnInit, OnDestroy {
   public show_pass: boolean = false;
   public ExecutedDataModalVisible: boolean = false;
   public ExecutedData: any = [];
+  public filteredExecutedData: any = [];
+  public selectedTaskType: string = 'all';
+  public detailsModalVisible: boolean = false;
+  public selectedTaskDetails: any = null;
+  public detailsCurrentPage: number = 1;
+  public detailsPageSize: number = 10;
+  public detailsPaginatedResults: any[] = [];
+  public detailsSearchTerm: string = '';
+  public filteredDetailsResults: any[] = [];
+  public showWebAccessModal: boolean = false;
+  public currentDeviceInfo: any = null;
+  public addDeviceModalVisible: boolean = false;
+  public addDeviceStep: number = 1;
+  public csvFile: File | null = null;
+  public csvData: any[] = [];
+  public csvHeaders: string[] = [];
+  public csvPreview: any[] = [];
+  public columnMapping = { ip: '', username: '', password: '', port: '' };
+  public uploadStatus: string = 'Processing devices...';
+  public uploadResult = { success: 0, failed: 0, resultFile: null };
+  public currentTaskId: string = '';
+  public statusCheckTimer: any;
   
   toasterForm = {
     autohide: true,
@@ -165,10 +188,12 @@ export class DevicesComponent implements OnInit, OnDestroy {
         this.check_firmware();
         break;
       case "update":
-        this.update_firmware();
+        this.ConfirmAction = "update";
+        this.ConfirmModalVisible = true;
         break;
       case "upgrade":
-        this.upgrade_firmware();
+        this.ConfirmAction = "upgrade";
+        this.ConfirmModalVisible = true;
         break;
       case "logauth":
         this.router.navigate(["/authlog", { devid: dev.id }]);
@@ -183,7 +208,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
         this.router.navigate(["/backups", { devid: dev.id }]);
         break;
       case "reboot":
-        this.reboot_devices();
+        this.ConfirmAction = "reboot";
+        this.ConfirmModalVisible = true;
         break;
       case "delete":
         this.ConfirmAction = "delete";
@@ -374,6 +400,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
   }
   check_firmware() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .check_firmware(this.Selectedrows.toString())
       .then((res) => {
@@ -396,6 +423,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   update_firmware() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .update_firmware(this.Selectedrows.toString())
       .then((res) => {
@@ -417,6 +445,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   upgrade_firmware() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .upgrade_firmware(this.Selectedrows.toString())
       .then((res) => {
@@ -436,6 +465,7 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   reboot_devices() {
     var _self = this;
+    this.ConfirmModalVisible = false;
     this.data_provider
       .reboot_devices(this.Selectedrows.toString())
       .then((res) => {
@@ -492,11 +522,12 @@ export class DevicesComponent implements OnInit, OnDestroy {
         );
       }
       else{
-      _self.source = res.map((x: any) => {
+      _self.originalSource = res.map((x: any) => {
         if (x.upgrade_availble) _self.upgrades.push(x);
         if (x.update_availble) _self.updates.push(x);
         return x;
       });
+      _self.source = [..._self.originalSource];
       _self.device_interval();
       _self.loading = false;
     }
@@ -637,26 +668,273 @@ export class DevicesComponent implements OnInit, OnDestroy {
           _self.tz,
           "yyyy-MM-dd HH:mm:ss XXX"
         );
-        d.start_ip=d.info.start_ip;
+        d.start_ip=d.info.start_ip || 'N/A';
-        d.end_ip=d.info.end_ip;
+        d.end_ip=d.info.end_ip || 'N/A';
+        d.task_id=d.info.task_id || 'N/A';
+        d.device_count=d.info.device_count || 0;
+        d.username=d.info.username || 'N/A';
         d.result=JSON.parse(d.result);
+        d.success_count = d.result.filter((r: any) => r.added === true).length;
+        d.failed_count = d.result.filter((r: any) => r.added === false).length;
         index += 1;
         return d;
         });
+      _self.filteredExecutedData = [..._self.ExecutedData];
       }
     });
     }
 
+  filterByTaskType() {
+    if (this.selectedTaskType === 'all') {
+      this.filteredExecutedData = [...this.ExecutedData];
+    } else {
+      this.filteredExecutedData = this.ExecutedData.filter((d: any) => d.task_type === this.selectedTaskType);
+    }
+  }
 
+  showTaskDetails(task: any) {
+    this.selectedTaskDetails = task;
+    this.detailsCurrentPage = 1;
+    this.updateDetailsPagination();
+    this.detailsModalVisible = true;
+  }
 
+  updateDetailsPagination() {
+    if (!this.selectedTaskDetails?.result) return;
+    
+    // Filter results based on search term
+    this.filteredDetailsResults = this.selectedTaskDetails.result.filter((result: any) => 
+      result.ip.toLowerCase().includes(this.detailsSearchTerm.toLowerCase()) ||
+      (result.failures && result.failures.toLowerCase().includes(this.detailsSearchTerm.toLowerCase())) ||
+      (result.faileres && result.faileres.toLowerCase().includes(this.detailsSearchTerm.toLowerCase()))
+    );
+    
+    const startIndex = (this.detailsCurrentPage - 1) * this.detailsPageSize;
+    const endIndex = startIndex + this.detailsPageSize;
+    this.detailsPaginatedResults = this.filteredDetailsResults.slice(startIndex, endIndex);
+  }
 
+  onDetailsPageChange(page: number) {
+    this.detailsCurrentPage = page;
+    this.updateDetailsPagination();
+  }
 
+  getTotalDetailsPages(): number {
+    if (!this.filteredDetailsResults) return 0;
+    return Math.ceil(this.filteredDetailsResults.length / this.detailsPageSize);
+  }
 
+  onDetailsSearch() {
+    this.detailsCurrentPage = 1;
+    this.updateDetailsPagination();
+  }
 
+  closeDetailsModal() {
+    this.detailsModalVisible = false;
+    this.selectedTaskDetails = null;
+    this.detailsPaginatedResults = [];
+    this.filteredDetailsResults = [];
+    this.detailsCurrentPage = 1;
+    this.detailsSearchTerm = '';
+  }
 
+  filterUpdatable() {
+    this.source = this.originalSource.filter(device => device.update_availble);
+  }
 
+  filterUpgradable() {
+    this.source = this.originalSource.filter(device => device.upgrade_availble);
+  }
+
+  clearFilter() {
+    this.source = [...this.originalSource];
+  }
+
+  webAccess(device: any) {
+    this.currentDeviceInfo = device;
+    if (this.ispro) {
+      this.showWebAccessModal = true;
+    } else {
+      this.openDirectAccess();
+    }
+  }
+
+  openProxyAccess() {
+    if (this.currentDeviceInfo?.id) {
+      window.open(`/api/proxy/init?devid=${this.currentDeviceInfo.id}`, '_blank');
+    } else {
+      const ip = this.currentDeviceInfo?.ip;
+      if (ip) {
+        window.open(`/api/proxy/init?dev_ip=${ip}`, '_blank');
+      }
+    }
+    this.showWebAccessModal = false;
+  }
+
+  openDirectAccess() {
+    const ip = this.currentDeviceInfo?.ip;
+    if (ip) {
+      window.open(`http://${ip}`, '_blank');
+    }
+    this.showWebAccessModal = false;
+  }
+
+  closeWebAccessModal() {
+    this.showWebAccessModal = false;
+  }
+
+  openAddDeviceModal() {
+    this.addDeviceModalVisible = true;
+    this.resetAddDeviceForm();
+  }
+
+  closeAddDeviceModal() {
+    this.addDeviceModalVisible = false;
+    this.resetAddDeviceForm();
+  }
+
+  resetAddDeviceForm() {
+    this.addDeviceStep = 1;
+    this.csvFile = null;
+    this.csvData = [];
+    this.csvHeaders = [];
+    this.csvPreview = [];
+    this.columnMapping = { ip: '', username: '', password: '', port: '' };
+    this.uploadStatus = 'Processing devices...';
+    this.uploadResult = { success: 0, failed: 0, resultFile: null };
+    this.currentTaskId = '';
+    clearTimeout(this.statusCheckTimer);
+  }
+
+  onFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file && file.type === 'text/csv') {
+      this.csvFile = file;
+      this.parseCSV(file);
+    }
+  }
+
+  parseCSV(file: File) {
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      const csv = e.target.result;
+      const lines = csv.split('\n').filter((line: string) => line.trim());
+      
+      if (lines.length > 0) {
+        this.csvHeaders = lines[0].split(',').map((header: string) => header.trim());
+        this.csvData = lines.slice(1).map((line: string) => 
+          line.split(',').map((cell: string) => cell.trim())
+        );
+        this.csvPreview = this.csvData.slice(0, 3);
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  isValidMapping(): boolean {
+    return this.columnMapping.ip !== '' && 
+           this.columnMapping.username !== '' && 
+           this.columnMapping.password !== '' && 
+           this.columnMapping.port !== '' &&
+           this.csvData.length > 0;
+  }
+
+  uploadDevices() {
+    if (!this.isValidMapping()) return;
+    
+    this.addDeviceStep = 2;
+    
+    const devices = this.csvData.map(row => ({
+      ip: row[parseInt(this.columnMapping.ip)],
+      username: row[parseInt(this.columnMapping.username)],
+      password: row[parseInt(this.columnMapping.password)],
+      port: row[parseInt(this.columnMapping.port)]
+    }));
+
+    this.data_provider.bulk_add_devices(devices).then((res) => {
+      if ('error' in res) {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', 'Failed to start device upload', 'danger');
+        this.uploadResult = { success: 0, failed: devices.length, resultFile: null };
+      } else if ('taskId' in res) {
+        this.currentTaskId = res.taskId;
+        this.uploadStatus = 'Processing devices...';
+        this.checkUploadStatus();
+      } else {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', 'Invalid response from server', 'danger');
+        this.uploadResult = { success: 0, failed: devices.length, resultFile: null };
+      }
+    }).catch(() => {
+      this.addDeviceStep = 3;
+      this.uploadResult = { success: 0, failed: devices.length, resultFile: null };
+      this.show_toast('Error', 'Failed to upload devices', 'danger');
+    });
+  }
+
+  checkUploadStatus() {
+    clearTimeout(this.statusCheckTimer);
+    
+    this.data_provider.bulk_add_status(this.currentTaskId).then((res) => {
+      if ('error' in res) {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', 'Failed to check upload status', 'danger');
+        this.uploadResult = { success: 0, failed: 0, resultFile: null };
+        return;
+      }
+      
+      if (res.status === 'completed') {
+        this.addDeviceStep = 3;
+        this.uploadResult = {
+          success: res.success || 0,
+          failed: res.failed || 0,
+          resultFile: res.resultFile || null
+        };
+        this.show_toast('Success', `${res.success} devices added successfully`, 'success');
+        this.initGridTable();
+      } else if (res.status === 'failed') {
+        this.addDeviceStep = 3;
+        this.show_toast('Error', res.message || 'Upload failed', 'danger');
+        this.uploadResult = { success: 0, failed: 0, resultFile: null };
+      } else {
+        // Still processing
+        this.uploadStatus = res.message || 'Processing devices...';
+        this.statusCheckTimer = setTimeout(() => {
+          this.checkUploadStatus();
+        }, 3000);
+      }
+    }).catch(() => {
+      this.addDeviceStep = 3;
+      this.show_toast('Error', 'Failed to check upload status', 'danger');
+      this.uploadResult = { success: 0, failed: 0, resultFile: null };
+    });
+  }
+
+  downloadResults() {
+    if (this.uploadResult.resultFile) {
+      const link = document.createElement('a');
+      link.href = this.uploadResult.resultFile;
+      link.download = 'device_upload_results.csv';
+      link.click();
+    }
+  }
+
+  getTaskTypeLabel(taskType: string): string {
+    switch(taskType) {
+      case 'ip-scan': return 'IP Scan';
+      case 'bulk-add': return 'Bulk Add';
+      default: return taskType;
+    }
+  }
+
+  getStatusColor(success: number, failed: number): string {
+    if (failed === 0) return 'success';
+    if (success === 0) return 'danger';
+    return 'warning';
+  }
 
   ngOnDestroy(): void {
     clearTimeout(this.scan_timer);
+    clearTimeout(this.statusCheckTimer);
   }
 }

src/app/views/devices/devices.module.ts

@@ -17,6 +17,7 @@ import {
   ModalModule,
   ListGroupModule,
   TooltipModule,
+  TableModule,
 } from "@coreui/angular";
 import { MatMenuModule } from "@angular/material/menu";
 import { DevicesRoutingModule } from "./devices-routing.module";
@@ -44,6 +45,7 @@ import { GuiGridModule } from "@generic-ui/ngx-grid";
     ListGroupModule,
     MatMenuModule,
     TooltipModule,
+    TableModule,
   ],
   declarations: [DevicesComponent],
 })