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

package/src/lib/components/dashboard-info/monthlyperformance-datepicker/monthlyperformance-datepicker.component.html

@@ -0,0 +1,110 @@
+<div class="calendar-container p-5">
+  <div class="performanceheading">Monthly Performance <span class="cursor-pointer"
+    [ngbTooltip]="tooltipContent"
+    placement="bottom"
+    triggers="mouseenter:mouseleave"
+    tooltipClass="custom-tooltip">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+      <g clip-path="url(#clip0_3701_29180)">
+      <path d="M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </g>
+      <defs>
+      <clipPath id="clip0_3701_29180">
+      <rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
+      </clipPath>
+      </defs>
+      </svg>
+  </span>
+  
+  <ng-template #tooltipContent>
+    <div class="tooltip-container">
+      <div class="performance-box">
+        <div class="performance-item">
+          <span class="number primary900">1</span>
+          <span class="performancetext">Overall performance 86 to 100%</span>
+        </div>
+        <div class="performance-item">
+          <span class="number blue33B5FF">2</span>
+          <span class="performancetext">Overall performance 71 to 85%</span>
+        </div>
+        <div class="performance-item">
+          <span class="number lightBlue6BCAFF">3</span>
+          <span class="performancetext">Overall performance 56 to 70%</span>
+        </div>
+        <div class="performance-item">
+          <span class="number orangeF79009">4</span>
+          <span class="performancetext">Overall performance 41 to 55%</span>
+        </div>
+        <div class="performance-item">
+          <span class="number redF04438">5</span>
+          <span class="performancetext">Overall performance below 40%</span>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  </div>
+ 
+  <div  class="calendar">
+    <div class="calendar-header my-3">
+      <span class="cursor-pointer" (click)="previousMonth()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M12.5 15L7.5 10L12.5 5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+      <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>
+      <span class="cursor-pointer" (click)="nextMonth()">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M7.5 15L12.5 10L7.5 5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+    </div>
+
+    <div class="calendar-body my-5">
+      <!-- <ng-container *ngIf="monthlyPeformanceLoading">
+        <div class="row loader no-scrollbar 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="monthlyPeformanceNoData && !monthlyPeformanceLoading">
+        <div class="row no-scrollbar">
+            <div class="col-lg-12 my-7">
+                <div class="card-body mb-6 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 Monthly Performance
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container> -->
+    <!-- *ngIf="!monthlyPeformanceLoading && !monthlyPeformanceNoData" -->
+      <div >
+      <div class="day-names">
+        <div *ngFor="let day of dayNames">{{ day }}</div>
+      </div>
+      <div class="calendar-days">
+        <div *ngFor="let _ of getEmptyDays()" class="empty-day"></div>
+        <div *ngFor="let day of getDaysInMonth()" class="symbol symbol-35px symbol-circle">
+          <span [ngClass]="getDayClass(day)"  class="symbol-label">
+            {{ day }}
+          </span>
+      </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</div>
+

package/src/lib/components/dashboard-info/monthlyperformance-datepicker/monthlyperformance-datepicker.component.scss

