tango-app-ui-manage-tickets 3.7.0-beta.6 → 3.7.0-beta.61

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.html

@@ -0,0 +1,43 @@
+<div class="card mb-5 py-3 px-5">
+    <ul class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap">
+        <li class="nav-item">
+            <a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'installation' }"  (click)="Selectedtabs('installation')"
+               [ngClass]="SelectedTab === 'installation' ? 'active' : ''" class="nav-link cursor-pointer no-border me-3">
+                Installation<span class="mx-2 " [ngClass]="SelectedTab ==='installation' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.installationCount?ticketAllCount?.installationCount:0}}</span>
+            </a>
+        </li>
+        <li class="nav-item" >
+            <a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'infra' }" (click)="Selectedtabs('infra')"
+               [ngClass]="SelectedTab === 'infra' ? 'active' : ''" class="nav-link cursor-pointer no-border me-3">
+                Infra<span class="mx-2" [ngClass]="SelectedTab ==='infra' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.infraCount?ticketAllCount?.infraCount:0}}</span>
+            </a>
+        </li>    
+        <li class="nav-item" [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'dataMismatch' }"  (click)="Selectedtabs('dataMismatch')">
+            <a [ngClass]="SelectedTab ==='dataMismatch' ? 'active' :''" class="nav-link cursor-pointer me-3">Data Mismatch
+                <span class="mx-2" [ngClass]="SelectedTab ==='dataMismatch' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.datamismatchCount? ticketAllCount?.datamismatchCount:0}}</span></a>
+        </li>
+       <!-- <li *ngIf="this.users.userType ==='tango'" class="nav-item" [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'audit' }" (click)="Selectedtabs('audit')"><a [ngClass]="SelectedTab ==='audit' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Audit</a>
+        </li> -->
+        <li *ngIf="this.users.userType ==='tango'" class="nav-item" (click)="Selectedtabs('mat')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'mat' }" [ngClass]="SelectedTab ==='mat' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Employee Mat
+            <span class="mx-2 " [ngClass]="SelectedTab ==='mat' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.matCount ?ticketAllCount?.matCount:0}}</span></a>
+        </li>
+<!-- <li *ngIf="(gs.userAccess | async)?.userType === 'tango' || clientData?.isVMS" class="nav-item" (click)="Selectedtabs('footfall')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'footfall' }" [ngClass]="SelectedTab ==='footfall' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Footfall Directory
+            <span class="mx-2 " [ngClass]="SelectedTab ==='footfall' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.footfallDirectory ?ticketAllCount?.footfallDirectory:0}}</span>
+
+            </a>
+        </li> -->
+        <li *ngIf="this.users.userType ==='tango' || (this.users.userType ==='client' && this.users.role !=='user')"  class="nav-item" (click)="Selectedtabs('footfall')"><a [routerLink]="['/manage/tickets']" [queryParams]="{ type: 'footfall' }" [ngClass]="SelectedTab ==='footfall' ? 'active' :''"
+            class="nav-link cursor-pointer no-border me-3">Footfall Directory
+            <span class="mx-2" [ngClass]="SelectedTab ==='footfall' ? 'badge-num-primary' :'badge-num-muted'">{{ticketAllCount?.footfallDirectory ?ticketAllCount?.footfallDirectory:0}}</span>
+            </a>
+        </li>
+    </ul>
+</div>
+<lib-ticket-footfall-new *ngIf="SelectedTab ==='footfall'"></lib-ticket-footfall-new>
+<lib-footfall-dic *ngIf="SelectedTab ==='footfall-new'"></lib-footfall-dic>
+<lib-tickets *ngIf="SelectedTab !=='audit' && SelectedTab !=='footfall' && SelectedTab !=='footfall-new'"></lib-tickets>
+<lib-audit-metrics *ngIf="SelectedTab ==='audit'"></lib-audit-metrics>
+<router-outlet></router-outlet>

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.scss

