tango-app-ui-shared 3.5.1-task.2 → 3.5.1-task.4

package/src/lib/modules/intro/lead-intro/lead-intro.component.html

@@ -1,325 +0,0 @@
-<div *ngIf="(gs.userAccess | async)?.userType === 'lead'" class="approvalcard mt-4 mb-5">
-    <div class="d-flex align-items-center justify-content-between">
-        <div class="d-flex align-items-center">
-            <div class="symbol symbol-30px me-5"><span>
-                    <img src="./assets/tango/custompopup-Icons/danger-icon.svg" alt="">
-                </span>
-            </div>
-            <div class="approvaltext align-items-start justify-content-between">
-                Your Approval is in pending !
-                <div class="approvesub d-block">Can’t find the answer you’re looking for? Please chat to our friendly
-                    team.</div>
-            </div>
-        </div>
-        <div class="d-flex align-items-center">
-            <a (click)="contactSupport()" type="button" tabindex="0"
-                class="btn btn-primary px-4 ng-star-inserted"><span>Contact Us
-                </span></a>
-        </div>
-    </div>
-</div>
-
-<div *ngIf="(gs.userAccess | async)?.userType === 'client'" class="toastcard mb-5">
-    <div class="d-flex align-items-center justify-content-between">
-        <div class="d-flex align-items-center">
-            <div class="symbol symbol-30px me-5"><span>
-                    <img src="./assets/tango/custompopup-Icons/danger-alert-primary.svg" alt="">
-                </span>
-            </div>
-            <span class="toasttext d-block">Your trial has started. You have {{trialDetails?.daysRemaining}} days left
-                on your free trial</span>
-        </div>
-        <div class="row mt-1">
-            <div class="d-flex align-items-center">
-                <div><svg id="circle-chart" width="94" height="70" viewBox="0 0 100 100"
-                        xmlns="http://www.w3.org/2000/svg">
-
-                        <circle cx="50" cy="50" r="40" fill="none" stroke="#f0f0f0" stroke-width="8">
-                        </circle>
-
-                        <circle id="progress-circle" cx="50" cy="50" r="40" fill="none" stroke="#007bff"
-                            stroke-width="8" stroke-dasharray="251.2"
-                            [attr.stroke-dashoffset]="updateCircleChart(trialDetails?.percentageRemaining)">
-                        </circle>
-
-                        <text id="percentage-text" x="50" y="54" class="producttext" text-anchor="middle"
-                            fill="#333333">{{trialDetails?.percentageRemaining}}%</text>
-                    </svg></div>
-                <div class="align-items-start justify-content-between daysleft my-2">
-                    {{trialDetails?.daysRemaining}} Days Left
-                    <div class="align-items-start trail">
-                        Free trial</div>
-                </div>
-            </div>
-            <div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<ngb-carousel #carousel [interval]="4000" [pauseOnHover]="true">
-    <ng-container *ngFor="let item of productList">
-        <ng-container *ngIf="item === 'tangoTrax'">
-            <ng-template ngbSlide>
-                <div class="card w-100">
-                    <div class="row p-20">
-                        <div class="col-lg-4 col-sm-12">
-                            <img class="cardimg" src="./assets/tango/Images/tangoTrax.png" alt="Tango logo" />
-                        </div>
-                        <div class="col-lg-1">
-                        </div>
-                        <div class="col-lg-7">
-                            <div class="heading mb-2">Welcome to Trax! 👋
-                            </div>
-                            <span class="sub">
-                                Revolutionising Operations with AI powered SOPs
-                            </span>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Onboard Stores
-                                    </span>
-                                    <div class="align-items-start card-sub mx-14">Effortlessly add and manage your
-                                        stores,ensuring a smooth onboarding process.
-                                    </div>
-                                </h3>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Customize SOP Checklists</span>
-                                    <div class="align-items-start card-sub mx-14">Easily create and configure SOP
-                                        checklists
-                                        tailored to your specific needs.</div>
-                                </h3>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Gain Insights Dashboard </span>
-                                    <div class="align-items-start card-sub mx-14">Generate detailed reports and
-                                        visualize
-                                        checklist compliance data through an intuitive dashboard, enabling you to make
-                                        informed decisions cand enhance operational efficiency.
-                                    </div>
-                                </h3>
-                            </div>
-                            <a *ngIf="(gs.userAccess | async)?.userType === 'client'" type="button" routerLink="/manage/summary"
-                                tabindex="0" class="btn btn-primary px-4 mt-2 cursor-pointer ng-star-inserted"><span>Get
-                                    Started
-                                </span></a>
-
-                        </div>
-                    </div>
-                </div>
-            </ng-template>
-        </ng-container>
-        <ng-container *ngIf="item === 'tangoZone'">
-            <ng-template ngbSlide>
-                <div class="card w-100">
-                    <div class="row p-20">
-                        <div class="col-lg-4 col-sm-12">
-                            <img class="cardimg" src="./assets/tango/Images/tangoZone.png" alt="Tango logo" />
-                        </div>
-                        <div class="col-lg-1">
-                        </div>
-                        <div class="col-lg-7">
-                            <div class="heading mb-2">Welcome to Zone! 👋
-                            </div>
-                            <span class="sub">
-                                Identify Hot Spots & Dead Zones of the store
-                            </span>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Choose Stores
-                                    </span>
-                                    <div class="align-items-start card-sub mx-14">Select Stores where you want to
-                                        identify
-                                        the
-                                        hot spots and dead zones
-                                    </div>
-                                </h3>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Tag Zones </span>
-                                    <div class="align-items-start card-sub mx-14">Tag different sections or zones within
-                                        each
-                                        store and label them according to your operational needs.</div>
-                                </h3>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Gain Insights </span>
-                                    <div class="align-items-start card-sub mx-14">Generate detailed reports and
-                                        visualize
-                                        zone-specific data such as traffic, dwell time, demographics, and heatmaps.
-                                    </div>
-                                </h3>
-                            </div>
-                            <a *ngIf="(gs.userAccess | async)?.userType === 'client'" type="button" routerLink="/manage/summary"
-                                tabindex="0" class="btn btn-primary px-4 mt-2 cursor-pointer ng-star-inserted"><span>Get
-                                    Started
-                                </span></a>
-
-                        </div>
-                    </div>
-                </div>
-            </ng-template>
-        </ng-container>
-
-        <ng-container *ngIf="item === 'tangoTraffic'">
-            <ng-template ngbSlide>
-                <div class="card w-100">
-                    <div class="row p-20">
-                        <div class="col-lg-4 col-sm-12">
-                            <img class="cardimg" src="./assets/tango/Images/tangoTraffic.png" alt="Tango logo" />
-                        </div>
-                        <div class="col-lg-1">
-                        </div>
-                        <div class="col-lg-7">
-                            <div class="heading mb-2">Welcome to Traffic! 👋
-                            </div>
-                            <span class="sub">
-                                Measure In-Store Traffic & Shopper Insights
-                            </span>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Onboard Stores
-                                    </span>
-                                    <div class="align-items-start card-sub mx-14">Easily add and manage stores with just
-                                        a
-                                        few
-                                        clicks on the dashboard
-                                    </div>
-                                </h3>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Visualise Data </span>
-                                    <div class="align-items-start card-sub mx-14">View intelligent insights including
-                                        traffic
-                                        patterns, dwell times, demographics enabling you to make informed decisions.
-                                    </div>
-                                </h3>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="card-title align-items-start flex-column mb-4">
-                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
-                                            xmlns="http://www.w3.org/2000/svg">
-                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
-                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
-                                                stroke-width="4" />
-                                            <path
-                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
-                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
-                                                stroke-linejoin="round" />
-                                        </svg>
-                                    </span>
-                                    <span class="card-label mx-3">Manage Tickets </span>
-                                    <div class="align-items-start card-sub mx-14">Easily track and resolve your support
-                                        tickets
-                                        for prompt and efficient service.
-                                    </div>
-                                </h3>
-                            </div>
-                            <a *ngIf="(gs.userAccess | async)?.userType === 'client'" type="button" routerLink="/manage/summary"
-                                tabindex="0" class="btn btn-primary px-4 mt-2 cursor-pointer ng-star-inserted"><span>Get
-                                    Started
-                                </span></a>
-
-                        </div>
-                    </div>
-                </div>
-            </ng-template>
-        </ng-container>
-
-    </ng-container>
-
-
-</ngb-carousel>