@@ -0,0 +1,260 @@
+.calendar-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    border-radius: 8px;
+  background: #FFF;
+  }
+  
+  .calendar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-height: 315px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+  }
+  .calendar::-webkit-scrollbar {
+    display: none;
+}
+  
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    color: var(--Gray-700, #344054);
+text-align: center;
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px;
+position: sticky !important;
+top: 0 !important;
+background-color: white;
+z-index: 2;
+  }
+  
+  .calendar-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .day-names {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  
+  .calendar-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+  
+  .empty-day {
+    visibility: hidden;
+  }
+  
+  .calendar-days div {
+    text-align: center;
+    border-radius: 50%;
+    cursor: not-allowed;
+    margin-top: 10%;
+    margin-left: 19%;
+  }
+  
+  .selected-day {
+    background-color: #00a3ff;
+    color: white;
+  }
+  
+  .disabled-day {
+    cursor: not-allowed;
+  }
+  
+  button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  .performanceheading{
+    color: var(--Gray-900, #101828);
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px;
+  }
+  
+  .primary900 {
+    background-color: var(--Primary-900, #0085D2);
+    color: white;
+  }
+  .blue33B5FF {
+    background-color: #33B5FF;
+    color: white;
+  }
+  .lightBlue6BCAFF {
+    background-color: #6BCAFF;
+    color: white;
+  }
+  .orangeF79009 {
+    background-color: #F79009;
+    color: white;
+  }
+  .redF04438 {
+    background-color: #F04438;
+    color: white;
+  }
+  .calendar-day
+  {
+    width: 85%;
+    height: 90%;
+  }
+.calendar-day:hover {
+  opacity: 0.8;
+}
+.empty-day {
+  width: 40px;
+  height: 40px;
+  display: inline-block;
+}
+.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;
+}
+.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;
+      }
+  }
+}
+
+.custom-tooltip .tooltip-container {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 130% !important;
+}
+
+.tooltip {
+  display: flex;
+  align-items: center;
+}
+
+.tooltip-icon {
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.tooltip-text {
+  font-size: 14px;
+  color: #333;
+}
+
+.performance-box {
+  margin-top: 10px;
+}
+
+.performance-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.number {
+  display: inline-block;
+  width: 25px;
+  height: 20px;
+  text-align: center;
+  border-radius: 50%;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+.performancetext {
+  color: #000;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+}
+.no-scrollbar {
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}

package/src/lib/components/dashboard-info/monthlyperformance-datepicker/monthlyperformance-datepicker.component.spec.ts

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

package/src/lib/components/dashboard-info/monthlyperformance-datepicker/monthlyperformance-datepicker.component.ts

@@ -0,0 +1,143 @@
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { GlobalStateService } from 'tango-app-ui-global';
+import { ToastService } from 'tango-app-ui-shared';
+import { TraxService } from '../../../services/trax.service';
+;
+
+@Component({
+  selector: 'lib-monthlyperformance-datepicker',
+  templateUrl: './monthlyperformance-datepicker.component.html',
+  styleUrl: './monthlyperformance-datepicker.component.scss'
+})
+export class MonthlyperformanceDatepickerComponent implements OnChanges, OnDestroy, OnInit {
+  currentYear: number = new Date().getFullYear();
+  currentMonth: number = new Date().getMonth();
+  dayNames: string[] = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+  monthNames: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  headerData: any;
+
+  performanceData: any[] = []; // This will store the performance data from the API response
+  private detach = new Subject();
+  private destroy$ = new Subject<void>();
+  receivedData: string = "Checklist";
+  selectedvalue: any;
+  monthlyPeformanceLoading: boolean = true;
+  monthlyPeformanceNoData: boolean = false;
+  @Input() monthlyperformce: string;
+  monthlyToDate: any;
+  userEmailes: any = [];
+
+
+  constructor(private route: ActivatedRoute, private router: Router, public gs: GlobalStateService, private changeDetector: ChangeDetectorRef, private toast: ToastService,
+    private TraxService: TraxService,
+  ) { this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]" ) }
+  ngOnDestroy(): void {
+    this.detach.next(true);
+    this.detach.complete();
+  }
+
+  ngOnChanges(changes: SimpleChanges,): void {
+    if (this.headerData) {
+      this.headerData;
+      this.getMonthlyPeformanceData();
+    }
+  }
+
+  ngOnInit(): void {
+    this.route?.queryParams
+      ?.pipe(takeUntil(this.detach))
+      .subscribe((params) => {
+        if (params.type === 'Checklist') {
+          this.selectedvalue = params.checklist
+          this.receivedData = 'Checklist';
+          // this.infoCardsData = params.checklistData ? JSON.parse(params.checklistData) : null;
+        } else if (params.type === 'store') {
+          this.selectedvalue = params.store_id
+          this.receivedData = 'Store';
+        } else if (params.type === 'user') {
+          this.selectedvalue = params.userEmail
+          this.receivedData = 'User';
+        }
+      });
+
+    this.gs.dataRangeValue
+      .pipe(takeUntil(this.destroy$), debounceTime(300))
+      .subscribe((data: any) => {
+        if (data) {
+          this.headerData = data;
+        }
+      })
+}
+
+  getMonthlyPeformanceData(): void {
+    this.monthlyPeformanceLoading = true;
+    this.monthlyPeformanceNoData = 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,
+      groupByType: this.receivedData,
+      groupByValue: this.monthlyperformce,
+      monthDate: this.monthlyToDate,
+    };
+
+    this.TraxService.getMonthlyPeformanceData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+      if (response?.code === 200 && response?.status === "success") {
+        this.performanceData = response.data?.monthlyChartData || [];
+        this.monthlyPeformanceLoading = false;
+        this.monthlyPeformanceNoData = false;
+        this.changeDetector.detectChanges();
+      } else {
+        this.performanceData = []
+        this.monthlyPeformanceLoading = false;
+        this.monthlyPeformanceNoData = true;
+      }
+    },
+      error => {
+        this.performanceData = []
+        this.monthlyPeformanceLoading = false;
+        this.monthlyPeformanceNoData = true;
+        this.changeDetector.detectChanges();
+      });
+  }
+
+  getDaysInMonth(): number[] {
+    const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+  }
+  getEmptyDays(): number[] {
+    const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
+    return Array(firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1).fill(0);
+  }
+  getDayClass(day: number): string {
+    const predefinedDay = this.performanceData.find(d => d.date === day);
+    return predefinedDay ? predefinedDay.colorClass : '';
+  }
+  previousMonth(): void {
+    if (this.currentMonth === 0) {
+      this.currentMonth = 11;
+      this.currentYear--;
+    } else {
+      this.currentMonth--;
+    }
+    let formattedMonth = (this.currentMonth + 1).toString().padStart(2, '0');
+    this.monthlyToDate = `${this.currentYear}-${formattedMonth}-25`;
+    this.getMonthlyPeformanceData();
+  }
+
+  nextMonth(): void {
+    if (this.currentMonth === 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    } else {
+      this.currentMonth++;
+    }
+    let formattedMonth = (this.currentMonth + 1).toString().padStart(2, '0');
+    this.monthlyToDate = `${this.currentYear}-${formattedMonth}-25`;
+    this.getMonthlyPeformanceData();
+  }
+}

