merging code

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/system/audit-trails/audit-trails.component.html

@@ -45,7 +45,10 @@
 
           <mat-form-field appearance="outline" class="at-ff">
             <mat-label>Status</mat-label>
-            <mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')">
+            <mat-select
+              [formControl]="processingResult"
+              (selectionChange)="applyFilter($event.value, 'processingResult')"
+            >
               @for (processingResult of auditTrailSearchTemplateData.processingResults; track processingResult) {
                 <mat-option [value]="processingResult.id">{{ processingResult.processingResult }}</mat-option>
               }
@@ -54,7 +57,12 @@
 
           <mat-form-field appearance="outline" class="at-ff">
             <mat-label>User</mat-label>
-            <input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete" placeholder="Search user..." />
+            <input
+              matInput
+              [formControl]="user"
+              [matAutocomplete]="userNameAutocomplete"
+              placeholder="Search user..."
+            />
             <fa-icon icon="user" matPrefix class="at-ff__prefix"></fa-icon>
           </mat-form-field>
         </div>
@@ -63,17 +71,32 @@
         <div class="at-filters__row at-filters__row--3">
           <mat-form-field appearance="outline" class="at-ff">
             <mat-label>Action</mat-label>
-            <input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete" placeholder="e.g. CREATE, UPDATE" />
+            <input
+              matInput
+              [formControl]="actionName"
+              [matAutocomplete]="actionNameAutocomplete"
+              placeholder="e.g. CREATE, UPDATE"
+            />
           </mat-form-field>
 
           <mat-form-field appearance="outline" class="at-ff">
             <mat-label>Entity</mat-label>
-            <input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete" placeholder="e.g. CLIENT, LOAN" />
+            <input
+              matInput
+              [formControl]="entityName"
+              [matAutocomplete]="entityNameAutocomplete"
+              placeholder="e.g. CLIENT, LOAN"
+            />
           </mat-form-field>
 
           <mat-form-field appearance="outline" class="at-ff">
             <mat-label>Checker</mat-label>
-            <input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete" placeholder="Search checker..." />
+            <input
+              matInput
+              [formControl]="checker"
+              [matAutocomplete]="checkerAutocomplete"
+              placeholder="Search checker..."
+            />
           </mat-form-field>
         </div>
 
@@ -84,7 +107,13 @@
             <div class="at-date-group">
               <mat-form-field appearance="outline" class="at-ff at-ff--date" (click)="fromDatePicker.open()">
                 <mat-label>From Date</mat-label>
-                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" [formControl]="fromDate" />
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="fromDatePicker"
+                  [formControl]="fromDate"
+                />
                 <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
                 <mat-datepicker #fromDatePicker></mat-datepicker>
               </mat-form-field>
@@ -115,7 +144,13 @@
             <div class="at-date-group">
               <mat-form-field appearance="outline" class="at-ff at-ff--date" (click)="checkedFromDatePicker.open()">
                 <mat-label>From Date</mat-label>
-                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="checkedFromDatePicker" [formControl]="checkedFromDate" />
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="checkedFromDatePicker"
+                  [formControl]="checkedFromDate"
+                />
                 <mat-datepicker-toggle matSuffix [for]="checkedFromDatePicker"></mat-datepicker-toggle>
                 <mat-datepicker #checkedFromDatePicker></mat-datepicker>
               </mat-form-field>
@@ -128,7 +163,13 @@
             <div class="at-date-group">
               <mat-form-field appearance="outline" class="at-ff at-ff--date" (click)="checkedToDatePicker.open()">
                 <mat-label>To Date</mat-label>
-                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="checkedToDatePicker" [formControl]="checkedToDate" />
+                <input
+                  matInput
+                  [min]="minDate"
+                  [max]="maxDate"
+                  [matDatepicker]="checkedToDatePicker"
+                  [formControl]="checkedToDate"
+                />
                 <mat-datepicker-toggle matSuffix [for]="checkedToDatePicker"></mat-datepicker-toggle>
                 <mat-datepicker #checkedToDatePicker></mat-datepicker>
               </mat-form-field>
@@ -186,7 +227,12 @@
         <ng-container matColumnDef="processingResult">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
           <td mat-cell *matCellDef="let auditTrail">
-            <span class="at-status" [class.at-status--success]="auditTrail.processingResult === 'SUCCESS'" [class.at-status--failure]="auditTrail.processingResult === 'FAILURE'" [class.at-status--awaiting]="auditTrail.processingResult === 'AWAITING_APPROVAL'">
+            <span
+              class="at-status"
+              [class.at-status--success]="auditTrail.processingResult === 'SUCCESS'"
+              [class.at-status--failure]="auditTrail.processingResult === 'FAILURE'"
+              [class.at-status--awaiting]="auditTrail.processingResult === 'AWAITING_APPROVAL'"
+            >
               {{ auditTrail.processingResult }}
             </span>
           </td>
@@ -203,7 +249,9 @@
         </ng-container>
         <ng-container matColumnDef="entityName">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entity' | translate }}</th>
-          <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.entityName | translateKey: 'auditTrail.entities' }}</td>
+          <td mat-cell *matCellDef="let auditTrail">
+            {{ auditTrail.entityName | translateKey: 'auditTrail.entities' }}
+          </td>
         </ng-container>
         <ng-container matColumnDef="officeName">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
@@ -219,7 +267,9 @@
         </ng-container>
         <ng-container matColumnDef="checkedOnDate">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Checked Date' | translate }}</th>
-          <td mat-cell *matCellDef="let auditTrail" class="cell-mono">{{ auditTrail.checkedOnDate | datetimeFormat }}</td>
+          <td mat-cell *matCellDef="let auditTrail" class="cell-mono">
+            {{ auditTrail.checkedOnDate | datetimeFormat }}
+          </td>
         </ng-container>
         <ng-container matColumnDef="clientIp">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Client Ip' | translate }}</th>

src/app/system/audit-trails/audit-trails.component.scss

@@ -6,6 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+@use 'sass:color';
 @use '../../shared/styles/list-layout' as *;
 
 $blue: #1353a0;
@@ -90,7 +91,7 @@ $muted: #64748b;
     box-shadow: 0 1px 4px rgb(19 83 160 / 25%);
 
     &:hover {
-      background: darken($blue, 6%);
+      background: color.adjust($blue, $lightness: -6%);
     }
   }
 }
@@ -263,7 +264,7 @@ $muted: #64748b;
 }
 
 // ===== Responsive =====
-@media (max-width: 960px) {
+@media (width <= 960px) {
   .at-filters__row--3 {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -278,7 +279,7 @@ $muted: #64748b;
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .at-filters__row--3 {
     grid-template-columns: 1fr;
   }