aConnect-UX/src/app/transaction-logs/transaction-logs.component.html

<div id="layout-wrapper">
  <div class="inner-pg-sp">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="d-sm-flex align-items-center justify-content-between navbar-header p-0"></div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="col-xl-12 mt-4">
        <div class="card border">
          <div class="card-body">
            <div class="table-section">
              <div class="row">
                <div class="col-lg-12">
                  <div class="card-body mt-2 p-0">
                    <div class="card mb-0 mt-2">
                      <div class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
                        {{ "transactionLogs" | translate }}

                        <div class="d-flex align-items-center gap-2">
                          <!-- Date Filter Toggle Button -->
                          <button
                            class="btn btn-sm btn-outline-info"
                            (click)="toggleDateFilters()"
                            [title]="(showDateFilters ? 'hideDateFilters' : 'showDateFilters') | translate"
                          >
                            <i class="fas fa-calendar-alt"></i>
                            <span class="d-none d-md-inline ms-1">{{ "dateFilter" | translate }}</span>
                          </button>
                          
                          <div class="search-box">
                            <input
                              type="text"
                              class="form-control form-control-sm"
                              [(ngModel)]="searchText"
                              (ngModelChange)="onSearch($event)"
                              placeholder="{{ 'search' | translate }}"
                              [disabled]="isLoading"
                            />
                            <i class="fas fa-search search-icon"></i>
                          </div>
                          
                          <div class="d-flex align-items-center gap-2">
                            <button
                              class="btn btn-sm btn-outline-success"
                              (click)="exportDataInExcel()"
                              [disabled]="isLoading || transactionLog.length === 0"
                              title="Export to Excel"
                            >
                              <i class="fa fa-download"></i>
                            </button>
                          </div>

                          <button
                            class="btn btn-sm btn-outline-secondary"
                            (click)="toggleTableCard()"
                            [title]="(transactionDataExpanded ? 'collapse' : 'expand') | translate"
                          >
                            <i *ngIf="transactionDataExpanded" class="dripicons-chevron-up"></i>
                            <i *ngIf="!transactionDataExpanded" class="dripicons-chevron-down"></i>
                          </button>
                        </div>
                      </div>

                      <!-- Date Filter Section -->
                      <div class="card-body border-bottom bg-light" *ngIf="showDateFilters">
                        <div class="row g-3">
                          <div class="col-md-3">
                            <label class="form-label small">{{ "fromDate" | translate }}</label>
                            <input
                              type="date"
                              class="form-control form-control-sm"
                              [(ngModel)]="fromDate"
                              [max]="maxDate"
                              (change)="onDateFilterChange()"
                              [disabled]="isLoading"
                            />
                          </div>
                          <div class="col-md-3">
                            <label class="form-label small">{{ "toDate" | translate }}</label>
                            <input
                              type="date"
                              class="form-control form-control-sm"
                              [(ngModel)]="toDate"
                              [max]="maxDate"
                              (change)="onDateFilterChange()"
                              [disabled]="isLoading"
                            />
                          </div>
                          <div class="col-md-6">
                            <div class="d-flex flex-wrap gap-2 align-items-end h-100">
                              <!-- Quick Date Filters -->
                              <div class="btn-group btn-group-sm">
                                <button
                                  class="btn btn-outline-primary"
                                  (click)="applyLast7Days()"
                                  [disabled]="isLoading"
                                >
                                  {{ "last7Days" | translate }}
                                </button>
                                <button
                                  class="btn btn-outline-primary"
                                  (click)="applyLast30Days()"
                                  [disabled]="isLoading"
                                >
                                  {{ "last30Days" | translate }}
                                </button>
                                <button
                                  class="btn btn-outline-primary"
                                  (click)="applyThisMonth()"
                                  [disabled]="isLoading"
                                >
                                  {{ "thisMonth" | translate }}
                                </button>
                              </div>
                              
                              <!-- Clear Filter Button -->
                              <button
                                class="btn btn-sm btn-outline-danger"
                                (click)="clearDateFilters()"
                                [disabled]="isLoading || (!fromDate && !toDate)"
                              >
                                <i class="fas fa-times"></i>
                                {{ "clearFilter" | translate }}
                              </button>
                            </div>
                          </div>
                        </div>
                        
                        <!-- Active Filter Badge -->
                        <div class="mt-2" *ngIf="fromDate || toDate">
                          <span class="badge bg-info">
                            <i class="fas fa-filter me-1"></i>
                            {{ "activeFilter" | translate }}: 
                            <span *ngIf="fromDate">{{ "from" | translate }} {{ fromDate | date }}</span>
                            <span *ngIf="fromDate && toDate"> {{ "to" | translate }} </span>
                            <span *ngIf="toDate">{{ toDate | date }}</span>
                          </span>
                        </div>
                      </div>

                      <div
                        class="card-body"
                        *ngIf="transactionDataExpanded; else collapsedTable"
                      >
                        <!-- Loading State -->
                        <div *ngIf="isLoading" class="text-center py-5">
                          <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                          </div>
                          <p class="text-muted mt-2">{{ "loadingTransactionLogs" | translate }}</p>
                          <small *ngIf="fromDate || toDate" class="text-info">
                            {{ "filteringByDate" | translate }}
                          </small>
                        </div>

                        <!-- Error Message -->
                        <div *ngIf="!isLoading && errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
                          {{ errorMessage }}
                          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="errorMessage = ''"></button>
                        </div>

                        <!-- No Data Found -->
                        <div *ngIf="!isLoading && !errorMessage && transactionLog.length === 0" class="text-center py-5 text-muted">
                          <i class="fas fa-database fa-3x mb-3 opacity-50"></i>
                          <h5>{{ "noTransactionLogsFound" | translate }}</h5>
                          <p *ngIf="fromDate || toDate" class="small">
                            {{ "tryAdjustingFilters" | translate }}
                          </p>
                        </div>

                        <!-- Data Table -->
                        <div *ngIf="!isLoading && !errorMessage && transactionLog.length > 0" class="table-responsive">
                          <table class="table table-hover table-bordered mb-0">
                            <thead class="table-light">
                              <tr>
                                <th scope="col">{{ "logID" | translate }}</th>
                                <th scope="col">{{ "organization" | translate }}</th>
                                <th scope="col">{{ "transactionID" | translate }}</th>
                                <th scope="col">{{ "drAccount" | translate }}</th>
                                <th scope="col">{{ "crAccount" | translate }}</th>
                                <th scope="col">{{ "drPcaGlacode" | translate }}</th>
                                <th scope="col">{{ "crPcaglacode" | translate }}</th>
                                <th scope="col">{{ "transactionUri" | translate }}</th>
                                <th scope="col">{{ "transactionCode" | translate }}</th>
                                <th scope="col">{{ "paymentMode" | translate }}</th>
                                <th scope="col">{{ "date" | translate }}</th>
                                <th scope="col">{{ "channel" | translate }}</th>
                                <th scope="col">{{ "createdAt" | translate }}</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr *ngFor="let log of filteredItems | tableFilter: searchText: [
                                    'logId',
                                    'porOrgacode',
                                    'transactionID',
                                    'drMbmbkmsnumber',
                                    'crMbmbkmsnumber',
                                    'drPcaGlacode',
                                    'crPcaglacode',
                                    'transactionUri',
                                    'transactionCode',
                                    'ppmPymdcode',
                                    'sgtGntrdate',
                                    'channelCode',
                                    'createdAt'
                                  ]">
                                <td><code>{{ log.logId || '-' }}</code></td>
                                <td>{{ log.porOrgacode || '-' }}</td>
                                <td><strong>{{ log.transactionID || '-' }}</strong></td>
                                <td>{{ log.drMbmbkmsnumber || '-' }}</td>
                                <td>{{ log.crMbmbkmsnumber || '-' }}</td>
                                <td>{{ log.drPcaGlacode || '-' }}</td>
                                <td>{{ log.crPcaglacode || '-' }}</td>
                                <td><small class="text-muted">{{ log.transactionUri || 'N/A' }}</small></td>
                                <td><span class="badge bg-secondary">{{ log.transactionCode || 'N/A' }}</span></td>
                                <td>{{ log.ppmPymdcode || '-' }}</td>
                                <td>{{ log.sgtGntrdate | date: 'MMM dd, yyyy' }}</td>
                                <td>{{ log.channelCode || '-' }}</td>
                                <td>{{ log.createdAt | date: 'MMM dd, yyyy HH:mm' }}</td>
                              </tr>
                            </tbody>
                          </table>

                          <!-- Pagination -->
                          <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap">
                            <!-- Items per page -->
                            <div class="d-flex align-items-center gap-2 mb-2 mb-md-0">
                              <span class="text-muted small">{{ "show" | translate }}</span>
                              <div style="width: 120px;">
                                <ng-select
                                  class="form-select-sm"
                                  [items]="pageSizeOptions"
                                  bindValue="value"
                                  [(ngModel)]="itemsPerPage"
                                  (change)="itemsPerPageChanged()"
                                  [searchable]="false"
                                  [clearable]="false"
                                  [dropdownPosition]="'top'"
                                  [disabled]="isLoading"
                                >
                                  <ng-template ng-option-tmp let-item="item">
                                    {{ item.value }} {{ "entries" | translate }}
                                  </ng-template>

                                  <ng-template ng-label-tmp let-item="item">
                                    {{ item.value }} {{ "entries" | translate }}
                                  </ng-template>
                                </ng-select>
                              </div>
                            </div>

                            <!-- Page info -->
                            <div class="text-muted mb-2 mb-md-0">
                              {{ "page" | translate }} {{ currentPage }}
                              {{ "of" | translate }} {{ totalPages() }}
                              <span class="d-none d-md-inline">
                                ({{ totalCount }} {{ "totalItems" | translate }})
                              </span>
                              <span *ngIf="fromDate || toDate" class="badge bg-info ms-2">
                                <i class="fas fa-filter"></i>
                              </span>
                            </div>

                            <!-- Pagination buttons -->
                            <div class="btn-group">
                              <button
                                class="btn btn-outline-primary btn-sm"
                                (click)="previousPage()"
                                [disabled]="currentPage === 1 || isLoading"
                              >
                                <i class="fas fa-chevron-left me-1"></i>
                                {{ "previous" | translate }}
                              </button>
                              <button
                                class="btn btn-outline-primary btn-sm"
                                (click)="nextPage()"
                                [disabled]="currentPage === totalPages() || isLoading"
                              >
                                {{ "next" | translate }}
                                <i class="fas fa-chevron-right ms-1"></i>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #collapsedTable>
  <div class="card-body text-center py-4 text-muted" *ngIf="!isLoading">
    <i class="dripicons-chevron-down fa-2x mb-2"></i>
    <p>{{ "tableCollapsed" | translate }}</p>
    <button class="btn btn-sm btn-outline-primary" (click)="toggleTableCard()">
      {{ "showTable" | translate }}
    </button>
  </div>
</ng-template>