@@ -0,0 +1,35 @@
+.nav-item .nav-link.active{
+    border:none;
+    border-radius: 6px;
+    background: var(--Primary-50, #EAF8FF);
+    padding: 8px 12px;
+ }
+ .nav-item .nav-link:hover{
+     border: none;
+ }
+ .badge-num-primary {
+     border-radius: 16px !important;
+     background: var(--Primary-50, #EAF8FF) !important;
+     color: var(--Primary-700, #009BF3) !important;
+     text-align: center;
+     font-size: 14px !important;
+     font-style: normal;
+     font-weight: 500;
+     line-height: 20px;
+     padding: 2px 10px !important;
+     mix-blend-mode: multiply !important;
+ }
+
+ .badge-num-muted {
+    border-radius: 16px !important;
+    background: var(--Primary-50, #F2F4F7) !important;
+    color: var(--Gray-700, #344054) !important;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 2px 10px !important;
+    mix-blend-mode: multiply !important;
+}
+

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.spec.ts

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

package/src/lib/components/tango-manage-tickets/tango-manage-tickets.component.ts

@@ -0,0 +1,118 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { Subject, takeUntil } from "rxjs";
+import { TicketService } from '../../services/ticket.service';
+@Component({
+  selector: 'lib-tango-manage-tickets',
+  templateUrl: './tango-manage-tickets.component.html',
+  styleUrl: './tango-manage-tickets.component.scss'
+})
+export class TangoManageTicketsComponent implements OnInit,OnDestroy {
+  SelectedTab:any='installation'
+  private readonly destroy$ = new Subject();
+  headerFilters: any;
+  ticketAllCount: any;
+  users: any;
+  constructor(private pageInfo:PageInfoService,private route: ActivatedRoute,private router:Router,public gs:GlobalStateService,private service:TicketService){
+  }
+clientData:any;
+  ngOnInit(): void {
+    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+        const clientData: any = JSON.parse(localStorage.getItem("client-details") || "{}");
+    this.clientData = clientData;
+    this.route?.queryParams?.pipe(takeUntil(this.destroy$)).subscribe(params => {
+      if (params.hasOwnProperty('type')) {
+          const type = params['type'];
+          this.Selectedtabs(type);
+         
+      } else{
+        this.updateStoreIdQueryParam()
+      }
+  });
+  this.onLoad(); 
+    this.setPageData();
+  }
+
+  updateStoreIdQueryParam() {
+    const queryParams = { ...this.route?.snapshot?.queryParams };
+    // Update storeId in queryParams
+    queryParams.type = this.SelectedTab.toLocaleLowerCase();
+    // Navigate to the same route with updated queryParams
+    this.router.navigate([], { queryParams: queryParams, queryParamsHandling: 'merge' });
+  }
+
+  setPageData(){
+    this.pageInfo.setTitle('Tickets')
+    this.pageInfo.setDescription('Summary of queries raised,addresed & resolved')
+    let breadcrumbs : any[]=[];
+    if (this.gs.userAccess.value?.userType === "tango") {
+      breadcrumbs=  [
+        {
+          title: "Manage",
+          path: "/manage/brands",
+          isActive: false,
+          isSeparator: false,
+        },
+        {
+          title: "Manage",
+          path: "/manage/brands",
+          isActive: false,
+          isSeparator: true,
+        },
+      ];
+    } else if (this.gs.userAccess.value?.userType === "client") {
+      breadcrumbs= [
+        {
+          title: "Manage",
+          path: "/manage/summary",
+          isActive: false,
+          isSeparator: false,
+        },
+        {
+          title: "Manage",
+          path: "/manage/summary",
+          isActive: false,
+          isSeparator: true,
+        },
+      ];
+    }
+    this.pageInfo.setBreadcrumbs(breadcrumbs);
+  }
+
+ 
+  Selectedtabs(value:any){
+    this.SelectedTab = value;
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+onLoad(){
+  this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
+    next: (data: any) => {
+      if (data) {
+        this.headerFilters = data;
+        this.getAllCount();
+      }
+    }
+  })
+}
+
+getAllCount(){
+  let obj ={
+    clientId: this.headerFilters?.clients,
+      fromDate: this.headerFilters?.date?.startDate,
+      toDate: this.headerFilters?.date?.endDate
+  }
+  this.service.getAllCounts(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+    next: (res: any) => {
+      if(res.code ===200){
+          this.ticketAllCount = res?.data[0];
+      }
+    }
+  })
+}
+
+}

package/src/lib/components/ticket-filter-panel/ticket-filter-panel.component.html

@@ -0,0 +1,386 @@
+<!-- ticket-filter-panel.component.html -->
+<div class="filter-wrapper" *ngIf="isOpen">
+  <div class="filter-card">
+    <div class="filter-header d-flex justify-content-between align-items-center mb-3">
+  <div class="title">Filter Options</div>
+      <!-- <button type="button" class="btn-close" (click)="close()">✕</button> -->
+    </div>
+
+    <form [formGroup]="filterForm">
+      <!-- Status -->
+<div class="mb-3 position-relative" (click)="$event.stopPropagation()">
+  <label class="form-label">Status</label>
+
+  <!-- Header / trigger -->
+  <div
+    class="status-select border rounded px-3 py-2 d-flex justify-content-between align-items-center"
+    (click)="toggleDropdown('status', $event)"
+  >
+    <span *ngIf="!selectedStatuses.length">Select</span>
+
+    <span *ngIf="selectedStatuses.length === 1">
+      {{ selectedStatuses[0] }}
+    </span>
+
+    <span *ngIf="selectedStatuses.length > 1" class="d-flex align-items-center">
+      <span>{{ selectedStatuses[0] }}</span>
+      <span class="badge ms-2">
+        +{{ selectedStatuses.length - 1 }}
+      </span>
+    </span>
+
+  </div>
+
+  <!-- DROPDOWN PANEL (OVERLAY) -->
+  <div
+    class="status-dropdown position-absolute w-100 mt-1 border rounded p-1 bg-white"
+    style="z-index: 1000; max-height: 220px; overflow-y: auto;"
+   *ngIf="isDropdownOpen('status')"
+    (click)="$event.stopPropagation()"
+  >
+    <!-- Select All -->
+    <div class="form-check px-0 d-flex align-items-center mb-2">
+      <input
+        type="checkbox"
+        class="form-check-input "
+        id="status-select-all"
+        [checked]="areAllStatusesSelected()"
+        (change)="onStatusSelectAllChange($event)"
+      />
+      <label class="form-check-label text-dark ms-2" for="status-select-all">
+        Select All
+      </label>
+    </div>
+
+
+    <!-- Options -->
+    <div
+      class="form-check px-0 d-flex align-items-center mb-1"
+      *ngFor="let s of statusOptions"
+    >
+      <input
+        type="checkbox"
+        class="form-check-input "
+        [id]="'status-' + s"
+        [checked]="isStatusSelected(s)"
+        (change)="onStatusChange($event, s)"
+      />
+      <label class="form-check-label text-dark ms-2" [for]="'status-' + s">
+        {{ s }}
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+      <!-- Reviewer accuracy -->
+      <div class="mb-3" *ngIf="showReviewerAccuracy" (click)="closeAll()">
+        <label class="form-label">Reviewer accuracy (%) by condition</label>
+        <div class="d-flex gap-2">
+          <select class="form-select w-100" formControlName="reviewerCondition">
+            <option [ngValue]="null">Select</option>
+            <option *ngFor="let c of conditionOptions" [ngValue]="c.value">
+              {{ c.label }}
+            </option>
+          </select>
+
+          <!-- one or two inputs -->
+          <ng-container *ngIf="isBetween('reviewerCondition'); else singleReviewer">
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="reviewerFrom"
+              placeholder="From" (input)="limitValue($event, 'reviewerFrom')" />
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="reviewerTo"
+              placeholder="To" (input)="limitValue($event, 'reviewerTo')" />
+          </ng-container>
+          <ng-template #singleReviewer>
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="reviewerFrom"
+              placeholder="1 to 100%" (input)="limitValue($event, 'reviewerFrom')" />
+          </ng-template>
+        </div>
+      </div>
+
+      <!-- Approver accuracy -->
+      <div class="mb-3" *ngIf="showApproverAccuracy" (click)="closeAll()">
+        <label class="form-label">Approver accuracy (%) by condition</label>
+        <div class="d-flex gap-2">
+          <select class="form-select w-100" formControlName="approverCondition">
+            <option [ngValue]="null">Select</option>
+            <option *ngFor="let c of conditionOptions" [ngValue]="c.value">
+              {{ c.label }}
+            </option>
+          </select>
+
+          <ng-container *ngIf="isBetween('approverCondition'); else singleApprover">
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="approverFrom"
+              placeholder="From" 
+              (input)="limitValue($event, 'approverFrom')"/>
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="approverTo"
+              placeholder="To" (input)="limitValue($event, 'approverTo')" />
+          </ng-container>
+          <ng-template #singleApprover>
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="approverFrom"
+              placeholder="1 to 100%" (input)="limitValue($event, 'approverFrom')" />
+          </ng-template>
+        </div>
+      </div>
+
+      <!-- Tango accuracy -->
+      <div class="mb-3" *ngIf="showTangoAccuracy" (click)="closeAll()">
+        <label class="form-label">Tango accuracy (%) by condition</label>
+        <div class="d-flex gap-2">
+          <select class="form-select w-100" formControlName="tangoCondition">
+            <option [ngValue]="null">Select</option>
+            <option *ngFor="let c of conditionOptions" [ngValue]="c.value">
+              {{ c.label }}
+            </option>
+          </select>
+
+          <ng-container *ngIf="isBetween('tangoCondition'); else singleTango">
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="tangoFrom"
+              placeholder="From" (input)="limitValue($event, 'tangoFrom')" />
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="tangoTo"
+              placeholder="To" (input)="limitValue($event, 'tangoTo')" />
+          </ng-container>
+          <ng-template #singleTango>
+            <input
+              type="number"
+              min="1"
+              max="100"
+              class="form-control"
+              formControlName="tangoFrom"
+              placeholder="1 to 100%" (input)="limitValue($event, 'tangoFrom')" />
+          </ng-template>
+        </div>
+      </div>
+<div
+  class="mb-3 position-relative"
+  *ngIf="showReviewedBy"
+  (click)="$event.stopPropagation()"
+>
+  <label class="form-label">Reviewed by</label>
+
+  <!-- Trigger / display -->
+  <div
+    class="border rounded px-3 py-2 d-flex justify-content-between align-items-center"
+    (click)="toggleDropdown('reviewer', $event)"
+  >
+    <!-- 0 selected -->
+    <span *ngIf="!selectedReviewedBy.length">
+      Select
+    </span>
+
+    <!-- 1 selected -->
+    <span *ngIf="selectedReviewedBy.length === 1">
+      {{ selectedReviewedBy[0] }}
+    </span>
+
+    <!-- >1 selected -->
+    <span
+      *ngIf="selectedReviewedBy.length > 1"
+      class="d-flex align-items-center"
+    >
+      <span>{{ selectedReviewedBy[0] }}</span>
+      <span class="badge ms-2">
+        +{{ selectedReviewedBy.length - 1 }}
+      </span>
+    </span>
+  </div>
+
+<div
+  *ngIf="isDropdownOpen('reviewer')"
+  class="position-absolute w-100 border rounded bg-white p-1 mt-1"
+  style="z-index: 1000; max-height: 220px; overflow-y: auto;"
+  (click)="$event.stopPropagation()"
+>
+
+  <!-- 🔍 Search box -->
+  <!-- <div class="mb-2 px-0">
+    <input
+      type="text"
+      class="form-control form-control-sm"
+      placeholder="Search by email"
+      [(ngModel)]="reviewerSearchTerm"
+      (click)="$event.stopPropagation()"
+    />
+  </div> -->
+
+  <!-- Select All -->
+  <div class="form-check px-0 mb-2 d-flex align-items-center">
+    <input
+      type="checkbox"
+      class="form-check-input"
+      id="reviewer-all"
+      [checked]="areAllReviewersSelected()"
+      (change)="onReviewerSelectAll($event)"
+    />
+    <label for="reviewer-all" class="form-check-label text-dark ms-2">
+      Select All
+    </label>
+  </div>
+
+  <!-- Options – now use getter filteredReviewerList -->
+  <div
+    class="form-check mb-1 px-0 d-flex align-items-center"
+    *ngFor="let u of filteredReviewerList"
+  >
+    <input
+      class="form-check-input"
+      type="checkbox"
+      [id]="'rev-' + u.email"
+      [checked]="isReviewerSelected(u.email)"
+      (change)="onReviewerChange($event, u.email)"
+    />
+    <label class="form-check-label text-dark ms-2" [for]="'rev-' + u.email">
+      {{ u.email }}
+    </label>
+  </div>
+</div>
+
+
+</div>
+
+
+      <!-- Approved By -->
+<div
+  class="mb-3 position-relative"
+  *ngIf="showApprovedBy"
+  (click)="$event.stopPropagation()"
+>
+  <label class="form-label">Approved by</label>
+
+  <!-- Trigger / display -->
+  <div
+    class="border rounded px-3 py-2 d-flex justify-content-between align-items-center"
+    (click)="toggleDropdown('approver', $event)"
+  >
+    <!-- 0 selected -->
+    <span *ngIf="!selectedApprovedBy.length">
+      Select
+    </span>
+
+    <!-- 1 selected -->
+    <span *ngIf="selectedApprovedBy.length === 1">
+      {{ selectedApprovedBy[0] }}
+    </span>
+
+    <!-- >1 selected -->
+    <span
+      *ngIf="selectedApprovedBy.length > 1"
+      class="d-flex align-items-center"
+    >
+      <span>{{ selectedApprovedBy[0] }}</span>
+      <span class="badge ms-2">
+        +{{ selectedApprovedBy.length - 1 }}
+      </span>
+    </span>
+
+  </div>
+<!-- Dropdown panel -->
+<div
+ *ngIf="isDropdownOpen('approver')"
+  class="position-absolute w-100 border rounded bg-white p-1 mt-1"
+  style="z-index: 1000; max-height: 220px; overflow-y: auto;"
+  (click)="$event.stopPropagation()"
+>
+
+  <!-- 🔍 Search box -->
+  <!-- <div class="mb-2 px-0">
+    <input
+      type="text"
+      class="form-control form-control-sm"
+      placeholder="Search by email"
+      [ngModel]="approverSearchTerm"
+      (ngModelChange)="onReviewerSearch($event)"
+      (click)="$event.stopPropagation()"
+    />
+  </div> -->
+
+  <!-- Select All -->
+  <div class="form-check px-0 mb-2 d-flex align-items-center">
+    <input
+      type="checkbox"
+      class="form-check-input"
+      id="reviewer-all"
+      [checked]="areAllReviewersSelected()"
+      (change)="onReviewerSelectAll($event)"
+    />
+    <label for="reviewer-all" class="form-check-label text-dark ms-2">
+      Select All
+    </label>
+  </div>
+
+  <!-- Options (use filteredReviewerList instead of userList) -->
+  <div
+    class="form-check mb-1 px-0 d-flex align-items-center"
+    *ngFor="let u of filteredApproverList"
+  >
+    <input
+      class="form-check-input"
+      type="checkbox"
+      [id]="'rev-' + u.email"
+      [checked]="isReviewerSelected(u.email)"
+      (change)="onReviewerChange($event, u.email)"
+    />
+    <label class="form-check-label text-dark ms-2" [for]="'rev-' + u.email">
+      {{ u.email }}
+    </label>
+  </div>
+</div>
+
+  <!-- Dropdown panel -->
+
+</div>
+
+
+      <!-- Footer buttons -->
+      <div class="d-flex justify-content-between w-100 mt-4">
+        <button type="button" class="btn btn-outline w-50 me-1" (click)="onReset()">
+          Reset
+        </button>
+        <button type="button" class="btn btn-primary w-50 ms-1" (click)="onApply()">
+          Apply
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

package/src/lib/components/ticket-filter-panel/ticket-filter-panel.component.scss

@@ -0,0 +1,87 @@
+/* ticket-filter-panel.component.scss */
+.filter-wrapper {
+  position: absolute; // or fixed if you want full overlay
+  top: 0;
+  right: 0;
+  padding: 16px;
+  z-index: 1050;
+}
+
+.filter-card {
+  width: 350px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px 18px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+  font-size: 13px;
+}
+
+.filter-header .title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.btn-close {
+  border: none;
+  background: transparent;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.form-label {
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.form-select,
+.form-control {
+  font-size: 13px;
+}
+
+.gap-2 {
+  gap: 4px;
+}
+.badge {
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 11px;
+  background: #e5f3ff;
+  color: #007bff;
+}
+
+input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: -2px 5px -2px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-600, #D0D5DD) !important;
+    box-shadow: none;
+    font-size: 0.5em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+input[type='checkbox'] {
+    outline: 1px solid var(--primary-600, #00A3FF) !important;
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='checkbox']:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: 0.5em;
+    padding-left: 3px;
+    padding-top: 10px;
+    padding-right: 0px;
+}
+.text-dark{
+  color:#344054 !important;
+}