Update flare-ui/src/app/components/activity-log/activity-log.component.ts

flare-ui/src/app/components/activity-log/activity-log.component.ts

@@ -5,6 +5,9 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatListModule } from '@angular/material/list';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
 
 interface ActivityLog {
   id: number;
@@ -33,189 +36,199 @@ interface ActivityLogResponse {
     MatProgressSpinnerModule,
     MatButtonModule,
     MatIconModule,
-    MatPaginatorModule
+    MatPaginatorModule,
+    MatListModule,
+    MatCardModule,
+    MatDividerModule
   ],
   template: `
-    <div class="activity-log-dropdown" (click)="$event.stopPropagation()">
-      <div class="activity-header">
-        <h3>🔔 Recent Activities</h3>
-        <button class="close-btn" (click)="close.emit()">×</button>
-      </div>
+    <mat-card class="activity-log-dropdown" (click)="$event.stopPropagation()">
+      <mat-card-header>
+        <mat-card-title>
+          <mat-icon>notifications</mat-icon>
+          Recent Activities
+        </mat-card-title>
+        <button mat-icon-button (click)="close.emit()">
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-card-header>
       
-      <div class="activity-content">
+      <mat-card-content>
         @if (loading && activities.length === 0) {
           <div class="loading">
             <mat-spinner diameter="30"></mat-spinner>
           </div>
         } @else if (activities.length === 0) {
-          <div class="empty">No activities found</div>
+          <div class="empty">
+            <mat-icon>inbox</mat-icon>
+            <p>No activities found</p>
+          </div>
         } @else {
-          <div class="activity-list">
+          <mat-list class="activity-list">
             @for (activity of activities; track activity.id) {
-              <div class="activity-item">
-                <div class="activity-time">{{ getRelativeTime(activity.timestamp) }}</div>
-                <div class="activity-content">
+              <mat-list-item>
+                <mat-icon matListItemIcon>{{ getActivityIcon(activity.action) }}</mat-icon>
+                <div matListItemTitle>
+                  <span class="activity-time">{{ getRelativeTime(activity.timestamp) }}</span>
+                </div>
+                <div matListItemLine>
                   <strong>{{ activity.user }}</strong> {{ getActionText(activity) }}
                   <em>{{ activity.entity_name }}</em>
                   @if (activity.details) {
                     <span class="details">• {{ activity.details }}</span>
                   }
                 </div>
-              </div>
+              </mat-list-item>
+              @if (!$last) {
+                <mat-divider></mat-divider>
+              }
             }
-          </div>
+          </mat-list>
         }
-      </div>
+      </mat-card-content>
       
-      <div class="activity-footer">
-        @if (totalItems > pageSize) {
-          <mat-paginator
-            [length]="totalItems"
-            [pageSize]="pageSize"
-            [pageIndex]="currentPage - 1"
-            [pageSizeOptions]="[10, 25, 50]"
-            (page)="onPageChange($event)"
-            showFirstLastButtons>
-          </mat-paginator>
-        } @else {
-          <button mat-button (click)="openFullView()">
-            <mat-icon>open_in_new</mat-icon>
-            View All Activities
-          </button>
-        }
-      </div>
-    </div>
+      <mat-card-actions *ngIf="totalItems > pageSize">
+        <mat-paginator
+          [length]="totalItems"
+          [pageSize]="pageSize"
+          [pageIndex]="currentPage - 1"
+          [pageSizeOptions]="[10, 25, 50]"
+          (page)="onPageChange($event)"
+          showFirstLastButtons>
+        </mat-paginator>
+      </mat-card-actions>
+      
+      <mat-card-actions *ngIf="totalItems <= pageSize && activities.length > 0">
+        <button mat-button (click)="openFullView()" class="full-width">
+          <mat-icon>open_in_new</mat-icon>
+          View All Activities
+        </button>
+      </mat-card-actions>
+    </mat-card>
   `,
   styles: [`
     .activity-log-dropdown {
-      position: absolute;
-      top: 100%;
-      right: 0;
-      width: 400px;
-      background: white;
-      border: 1px solid #dee2e6;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      z-index: 1000;
-      margin-top: 0.5rem;
+      width: 450px;
+      max-height: 600px;
       display: flex;
       flex-direction: column;
-      max-height: 600px;
+      overflow: hidden;
     }
 
-    .activity-header {
-      padding: 1rem;
-      border-bottom: 1px solid #dee2e6;
+    mat-card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      padding: 16px;
+      background-color: #f5f5f5;
 
-      h3 {
+      mat-card-title {
         margin: 0;
-        font-size: 1.1rem;
-      }
-
-      .close-btn {
-        background: none;
-        border: none;
-        font-size: 1.5rem;
-        cursor: pointer;
-        color: #6c757d;
-        line-height: 1;
-        padding: 0;
-        width: 24px;
-        height: 24px;
         display: flex;
         align-items: center;
-        justify-content: center;
+        gap: 8px;
+        font-size: 18px;
 
-        &:hover {
-          color: #333;
+        mat-icon {
+          font-size: 24px;
+          width: 24px;
+          height: 24px;
         }
       }
     }
 
-    .activity-content {
+    mat-card-content {
       flex: 1;
       overflow-y: auto;
+      padding: 0;
       min-height: 200px;
       max-height: 400px;
     }
 
     .activity-list {
-      .activity-item {
-        padding: 0.75rem 1rem;
-        border-bottom: 1px solid #f0f0f0;
-        transition: background-color 0.2s;
+      padding: 0;
 
-        &:hover {
-          background-color: #f8f9fa;
-        }
+      mat-list-item {
+        height: auto;
+        min-height: 72px;
+        padding: 12px 16px;
 
-        &:last-child {
-          border-bottom: none;
+        &:hover {
+          background-color: #f5f5f5;
         }
 
         .activity-time {
-          font-size: 0.85rem;
-          color: #6c757d;
-          margin-bottom: 0.25rem;
+          font-size: 12px;
+          color: #666;
         }
 
-        .activity-content {
-          font-size: 0.9rem;
+        strong {
+          color: #1976d2;
+          margin-right: 4px;
+        }
 
-          em {
-            color: #007bff;
-            font-style: normal;
-            font-weight: 500;
-          }
+        em {
+          color: #673ab7;
+          font-style: normal;
+          font-weight: 500;
+          margin: 0 4px;
+        }
 
-          .details {
-            color: #6c757d;
-            font-size: 0.85rem;
-          }
+        .details {
+          color: #666;
+          font-size: 12px;
+          margin-left: 4px;
         }
       }
     }
 
-    .activity-footer {
-      padding: 0.5rem;
-      border-top: 1px solid #dee2e6;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    mat-card-actions {
+      padding: 0;
+      margin: 0;
 
-      button {
-        width: 100%;
+      mat-paginator {
+        background: transparent;
       }
 
-      ::ng-deep .mat-paginator {
-        background: transparent;
+      .full-width {
         width: 100%;
-
-        .mat-paginator-container {
-          padding: 0;
-          justify-content: center;
-        }
-
-        .mat-paginator-range-label {
-          margin: 0 8px;
-        }
+        margin: 0;
       }
     }
 
-    .loading {
-      padding: 3rem;
+    .loading, .empty {
+      padding: 60px 20px;
       display: flex;
-      justify-content: center;
+      flex-direction: column;
       align-items: center;
+      justify-content: center;
+      color: #666;
+
+      mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+        color: #e0e0e0;
+        margin-bottom: 16px;
+      }
+
+      p {
+        margin: 0;
+        font-size: 14px;
+      }
     }
 
-    .empty {
-      padding: 3rem;
-      text-align: center;
-      color: #6c757d;
+    ::ng-deep {
+      .mat-mdc-list-item-unscoped-content {
+        display: block;
+      }
+
+      .mat-mdc-paginator {
+        .mat-mdc-paginator-container {
+          padding: 8px;
+          justify-content: center;
+        }
+      }
     }
   `]
 })
@@ -269,16 +282,15 @@ export class ActivityLogComponent implements OnInit {
   getRelativeTime(timestamp: string): string {
     const date = new Date(timestamp);
     const now = new Date();
-    const diff = now.getTime() - date.getTime();
-
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
 
-    if (minutes < 1) return 'just now';
-    if (minutes < 60) return `${minutes} min ago`;
-    if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
-    if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`;
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins} min ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
 
     return date.toLocaleDateString();
   }
@@ -304,4 +316,16 @@ export class ActivityLogComponent implements OnInit {
 
     return actions[activity.action] || activity.action.toLowerCase().replace(/_/g, ' ');
   }
+
+  getActivityIcon(action: string): string {
+    if (action.includes('CREATE')) return 'add_circle';
+    if (action.includes('UPDATE')) return 'edit';
+    if (action.includes('DELETE')) return 'delete';
+    if (action.includes('ENABLE')) return 'check_circle';
+    if (action.includes('DISABLE')) return 'cancel';
+    if (action.includes('PUBLISH')) return 'publish';
+    if (action.includes('IMPORT')) return 'cloud_upload';
+    if (action.includes('PASSWORD')) return 'lock';
+    return 'info';
+  }
 }