mikrofront/src/app/views/auth_log/auth.component.html

<c-row>
  <c-col xs>
    <c-card class="mb-4" [ngStyle]="component_devid && {'border-top': 'none'}">
      <c-card-header>
        <c-row>
          <c-col xs [lg]="11" style="display: flex;flex-direction: column;align-items: flex-start;">
            <h5>Authentication Logs
              <a style="cursor: pointer;" (click)="reinitgrid('none','none')"><i
                  *ngIf="devid!=0 && component_devid && !reloading" class="fa-solid fa-arrows-rotate"
                  style="color: #74C0FC;"></i>
                <i *ngIf="devid!=0 && component_devid && reloading" class="fa-solid fa-arrows-rotate fa-spin"
                  style="color: #74C0FC;"></i>
              </a>
            </h5>
            <c-badge color="warning" *ngIf="devid!=0 && !component_devid">Filtered Result For Device ID
              {{devid}}</c-badge>
            <c-alert color="warning" style="padding-top: 5px!important;font-size: 0.8rem;display: inline-block;"
              *ngIf="!filters['start_time'] && !filters['end_time']">
              <i class="fa-solid fa-triangle-exclamation mx-1"></i>Showing <strong>last 24 hours logs</strong> by
              default. Use filters to modify the date and time.
            </c-alert>
          </c-col>
          <c-col xs [lg]="1">
            <button (click)="toggleCollapse()" cButton class="me-1" color="primary"><i
                class="fa-solid fa-filter mr-1"></i>Filter</button>
          </c-col>
        </c-row>
      </c-card-header>
      <c-card-body>
        <c-row>
          <div [visible]="filters_visible" cCollapse>
            <c-col xs [lg]="12" class="example-form">
              <mat-form-field>
                <mat-label>Start date</mat-label>
                <input matInput [matDatepicker]="picker1" (dateChange)="reinitgrid('start',$event)"
                  [(ngModel)]="filters['start_time']" />
                <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
              </mat-form-field>
              <mat-form-field>
                <mat-label>End date</mat-label>
                <input matInput [matDatepicker]="picker2" (dateChange)="reinitgrid('end',$event)"
                  [(ngModel)]="filters['end_time']" />
                <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
                <mat-datepicker #picker2></mat-datepicker>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Connection Type</mat-label>
                <mat-select placeholder="Connection Type" (ngModelChange)="reinitgrid('connection_type',$event)"
                  [(ngModel)]="filters['connection_type']" #multiSelect>
                  <mat-option value="All">All</mat-option>
                  <mat-option *ngFor="let con of connection_types " [value]="con">
                    {{con}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Select action</mat-label>
                <mat-select placeholder="State" (ngModelChange)="reinitgrid('state',$event)"
                  [(ngModel)]="filters['state']" #multiSelect>
                  <mat-option value="All">All</mat-option>
                  <mat-option value="loggedin">
                    Logged In
                  </mat-option>
                  <mat-option value="loggedout">
                    Logged Out
                  </mat-option>
                  <mat-option value="failed">
                    Failed
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Server</mat-label>
                <mat-select placeholder="Server" (ngModelChange)="reinitgrid('server',$event)"
                  [(ngModel)]="filters['server']" #multiSelect>
                  <mat-option value="All">All</mat-option>
                  <mat-option *ngFor="let ac of ['Local','Mikrowizard']" [value]="ac">
                    {{ac}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Device IP</mat-label>
                <input (ngModelChange)="reinitgrid('devip',$event)" [(ngModel)]="filters['devip']" matInput>
              </mat-form-field>
              <mat-form-field>
                <mat-label>IP/MAC</mat-label>
                <input (ngModelChange)="reinitgrid('ip',$event)" [(ngModel)]="filters['ip']" matInput>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Username</mat-label>
                <input (ngModelChange)="reinitgrid('user',$event)" [(ngModel)]="filters['user']" matInput>
              </mat-form-field>
            </c-col>

          </div>

        </c-row>
        <div class="mb-3 d-flex justify-content-end gap-2">
          <span class="p-input-icon-left table-search-input">
            <i class="pi pi-search"></i>
            <input type="text" pInputText placeholder="Search logs..." (input)="applyFilterGlobal($event, 'contains')"
              class="form-control-sm" />
          </span>
        </div>

        <p-table #dt [value]="source" [paginator]="true" [rows]="10" [showCurrentPageReport]="true"
          [rowsPerPageOptions]="[10, 25, 50]" [resizableColumns]="true" columnResizeMode="expand" [showGridlines]="true"
          [stripedRows]="true" styleClass="p-datatable-sm p-datatable-gridlines p-datatable-striped"
          [globalFilterFields]="['username', 'name', 'ip', 'devip', 'by']" [(selection)]="selected_rows"
          (onRowSelect)="showLogDetails($event.data)" selectionMode="single">

          <ng-template pTemplate="header">
            <tr>
              <th pSortableColumn="index" style="width: 5rem" pResizableColumn>
                <div class="justify-between">
                  <span>#No</span>
                  <p-sortIcon field="index"></p-sortIcon>
                </div>
              </th>
              <th pSortableColumn="name" pResizableColumn>
                <div class="justify-between">
                  <span>Device Name</span>
                  <span>
                    <p-sortIcon field="name"></p-sortIcon>
                    <p-columnFilter type="text" field="name" display="menu" class="ms-auto" />
                  </span>
                </div>
              </th>
              <th pSortableColumn="devip" pResizableColumn>
                <div class="justify-between">
                  <span>Device IP</span>
                  <span>
                    <p-sortIcon field="devip"></p-sortIcon>
                    <p-columnFilter type="text" field="devip" display="menu" class="ms-auto" />
                  </span>
                </div>
              </th>
              <th pSortableColumn="username" pResizableColumn>
                <div class="justify-between">
                  <span>Username</span>
                  <span>
                    <p-sortIcon field="username"></p-sortIcon>
                    <p-columnFilter type="text" field="username" display="menu" class="ms-auto" />
                  </span>
                </div>
              </th>
              <th pSortableColumn="by" pResizableColumn>
                <div class="justify-between">
                  <span>With</span>
                  <span>
                    <p-sortIcon field="by"></p-sortIcon>
                    <p-columnFilter type="text" field="by" display="menu" class="ms-auto" />
                  </span>
                </div>
              </th>
              <th pSortableColumn="ip" pResizableColumn>
                <div class="justify-between">
                  <span>IP Address</span>
                  <span>
                    <p-sortIcon field="ip"></p-sortIcon>
                    <p-columnFilter type="text" field="ip" display="menu" class="ms-auto" />
                  </span>
                </div>
              </th>
              <th pSortableColumn="duration" pResizableColumn>
                <div class="justify-between">
                  <span>Time/Msg</span>
                  <span>
                    <p-sortIcon field="duration"></p-sortIcon>
                    <p-columnFilter type="text" field="duration" display="menu" class="ms-auto" />
                  </span>
                </div>
              </th>
              <th pSortableColumn="ltype" style="width: 120px" pResizableColumn>
                <div class="justify-between">
                  <span>State</span>
                  <p-sortIcon field="ltype"></p-sortIcon>
                  <p-columnFilter type="text" field="ltype" display="menu" class="ms-auto" />
                </div>
              </th>
              <th pSortableColumn="created" pResizableColumn>
                <div class="justify-between">
                  <span>Date</span>
                  <p-sortIcon field="created"></p-sortIcon>
                  <p-columnFilter type="text" field="created" display="menu" class="ms-auto" />
                </div>
              </th>
            </tr>
          </ng-template>

          <ng-template pTemplate="body" let-item>
            <tr [pSelectableRow]="item" style="cursor: pointer;">
              <td class="text-center">{{item.index}}</td>
              <td>
                <i *ngIf="item.stype=='local'" pTooltip="local user" style="color: #ff2a00; margin-right: 3px;"
                  class="fa-solid fa-user-tie"></i>
                <i *ngIf="item.stype=='radius'" pTooltip="radius user" style="color: #096114; margin-right: 3px;"
                  class="fa-solid fa-server"></i>
                {{item.name}}
              </td>
              <td>{{item.devip}}</td>
              <td>{{item.username}}</td>
              <td>{{item.by}}</td>
              <td>{{item.ip}}</td>
              <td>
                <span *ngIf="item.ltype!='failed'">{{item.duration}}</span>
                <span *ngIf="item.ltype=='failed'" class="text-muted small">{{item.message}}</span>
              </td>
              <td class="text-center">
                <c-badge color="success" *ngIf="item.ltype=='loggedin'"> Logged In</c-badge>
                <c-badge color="warning" *ngIf="item.ltype=='loggedout'"> Logged Out</c-badge>
                <c-badge color="danger" *ngIf="item.ltype=='failed'"> Failed</c-badge>
              </td>
              <td class="small">{{item.created}}</td>
            </tr>
          </ng-template>

          <ng-template pTemplate="emptymessage">
            <tr>
              <td colspan="9" class="text-center p-4">No authentication logs found.</td>
            </tr>
          </ng-template>
        </p-table>

        <!-- Details Drawer -->
        <p-drawer [(visible)]="detailsVisible" position="right" [style]="{width: '450px'}" header="Auth Log Details">
          <div *ngIf="selectedLog" class="p-3">
            <h5 class="border-bottom pb-2 mb-3"><i class="pi pi-shield me-2 text-primary"></i>Session Info</h5>
            <div class="row mb-2">
              <div class="col-4 fw-bold">Device:</div>
              <div class="col-8">{{selectedLog.name}} ({{selectedLog.devip}})</div>
            </div>
            <div class="row mb-2">
              <div class="col-4 fw-bold">User:</div>
              <div class="col-8">{{selectedLog.username}}</div>
            </div>
            <div class="row mb-2">
              <div class="col-4 fw-bold">Method:</div>
              <div class="col-8">{{selectedLog.by}}</div>
            </div>
            <div class="row mb-2">
              <div class="col-4 fw-bold">Status:</div>
              <div class="col-8">
                <c-badge color="success" *ngIf="selectedLog.ltype=='loggedin'"> Logged In</c-badge>
                <c-badge color="warning" *ngIf="selectedLog.ltype=='loggedout'"> Logged Out</c-badge>
                <c-badge color="danger" *ngIf="selectedLog.ltype=='failed'"> Failed</c-badge>
              </div>
            </div>

            <h5 class="border-bottom pb-2 mb-3 mt-4"><i class="pi pi-map-marker me-2 text-primary"></i>Connection</h5>
            <div class="row mb-2">
              <div class="col-4 fw-bold">IP/MAC:</div>
              <div class="col-8">{{selectedLog.ip}}</div>
            </div>
            <div class="row mb-2">
              <div class="col-4 fw-bold">Duration:</div>
              <div class="col-8">{{selectedLog.duration}}</div>
            </div>
            <div class="row mb-2">
              <div class="col-4 fw-bold">Date:</div>
              <div class="col-8 small">{{selectedLog.created}}</div>
            </div>

            <div *ngIf="selectedLog.message" class="mt-4">
              <h5 class="border-bottom pb-2 mb-3"><i class="pi pi-envelope me-2 text-primary"></i>System Message</h5>
              <div class="bg-light p-2 rounded small border text-break">
                {{selectedLog.message}}
              </div>
            </div>
          </div>
        </p-drawer>
      </c-card-body>
    </c-card>
  </c-col>
</c-row>