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

package/src/lib/components/multi-date-datepicker/multi-date-datepicker.component.scss

@@ -0,0 +1,89 @@
+.calendar-container {
+    display: flex;
+    padding: 16px 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    border-radius: 8px;
+    background: #FFF;
+    border-radius: 5px;
+    box-shadow: 0 0 10px #0000001a;
+}
+
+.calendar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.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;
+    /* 150% */
+}
+
+.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: 5px;
+}
+
+.empty-day {
+    visibility: hidden;
+}
+
+.calendar-days div {
+    padding: 10px;
+    text-align: center;
+    border-radius: 50%;
+    cursor: not-allowed;
+    /* Disable click interaction */
+}
+
+.selected-day {
+    background-color: #00a3ff;
+    color: white;
+}
+
+.disabled-day {
+    color: grey;
+    text-decoration: line-through;
+    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;
+    /* 155.556% */
+}

package/src/lib/components/multi-date-datepicker/multi-date-datepicker.component.spec.ts

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

package/src/lib/components/multi-date-datepicker/multi-date-datepicker.component.ts

@@ -0,0 +1,118 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import dayjs from 'dayjs';
+
+@Component({
+  selector: 'lib-multi-date-datepicker',
+  templateUrl: './multi-date-datepicker.component.html',
+  styleUrl: './multi-date-datepicker.component.scss'
+})
+export class MultiDateDatepickerComponent implements OnInit{
+  dayjs=dayjs;
+  @Input() startDate:any;
+  @Input() endDate:any;
+  @Input() predefinedDates:any = [];
+  @Output() selectedDates :EventEmitter<string[]> = new EventEmitter<string[]>();
+  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'];
+
+  ngOnInit(): void {
+    this.currentMonth = new Date(this.startDate).getMonth()
+    this.currentYear = new Date(this.startDate).getFullYear()
+    this.predefinedDates = JSON.parse(JSON.stringify(this.predefinedDates))
+  }
+
+  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);
+  }
+
+  isPredefined(day: any): boolean {
+    day = day < 10 ? `0${day}` : day;
+    let month= this.currentMonth < 10 ? `0${this.currentMonth + 1}` : (this.currentMonth + 1);
+    let date:any = day+'-'+month+'-'+this.currentYear;
+    return this.predefinedDates.includes(date);
+  }
+
+  previousMonth(): void {
+    if (this.currentMonth === 0) {
+      this.currentMonth = 11;
+      this.currentYear--;
+    } else {
+      this.currentMonth--;
+    }
+  }
+
+  nextMonth(): void {
+    if (this.currentMonth === 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    } else {
+      this.currentMonth++;
+    }
+  }
+
+  addPredefinedDays(day:any) {
+    day = day < 10 ? `0${day}` : day;
+    let month= this.currentMonth < 10 ? `0${this.currentMonth + 1}` : (this.currentMonth + 1);
+    let date:any = day+'-'+month+'-'+this.currentYear;
+    let findDayIdx = this.predefinedDates.findIndex((item:any) => item == date);
+    if(findDayIdx != -1) {
+      this.predefinedDates.splice(findDayIdx,1);
+    }
+    else {
+      this.predefinedDates.push (date);
+    }
+  }
+
+  validateDates(day: any) {
+    day = day < 10 ? `0${day}` : day;
+    let month= this.currentMonth < 10 ? `0${this.currentMonth + 1}` : (this.currentMonth + 1);
+    let date: any = this.currentYear + '-' + month + '-' + day;
+    let sDate = this.dayjs(this.startDate, 'YYYY-MM-DD');
+    let eDate = this.dayjs(this.endDate, 'YYYY-MM-DD');
+    date = this.dayjs(date, 'YYYY-MM-DD');
+    if(date.diff(sDate,'d') >= 0 && eDate.diff(date,'d') >= 0) {
+      return true;
+    } 
+    return false;
+  }
+
+  showPrev() {
+    let month = this.currentMonth < 10 ? "0"+(this.currentMonth + 1) : (this.currentMonth + 1)
+    let date:any = this.currentYear+'-' + month+ '-01';
+    date = this.dayjs(date,'YYYY-MM-DD').subtract(1,'month');
+    let sDate = this.dayjs(this.startDate,'YYYY-MM-DD');
+    if(date.diff(sDate,'m') >= 0) {
+      return true;
+    } else if(date.month() == sDate.month()) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  showNext() {
+    let month = this.currentMonth < 10 ? "0"+(this.currentMonth + 1) : (this.currentMonth + 1)
+    let date:any = this.currentYear+'-' + month+ '-01';
+    date = this.dayjs(date,'YYYY-MM-DD').add(1,'month');
+    let eDate = this.dayjs(this.endDate,'YYYY-MM-DD');
+    if(eDate.diff(date,'m') >= 0) {
+      return true;
+    } else if(date.month() == eDate.month()) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  applyDate() {
+    this.selectedDates.emit(this.predefinedDates);
+  }
+}

package/src/lib/components/orders/orders.component.html

@@ -0,0 +1,203 @@
+<ng-container *ngIf="isAuthorized === 'AUTHORIZED'" >
+    <div class="row">
+        <div class="col-md-12 my-2">
+            <div class=" card">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <div class="card-header border-0 pt-4 px-4">
+                            <h3 class="card-title align-items-start flex-column">
+                                <span class="card-label mb-2">Task Configuration</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-4">
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <path
+                                                    d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                                    stroke-linejoin="round">
+                                                </path>
+                                            </svg>
+                                        </span>
+
+                                        <input class="fx-date-range form-control ps-14"
+                                            style="min-width: 100px !important;" type="text" matInput
+                                            ngxDaterangepickerMd [singleDatePicker]="true" [drops]="'down'"
+                                            [opens]="'right'" [alwaysShowCalendars]="false"
+                                            [keepCalendarOpeningWithRange]="true" [showCancel]="false"
+                                            autocomplete="off" [(ngModel)]="selectedDateRange"
+                                            [ngModelOptions]="{standalone: true}"
+                                            (startDateChanged)="onDateChange($event)" [isCustomDate]="isCustomDate"
+                                            [autoApply]="true"
+                                            [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                                            name="daterange" [readonly]="true" />
+
+                                        <button [disabled]="!dataSource.length" (click)="exportAsExcel()" type="button"
+                                            class="btn-outline btn align-items-end text-nowrap invheader ms-4">
+                                            <!-- Export Icon -->
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <path
+                                                    d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5"
+                                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </svg>
+                                            <span class="ms-2"></span> Export
+                                        </button>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-body p-0">
+                            <ng-container>
+                                <ng-container
+                                    *ngIf="(tableApiState | async) === 'loaded' ">
+                                    <div class="table-responsive px-4">
+                                        <table class="table text-nowrap bottom-border">
+                                            <thead>
+                                                <tr>
+                                                    <th>Action</th>
+                                                    <th>Task ID</th>
+                                                    <th>Service Type</th>
+                                                    <th>Customer Name</th>
+                                                    <th>Customer Contact</th>
+                                                    <th>Customer Address</th>
+                                                    <th>City</th>
+                                                    <th>State</th>
+                                                    <th>Country</th>
+                                                    <th>Customer Zipcode</th>
+                                                    <th>Latitude</th>
+                                                    <th>Longitude</th>
+                                                    <th>Task Date</th>
+                                                    <th>Task Start Time</th>
+                                                    <th>Task End Time</th>
+                                                    <th>TAT</th>
+                                                    <th>Payment Method</th>
+                                                    <th>Amount</th>
+                                                    <th>Note</th>
+                                                    <th>user ID</th>
+                                                </tr>
+                                                <tr>
+                                                    <th  style="background-color: unset !important; border-bottom: unset !important;" ></th>
+                                                    <th  style="background-color: unset !important; border-bottom: unset !important;" ></th>
+                                                    <th  style="background-color: unset !important; border-bottom: unset !important;" ></th>
+                                                    <th  style="background-color: unset !important; border-bottom: unset !important; padding-left: unset !important;" >
+                                                        <input (keydown.enter)="updateOrder()" [(ngModel)]="storeCodes" style="min-width: 250px;" class="form-control" type="text">
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <tr *ngFor="let element of dataSource">
+                                                    <td>
+                                                        <div class="d-flex  align-items-center justify-content-center">
+                                                            <svg (click)="deleteOrder(element?._id)" class="cursor-pointer" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                                                fill="none">
+                                                                <path d="M15 5L5 15M5 5L15 15" stroke="#667085" stroke-width="1.66667"
+                                                                    stroke-linecap="round" stroke-linejoin="round" />
+                                                            </svg>
+                                                        </div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Task_ID}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data" >{{element?.Service_Type}}</div>
+                                                    </td>
+                                                    
+                                                    <td>
+                                                        <div class="data">{{element?.Customer_Name}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Customer_Contact}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Customer_Address}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data" >{{element?.City}}</div>
+                                                    </td>
+                                                    
+                                                    <td>
+                                                        <div class="data">{{element?.State}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Country}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Customer_Zipcode}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data" >{{element?.Latitude}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data" >{{element?.Longitude}}</div>
+                                                    </td>
+                                                    
+                                                    <td>
+                                                        <div class="data">{{element?.Task_Date}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Task_Start_Time}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Task_End_Time}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data" >{{element?.TAT}}</div>
+                                                    </td>
+                                                    
+                                                    <td>
+                                                        <div class="data">{{element?.Payment_Method}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Amount}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.Note}}</div>
+                                                    </td>
+                                                    <td>
+                                                        <div class="data">{{element?.user_ID}}</div>
+                                                    </td>
+    
+                                                
+    
+                                                </tr>
+                                            </tbody>
+                                        </table>
+    
+                                    </div>
+                                   
+                                </ng-container>
+                            </ng-container>
+                            <ng-container
+                                *ngIf="(tableApiState | async) === 'loading' || (tableApiState | async) === 'initial'">
+                                <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>
+    
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+    </div>
+</ng-container>

