tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/activity-log/activity-log.component.ts

@@ -0,0 +1,137 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { TraxService } from '../../services/trax.service';
+import { Subject, debounceTime, takeUntil } from "rxjs";
+import { Router } from '@angular/router';
+import dayjs from 'dayjs';
+@Component({
+  selector: 'lib-activity-log',
+  templateUrl: './activity-log.component.html',
+  styleUrl: './activity-log.component.scss'
+})
+export class ActivityLogComponent implements OnInit,OnDestroy {
+  private destroy$ = new Subject();
+  headerData: any;
+  activityLogLoading: boolean = true;
+  activityLogNoData: boolean = false;
+  itemsPerPage = 10
+  currentPage = 1
+  totalItems = 0
+  sortColumName: string = '';
+  sortBy: any = '';
+  sortDirection: any = '';
+  paginationSizes:any[] = [];
+  pageSize = 10
+  activityLog: any[] = [];
+  dayjs = dayjs;
+  date: any;
+  userEmailes: any = [];
+
+  constructor(public gs: GlobalStateService,private pageInfo: PageInfoService,private TraxService: TraxService,
+    private changeDetector: ChangeDetectorRef, private router: Router,
+  ) {
+    this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" )
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+  ngOnInit(): void {
+    this.date = this.dayjs().format('YYYY-MM-DD');
+    this.gs.dataRangeValue
+    .pipe(takeUntil(this.destroy$), debounceTime(300))
+    .subscribe((data: any) => {
+        this.headerData = data;
+        this.getActivityLog()
+      })
+}
+
+  getActivityLog(): void {
+    this.activityLogLoading = true;
+    this.activityLogNoData = true;
+    const requestData = {
+      // fromDate: this.headerData.date.startDate,
+      // toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores.filter((store: any) => store.checked).map((store: any) => store.storeId),
+      userEmailes: this.userEmailes,
+      clientId:this.headerData.client,
+      limit: this.itemsPerPage,
+      offset: this.currentPage,
+    };
+
+    this.TraxService.getActivityLog(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((response: any) => {
+        this.activityLogLoading = false;
+        if (response?.code === 200 && response?.status === "success") {
+          this.activityLog = response.data[0]?.activityLogData || []
+          this.totalItems = response.data[0]?.count[0]?.total || 0;
+          this.setPaginationSizes()
+          this.activityLogLoading = false;
+          this.activityLogNoData = false;
+        } else {
+          this.activityLog = [];
+          this.activityLogLoading = false;
+          this.activityLogNoData = true;
+          this.activityLog = []
+          this.totalItems = 0
+          this.changeDetector.detectChanges()
+        }
+      }, error => {
+        this.activityLog = []
+        this.changeDetector.detectChanges()
+      });
+  }
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = pageSize;
+    this.pageSize = pageSize;
+    this.changeDetector.detectChanges();
+    this.getActivityLog()
+  }
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    this.getActivityLog()
+  }
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+    } else {
+      this.paginationSizes = [this.totalItems];
+      this.pageSize = this.totalItems;
+    }
+  }
+  
+  navigateToGallery(log: any): void {
+    let formattedDate = dayjs(log.createdAt).format('YYYY-MM-DD');
+    let checklistType: string;
+    if (log.type === 'custom') {
+      checklistType = 'custom';
+    } else if (['task', 'checklistTask', 'cctv'].includes(log.type)) {
+      checklistType = 'task';
+    } else {
+      checklistType = log.type || '--';
+    }
+    
+    let queryParams:any= {}
+    if(log.store_id&&log.store_id!=''){
+       queryParams = {
+        ChecklistDate: formattedDate,
+        checklistType: checklistType,
+        storeId: log.store_id,
+        sourceCheckList_id: log.checklistId,
+      };
+    }else{
+       queryParams = {
+        ChecklistDate: formattedDate,
+        checklistType: checklistType,
+        userEmail: log.userEmail,
+        sourceCheckList_id: log.checklistId,
+      };
+    }
+    if (log.redoStatus) {
+      queryParams.redoStatus = true;
+    }
+    this.router.navigate(['/manage/trax/gallery'], { queryParams });
+  } 
+}

package/src/lib/components/activity-log-v2/activity-log-v2.component.html