package/src/lib/components/dashboard-layout/dashboard-layout.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

package/src/lib/components/dashboard-layout/dashboard-layout.component.spec.ts

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

package/src/lib/components/dashboard-layout/dashboard-layout.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-dashboard-layout',
+  templateUrl: './dashboard-layout.component.html',
+  styleUrl: './dashboard-layout.component.scss'
+})
+export class DashboardLayoutComponent {
+
+}

package/src/lib/components/disabled-select/disabled-select.component.html

@@ -0,0 +1,44 @@
+<div class="outer-container">
+    <div [ngClass]="disabled ? 'disable-input':''"  (click)="openDropdown($event)"  class="form-select">
+    <ng-container *ngIf="multi" >
+    <span *ngIf="selectedValues?.length" class="select-value mx-2"> <img class="me-2" alt="Pic" src="./assets/tango/Image/users-teams.svg">{{selectedValues?.[0]?.[searchField]}}</span> 
+    <!-- <span *ngIf="selectedValues?.length > 1" class="select-value mx-2"><img class="me-2"  alt="Pic" src="./assets/tango/Image/users-teams.svg">{{selectedValues?.[1]?.[searchField]}}</span>  -->
+    <span class="select-value mx-2" *ngIf="selectedValues?.length > 1">+{{selectedValues?.length -1}}</span> {{label}}    
+    </ng-container>
+    <ng-container *ngIf="!multi" >
+        {{selectedValues?.[0]?.[searchField]}}
+    </ng-container>
+    </div>
+    <div [ngClass]="[showDropdown ? '' : 'd-none', dropDowndisabled ? 'disabled-dropdown' : '']"  class="input-container dropdown" >
+        <div class="w-100 input-wrapper">
+        <input [(ngModel)]="searchValue" placeholder="Search"  (input)="onInput($event)" type="text">  
+        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+            <path d="M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z" stroke="#667085" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>  
+        </div>
+        <ul ngc>
+            <li *ngIf="multi && filteredValues?.length">
+                <label class="form-check" [for]="instanceId" >
+                    <input (change)="onSelectAll($event)" [checked]="checkIfAllSelected()" class="form-check-input me-3" type="checkbox"
+                    [id]="instanceId">
+                    <span class="form-check-label" >
+                        Select All
+                    </span>
+                </label>
+            </li>
+            <li *ngFor="let item of filteredValues" [ngClass]="item.isSelected && !multi ? 'selected' : ''" >
+                <label [for]="item[idField] + instanceId" [ngClass]="multi  ? '': 'ps-0'" class="form-check">
+                    <input [ngClass]="multi  ? '': 'd-none'" (change)="onSelect($event, item)" [(ngModel)]="item.isSelected" class="form-check-input me-3" type="checkbox" value=""
+                        [id]="item[idField] + instanceId">
+                    <span class="form-check-label" >
+                        {{item[searchField]}}
+                    </span>
+                </label>
+            </li>
+            <li *ngIf="!filteredValues?.length" >
+                <span class="d-flex align-items-center justify-content-center" >No data found</span>
+            </li>
+        </ul>  
+    </div>  
+   
+</div>