package/src/lib/components/orders/orders.component.scss

@@ -0,0 +1,180 @@
+.data {
+    color: var(--Gray-500, #667085);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.data-dark {
+    color: var(--Gray-900, #101828);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.view{
+    color: var(--Primary-700, #009BF3);
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 600;
+line-height: 20px;
+text-decoration-line: underline;
+text-transform: capitalize;
+}
+
+.rotate {
+    rotate: 180deg;
+    transition: 1s;
+  }
+
+  :host::ng-deep {
+    .md-drppicker .btn {
+        line-height: 10px !important;
+    }
+
+    .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+        display: none;
+    }
+
+    .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+        top: 65px !important;
+    }
+
+    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+        top: 65px !important;
+        right: -475px !important;
+        left: unset !important;
+        height: 400px !important;
+    }
+
+    .md-drppicker .btn {
+        border-radius: 8px !important;
+        border: 1px solid var(--Primary-600, #00A3FF) !important;
+        background: var(--Primary-600, #00A3FF) !important;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+        color: var(--White, #FFF) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        line-height: 20px;
+        text-transform: capitalize;
+    }
+
+    .md-drppicker .ranges ul li button {
+        padding: 12px 16px;
+        width: 160px;
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        background: none;
+        border: none;
+        text-align: left;
+        cursor: pointer;
+    }
+
+    .md-drppicker td.active,
+    .md-drppicker td.active:hover {
+        background-color: #029cf4 !important;
+        border-radius: 20px !important;
+        color: var(--White, #FFF) !important;
+        text-align: center !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px;
+    }
+
+    .md-drppicker.ltr .ranges {
+        float: left;
+        margin-top: 10px !important;
+    }
+
+    .md-drppicker td.in-range {
+        background: var(--Primary-50, #EAF8FF);
+    }
+
+    .md-drppicker .ranges ul li button.active {
+        background: var(--Primary-50, #EAF8FF) !important;
+        border-radius: 8px !important;
+        color: var(--Primary-700, #009BF3);
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        line-height: 20px !important;
+    }
+
+    .md-drppicker  table th,
+    table td {
+        width: 40px !important;
+        height: 40px !important;
+        padding: 10px 8px !important;
+    }
+
+    .md-drppicker td.available.prev,
+    .md-drppicker th.available.prev {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker td.available.next,
+    .md-drppicker th.available.next {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+        background-repeat: no-repeat !important;
+        background-size: 0.5em !important;
+        background-position: center !important;
+    }
+
+    .md-drppicker table th {
+        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+        background: transparent !important;
+        color: var(--Gray-700, #344054) !important;
+        text-align: center;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
+
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+
+    .md-drppicker .btn.btn-default {
+        border-radius: 8px !important;
+        border: 1px solid var(--Gray-300, #D0D5DD) !important;
+        background: var(--White, #FFF) !important;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+        color: var(--Gray-700, #344054) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        line-height: 20px;
+        text-transform: capitalize;
+        margin-right: 10px !important;
+    }
+
+    .md-drppicker td.available.invalid-date {
+        text-decoration: line-through;
+        pointer-events: none;
+        color: darkgray;
+    }
+
+    .md-drppicker td.available.today:not(.invalid-date) {
+        text-decoration: unset;
+        pointer-events: unset;
+        color: unset;
+    }
+}
+
+

package/src/lib/components/orders/orders.component.spec.ts

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