@@ -0,0 +1,189 @@
+<div class="col-lg-12 mt-4">
+    <div class="card">
+    <div class="card-header border-0 pt-3">
+        <h3 class="card-title align-items-start flex-column">
+            <span class="card-label mb-2">Activity Log </span>
+        </h3>
+        <div class="card-toolbar">
+            <div class="d-flex">
+                <div class="d-flex align-items-center  position-relative my-1">
+                    <span class="svg-icon footfallsearch svg-icon-1 position-absolute  ms-8">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none">
+                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
+                                transform="rotate(45 17.0365 15.1223)" fill="currentColor">
+                            </rect>
+                            <path
+                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                fill="currentColor"></path>
+                        </svg>
+                    </span>
+                    <input *ngIf="receivedData === 'checklist'" [(ngModel)]="searchInput" type="text" class="form-control ps-14 mx-2 logsearch"
+                        placeholder="Search with Store, Email, Checklist" autocomplete="off" (keyup.enter)="searchField()" />
+                    <input *ngIf="receivedData === 'task'" [(ngModel)]="searchInput" type="text" class="form-control ps-14 mx-2 logsearch"
+                        placeholder="Search with Store, Email, Task" autocomplete="off" (keyup.enter)="searchField()" />
+                    <!-- datepicker start -->
+                        <lib-date-range-picker (dateChange)="datechange($event)" [value]="count"></lib-date-range-picker>
+                    <!-- datepicker end -->
+                        <lib-filters  [dataObject]="dataObject" (appliedFilters)="applyFilters($event)"></lib-filters>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="d-flex overflow-auto mb-2 mx-4">
+        <ul
+            class="nav nav-stretch nav-line-tabs1 nav-line-tabs-2x  justify-content-center align-items-center border-transparent flex-nowrap">
+            <li class="nav-item cursor-pointer" (click)="Selecttabs('checklist')" [routerLink]="['/manage/trax/actioncenter']" [queryParams]="{ type: 'checklist' }">
+                <a [ngClass]="receivedData === 'checklist'?'btn activebtn':''" class="fw-semibold nav-link me-6">
+                    Checklist
+                </a>
+            </li>
+            <li class="nav-item cursor-pointer" (click)="Selecttabs('task')" [routerLink]="['/manage/trax/actioncenter']" [queryParams]="{ type: 'task' }">
+                <a [ngClass]="receivedData === 'task' || receivedData === 'Group Details Value'? 'btn activebtn':''"
+                    class="nav-link me-6">Task
+                </a>
+            </li>
+        </ul>
+        <!-- <lib-view-action [receivedData]="receivedData"></lib-view-action> -->
+    </div>
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table *ngIf="!taskLoading && !taskNoData" class="table text-nowrap bottom-border">
+                <thead>
+                    <tr>
+                        <th class="cursor-pointer" (click)="sortData('datetime')">Date & Time<svg
+                            [ngClass]="sortColumName === 'datetime' && sortDirection === 1 ? 'rotate' : ''"
+                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                            fill="none">
+                            <path
+                                d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                [attr.stroke]="sortColumName === 'datetime' ? '#00A3FF' : '#667085'"
+                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </th>
+                       
+                        <th *ngIf="receivedData === 'checklist'">Checklist Name</th>
+                        <th *ngIf="receivedData === 'task'">Task Name</th>
+                        <th>Action Performed</th>
+                        <th>Performed by</th>
+                        <th>Name</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    
+                    <tr *ngFor="let log of activityLogTableData">
+                        <td>
+                            <span class="table-title" [innerHTML]="formatDateTime(log._source.createAt)"></span>
+
+                        </td>
+                        <td>
+                            <div *ngIf="!(log._source.type === 'task' && log._source.fromCheckListName)">
+                                <span class="table-title me-2">
+                                    {{ log._source.checkListName || '--' }}
+                                </span>
+                            </div>
+                            <div *ngIf="log._source.type === 'task' && log._source.fromCheckListName">
+                                <span class="table-title me-2">
+                                    {{ log._source.checkListName || '--' }} <br>
+                                    <span class="mx-2"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                        <path d="M11.6654 7.50016L7.4987 3.3335M7.4987 3.3335L3.33203 7.50016M7.4987 3.3335V13.3335C7.4987 14.2176 7.84989 15.0654 8.47501 15.6905C9.10013 16.3156 9.94798 16.6668 10.832 16.6668H16.6654" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        </svg></span><span class="mx-2"><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
+                                            <path d="M8.41448 4.52303C8.69518 4.80371 8.69518 5.2588 8.41448 5.53948L5.53948 8.41448C5.2588 8.69518 4.80371 8.69518 4.52303 8.41448L3.08553 6.97698C2.80482 6.6963 2.80482 6.24121 3.08553 5.96053C3.36621 5.67982 3.8213 5.67982 4.10198 5.96053L5.03125 6.88978L7.39803 4.52303C7.67871 4.24232 8.1338 4.24232 8.41448 4.52303Z" fill="#667085"/>
+                                            <path d="M8.41448 11.7105C8.69518 11.9912 8.69518 12.4463 8.41448 12.727L5.53948 15.602C5.2588 15.8826 4.80371 15.8826 4.52303 15.602L3.08553 14.1645C2.80482 13.8838 2.80482 13.4287 3.08553 13.1479C3.36621 12.8673 3.8213 12.8673 4.10198 13.1479L5.03125 14.0773L7.39803 11.7105C7.67871 11.4299 8.1338 11.4299 8.41448 11.7105Z" fill="#667085"/>
+                                            <path d="M10.0625 6.46875C10.0625 6.0718 10.3844 5.75 10.7812 5.75H15.0938C15.4906 5.75 15.8125 6.0718 15.8125 6.46875C15.8125 6.8657 15.4906 7.1875 15.0938 7.1875H10.7812C10.3844 7.1875 10.0625 6.8657 10.0625 6.46875Z" fill="#667085"/>
+                                            <path d="M3.59375 0C1.60898 0 0 1.60898 0 3.59375V16.5312C0 18.516 1.60898 20.125 3.59375 20.125H9.48708C9.25429 19.6696 9.06436 19.1886 8.92261 18.6875H3.59375C2.40288 18.6875 1.4375 17.7221 1.4375 16.5312V3.59375C1.4375 2.40288 2.40288 1.4375 3.59375 1.4375H16.5312C17.7221 1.4375 18.6875 2.40288 18.6875 3.59375V8.92261C19.1886 9.06436 19.6696 9.25429 20.125 9.48708V3.59375C20.125 1.60898 18.516 0 16.5312 0H3.59375Z" fill="#667085"/>
+                                            <path d="M16.5313 23C20.1039 23 23 20.1039 23 16.5313C23 12.9586 20.1039 10.0625 16.5313 10.0625C12.9586 10.0625 10.0625 12.9586 10.0625 16.5313C10.0625 20.1039 12.9586 23 16.5313 23ZM16.5313 12.9375C16.9281 12.9375 17.25 13.2594 17.25 13.6563V15.8125H19.4063C19.8031 15.8125 20.125 16.1344 20.125 16.5313C20.125 16.9281 19.8031 17.25 19.4063 17.25H17.25V19.4063C17.25 19.8031 16.9281 20.125 16.5313 20.125C16.1344 20.125 15.8125 19.8031 15.8125 19.4063V17.25H13.6563C13.2594 17.25 12.9375 16.9281 12.9375 16.5313C12.9375 16.1344 13.2594 15.8125 13.6563 15.8125H15.8125V13.6563C15.8125 13.2594 16.1344 12.9375 16.5313 12.9375Z" fill="#667085"/>
+                                            </svg></span><span class="table-title"> {{ log._source.fromCheckListName || '--' }} </span>
+                                </span>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="table-title">
+                                <span class="table-title badge-light" [ngClass]="getActionBadgeClass(log._source.action)">
+                                    {{ getActionLabel(log._source.action) }}
+                                </span>
+                            </div>
+                            
+                        </td>        
+                        <td>
+                            <div 
+                                class="table-title d-flex"><span class="me-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M16.6654 17.5V15.8333C16.6654 14.9493 16.3142 14.1014 15.6891 13.4763C15.0639 12.8512 14.2161 12.5 13.332 12.5H6.66536C5.78131 12.5 4.93346 12.8512 4.30834 13.4763C3.68322 14.1014 3.33203 14.9493 3.33203 15.8333V17.5M13.332 5.83333C13.332 7.67428 11.8396 9.16667 9.9987 9.16667C8.15775 9.16667 6.66536 7.67428 6.66536 5.83333C6.66536 3.99238 8.15775 2.5 9.9987 2.5C11.8396 2.5 13.332 3.99238 13.332 5.83333Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg></span><span>{{ log._source.createdByEmail }}</span></div>
+                        </td>
+                         <td>
+                            <div 
+                                class="table-title d-flex"><span *ngIf="log._source?.coverage === 'store' || (!log._source?.coverage && log._source?.storeName) "><span class="me-3" *ngIf="log._source?.storeName"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M2.67893 5.80366L2.62568 5.88683C2.06764 6.87388 2.66347 8.1213 3.73508 8.2644C3.83217 8.27627 3.92251 8.28255 4.01078 8.28255C4.58893 8.28255 5.1001 8.03453 5.45637 7.6478L6.0097 7.04718L6.56116 7.64953C6.9131 8.03395 7.42311 8.28255 8.00517 8.28255C8.58461 8.28255 9.09755 8.0336 9.44917 7.64953L10.0024 7.04529L10.5555 7.64953C10.9072 8.0336 11.4201 8.28255 11.9996 8.28255C12.579 8.28255 13.0919 8.0336 13.4436 7.64953L13.9967 7.04529L14.5499 7.64953C14.9016 8.0336 15.4145 8.28255 15.9939 8.28255C16.0793 8.28255 16.1724 8.27625 16.2688 8.2645C17.3639 8.11518 17.9618 6.80091 17.323 5.80416C17.323 5.8041 17.323 5.80405 17.3229 5.80399L15.5648 3.06258L15.5648 3.06258L15.5638 3.06111C15.5486 3.03728 15.5112 3.01172 15.464 3.01172H4.53458C4.48744 3.01172 4.44995 3.03728 4.43474 3.06111L4.43413 3.06208L2.67893 5.80366ZM15.6504 10.7369V13.8689V14.6189H14.9004H5.09821H4.34821V13.8689V10.7374C4.23798 10.7456 4.12646 10.7498 4.01384 10.7498C3.97154 10.7498 3.92952 10.7492 3.88778 10.748V13.8689V15.8034C3.88778 16.4468 4.42168 16.9879 5.09821 16.9879H14.9004C15.5769 16.9879 16.1108 16.4468 16.1108 15.8034V13.8689V10.7482C16.071 10.7493 16.031 10.7498 15.9909 10.7498C15.8765 10.7498 15.7629 10.7455 15.6504 10.7369Z" stroke="#667085" stroke-width="1.5"/>
+                                    </svg></span><span>{{ log._source.storeName || '-' }}</span></span>
+                                    <span *ngIf="log._source?.coverage === 'user' || (!log._source?.coverage && log._source?.userEmail)">
+                                        <span class="me-3" *ngIf="log._source?.userEmail"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M16.6654 17.5V15.8333C16.6654 14.9493 16.3142 14.1014 15.6891 13.4763C15.0639 12.8512 14.2161 12.5 13.332 12.5H6.66536C5.78131 12.5 4.93346 12.8512 4.30834 13.4763C3.68322 14.1014 3.33203 14.9493 3.33203 15.8333V17.5M13.332 5.83333C13.332 7.67428 11.8396 9.16667 9.9987 9.16667C8.15775 9.16667 6.66536 7.67428 6.66536 5.83333C6.66536 3.99238 8.15775 2.5 9.9987 2.5C11.8396 2.5 13.332 3.99238 13.332 5.83333Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg></span><span>{{ log._source?.userEmail || '-'}}</span>
+                                    </span>
+                                </div>
+                        </td>
+                        <td>
+                            <div class="table-title">
+                                <!-- "['updated', 'edited', 'draft'].includes(log._source.action)" -->
+                                <span  *ngIf="['updated', 'edited'].includes(log._source.action) || (log._source.action === 'draft' && log._source.logDetails && !isLogDetailsEmpty(log._source.logDetails))"
+                                      (click)="viewAction(log._source)" 
+                                      class="text-primary cursor-pointer">
+                                    <u>View</u>
+                                </span>
+                                <span *ngIf="log._source.action === 'submit'"
+                                      (click)="navigateToGallery(log._source)" 
+                                      class="text-primary cursor-pointer">
+                                    <u>View</u>
+                                </span>
+                                <!-- *ngIf="!['updated', 'edited', 'submit', 'draft'].includes(log._source.action)" -->
+                                <span *ngIf="!['updated', 'edited', 'submit'].includes(log._source.action) && !(log._source.action === 'draft' && log._source.logDetails && !isLogDetailsEmpty(log._source.logDetails))">-</span>
+                            </div>
+                        </td>
+                        
+                          
+                    </tr>
+                </tbody>
+            </table>
+
+            <ng-container *ngIf="taskLoading">
+                <div class="row loader  d-flex justify-content-center align-items-center">
+                    <div class="shimmer">
+                        <div class="wrapper">
+                            <div class="stroke animate title"></div>
+                            <div class="stroke animate link"></div>
+                            <div class="stroke animate description"></div>
+                        </div>
+                    </div>
+                    <div class="shimmer">
+                        <div class="wrapper">
+                            <div class="stroke animate title"></div>
+                            <div class="stroke animate link"></div>
+                            <div class="stroke animate description"></div>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="taskNoData && !taskLoading">
+                <div class="row">
+                    <div class="col-lg-12 my-6">
+                        <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                            <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                            <div class="nodatamaintext mt-3">No data found</div>
+                            <div class="nodatasubtext">There is no result for Activity Log</div>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+
+        </div>
+        <div *ngIf="!taskLoading && !taskNoData">
+            <lib-pagination class="text-start" [itemsPerPage]="itemsPerPage" [currentPage]="currentPage"
+                [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+        </div>
+    </div>
+</div>
+</div>

package/src/lib/components/activity-log-v2/activity-log-v2.component.scss

@@ -0,0 +1,162 @@
+.table-title{
+    color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px; /* 142.857% */
+}
+.table-title-primary{
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px; /* 142.857% */
+    text-decoration-line: underline;
+}
+.card .card-header{
+    padding: 0px 1.50rem;
+}
+// .nav-group-outline {
+//     border-radius: 8px;
+//     border: 1px solid var(--Primary-300, #6BCAFF);
+//     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+// }
+// .nav-group .btn.activePlanBtn {
+//     border-right: 1px solid var(--Primary-300, #6BCAFF);
+//     background: var(--Primary-600, #00A3FF);
+//     color: white;
+// }
+// .nav-group .btn.inactivePlanBtn {
+//     background-color: white;
+//     color: #333;
+//     border: 1px solid #dcdcdc;
+// }
+.nav-item{
+    .nav-link{
+        color: var(--Gray-500, #667085);
+        font-size: 16px;
+        font-weight: 500;
+    }
+}
+.activebtn{
+    color: var(--Primary-700, #009BF3) !important;
+    border-radius: 6px !important;
+    background: var(--Primary-50, #EAF8FF) !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+}
+.daterange {
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 150% */
+}
+.nodatamaintext {
+    font-family: 'Inter';
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: center;
+    color: #101828;
+}
+
+.nodatasubtext {
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: center;
+    color: #667085;
+}
+
+.rotate {
+    transform: rotate(180deg);
+}
+.logsearch{
+    width: 370px;
+}
+
+.loader {
+    .title {
+        width: 65%;
+    }
+
+    .link {
+        width: 85%;
+    }
+
+    .description {
+        width: 95%;
+    }
+
+    .shimmer {
+        padding: 15px;
+        width: 95%;
+        height: 120px;
+        margin: 10px auto;
+        background: #ffffff;
+    }
+
+    .shimmer .image-card {
+        height: 90px;
+        width: 90px;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .stroke {
+        height: 15px;
+        background: #777;
+        margin-top: 20px;
+    }
+
+    .wrapper {
+        width: 0px;
+        animation: fullView 0.5s forwards linear;
+    }
+
+    @keyframes fullView {
+        100% {
+            width: 100%;
+        }
+    }
+
+    .animate {
+        animation: shimmer 3s;
+        animation-iteration-count: infinite;
+        background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+        background-size: 1000px 100%;
+    }
+
+    @keyframes shimmer {
+        from {
+            background-position: -1000px 0;
+        }
+
+        to {
+            background-position: 1000px 0;
+        }
+    }
+}
+/* Common badge styles */
+.badge-light {
+    display: flex;
+    padding: 8px 16px;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 0;
+    border-radius: 16px;
+    opacity: 0.8;
+    font-weight: 500;
+    width: 70%;
+}
+
+/* Individual badge colors */
+.badge-light-default { background: var(--Gray-100, #F2F4F7); color: var(--Gray-700, #344054); }
+.badge-light-primary1  {background: var(--Blue-50, #EFF8FF); color: var(--Blue-700, #175CD3 );}
+.badge-light-success { background: var(--Success-50, #ECFDF3); color: var(--Success-700, #027A48); }
+.badge-light-warning { background: var(--Warning-50, #FFFAEB); color: var(--Warning-700, #B54708); }
+.badge-light-delete { background: var(--Error-50, #FEF3F2); color: var(----Error-700, #B42318); }
+

package/src/lib/components/activity-log-v2/activity-log-v2.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityLogV2Component } from './activity-log-v2.component';
+
+describe('ActivityLogV2Component', () => {
+  let component: ActivityLogV2Component;
+  let fixture: ComponentFixture<ActivityLogV2Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ActivityLogV2Component]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ActivityLogV2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});