package/src/lib/modules/intro/lead-intro/lead-intro.component.scss

@@ -1,185 +0,0 @@
-// .text-title{
-//     color: #000 !important;
-// text-align: center !important;
-// font-size: 30px !important;
-// font-style: normal;
-// font-weight: 600 !important;
-// line-height: 38px; 
-// }
-// .traffic-text{
-//     color: #33B1F7;
-
-// text-align: center;
-// font-size: 36px;
-// font-style: normal;
-// font-weight: 600;
-// line-height: 44px;
-// letter-spacing: -0.72px;
-// }
-// .text-muted{
-//     color: #B5B5C3 !important;
-// text-align: center;
-// font-size: 24px;
-// font-style: normal;
-// font-weight: 400;
-// line-height: 32px; 
-// text-transform: capitalize;
-// }
-// .border-color{
-//     border-radius: 8px !important;
-// border: 1px solid var(--Primary-300, #6BCAFF) !important;
-// background: var(--Primary-50, #EAF8FF) !important;
-// }
-// .text-approval{
-//     color: var(--Primary-800, #008EDF) !important;
-// font-size: 14px !important;
-// font-style: normal;
-// font-weight: 500;
-// line-height: 20px; 
-// }
-
-.heading {
-    color: var(--Black, #101828);
-    font-size: 24px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 32px;
-    /* 133.333% */
-}
-
-.sub {
-    color: var(--Black, #101828);
-    font-family: 'Inter';
-    font-size: 12px;
-    font-weight: 500 !important;
-    line-height: 18px;
-}
-
-.card-label {
-    color: var(--gray-900, #101828);
-    font-family: 'Inter';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 24px;
-}
-
-.card-sub {
-    color: var(--gray-500, #667085);
-    font-family: 'Inter';
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    /* 142.857% */
-}
-
-.cardimg {
-    width: 500px;
-    height: 300px;
-}
-
-::ng-deep {
-    .carousel-indicators [data-bs-target] {
-        flex: 0 1 auto;
-        width: 8px;
-        height: 8px;
-        padding: 0;
-        cursor: pointer;
-        background-color: #009BF3 !important;
-        border-radius: 4px;
-        transition: opacity 0.6s ease;
-        margin-bottom: 10px;
-        border: 0px;
-    }
-}
-
-.toastcard {
-    border-radius: 4px;
-    border-left: 2px solid #00A3FF;
-    background: #fff;
-    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
-    padding: 6px 12px 6px 16px;
-    align-items: center;
-    gap: 16px;
-    align-self: stretch;
-    border-radius: 4px;
-}
-
-.overflow {
-    overflow-x: scroll;
-}
-
-.toasttext {
-    color: var(--Gray-500, #667085);
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 140%;
-    /* 19.6px */
-}
-
-.needhelp {
-    border-radius: 8px;
-    border: 1px solid var(--Gray-300, #D0D5DD);
-    background: var(--White, #FFF);
-    color: var(--Gray-700, #344054) !important;
-    font-size: 16px;
-    font-weight: 600 !important;
-    // line-height: 20px;
-    /* 142.857% */
-    text-transform: capitalize;
-}
-
-.daysleft {
-    color: var(--Gray-800, #1D2939);
-    font-family: 'Inter';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 32px;
-    /* 133.333% */
-}
-
-.trail {
-    color: var(--Gray-500, #667085);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 28px;
-    /* 155.556% */
-}
-
-.producttext {
-    color: var(--Gray-700, #344054);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-}
-
-.productitem {
-    right: 545px !important;
-}
-
-.approvalcard {
-    border-radius: 12px;
-    border: 1px dashed var(--Warning-500, #F79009);
-    background: var(--Warning-25, #FFFCF5);
-    padding: 16px 24px;
-}
-
-.approvaltext {
-    color: var(--Gray-900, #101828);
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 30px;
-}
-
-.approvesub {
-    color: var(--Gray-500, #667085);
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 28px;
-}

package/src/lib/modules/intro/lead-intro/lead-intro.component.spec.ts

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

package/src/lib/modules/intro/lead-intro/lead-intro.component.ts

@@ -1,120 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
-import { Subject, takeUntil } from "rxjs";
-import { NgbCarouselConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { AuthService } from '../../../services/auth.service';
-import { ContactSupportComponent } from '../contact-support/contact-support.component';
-import  dayjs from "dayjs";
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'lib-lead-intro',
-  templateUrl: './lead-intro.component.html',
-  styleUrl: './lead-intro.component.scss',
-  providers: [NgbCarouselConfig],
-})
-export class LeadIntroComponent implements OnDestroy, OnInit {
-  productList: any = [];
-  private readonly destroy$ = new Subject();
-  trialDetails:any
-  dayjs = dayjs
-
-
-
-  constructor(private pageInfo: PageInfoService, public gs: GlobalStateService, config: NgbCarouselConfig, private modalService: NgbModal, private authService: AuthService,private router:Router) {
-    this.gs.userAccess.pipe(takeUntil(this.destroy$)).subscribe((e) => {
-      if (e && e?.userType === "lead") {
-        const user = JSON.parse(localStorage.getItem('user-info') as string)
-        this.authService.getLeadProducts(user.email).pipe(takeUntil(this.destroy$)).subscribe({
-          next: (e) => {
-            if(e?.data){
-              this.productList = e.data?.planDetails?.product
-            }
-
-          }
-        })
-      } else if (e && e?.userType === "client") {
-        const user = JSON.parse(localStorage.getItem('user-info') as string)
-
-        this.authService.getClientProducts(user.clientId).pipe(takeUntil(this.destroy$)).subscribe({
-          next: (e) => {
-            if(e?.data){
-              this.productList = e.data?.planDetails?.product?.map((product:any)=> product.productName)                            
-
-              this.trialDetails = this.daysWithin14(e.data?.planDetails?.product[0]?.trialEndDate)
-            }
-
-          }
-        })
-        
-      }
-    })
-  }
-
-  daysWithin14(date: string) {
-    const currentDate = dayjs();
-    const givenDate = dayjs(date).add(2, 'day');
-    
-    let diff = givenDate.diff(currentDate, 'day');
-  
-    if (diff < 0) {
-      diff = 0;
-    }
-  
-    const percentageRemaining = Math.round(((14 - diff) / 14) * 100);
-  
-    return {
-      daysRemaining: diff <= 14 ? diff : 0,
-      percentageRemaining: diff <= 14 ? percentageRemaining : 100
-    };
-  }
-  
-
-  ngOnDestroy(): void {
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
-  ngOnInit(): void {
-    this.setPageData()
-  }
-
-
-  setPageData() {
-    this.pageInfo.setTitle('Explore')
-    this.pageInfo.setDescription('Explore your products while waiting for admin approval')
-    this.pageInfo.setBreadcrumbs([
-      { title: 'Explore', path: '/explore', isActive: false, isSeparator: false },
-      { title: 'Explore', path: '/explore', isActive: false, isSeparator: true },
-    ])
-  }
- 
-
-  contactSupport() {
-    this.modalService.open(ContactSupportComponent, {
-      centered: true,
-      size: "md",
-    });
-  }
-
-  updateCircleChart(percentage: number): void {
-    let id = 'progress-circle';
-    let text = 'percentage-text';
-    const progressCircle = document.getElementById(id);
-    const percentageText = document.getElementById(text);
-    if (progressCircle && percentageText) {
-      const circumference = Math.PI * 2 * parseFloat(progressCircle.getAttribute('r')!);
-      const dasharray = circumference;
-      const dashoffset = circumference - (percentage / 100) * circumference;
-
-      progressCircle.setAttribute('stroke-dasharray', dasharray.toString());
-      progressCircle.setAttribute('stroke-dashoffset', dashoffset.toString());
-
-      percentageText.textContent = `${percentage}%`;
-    }
-  }
-
-  reDirectionUrl(){
-    this.router.navigateByUrl('/manage/summary');
-    
-  }
-}