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

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

@@ -0,0 +1,3660 @@
+<div *ngIf="notifyCount>0" class="h-xl-100 flex-row flex-stack flex-wrap p-2">
+    <!-- toast card starts -->
+    <div class="toastcard col-md-12 mb-4">
+        <div class="d-flex align-items-center justify-content-between w-100">
+            <span class="align-items-start">
+                <span class="toasttext d-block"><span class="me-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none">
+                            <path
+                                d="M9.14234 2.4V1.6875C9.14234 1.03178 8.63166 0.5 7.99955 0.5C7.36744 0.5 6.85675 1.03178 6.85675 1.6875V2.4C4.21761 2.95033 2.28558 5.34649 2.28558 8.21875V8.91641C2.28558 10.6643 1.66918 12.3453 0.553532 13.6516L0.28869 13.9596C-0.0103044 14.3121 -0.0840396 14.8094 0.100307 15.2361C0.284654 15.6629 0.69281 15.9375 1.14279 15.9375H14.8563C15.3063 15.9375 15.7134 15.6629 15.8991 15.2361C16.0848 14.8094 16.0098 14.3121 15.7098 13.9596L15.4456 13.6516C14.3313 12.3453 13.7135 10.6643 13.7135 8.91641V8.21875C13.7135 7.94125 13.6952 7.66819 13.6597 7.40081C13.2676 7.54576 12.8432 7.625 12.4 7.625C10.4118 7.625 8.8 6.03001 8.8 4.0625C8.8 3.46778 8.88193 2.89289 9.14234 2.4C9.16417 2.40461 9.12061 2.39514 9.14234 2.4Z"
+                                fill="#00A3FF" />
+                            <path
+                                d="M6.38178 18.8061C6.81033 19.2514 7.39244 19.5 7.99955 19.5C8.57452 19.5 9.18877 19.2514 9.61732 18.8061C10.0459 18.3607 10.2851 17.7225 10.2851 17.125H5.71396C5.71396 17.7225 5.95323 18.3607 6.38178 18.8061Z"
+                                fill="#00A3FF" />
+                            <circle cx="13" cy="3.5" r="3" fill="#F04438" />
+                        </svg>
+                    </span>New Detection Found! Refresh Now to view new detection</span>
+            </span>
+            <button (click)="refreshnow()" type="button"
+                class="btn-outline btn align-items-end text-nowrap ms-4 cursor-pointer"><svg
+                    xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <g clip-path="url(#clip0_12165_62781)">
+                        <path
+                            d="M19.1672 3.33172V8.33172M19.1672 8.33172H14.1672M19.1672 8.33172L15.3089 4.69838C14.1594 3.54817 12.6672 2.80271 11.0572 2.57434C9.44716 2.34597 7.80653 2.64706 6.38251 3.43225C4.9585 4.21744 3.82826 5.44418 3.1621 6.92761C2.49595 8.41104 2.32997 10.0708 2.68919 11.6568C3.0484 13.2427 3.91335 14.669 5.15368 15.7206C6.39401 16.7722 7.94254 17.3922 9.5659 17.4872C11.1893 17.5822 12.7995 17.147 14.154 16.2471C15.5085 15.3473 16.5339 14.0316 17.0756 12.4984"
+                            stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_12165_62781">
+                            <rect width="20" height="20" fill="white" />
+                        </clipPath>
+                    </defs>
+                </svg><span class="refreshtext ms-2"></span> Refresh Now </button>
+        </div>
+    </div>
+</div>
+
+<div class="gallery-card po">
+    <div class="header mb-4">Gallery</div>
+
+    <form [formGroup]="galleryForm">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="row">
+                    <div class="col-md-3 mb-3">
+                        <div class="position-relative">
+                            <span style="top: 20%;" class="svg-icon svg-icon-1 position-absolute ms-3">
+                                <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" />
+                                </svg>
+                            </span>
+                            <input class="fx-date-range form-control ps-14 z-2" style="min-width: 260px !important;"
+                                type="text" matInput ngxDaterangepickerMd [drops]="'down'" [opens]="'right'"
+                                [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true" [showCancel]="false"
+                                autocomplete="off" [(ngModel)]="selectedDateRange" [ngModelOptions]="{standalone: true}"
+                                (datesUpdated)="datechange($event)" (click)="resetValidation()"
+                                (startDateChanged)="onStartDateChange($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" />
+                        </div>
+                    </div>
+                    <div class="col-md-2 mb-4">
+                        <lib-reactive-select formControlName="type" [idField]="'value'" [nameField]="'label'"
+                            [data]="type" (itemChange)="typeChange($event)"></lib-reactive-select>
+                    </div>
+                    <div class="col-md-4 mb-4">
+                        <lib-single-select [items]="checklists" [multi]="false" [searchField]="'checkListName'"
+                            [idField]="'_id'" (selected)="checklistNamechange($event,false)"
+                            [selectedValues]="[{checkListName:galleryForm.get('checklistName')?.value}]"></lib-single-select>
+                    </div>
+                    <div class="col-md-3 mb-4">
+                        <lib-reactive-select formControlName="answerType" [isDisabled]="!showflag" [idField]="'value'"
+                            [nameField]="'label'" [data]="answerType"></lib-reactive-select>
+                    </div>
+                    <div class="col-md-2 mb-4">
+
+                        <lib-reactive-select formControlName="filtertype" [idField]="'value'" [nameField]="'label'"
+                            [data]="filtertype" (itemChange)="filterChange($event)"></lib-reactive-select>
+
+                    </div>
+                    <div class="col-md-3 mb-4" *ngIf="galleryForm.get('filtertype')?.value ==='Clusters'">
+                        <div class="select-wrapper">
+                            <div class="placeholder-overlay" *ngIf="!(galleryForm.get('ClusterList')?.value?.length)">
+                                Select cluster
+                            </div>
+                            <lib-group-select [items]="ClusterList" [disabled]="false" [multi]="true"
+                                [searchField]="'groupName'" [idField]="'groupName'" (selected)="ongroupSelect($event)"
+                                [selectedValues]="galleryForm.get('ClusterList')?.value">
+                            </lib-group-select>
+                        </div>
+
+                    </div>
+                    <div class="col-md-3 mb-4" *ngIf="galleryForm.get('filtertype')?.value ==='Teams'">
+                        <div class="select-wrapper">
+                            <div class="placeholder-overlay" *ngIf="!(galleryForm.get('TeamsList')?.value?.length)">
+                                Select Teams
+                            </div>
+                            <lib-group-select [items]="TeamsList" [disabled]="false" [multi]="true"
+                                [searchField]="'teamName'" [idField]="'teamName'" (selected)="onTeamsSelect($event)"
+                                [selectedValues]="galleryForm.get('TeamsList')?.value">
+                            </lib-group-select>
+                        </div>
+
+                    </div>
+                    <div class="col-md-3 mb-4" *ngIf="galleryForm.get('filtertype')?.value ==='Clusters'">
+                        <div class="select-wrapper">
+                            <div class="placeholder-overlay" *ngIf="!(galleryForm.get('storeList')?.value?.length)">
+                                Select Stores
+                            </div>
+                            <lib-stores-select [items]="storeList" [disabled]="false" [multi]="true"
+                                [searchField]="'storeName'" [idField]="'storeId'" (selected)="onStoreSelect($event)"
+                                [selectedValues]="galleryForm.get('storeList')?.value"></lib-stores-select>
+                        </div>
+                    </div>
+                    <div class="col-md-3 mb-4" *ngIf="galleryForm.get('filtertype')?.value ==='Teams'">
+                        <div class="select-wrapper">
+                            <div class="placeholder-overlay" *ngIf="!(galleryForm.get('userList')?.value?.length)">
+                                Select users
+                            </div>
+                            <lib-stores-select [items]="userList" [disabled]="false" [multi]="true"
+                                [searchField]="'userName'" [idField]="'userName'" (selected)="onUserSelect($event)"
+                                [selectedValues]="galleryForm.get('userList')?.value"></lib-stores-select>
+                        </div>
+                    </div>
+                    <div class="col-md-4 text-end">
+                        <div class="d-flex justify-content-end">
+                            <div class="me-5 w-100" *ngIf="select === 'eyetest'">
+                                <select class="form-select" [(ngModel)]="category"
+                                    [ngModelOptions]="{standalone: true}">
+                                    <option value="all">All</option>
+                                    <option value="adults">Adults</option>
+                                    <option value="kids">Kids</option>
+                                </select>
+                            </div>
+
+                            <div class="me-5 w-100"
+                                *ngIf="select === 'cleaning' || select ==='scrum' || select ==='storeopenandclose' || select == 'mobileusagedetection' || select == 'uniformdetection' || select == 'storehygienemonitoring'">
+                                <select class="form-select" [(ngModel)]="category"
+                                    [ngModelOptions]="{standalone: true}">
+                                    <option value="all">All</option>
+                                    <option value="Breached">Breached</option>
+                                    <option value="Not Breached" *ngIf="!['uniformdetection','mobileusagedetection','storehygienemonitoring'].includes(select)">Not Breached</option>
+                                    <option value="Offline">Offline</option>
+                                </select>
+                            </div>
+                            <div class="me-5 w-100"
+                                *ngIf="galleryForm.value.sourceCheckList_id === 'halfshutter'||galleryForm.value.sourceCheckList_id === 'tvcompliance'">
+                                <select class="form-select" [(ngModel)]="category" (change)="onfilterChange($event)"
+                                    [ngModelOptions]="{standalone: true}">
+                                    <option value="all">All</option>
+                                    <option value="Breached">Breached</option>
+                                    <option value="Not Breached">Not Breached</option>
+                                    <option value="Files Not Received">Files Not Received</option>
+                                </select>
+                            </div>
+                            <div class="me-5 w-100" *ngIf="select === 'outsidebusinesshoursqueuetracking'">
+                                <select class="form-select" [(ngModel)]="category"
+                                    [ngModelOptions]="{standalone: true}">
+                                    <option value="all">All</option>
+                                    <option value="Detected">Detected</option>
+                                    <option value="Not Detected">Not Detected</option>
+                                    <option value="Offline">Offline</option>
+                                </select>
+                            </div>
+                            <div class="me-5 w-100 text-start" *ngIf="select === 'queuealert'">
+                                <div class="select-wrapper">
+                                    <div class="placeholder-overlay"
+                                        *ngIf="!(galleryForm.get('zoneList')?.value?.length)">
+                                        Select Zone
+                                    </div>
+                                    <lib-stores-select [items]="zoneList" [disabled]="false" [multi]="true"
+                                        [searchField]="'value'" [idField]="'key'" (selected)="onzoneSelect($event)"
+                                        [selectedValues]="galleryForm.get('zoneList')?.value"></lib-stores-select>
+                                </div>
+                            </div>
+                            <div class="me-5 w-50" *ngIf="showflag">
+                                <select class="form-select" (change)="approveFilterChange($event)"
+                                    [(ngModel)]="approveFilter" [ngModelOptions]="{standalone: true}">
+                                    <option value="all">All</option>
+                                    <option value="Approved">Approved</option>
+                                    <option value="notapproved">Not-Approved</option>
+                                </select>
+                            </div>
+                            <span class="me-4 mt-3" *ngIf="showflag">
+                                <input formControlName="viewRedo" change type="checkbox" (click)="redoChanged($event)"
+                                    class="form-check-input cursor-pointer mt-1 me-2" id="viewRedo">
+                                <label class="checkbox-label" for="viewRedo">Re-do</label>
+                            </span>
+                            <span class="me-3 mt-3" *ngIf="showflag&&galleryForm.value.type==='checklist'">
+                                <input formControlName="viewFlag" change type="checkbox" (click)="flagChanged($event)"
+                                    class="form-check-input cursor-pointer mt-1 me-2" id="viewFlag">
+                                <label class="checkbox-label" for="viewFlag">Flag</label>
+                            </span>
+
+                            <a (click)="onSubmit()" type="submit" class="btn btn-primary px-4 "><span>Apply</span></a>
+                            <!-- <a (click)="notify([])" type="submit" class="btn btn-primary px-4 "><span>test</span></a> -->
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </form>
+</div>
+<div class="card my-2">
+    <div class="row main-container my-5 ">
+
+        <div [ngClass]="showsidenav ? 'col-md-4 left-sidebar':'d-none'" class="h-650px">
+            <div class="position-relative h-650px scroll-y">
+                <div class="card-body p-5">
+                    <div class="checklist-left">
+                        <div class="checklist-title">{{checklistName}}</div>
+                        <div class="checklist-text">{{checkListDescription}}</div>
+                    </div>
+                    <div *ngIf="loading" 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>
+                    <div *ngIf="noData&&select === 'custom' || noData&&select === 'task'" class="row mt-20">
+                        <div class="col-lg-12 mt-20 mb-3">
+                            <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                                <img class="w-75 h-300px" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                <div class="nodata-title mt-0">No data found</div>
+                                <div class="nodata-sub">There is no result for this checklist</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div *ngIf="noData&&select !== 'custom'&&select !== 'task'" class="row mt-20">
+                        <div class="col-lg-12 mt-20 mb-3">
+                            <div class="card-body mt-20 d-flex justify-content-center align-items-center flex-column">
+                                <img class="img-src mt-5 w-40" src="./assets/tango/Icons/Nodata2.svg" alt="">
+                                <div class="nodata-title">No Detections found</div>
+                                <div class="nodata-sub">There is no breaches for the selected period</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <section *ngIf="!noData && !loading">
+
+                        <div *ngIf="select === 'custom'||select === 'task'">
+                            <div class="text-end mt-10">
+                                <!-- <button class="btn btn-outline w-25 me-3 btn-resize" (click)="viewChecklists()"> Reset </button> -->
+                                <button class="btn btn-outline w-25 me-3 btn-resize"
+                                    *ngIf="selectedSection.length>0||tempselectedSection.length>0"
+                                    (click)="onchecklistreset()"> Reset </button>
+                                <button *ngIf="selectedSection.length>0||tempselectedSection.length>0"
+                                    class="btn btn-primary w-25  btn-resize"
+                                    (click)="selectsinglequestion()">Apply</button>
+                            </div>
+                            <div class="my-6" [ngClass]="selectedSection.length===0 ? 'view-all':'view-questions'"
+                                style="cursor: pointer;" (click)="onchecklistreset()">
+                                View All Answers
+                            </div>
+                            <div class="mx-2" *ngFor="let section of checklistData; let i=index;">
+                                <div class="d-flex align-items-center justify-content-between mt-4"
+                                    style="cursor: pointer;" (click)="accordian(i)">
+                                    <div class="fs-4 fw-bold section" *ngIf="galleryForm.value.type==='checklist'">
+                                        {{section.sectionName}} {{getSectionCompliance(section.sectionName)}}</div>
+                                    <hr class="mx-2">
+                                    <svg class="cursor-pointer" [ngClass]="{'rotate' : show !== i}"
+                                        xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20"
+                                        fill="none">
+                                        <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </div>
+                                <div *ngIf="show===i" class="question-left">
+                                    <div cdkDropList [cdkDropListData]="section.questions">
+                                        <div *ngFor="let question of section.questions;let j=index;"
+                                            class="d-flex my-2 q-btn" cdkDrag>
+                                            <input id="label" [(ngModel)]="question.checked"
+                                                (click)="selectedQuestion($event,section,question)"
+                                                class="form-check-input cursor-pointer mt-2 me-4" type="checkbox">
+                                            <div class="editablecontent" [ngClass]="question?.checked ? 'view-all':''"
+                                                style="cursor: pointer;">
+                                                {{question.qno}} . {{question.qname}}
+                                            </div>
+
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- </div>  -->
+                        <div *ngIf="combinedChecklist.includes(select)">
+                            <div class="text-end mt-10">
+                                <button class="btn btn-outline w-25 me-3 btn-resize" (click)="onreset()"> Reset
+                                </button>
+                                <button class="btn btn-primary w-25  btn-resize" (click)="onview()">Apply</button>
+                            </div>
+                            <div class="dropdownselect h-900px scroll-y">
+                                <div class="d-flex justify-content-left "
+                                    [ngClass]="selectAll ? 'backgroundBorder':'withoutbackground'">
+                                    <input class="form-check-input cursor-pointer me-4" type="checkbox"
+                                        [(ngModel)]="selectAll" (click)="selectAllStore($event)"> <span
+                                        [ngClass]="selectAll ? 'usage-detection':'usage-text'">Select All</span>
+                                </div>
+                                <!-- dropdownbg -->
+                                <div class="my-4" *ngFor="let list of mobileusageDataList;let i=index">
+                                    <div (change)="updateCheck($event,list)"
+                                        [ngClass]="list.checked ? 'backgroundBorder':'withoutbackground'">
+                                        <input id="label{{i}}" class="form-check-input cursor-pointer me-4"
+                                            type="checkbox" [(ngModel)]="list.checked">
+                                        <label for="label{{i}}"
+                                            [ngClass]="list.checked ? 'usage-detection':'usage-text'">{{list?.storeName}}</label>
+                                        <span class="badge badge-light-primary detectionright"
+                                            *ngIf="list.detection">{{list.detection}} Detections</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                </div>
+
+
+
+
+
+                <div *ngIf="showsidenav" (click)="sidenav()" class="backButtonright text-center pt-1 cursor-pointer">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none">
+                        <path d="M11 17L6 12L11 7M18 17L13 12L18 7" stroke="#101828" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div
+            [ngClass]="showsidenav ? 'col-md-8 border border-bottom-0 border-top-0 border-left border-5 right-sidebar':'col-md-12'">
+            <div class="position-relative h-1000px scroll-y">
+                <!-- (select === 'custom' || select === 'task'||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo') -->
+                <div class="card-header border-0  px-0 my-0"
+                    *ngIf="(select === 'custom' || select === 'task' || headerFilters?.client === '452'||headerFilters?.client === '459'||headerFilters?.client === '396' || headerFilters?.client === '430' || headerFilters?.client === '11') && !viewloading && !viewnoData">
+                    <h3 *ngIf="!showsingle || (gs.userAccess | async)?.userType === 'tango'||!allapprovalStatus"></h3>
+
+                    <div class=" m-3"
+                        *ngIf="showsingle&&(gs.userAccess | async)?.userType !== 'tango'&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&allapprovalStatus">
+                        <div class="form-check">
+                            <input [(ngModel)]="selectAllTask"
+                                (click)="selectedAllTask($event,viewChecklistsData?.checklistAnswers[0],viewChecklistsData?.checklistAnswers[0].questionAnswer[0].questions[0],viewChecklistsData?.checklistAnswers[0]?.checklistInfo,viewChecklistsData?.checklistAnswers[0].questionAnswer[0])"
+                                class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                            <label class="ms-2" for="flexCheckDefault">
+                                Select All <span *ngIf="selectedRecordCount">({{selectedRecordCount}} Records
+                                    Selected)</span>
+                            </label>
+                        </div>
+
+
+
+                    </div>
+                    <div class="card-toolbar">
+                        <div class="me-4"
+                            *ngIf="showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !== 'tango'&&this.galleryForm.value.type!=='task'">
+                            <span *ngIf="selectedUsers.length>0||selectedStores.length>0" class="icon-btn"
+                                (click)="createMultipleTask('task')">
+                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                    fill="none">
+                                    <path
+                                        d="M11.6654 1.66797H4.9987C4.55667 1.66797 4.13275 1.84356 3.82019 2.15612C3.50763 2.46868 3.33203 2.89261 3.33203 3.33464V16.668C3.33203 17.11 3.50763 17.5339 3.82019 17.8465C4.13275 18.159 4.55667 18.3346 4.9987 18.3346H14.9987C15.4407 18.3346 15.8646 18.159 16.1772 17.8465C16.4898 17.5339 16.6654 17.11 16.6654 16.668V6.66797M11.6654 1.66797L16.6654 6.66797M11.6654 1.66797V6.66797H16.6654M9.9987 15.0013V10.0013M7.4987 12.5013H12.4987"
+                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg>
+                                
+                                <span class="btn-text">Create Task</span>
+                            </span>
+
+                        </div>
+
+                        <div class="me-4"
+                            *ngIf="showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'">
+                            <span *ngIf="selectedUsers.length>0||selectedStores.length>0"
+                                (click)="createMultipleTask('redo')" class="icon-btn">
+                               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"
+                                    fill="none">
+                                    <path
+                                        d="M19.1654 2.33527V7.33527M19.1654 7.33527H14.1654M19.1654 7.33527L15.2987 3.70193C14.4031 2.80586 13.2951 2.15127 12.078 1.79925C10.861 1.44722 9.57462 1.40923 8.33894 1.68882C7.10325 1.96841 5.95853 2.55646 5.01159 3.39812C4.06464 4.23977 3.34634 5.30759 2.9237 6.50193M0.832031 15.6686V10.6686M0.832031 10.6686H5.83203M0.832031 10.6686L4.6987 14.3019C5.59432 15.198 6.70234 15.8526 7.91937 16.2046C9.1364 16.5567 10.4228 16.5946 11.6585 16.3151C12.8941 16.0355 14.0389 15.4474 14.9858 14.6058C15.9328 13.7641 16.6511 12.6963 17.0737 11.5019"
+                                        stroke="#344054" stroke-width="2" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg>
+                                <span class="btn-text">Redo</span>
+                            </span>
+                        </div>
+                        <div class="me-4"
+                            *ngIf="showsingle&&select ==='custom'&&(gs.userAccess | async)?.userType !=='tango'||this.select === 'task'&&showsingle&&(gs.userAccess | async)?.userType !== 'tango'">
+                            <span *ngIf="selectedUsers.length>0||selectedStores.length>0"
+                                (click)="exportDet($event)" class="icon-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M8.125 13.125H16.3562L14.7438 14.7438L15.625 15.625L18.75 12.5L15.625 9.375L14.7438 10.2562L16.3562 11.875H8.125V13.125Z" fill="black"/>
+<path d="M13.75 8.75001V6.25001C13.7505 6.16776 13.7347 6.08622 13.7036 6.01007C13.6725 5.93392 13.6267 5.86466 13.5688 5.80626L9.19375 1.43126C9.13535 1.37333 9.06609 1.32751 8.98994 1.2964C8.91379 1.2653 8.83225 1.24953 8.75 1.25001H2.5C2.16848 1.25001 1.85054 1.38171 1.61612 1.61613C1.3817 1.85055 1.25 2.16849 1.25 2.50001V17.5C1.25 17.8315 1.3817 18.1495 1.61612 18.3839C1.85054 18.6183 2.16848 18.75 2.5 18.75H12.5C12.8315 18.75 13.1495 18.6183 13.3839 18.3839C13.6183 18.1495 13.75 17.8315 13.75 17.5V16.25H12.5V17.5H2.5V2.50001H7.5V6.25001C7.5 6.58153 7.6317 6.89947 7.86612 7.13389C8.10054 7.36831 8.41848 7.50001 8.75 7.50001H12.5V8.75001H13.75ZM8.75 6.25001V2.75626L12.2438 6.25001H8.75Z" fill="black"/>
+</svg>
+                                <span class="btn-text">Export</span>
+                            </span>
+                            <div *ngIf="exportShow"
+                                class="card py-2  position-absolute productdrop top-10 w-150px end-0 z-1">
+                                <ul class="list-unstyled mb-2">
+                                    <li class="cursor-pointer py-4 checkbox-label mx-2"
+                                        *ngIf="pdfExportTypes.includes(select)" type="button"
+                                        (click)="setExportAsPPT('Export as PDF','pdf')">
+                                        Export as PDF
+                                    </li>
+                                    <li class=" cursor-pointer checkbox-label py-4 mx-2"
+                                        *ngIf="csvExportTypes.includes(select)" type="button"
+                                        (click)="setExportAsPPT('Export as CSV','csv')">
+                                        Export as CSV
+                                    </li>
+                                    <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->
+                                    <li *ngIf="selectedSection.length >0"
+                                        class=" cursor-pointer checkbox-label py-4  mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as PPT','ppt')">
+                                        Export as PPT
+                                    </li>
+                                    <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->
+                                    <li *ngIf="selectedSection.length >0"
+                                        class="cursor-pointer checkbox-label py-4 mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as ZIP','zipfiles')">
+                                        Export as ZIP
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="position-relative cursor-pointer me-10" *ngIf="!galleryForm.value.viewRedo&&selectedUsers.length===0&&selectedStores.length===0">
+                            <div *ngIf="!['tvcompliance','cameratampering','queuealert','mobileusagedetection','halfshutter','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm.value.sourceCheckList_id)" 
+                                class=" btn btn-primary form-control no-text-transform" (click)="exportDet($event)">
+                                {{ exportLabel }}
+                            </div>
+                            <div *ngIf="exportConfig?.enabled &&['tvcompliance','cameratampering','queuealert','mobileusagedetection','halfshutter','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm.value.sourceCheckList_id)"
+                                class=" btn btn-primary form-control no-text-transform" (click)="exportDet($event)">
+                                {{ exportLabel }} <!-- Bind label text here -->
+                            </div>
+                            <div *ngIf="exportShow"
+                                class="card py-2  position-absolute productdrop top-10 w-150px end-0 z-1">
+                                <ul class="list-unstyled mb-2">
+                                    <li class="cursor-pointer py-4 checkbox-label mx-2"
+                                       *ngIf="pdfExportTypes.includes(select) &&!['halfshutter','tvcompliance','cameratampering','queuealert','mobileusagedetection','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm.value.sourceCheckList_id)" type="button"
+                                        (click)="setExportAsPPT('Export as PDF','pdf')">
+                                        Export as PDF
+                                    </li>
+                                    <li class=" cursor-pointer checkbox-label py-4 mx-2"
+                                       *ngIf="pdfExportTypes.includes(select) &&!['halfshutter','tvcompliance','cameratampering','queuealert','mobileusagedetection','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm.value.sourceCheckList_id)" type="button"
+                                        (click)="setExportAsPPT('Export as CSV','csv')">
+                                        Export as CSV
+                                    </li>
+                                    <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose'||select ==='inventorycount'||select ==='carsattended'||select ==='numberplateinfo' -->
+                                    <li *ngIf="selectedSection.length >0"
+                                        class=" cursor-pointer checkbox-label py-4  mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as PPT','ppt')">
+                                        Export as PPT
+                                    </li>
+                                    <!-- ||select === 'cleaning'||select ==='scrum'||select ==='storeopenandclose' -->
+                                    <li *ngIf="selectedSection.length >0"
+                                        class="cursor-pointer checkbox-label py-4 mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as ZIP','zipfiles')">
+                                        Export as ZIP
+                                    </li>
+                                    <li *ngIf="exportConfig?.enabled &&exportConfig?.format?.includes('PDF') && ['halfshutter','tvcompliance','cameratampering','queuealert','mobileusagedetection','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm?.value?.sourceCheckList_id)"
+                                        class="cursor-pointer py-4 checkbox-label mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as PDF','pdf')">
+                                        Export as PDF
+                                    </li>
+                                    <li *ngIf="exportConfig?.enabled &&exportConfig?.format?.includes('CSV') && ['halfshutter','tvcompliance','cameratampering','queuealert','mobileusagedetection','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm?.value?.sourceCheckList_id)"
+                                        class=" cursor-pointer checkbox-label py-4 mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as CSV','csv')">
+                                        Export as CSV
+                                    </li>
+                                    <li *ngIf="exportConfig?.enabled &&exportConfig?.format?.includes('PPT') && ['halfshutter','tvcompliance','cameratampering','queuealert','mobileusagedetection','storeopenandclose','uniformdetection','storehygienemonitoring','staffgrouping','employeeCount','boxalert'].includes(galleryForm?.value?.sourceCheckList_id)"
+                                        class=" cursor-pointer checkbox-label py-4  mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as PPT','ppt')">
+                                        Export as PPT
+                                    </li>
+                                    <li *ngIf="galleryForm.value.sourceCheckList_id === 'halfshutter' && exportConfig?.enabled && exportConfig?.format?.includes('ZIP')"
+                                        class="cursor-pointer checkbox-label py-4 mx-2" type="button"
+                                        (click)="setExportAsPPT('Export as ZIP','zipfiles')">
+                                        Export as ZIP
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div class="card-body p-0">
+                    <div>
+                        <div *ngIf="viewloading" 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>
+
+                        <div *ngIf="viewnoData&&select !== 'custom'&&select !== 'task'" class="row mt-20">
+                            <div class="col-lg-12 mt-20 mb-3">
+                                <div
+                                    class="card-body mt-20 d-flex justify-content-center align-items-center flex-column">
+                                    <img class="img-src mt-5 w-40" src="./assets/tango/Icons/Nodata2.svg" alt="">
+                                    <div class="nodata-title">No Detections found</div>
+                                    <div class="nodata-sub">There is no breaches for the selected period</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div *ngIf="viewnoData&&select === 'custom' || viewnoData&&select === 'task'" class="row mt-20">
+                            <div class="col-lg-12 mt-20 mb-3">
+                                <div
+                                    class="card-body mt-20 d-flex justify-content-center align-items-center flex-column">
+                                    <img class="img-src mt-5 w-40" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                    <div class="nodata-title">No data found</div>
+                                    <div class="nodata-sub">There is no result for this checklist</div>
+                                </div>
+                            </div>
+                        </div>
+                        <section *ngIf="!viewloading && !viewnoData">
+                            <div *ngIf="select==='custom'||select==='task' ">
+                                <div *ngIf="showsingle" class="qa-heading m-3 mx-11">
+                                    {{this.selectedSection[0]?.questions[0]}}</div>
+                                <div *ngIf="showsingle&&showfilter">
+                                    <ul
+                                        class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap mx-10">
+                                        <li class="nav-item" *ngFor="let item of answerFilter">
+                                            <a (click)="taskTab(item)"
+                                                [ngClass]="galleryForm.value.filter === item.key ? 'active' : ''"
+                                                class="nav-link cursor-pointer no-border me-3">
+                                                {{item.key}}<span class="mx-2 "
+                                                    [ngClass]="galleryForm.value.filter === item.key ? 'badge-num-primary' :'badge-num-muted'">{{item.count}}</span>
+                                            </a>
+                                        </li>
+
+                                    </ul>
+
+                                </div>
+
+                                <div *ngFor="let checklist of viewChecklistsData?.checklistAnswers">
+
+                                    <div class="text-center" *ngIf="clientData.logo&&clientData.logo!==''&&showmulti">
+                                        <img class="mt-5 mb-3 text-center iconsize" src="{{clientData.logo}}">
+                                    </div>
+
+
+                                    <div class="row px-10 mt-5" *ngIf="showmulti">
+                                        <div class="col-md-3">
+                                            <h3 class="uni-title">Store Name:</h3>
+                                        </div>
+                                        <div class="col-md-9">
+                                            <p class="uni-subtitle">{{checklist?.storeProfile?.storeName}} </p>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <h3 class="uni-title" *ngIf="galleryForm.value.type==='checklist'">Checklist
+                                                Name:</h3>
+                                            <h3 class="uni-title" *ngIf="galleryForm.value.type==='task'">Task Name:
+                                            </h3>
+
+                                        </div>
+                                        <div class="col-md-9">
+                                            <p class="uni-subtitle">{{checklist?.checklistInfo?.checklistName}}</p>
+                                        </div>
+
+                                        <ng-container>
+                                            <div class="col-md-3">
+                                                <h3 class="uni-title">State & Country :</h3>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <p class="uni-subtitle">{{checklist?.storeProfile?.state}}<span *ngIf="checklist?.storeProfile?.state">, </span>
+                                                    {{checklist?.storeProfile?.Country}}</p>
+                                            </div>
+                                            <div class="col-md-2">
+                                                <h3 class="uni-title">Duration :</h3>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <p class="uni-subtitle"> {{checklist?.checklistInfo?.duration}}</p>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <h3 class="uni-title">No. of Questions :</h3>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <p class="uni-subtitle">{{checklist?.checklistInfo?.noofQuestions}}</p>
+                                            </div>
+                                            <div class="col-md-2">
+                                                <h3 class="uni-title">Date :</h3>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <p class="uni-subtitle"> {{checklist?.checklistInfo?.date}}</p>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <h3 class="uni-title">Submitted By :</h3>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <p class="uni-subtitle">{{checklist?.checklistInfo?.submittedBy}}</p>
+                                            </div>
+                                            <div class="col-md-2">
+                                                <h3 class="uni-title">Time :</h3>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <p class="uni-subtitle"> {{checklist?.checklistInfo?.time}}</p>
+                                            </div>
+                                        </ng-container>
+
+                                    </div>
+
+
+                                    <div class="row px-10">
+                                        <div *ngFor="let section of checklist.questionAnswer;let si = index">
+                                            <div [id]="si+'_'+qi" class="qa-bodrer my-5" *ngFor="let question of section.questions; let qi = index">
+                                                <div class="row" *ngIf="question.redo||question.redo===false">
+                                                    <div class="view-detail col-12 text-end cursor-pointer"
+                                                        (click)="ViewInDetails(question,checklist?.checklistInfo,checklist?.storeProfile,section)">
+                                                        View in detail
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                            viewBox="0 0 20 20" fill="none">
+                                                            <path
+                                                                d="M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667"
+                                                                stroke="#009BF3" stroke-width="1.67"
+                                                                stroke-linecap="round" stroke-linejoin="round" />
+                                                        </svg>
+                                                    </div>
+                                                </div>
+                                                <div class="row w-100 m-3">
+
+                                                    <div class="col-md-1" style="width:3.3333%"
+                                                        *ngIf="showsingle&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit">
+                                                        <input id="label" [(ngModel)]="question.checked"
+                                                            [disabled]="question.redo&&question.task"
+                                                            (click)="selectmultiTask($event,checklist,question,checklist?.checklistInfo,section)"
+                                                            class="form-check-input cursor-pointer mt-2 me-4"
+                                                            type="checkbox">
+                                                    </div>
+                                                    <div class="col-md-3 text-title"
+                                                        *ngIf="showsingle&&galleryForm.get('filtertype')?.value ==='Clusters'">
+                                                        {{checklist?.storeProfile?.storeName}}
+                                                    </div>
+                                                    <div class="col-md-3 text-title"
+                                                        *ngIf="showsingle&&galleryForm.get('filtertype')?.value ==='Teams'">
+                                                        {{checklist?.storeProfile?.userName}}
+                                                    </div>
+                                                    <div class="col-md-8 text-end title-description" *ngIf="showsingle">
+                                                        Submitted by : {{checklist?.checklistInfo?.submittedBy}} On :
+                                                        {{checklist?.checklistInfo?.date}}
+                                                        {{checklist?.checklistInfo?.time}}
+                                                    </div>
+                                                </div>
+                                                <ul>
+                                                    <li *ngIf="showmulti" class="qa-heading">
+                                                        <div class="d-flex justify-content-between">
+                                                            <div>
+                                                                {{question?.qno}}.{{question?.qname}}
+                                                            </div>
+                                                            <div *ngIf="question.compliance">
+                                                                <div class="badge scoreBadge p-5">Score:{{compliance(question)}}</div>
+                                                            </div>
+                                                        </div>
+                                                    </li>
+
+                                                    <div class="Partially my-3 px-5"
+                                                        *ngIf="question?.answerType==='descriptive'">
+                                                        <div *ngFor="let item of question.userAnswer;let i=index">
+                                                            <div class="col-md-6">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                                <ng-template #noMultiImage>
+                                                                    <div
+                                                                        *ngIf="galleryForm.value.type === 'checklist' && question.questionReferenceImage  && question.questionReferenceImage !== ''">
+                                                                        <div class="title-ref my-3">Question Reference Image
+                                                                        </div>
+                                                                        <div class="collage-grid">
+                                                                            <div class="collage-tile">
+                                                                                <img class="img-logo cursor-pointer"
+                                                                                    (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                                    [src]="environment.TraxAnswerCDN + question.questionReferenceImage"
+                                                                                    alt="">
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </ng-template>
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+
+                                                            <span class="mt-2"
+                                                                [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}</span>
+                                                            <div class="remarksTxt" *ngIf="question.remarks">
+                                                                Remarks : {{question.remarks}}</div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="Partially my-3 px-5"
+                                                        *ngIf="question?.answerType==='linearscale'">
+                                                        <div *ngFor="let item of question.userAnswer;let i=index">
+                                                            <div class="col-md-6"
+                                                                *ngIf="hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage !== '' && question.questionReferenceImage !== null)">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                                <ng-template #noMultiImage>
+                                                                    <div
+                                                                        *ngIf="galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null">
+                                                                        <div class="title-ref my-3">Question Reference Image
+                                                                        </div>
+                                                                        <img class="img-logo cursor-pointer"
+                                                                            (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                            src="{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}"
+                                                                            alt="">
+                                                                    </div>
+                                                                </ng-template>
+                                                            </div>
+                                                            <div class="col-md-6">
+                                                                <!-- Question Reference Images -->
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+                                                            <!-- <br> -->
+                                                            <span class="mt-4"
+                                                                [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}<ng-container *ngIf="question?.answers && question.answers[0]?.linearType === 'percentage'">%</ng-container><ng-container *ngIf="question?.answers && question.answers[0]?.linearType === 'degree'">°C</ng-container></span>
+                                                            <div class="remarksTxt" *ngIf="question.remarks">
+                                                                Remarks : {{question.remarks}}</div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="Partially my-3 px-5"
+                                                        *ngIf="question?.answerType==='time'">
+                                                        <div *ngFor="let item of question.userAnswer;let i=index">
+                                                            <div class="col-md-6"
+                                                                *ngIf="hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                                <ng-template #noMultiImage>
+                                                                    <div
+                                                                        *ngIf="galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''">
+                                                                        <div class="title-ref my-3">Question Reference Image
+                                                                        </div>
+                                                                        <div class="collage-grid"
+                                                                            [ngStyle]="{ 'grid-template-columns': getGridColumns(1) }">
+                                                                            <div class="collage-tile">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                                    [src]="environment.TraxAnswerCDN + question.questionReferenceImage"
+                                                                                    alt="">
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </ng-template>
+                                                            </div>
+                                                            <div class="col-md-6">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+                                                            <br>
+                                                            <span class="mt-4"
+                                                                [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}</span>
+                                                            <div class="remarksTxt" *ngIf="question.remarks">
+                                                                Remarks : {{question.remarks}}</div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="Partially my-3 px-5"
+                                                        *ngIf="question?.answerType==='date'">
+                                                        <div *ngFor="let item of question.userAnswer;let i=index">
+                                                            <div class="col-md-6"
+                                                                *ngIf="hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                                <ng-template #noMultiImage>
+                                                                    <div
+                                                                        *ngIf="galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null">
+                                                                        <div class="title-ref my-3">Question Reference Image
+                                                                        </div>
+                                                                        <img class="img-logo cursor-pointer"
+                                                                            (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                            src="{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}"
+                                                                            alt="">
+                                                                    </div>
+                                                                </ng-template>
+                                                            </div>
+                                                            <div class="col-md-6">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(item)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+                                                            <br>
+                                                            <span class="mt-4"
+                                                                [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}</span>
+                                                            <div class="remarksTxt" *ngIf="question.remarks">
+                                                                Remarks : {{question.remarks}}</div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="Partially my-3 px-5"
+                                                        *ngIf="question?.answerType==='dropdown'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== '')">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let ref of question.multiQuestionReferenceImage;let ri=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(ref)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),ri)"
+                                                                                [src]="environment.TraxAnswerCDN + ref.imageURL"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div
+                                                                    *ngIf="galleryForm.value.type==='checklist' && question.questionReferenceImage !== '' && question.questionReferenceImage !== null">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <img class="img-logo cursor-pointer"
+                                                                        (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                        src="{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}"
+                                                                        alt="">
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+                                                        <div class="col-md-6">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let ref of question.questionReferenceImage;let ri=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(ref)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),ri)"
+                                                                                [src]="environment.TraxAnswerCDN + ref"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                        </div>
+                                                        <div *ngFor="let item of question.userAnswer;let i=index">
+                                                            <span class="mt-2" [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}</span>
+                                                            <div class="col-md-6"
+                                                                *ngIf="hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')">
+                                                                <ng-container
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage">
+                                                                    <div class="title-ref my-3">Reference Image
+                                                                    </div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(item.multiReferenceImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let reffItem of item.multiReferenceImage;let i=index">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="isValidImage(reffItem)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + reffItem.imageURL"
+                                                                                    alt="Reference image">
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </ng-container>
+                                                                <ng-template #noMultiImage>
+                                                                    <div
+                                                                        *ngIf="item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'">
+                                                                        <div class="title-ref my-3">Reference Image
+                                                                        </div>
+                                                                        <img class="img-logo cursor-pointer"
+                                                                            (click)="openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)"
+                                                                            src="{{environment.TraxAnswerCDN}}{{item.referenceImage}}"
+                                                                            alt="">
+                                                                    </div>
+                                                                </ng-template>
+                                                            </div>
+                                                            <div [ngClass]="item.validationType==='Capture Image'?'col-md-6':'col-md-12'"
+                                                                *ngIf="item.validation && item.validationAnswer && ['Capture Video','Descriptive Answer','Capture Image'].includes(item.validationType)">
+                                                                <div class="title-ref my-3 d-flex justify-content-between"
+                                                                    *ngIf="item.validationType==='Capture Image'">
+                                                                    <span>Validation Answer</span>
+                                                                    <span *ngIf="checkDetectionStatus(item?.runAIData).keyPresent">
+                                                                        <span class="badge"
+                                                                            [ngClass]="checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                            {{ checkDetectionStatus(item?.runAIData).keyValue ? 'Matched' : 'Not Matched' }}
+                                                                        </span>
+                                                                    </span>
+                                                                </div>
+                                                                <img class="img-logo cursor-pointer"
+                                                                    (click)="openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)"
+                                                                    *ngIf="item.validationType==='Capture Image'"
+                                                                    [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer"
+                                                                    alt="">
+                                                                <div class="position-relative w-100 h-450px p-3"
+                                                                    *ngIf="item.validationType==='Capture Video'">
+                                                                    <video controls class="w-100 h-100"
+                                                                        [src]="environment.TraxAnswerCDN + item.validationAnswer"></video>
+                                                                </div>
+                                                                <span *ngIf="item.validationType==='Descriptive Answer'"
+                                                                    [ngClass]="item.sopFlag ? 'flagclour':''">
+                                                                    Validation Answer : {{item.validationAnswer}}
+                                                                </span>
+                                                            </div>
+                                                            <!-- <div class="row mt-3" *ngIf="question?.allowMultiple">
+                                                                <div class="col-12 text-end">
+                                                                    <button class="btn btn-sm btn-default border-default me-3"
+                                                                        [disabled]="isAnswerRedoDone(question, item)"
+                                                                        *ngIf="checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0"
+                                                                        (click)="addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section,si+'_'+qi,item)">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                            <path d="M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                                                        </svg>
+                                                                        <span class="ms-2 font-defult-task">Redo</span>
+                                                                    </button>
+                                                                    
+                                                                </div>
+                                                            </div> -->
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks">
+                                                            Remarks : {{question.remarks}}</div>
+                                                    </div>
+
+                                                 <div class="Partially my-3 px-5" *ngIf="question?.answerType === 'yes/no'">
+  <div class="row" *ngFor="let item of question.userAnswer; let i = index">
+
+    <!-- 🟩 LEFT COLUMN -->
+    <div class="col-md-6">
+
+      <!-- CHECKLIST MULTI REFERENCE IMAGES -->
+      <ng-container *ngIf="galleryForm.value.type === 'checklist'">
+        <ng-container *ngIf="hasMultiQuestionReferenceImages(question); else singleChecklistRef">
+          <div class="title-ref my-3">Question Reference Image</div>
+          <div
+            class="collage-grid"
+            [ngStyle]="{
+              'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length)
+            }"
+          >
+            <ng-container *ngFor="let ref of question.multiQuestionReferenceImage; let ri = index">
+              <div class="collage-tile" *ngIf="isValidImage(ref)">
+                <img
+                  class="cursor-pointer"
+                  (click)="openMultiImagePopup(
+                    getMultiRefImageUrls(question.multiQuestionReferenceImage),
+                    getRefImageNames(question.multiQuestionReferenceImage),
+                    ri
+                  )"
+                  [src]="environment.TraxAnswerCDN + ref.imageURL"
+                  alt="Reference image"
+                />
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+
+        <ng-template #singleChecklistRef>
+          <div
+            *ngIf="question.questionReferenceImage"
+            class="title-ref my-3"
+          >
+            Question Reference Image
+          </div>
+          <img
+            *ngIf="question.questionReferenceImage"
+            class="img-logo cursor-pointer"
+            (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage, 0)"
+            [src]="environment.TraxAnswerCDN + question.questionReferenceImage"
+            alt="Reference image"
+          />
+        </ng-template>
+      </ng-container>
+
+      <!-- TASK REFERENCE IMAGES -->
+      <ng-container *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+        <div class="title-ref my-3">Question Reference Image</div>
+        <div
+          class="collage-grid"
+          [ngStyle]="{
+            'grid-template-columns': getGridColumns(question.questionReferenceImage.length)
+          }"
+        >
+          <ng-container *ngFor="let img of question.questionReferenceImage; let ti = index">
+            <div class="collage-tile" *ngIf="isValidImage(img)">
+              <img
+                class="cursor-pointer"
+                (click)="openImagePopup(
+                  getRefImageUrls(question.questionReferenceImage),
+                  getRefImageNames(question.questionReferenceImage),
+                  ti
+                )"
+                [src]="environment.TraxAnswerCDN + img"
+                alt="Reference image"
+              />
+            </div>
+          </ng-container>
+        </div>
+      </ng-container>
+      <div>
+        <span class="mt-4" [ngClass]="item.sopFlag ? 'flagclour' : ''">
+          {{ item.answer }}
+        </span>
+      </div>
+    </div>
+
+    <!-- 🟦 RIGHT COLUMN -->
+    <div class="col-md-6">
+        <ng-container *ngIf="galleryForm.value.type === 'checklist'">
+        <ng-container *ngIf="hasMultiReferenceImages(item); else singleItemRef">
+          <div class="title-ref my-3">Reference Image</div>
+          <div
+            class="collage-grid"
+            [ngStyle]="{
+              'grid-template-columns': getGridColumns(item.multiReferenceImage.length)
+            }"
+          >
+            <ng-container *ngFor="let reffItem of item.multiReferenceImage; let mi = index">
+              <div class="collage-tile" *ngIf="isValidImage(reffItem)">
+                <img
+                  class="cursor-pointer"
+                  (click)="openMultiImagePopup(
+                    getMultiRefImageUrls(item.multiReferenceImage),
+                    getRefImageNames(item.multiReferenceImage),
+                    mi
+                  )"
+                  [src]="environment.TraxAnswerCDN + reffItem.imageURL"
+                  alt="Reference image"
+                />
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+
+        <ng-template #singleItemRef>
+          <div *ngIf="item.referenceImage" class="title-ref my-3">Reference Image</div>
+          <img
+            *ngIf="item.referenceImage"
+            class="img-logo cursor-pointer"
+            (click)="openImagePopup1(environment.TraxAnswerCDN + item.referenceImage, 0)"
+            [src]="environment.TraxAnswerCDN + item.referenceImage"
+            alt="Reference image"
+          />
+        </ng-template>
+      </ng-container>
+
+      <!-- VALIDATION BLOCK -->
+      <ng-container *ngIf="item.validation && item.validationAnswer !== ''">
+        <div class="title-ref my-3 d-flex justify-content-between"
+             *ngIf="item.validationType === 'Capture Image' || item.validationType === 'Capture Video'">
+          <span>Validation Answer</span>
+          <span *ngIf="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent">
+            <span class="badge"
+                  [ngClass]="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+              {{
+                checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue
+                  ? 'Matched'
+                  : 'Not Matched'
+              }}
+            </span>
+          </span>
+        </div>
+
+        <!-- VALIDATION: IMAGE -->
+        <img
+          *ngIf="item.validationType === 'Capture Image'"
+          class="img-logo cursor-pointer"
+          (click)="openImagePopup1(
+            item.runAIAnswer ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,
+            0
+          )"
+          [src]="
+            item.runAIAnswer
+              ? environment.traxRunAiCDN + item.runAIAnswer
+              : environment.TraxAnswerCDN + item.validationAnswer
+          "
+          alt="Validation image"
+        />
+
+        <!-- VALIDATION: VIDEO -->
+        <div *ngIf="item.validationType === 'Capture Video'" class="position-relative w-100 h-450px p-3">
+          <video controls class="w-100 h-100" [src]="environment.TraxAnswerCDN + item.validationAnswer"></video>
+        </div>
+
+        <!-- VALIDATION: TEXT -->
+        <div *ngIf="item.validationType === 'Descriptive Answer'" class="remarksTxt">
+          Validation Answer: {{ item.validationAnswer }}
+        </div>
+      </ng-container>
+
+      <!-- ITEM REFERENCE IMAGES (inside validation) -->
+
+      <!-- REMARKS -->
+      <div *ngIf="question.remarks" class="remarksTxt">
+        Remarks : {{ question.remarks }}
+      </div>
+
+      <!-- AI DATA -->
+      <div *ngIf="question.userAnswer?.[0]?.runAIData?.length">
+        <div class="remarksTxt" *ngFor="let aiDataItem of question.userAnswer?.[0]?.runAIData">
+          <span>
+            @if(aiDataItem?.lableName && aiDataItem?.lableName !== 'detectionStatus') {
+              <b>{{ aiDataItem?.lableName }} :</b>
+              {{ aiDataItem?.value?.toString()?.padStart(2, '0') }}
+            }
+            @else {
+              @for (result of aiDataItem.results; track $index) {
+                @if(result?.lableName !== 'detectionStatus') {
+                  <b>{{ result?.lableName }} :</b>
+                  {{ result?.value?.toString()?.padStart(2, '0') }}
+                }
+              }
+            }
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+                                                    <div class="Partially my-3 px-5"
+                                                        *ngIf="question?.answerType==='multiplechoicesingle'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(item)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div
+                                                                    *ngIf="galleryForm.value.type==='checklist' && question.questionReferenceImage !== null && question.questionReferenceImage !== '' && question.questionReferenceImage !== undefined">
+                                                                    <div class="title-ref my-3">Reference Image</div>
+                                                                    <img class="img-logo cursor-pointer"
+                                                                        (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                        src="{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}"
+                                                                        alt="">
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+
+                                                        <div class="col-md-6" *ngIf="galleryForm.value.type === 'task'">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                <div class="title-ref my-3">Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(item)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                        </div>
+                                                        <div *ngFor="let item of question.userAnswer;let i=index">
+                                                            <span class="mt-2"
+                                                                [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}</span>
+                                                            <div class="row">
+                                                                <div class="col-md-6"
+                                                                    *ngIf="hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')">
+                                                                    <ng-container
+                                                                        *ngIf="galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage">
+                                                                        <div class="title-ref my-3">Reference Image
+                                                                        </div>
+                                                                        <div class="collage-grid"
+                                                                            [ngStyle]="{ 'grid-template-columns': getGridColumns(item.multiReferenceImage.length) }">
+                                                                            <ng-container
+                                                                                *ngFor="let reffItem of item.multiReferenceImage;let i=index">
+                                                                                <div class="collage-tile"
+                                                                                    *ngIf="isValidImage(reffItem)">
+                                                                                    <img class="cursor-pointer"
+                                                                                        (click)="openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)"
+                                                                                        [src]="environment.TraxAnswerCDN + reffItem.imageURL"
+                                                                                        alt="Reference image">
+                                                                                </div>
+                                                                            </ng-container>
+                                                                        </div>
+                                                                    </ng-container>
+                                                                    <ng-template #noMultiImage>
+                                                                        <div
+                                                                            *ngIf="item.referenceImage!==null&&item.referenceImage!==''&&galleryForm.value.type==='checklist'">
+                                                                            <div class="title-ref my-3">Reference Image
+                                                                            </div>
+                                                                            <img class="img-logo cursor-pointer"
+                                                                                (click)="openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)"
+                                                                                src="{{environment.TraxAnswerCDN}}{{item.referenceImage}}"
+                                                                                alt="">
+                                                                        </div>
+                                                                    </ng-template>
+                                                                </div>
+                                                                <div class="col-md-6"
+                                                                    *ngIf="galleryForm.value.type === 'task'">
+                                                                    <div class="title-ref my-3"
+                                                                        *ngIf="hasReferenceImages(question)">Reference
+                                                                        Image</div>
+                                                                    <div class="collage-grid"
+                                                                        *ngIf="hasReferenceImages(question)">
+                                                                        <ng-container
+                                                                            *ngFor="let answer of question.answers">
+                                                                            <ng-container
+                                                                                *ngIf="answer.referenceImage?.length">
+                                                                                <div class="collage-tile"
+                                                                                    *ngFor="let item of answer.referenceImage;let i=index">
+                                                                                    <img class="cursor-pointer"
+                                                                                        (click)="openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)"
+                                                                                        [src]="environment.TraxAnswerCDN + item"
+                                                                                        alt="" />
+                                                                                </div>
+                                                                            </ng-container>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </div>
+
+                                                                <div [ngClass]="['Capture Image','Capture Multiple Image with description'].includes(item.validationType)?'col-md-6':'col-md-12'"
+                                                                    *ngIf="item.validation && (item.validationAnswer!=='' || (item.validationType==='Capture Multiple Image with description' && item.validationImage?.length))">
+                                                                    <div class="title-ref my-3 d-flex justify-content-between"
+                                                                        *ngIf="item.validationType==='Capture Image'||item.validationType==='Capture Video'||item.validationType==='Capture Multiple Image with description'">
+                                                                        <span>Validation Answer </span>
+                                                                        <span
+                                                                            *ngIf="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent && item.validationType==='Capture Image'">
+                                                                            <span class="badge"
+                                                                                [ngClass]="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                                {{
+                                                                                checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue
+                                                                                ? 'Matched' : 'Not Matched' }}
+                                                                            </span>
+                                                                        </span>
+                                                                    </div>
+                                                                    <!-- <img class="img-logo cursor-pointer" (click)="openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)" *ngIf="item.validationType==='Capture Image'" src="{{environment.TraxAnswerCDN}}{{item.validationAnswer}}" alt=""> -->
+                                                                    <span>
+                                                                        <img class="img-logo cursor-pointer"
+                                                                            (click)="openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)"
+                                                                            *ngIf="item.validationType==='Capture Image'"
+                                                                            [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer"
+                                                                            alt="" />
+                                                                    </span>
+                                                                    <div class="collage-grid"
+                                                                        *ngIf="item.validationType==='Capture Multiple Image with description' && item.validationImage?.length"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(item.validationImage.length) }">
+                                                                        <ng-container
+                                                                            *ngFor="let vImg of item.validationImage;let vi=index">
+                                                                            <div class="collage-tile position-relative"
+                                                                                *ngIf="isValidImage(vImg)">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getValidationImageUrls(item), getValidationImageNames(item), vi)"
+                                                                                    [src]="(item.runAIData?.[vi]?.answerImage) ? environment.traxRunAiCDN + item.runAIData[vi].answerImage : environment.TraxAnswerCDN + vImg"
+                                                                                    alt="Validation image" />
+                                                                                <span class="position-absolute top-0 end-0 m-2"
+                                                                                    *ngIf="checkDetectionStatus(item.runAIData?.[vi]?.results).keyPresent">
+                                                                                    <span class="badge"
+                                                                                        [ngClass]="checkDetectionStatus(item.runAIData?.[vi]?.results).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                                        {{ checkDetectionStatus(item.runAIData?.[vi]?.results).keyValue ? 'Matched' : 'Not Matched' }}
+                                                                                    </span>
+                                                                                </span>
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                    <div class="remarksTxt mt-2"
+                                                                        *ngIf="item.validationType==='Capture Multiple Image with description' && item.validationAnswer">
+                                                                        {{item.validationAnswer}}
+                                                                    </div>
+                                                                    <div class="position-relative w-100 h-450px p-3"
+                                                                        *ngIf="item.validationType === 'Capture Video'">
+                                                                        <video controls class="w-100 h-100"
+                                                                            [src]="environment.TraxAnswerCDN + item.validationAnswer"></video>
+                                                                        <!-- <span class="position-absolute top-0 end-0 m-3 cursor-pointer"><svg (click)="downloadVideo(item.answer)" title="Download Video" id="download-icon" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-overlay"><g filter="url(#filter0_d_3822_19479)"><rect x="2" y="1" width="40" height="40" rx="8" fill="white"/><rect x="2.5" y="1.5" width="39" height="39" rx="7.5" stroke="#D0D5DD"/><path d="M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/></g><defs><filter id="filter0_d_3822_19479" x="0" y="0" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3822_19479"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3822_19479" result="shape"/></filter></defs></svg></span> -->
+                                                                    </div>
+                                                                    <span
+                                                                        *ngIf="item.validationType==='Descriptive Answer'"
+                                                                        [ngClass]="item.sopFlag ? 'flagclour':''">
+                                                                        Validation Answer : {{item.validationAnswer}}
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                            <div class="remarksTxt" *ngIf="question.remarks">
+                                                                Remarks : {{question.remarks}}</div>
+                                                            <div *ngIf="question.userAnswer?.[0]?.runAIData?.length">
+                                                                <div class="remarksTxt"
+                                                                    *ngFor="let aiDataItem of question.userAnswer?.[0]?.runAIData">
+                                                                    <span>
+                                                                        @if(aiDataItem?.lableName && aiDataItem?.lableName !== 'detectionStatus') {
+                                                                            <b>{{aiDataItem?.lableName}} :</b>
+                                                                            {{aiDataItem?.value?.toString()?.padStart(2,'0')}}
+                                                                        }
+                                                                        @else {
+                                                                            @for (result of aiDataItem.results; track $index) {
+                                                                                @if(result?.lableName !== 'detectionStatus') {
+                                                                                    <b>{{result?.lableName}} :</b>
+                                                                                    {{result?.value?.toString()?.padStart(2,'0')}}
+                                                                                }
+                                                                            }
+                                                                        }
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="row px-5"
+                                                        *ngIf="question?.answerType==='multiplechoicemultiple'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(item)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div
+                                                                    *ngIf="galleryForm.value.type==='checklist' && question.questionReferenceImage !== null && question.questionReferenceImage !== '' && question.questionReferenceImage !== undefined">
+                                                                    <div class="title-ref my-3">Question Reference Image</div>
+                                                                    <img class="img-logo cursor-pointer"
+                                                                        (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                        src="{{environment.TraxAnswerCDN}}{{question.questionReferenceImage}}"
+                                                                        alt="">
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                            <!-- Question Reference Images -->
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(item)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                        </div>
+                                                        <div class="Partially my-3 px-5"
+                                                            *ngFor="let item of question.userAnswer">
+                                                            <span class="mt-3"
+                                                                [ngClass]="item.sopFlag ? 'flagclour':''">{{item.answer}}</span>
+                                                            <div class="row">
+                                                                <div class="col-md-6"
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item) || (item.referenceImage && item.referenceImage !== '')">
+                                                                    <ng-container
+                                                                        *ngIf="galleryForm.value.type === 'checklist' && hasMultiReferenceImages(item); else noMultiImage">
+                                                                        <div class="title-ref my-3">Reference Image
+                                                                        </div>
+                                                                        <div class="collage-grid"
+                                                                            [ngStyle]="{ 'grid-template-columns': getGridColumns(item.multiReferenceImage.length) }">
+                                                                            <ng-container
+                                                                                *ngFor="let reffItem of item.multiReferenceImage;let i=index">
+                                                                                <div class="collage-tile"
+                                                                                    *ngIf="isValidImage(reffItem)">
+                                                                                    <img class="cursor-pointer"
+                                                                                        (click)="openMultiImagePopup(getMultiRefImageUrls(item.multiReferenceImage),getRefImageNames(item.multiReferenceImage),i)"
+                                                                                        [src]="environment.TraxAnswerCDN + reffItem.imageURL"
+                                                                                        alt="Reference image">
+                                                                                </div>
+                                                                            </ng-container>
+                                                                        </div>
+                                                                    </ng-container>
+                                                                    <ng-template #noMultiImage>
+                                                                        <div
+                                                                            *ngIf="item.referenceImage !== null && item.referenceImage !=='' && galleryForm.value.type==='checklist'">
+                                                                            <div class="title-ref my-3">Reference Image
+                                                                            </div>
+                                                                            <img class="img-logo cursor-pointer"
+                                                                                (click)="openImagePopup1(environment.TraxAnswerCDN + item.referenceImage,0)"
+                                                                                src="{{environment.TraxAnswerCDN}}{{item.referenceImage}}"
+                                                                                alt="">
+                                                                        </div>
+                                                                    </ng-template>
+                                                                </div>
+                                                                <div class="col-md-6"
+                                                                    *ngIf="galleryForm.value.type === 'task'">
+                                                                    <div class="title-ref my-3"
+                                                                        *ngIf="hasReferenceImages(question)"> Reference
+                                                                        Image </div>
+                                                                    <div class="collage-grid"
+                                                                        *ngIf="hasReferenceImages(question)">
+                                                                        <ng-container
+                                                                            *ngFor="let answer of question.answers">
+                                                                            <ng-container
+                                                                                *ngIf="answer.referenceImage?.length">
+                                                                                <div class="collage-tile"
+                                                                                    *ngFor="let item of answer.referenceImage;let i=index">
+                                                                                    <img class="cursor-pointer"
+                                                                                        (click)="openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)"
+                                                                                        [src]="environment.TraxAnswerCDN + item"
+                                                                                        alt="" />
+                                                                                </div>
+                                                                            </ng-container>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </div>
+                                                                <div [ngClass]="item.validationType==='Capture Image'?'col-md-6':'col-md-12'"
+                                                                    *ngIf="item.validation&&item.validationAnswer&&item.validationAnswer!==''">
+                                                                    <div class="title-ref my-3 d-flex justify-content-between"
+                                                                        *ngIf="item.validationType==='Capture Image'||item.validationType==='Capture Video'">
+                                                                        <span>Validation Answer </span>
+                                                                        <span
+                                                                            *ngIf="checkDetectionStatus(item?.runAIData).keyPresent">
+                                                                            <span class="badge"
+                                                                                [ngClass]="checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                                {{
+                                                                                checkDetectionStatus(item?.runAIData).keyValue
+                                                                                ? 'Matched' : 'Not Matched' }}
+                                                                            </span>
+                                                                        </span>
+                                                                    </div>
+                                                                    <!-- <img class="img-logo  cursor-pointer" (click)="openImagePopup1(environment.TraxAnswerCDN + item.validationAnswer,0)" *ngIf="item.validationType==='Capture Image'" src="{{environment.TraxAnswerCDN}}{{item.validationAnswer}}"  alt=""> -->
+                                                                    <span>
+                                                                        <img class="img-logo cursor-pointer"
+                                                                            (click)="openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)"
+                                                                            *ngIf="item.validationType==='Capture Image'"
+                                                                            [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer"
+                                                                            alt="" />
+                                                                    </span>
+                                                                    <div class="position-relative w-100 h-450px p-3"
+                                                                        *ngIf="item.validationType === 'Capture Video'">
+                                                                        <video controls class="w-100 h-100"
+                                                                            [src]="environment.TraxAnswerCDN + item.validationAnswer">
+                                                                        </video>
+                                                                        <!-- <span class="position-absolute top-0 end-0 m-3 cursor-pointer"><svg (click)="downloadVideo(item.answer)" title="Download Video" id="download-icon" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-overlay"><g filter="url(#filter0_d_3822_19479)"><rect x="2" y="1" width="40" height="40" rx="8" fill="white"/><rect x="2.5" y="1.5" width="39" height="39" rx="7.5" stroke="#D0D5DD"/><path d="M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/></g><defs><filter id="filter0_d_3822_19479" x="0" y="0" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3822_19479"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3822_19479" result="shape"/></filter></defs></svg></span> -->
+                                                                    </div>
+                                                                    <span
+                                                                        *ngIf="item.validationType==='Descriptive Answer'"
+                                                                        [ngClass]="item.sopFlag ? 'flagclour':''">
+                                                                        Validation Answer : {{item.validationAnswer}}
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row mt-3">
+                                                                <div class="col-12 text-end">
+                                                                    <button class="btn btn-sm btn-default border-default me-3"
+                                                                        [disabled]="isAnswerRedoDone(question, item)"
+                                                                        *ngIf="checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0"
+                                                                        (click)="addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section,si+'_'+qi,item)">
+                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                                            <path d="M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                                                        </svg>
+                                                                        <span class="ms-2 font-defult-task">Redo</span>
+                                                                    </button>
+                                                        
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks"> Remarks :
+                                                            {{question.remarks}}</div>
+                                                        <div *ngIf="question.userAnswer?.[0]?.runAIData?.length">
+                                                            <div class="remarksTxt"
+                                                                *ngFor="let aiDataItem of question.userAnswer?.[0]?.runAIData">
+                                                                <span>
+                                                                    @if(aiDataItem?.lableName && aiDataItem?.lableName !== 'detectionStatus') {
+                                                                        <b>{{aiDataItem?.lableName}} :</b>
+                                                                        {{aiDataItem?.value?.toString()?.padStart(2,'0')}}
+                                                                    }
+                                                                    @else {
+                                                                        @for (result of aiDataItem.results; track $index) {
+                                                                            @if(result?.lableName !== 'detectionStatus') {
+                                                                                <b>{{result?.lableName}} :</b>
+                                                                                {{result?.value?.toString()?.padStart(2,'0')}}
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="row" *ngIf="question?.answerType==='image'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                            <div class="title-ref my-3"
+                                                                *ngIf="hasReferenceImages(question)">Reference Image
+                                                            </div>
+                                                            <div class="collage-grid"
+                                                                *ngIf="hasReferenceImages(question)">
+                                                                <ng-container *ngFor="let answer of question.answers">
+                                                                    <ng-container *ngIf="answer.referenceImage?.length">
+                                                                        <div class="collage-tile"
+                                                                            *ngFor="let item of answer.referenceImage;let i=index">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item"
+                                                                                alt="" />
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </ng-container>
+                                                            </div>
+                                                        </div>
+
+                                                        <!-- For Checklist Type -->
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3"
+                                                                    *ngIf="hasImageMultiReferenceImages(question)">
+                                                                    Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    *ngIf="hasImageMultiReferenceImages(question)">
+                                                                    <ng-container
+                                                                        *ngFor="let answer of question.answers">
+                                                                        <ng-container
+                                                                            *ngIf="answer.multiReferenceImage?.length">
+                                                                            <div class="collage-tile"
+                                                                                *ngFor="let item of answer.multiReferenceImage;let i=index">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="" />
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div class="col-md-6"
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                                    <div class="title-ref my-3"
+                                                                        *ngIf="hasChecklistReferenceImages(question)">
+                                                                        Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        *ngIf="hasChecklistReferenceImages(question)">
+                                                                        <ng-container
+                                                                            *ngFor="let answer of question.answers;let i=index;">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="answer.referenceImage">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + answer.referenceImage"
+                                                                                    alt="" />
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+
+                                                        <div class="col-md-6 row" *ngIf="hasImageAnswer(question)">
+                                                            <div class="d-flex justify-content-between">
+                                                                <div class="title-ref my-3">Uploaded Image</div>
+                                                                <div class="mt-3"
+                                                                    *ngIf="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent ; else noRunAIData">
+                                                                    <span class="badge"
+                                                                        [ngClass]="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                        {{
+                                                                        checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue
+                                                                        ? 'Matched' : 'Not Matched' }}
+                                                                    </span>
+                                                                </div>
+                                                                <ng-template #noRunAIData>
+                                                                    <div
+                                                                        *ngIf="!checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent">
+                                                                        <div class="mt-3"
+                                                                            *ngIf="question.userAnswer?.[0]?.runAIAnswer ">
+                                                                            <span class="badge"
+                                                                                *ngIf="question.userAnswer?.[0]?.detectionStatus !== undefined"
+                                                                                [ngClass]="question.userAnswer[0]?.detectionStatus ? 'bgSuccess' : 'bgDanger'">
+                                                                                {{question.userAnswer[0].detectionStatus
+                                                                                ? 'Matched' : 'Not Matched'}}
+                                                                            </span>
+                                                                        </div>
+                                                                    </div>
+                                                                </ng-template>
+                                                            </div>
+                                                            <div class="collage-grid"
+                                                                [ngStyle]="{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}">
+                                                                <div class="collage-tile"
+                                                                    *ngFor="let item of question.userAnswer;let i = index">
+                                                                    <img class="cursor-pointer"
+                                                                        (click)="openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)"
+                                                                        [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer"
+                                                                        alt="">
+                                                                    <!-- sanitizeUrl(environment.traxRunAiCDN + item.runAIAnswer) -->
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks">Remarks :
+                                                            {{question.remarks}}</div>
+                                                        <!-- <div class="remarksTxt" *ngIf="question.runAI && question.userAnswer?.[0]?.employeeCount">
+                                                            <b>Employee Count :</b> {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}
+                                                        </div> -->
+                                                        <div
+                                                            *ngIf="question.userAnswer?.[0]?.runAIData?.length; else noRunAIData">
+                                                            <div class="remarksTxt"
+                                                                *ngFor="let aiDataItem of question.userAnswer?.[0]?.runAIData">
+                                                                <span>
+                                                                    @if(aiDataItem?.lableName && aiDataItem?.lableName !== 'detectionStatus') {
+                                                                        <b>{{aiDataItem?.lableName}} :</b>
+                                                                        {{aiDataItem?.value?.toString()?.padStart(2,'0')}}
+                                                                    }
+                                                                    @else {
+                                                                        @for (result of aiDataItem.results; track $index) {
+                                                                            @if(result?.lableName !== 'detectionStatus') {
+                                                                                <b>{{result?.lableName}} :</b>
+                                                                                {{result?.value?.toString()?.padStart(2,'0')}}
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                        <ng-template #noRunAIData>
+                                                            <div
+                                                                *ngIf="!question.userAnswer?.[0]?.runAIData?.length && question.userAnswer?.[0]?.employeeCount">
+                                                                <div class="remarksTxt"
+                                                                    *ngIf="question.userAnswer?.[0]?.employeeCount">
+                                                                    <b>Employee Count :</b>
+                                                                    {{question.userAnswer?.[0]?.employeeCount?.toString()?.padStart(2,'0')}}
+                                                                </div>
+                                                            </div>
+                                                        </ng-template>
+                                                    </div>
+
+                                                    <div class="row px-5"
+                                                        *ngIf="question?.answerType==='descriptiveImage'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                            <div class="title-ref my-3"
+                                                                *ngIf="hasReferenceImages(question)"> Reference Image
+                                                            </div>
+                                                            <div class="collage-grid"
+                                                                *ngIf="hasReferenceImages(question)">
+                                                                <ng-container *ngFor="let answer of question.answers">
+                                                                    <ng-container *ngIf="answer.referenceImage?.length">
+                                                                        <div class="collage-tile"
+                                                                            *ngFor="let item of answer.referenceImage;let i=index">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item"
+                                                                                alt="" />
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </ng-container>
+                                                            </div>
+                                                        </div>
+
+                                                        <!-- For Checklist Type -->
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question))">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3"
+                                                                    *ngIf="hasImageMultiReferenceImages(question)">
+                                                                    Reference Image </div>
+                                                                <div class="collage-grid"
+                                                                    *ngIf="hasImageMultiReferenceImages(question)">
+                                                                    <ng-container
+                                                                        *ngFor="let answer of question.answers">
+                                                                        <ng-container
+                                                                            *ngIf="answer.multiReferenceImage?.length">
+                                                                            <div class="collage-tile"
+                                                                                *ngFor="let item of answer.multiReferenceImage;let i=index">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="" />
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div class="col-md-6"
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                                    <div class="title-ref my-3"
+                                                                        *ngIf="hasChecklistReferenceImages(question)">
+                                                                        Reference Image </div>
+                                                                    <div class="collage-grid"
+                                                                        *ngIf="hasChecklistReferenceImages(question)">
+                                                                        <ng-container
+                                                                            *ngFor="let answer of question.answers;let i=index;">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="answer.referenceImage">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + answer.referenceImage"
+                                                                                    alt="" />
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+                                                        <div
+                                                            [ngClass]="hasReferenceImages(question) || hasChecklistReferenceImages(question) ? 'col-md-6' : 'col-md-6'">
+                                                            <div class="row">
+                                                                <div class="d-flex justify-content-between">
+                                                                    <div class="title-ref my-3">Uploaded Image</div>
+                                                                    <div class="mt-3"
+                                                                        *ngIf="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent">
+                                                                        <span class="badge"
+                                                                            [ngClass]="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                            {{
+                                                                            checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue
+                                                                            ? 'Matched' : 'Not Matched' }}
+                                                                        </span>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}">
+                                                                    <div *ngFor="let item of question.userAnswer;let i = index"
+                                                                        class="collage-tile">
+                                                                        <img class="cursor-pointer"
+                                                                            (click)="openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)"
+                                                                            [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer"
+                                                                            alt="">
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks">Remarks :
+                                                            {{question.remarks}}</div>
+                                                        <div *ngIf="question.userAnswer?.[0]?.runAIData?.length">
+                                                            <div class="remarksTxt"
+                                                                *ngFor="let aiDataItem of question.userAnswer?.[0]?.runAIData">
+                                                                <span>
+                                                                    @if(aiDataItem?.lableName && aiDataItem?.lableName !== 'detectionStatus') {
+                                                                        <b>{{aiDataItem?.lableName}} :</b>
+                                                                        {{aiDataItem?.value?.toString()?.padStart(2,'0')}}
+                                                                    }
+                                                                    @else {
+                                                                        @for (result of aiDataItem.results; track $index) {
+                                                                            @if(result?.lableName !== 'detectionStatus') {
+                                                                                <b>{{result?.lableName}} :</b>
+                                                                                {{result?.value?.toString()?.padStart(2,'0')}}
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="row px-5"
+                                                        *ngIf="question?.answerType==='multipleImage'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'task' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                            <div class="title-ref my-3"
+                                                                *ngIf="hasReferenceImages(question)">Reference Image
+                                                            </div>
+                                                            <div class="collage-grid"
+                                                                *ngIf="hasReferenceImages(question)">
+                                                                <ng-container *ngFor="let answer of question.answers">
+                                                                    <ng-container *ngIf="answer.referenceImage?.length">
+                                                                        <div class="collage-tile"
+                                                                            *ngFor="let item of answer.referenceImage;let i=index">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup(getRefImageUrls(answer.referenceImage),getRefImageNames(answer.referenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item"
+                                                                                alt="" />
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </ng-container>
+                                                            </div>
+                                                        </div>
+
+                                                        <!-- For Checklist Type -->
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'checklist' && (hasImageMultiReferenceImages(question) || hasReferenceImages(question) || hasChecklistReferenceImages(question))">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasImageMultiReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3"
+                                                                    *ngIf="hasImageMultiReferenceImages(question)">
+                                                                    Reference Image </div>
+                                                                <div class="collage-grid"
+                                                                    *ngIf="hasImageMultiReferenceImages(question)">
+                                                                    <ng-container
+                                                                        *ngFor="let answer of question.answers">
+                                                                        <ng-container
+                                                                            *ngIf="answer.multiReferenceImage?.length">
+                                                                            <div class="collage-tile"
+                                                                                *ngFor="let item of answer.multiReferenceImage;let i=index">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openMultiImagePopup(getMultiRefImageUrls(answer.multiReferenceImage),getRefImageNames(answer.multiReferenceImage),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                    alt="" />
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div *ngIf="galleryForm.value.type === 'checklist' && (hasReferenceImages(question) || hasChecklistReferenceImages(question))"
+                                                                    class="col-md-6">
+                                                                    <div class="title-ref my-3"
+                                                                        *ngIf="hasChecklistReferenceImages(question)">
+                                                                        Reference Image </div>
+                                                                    <div class="collage-grid"
+                                                                        *ngIf="hasChecklistReferenceImages(question)">
+                                                                        <ng-container
+                                                                            *ngFor="let answer of question.answers;let i=index;">
+                                                                            <div class="collage-tile"
+                                                                                *ngIf="answer.referenceImage">
+                                                                                <img class="cursor-pointer"
+                                                                                    (click)="openImagePopup(getRefchecklistImageUrls(question.answers),getRefchecklistImageNames(question.answers),i)"
+                                                                                    [src]="environment.TraxAnswerCDN + answer.referenceImage"
+                                                                                    alt="" />
+                                                                            </div>
+                                                                        </ng-container>
+                                                                    </div>
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+
+                                                        <div class="col-md-6" *ngIf="hasImageAnswer(question)">
+                                                            <!-- <div class="title-ref my-3">Uploaded Image</div> -->
+                                                            <!-- <div class="collage-grid" [ngStyle]="{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}">
+                                                                <div *ngFor="let item of question.userAnswer;let i=index" class="collage-tile">
+                                                                    <img class="cursor-pointer" (click)="openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)" src="{{environment.TraxAnswerCDN}}{{item.answer}}" alt="">
+                                                                </div>
+                                                            </div> -->
+                                                            <div class="d-flex justify-content-between">
+                                                                <div class="title-ref my-3">Uploaded Image</div>
+                                                                <div class="mt-3"
+                                                                    *ngIf="multiImageCheckDetectionStatus(question.userAnswer).keyPresent">
+                                                                    <span class="badge"
+                                                                        [ngClass]="multiImageCheckDetectionStatus(question.userAnswer).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                        {{
+                                                                        multiImageCheckDetectionStatus(question.userAnswer).keyValue
+                                                                        ? 'Matched' : 'Not Matched' }}
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                            <div class="collage-grid"
+                                                                [ngStyle]="{'grid-template-columns': getGridColumns(question.userAnswer.length), 'grid-auto-rows': getGridRowHeight(question.userAnswer.length)}">
+                                                                <div *ngFor="let item of question.userAnswer;let i=index"
+                                                                    class="collage-tile">
+                                                                    <img class="cursor-pointer"
+                                                                        (click)="openImagePopup(getImageUrls(question.userAnswer),getImageNames(question.userAnswer),i)"
+                                                                        [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer"
+                                                                        alt="">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks">Remarks :
+                                                            {{question.remarks}}</div>
+                                                        <div *ngIf="question.userAnswer?.[0]?.runAIData?.length">
+                                                            <div class="remarksTxt"
+                                                                *ngFor="let aiDataItem of question.userAnswer?.[0]?.runAIData">
+                                                                <span>
+                                                                    @if(aiDataItem?.lableName && aiDataItem?.lableName !== 'detectionStatus') {
+                                                                        <b>{{aiDataItem?.lableName}} :</b>
+                                                                        {{aiDataItem?.value?.toString()?.padStart(2,'0')}}
+                                                                    }
+                                                                    @else {
+                                                                        @for (result of aiDataItem.results; track $index) {
+                                                                            @if(result?.lableName !== 'detectionStatus') {
+                                                                                <b>{{result?.lableName}} :</b>
+                                                                                {{result?.value?.toString()?.padStart(2,'0')}}
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="row px-5" *ngIf="question?.answerType==='video'">
+                                                        <!-- Task: Multiple reference images (Array) -->
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                            <!-- Question Reference Images -->
+                                                            <div class="title-ref my-3">Reference Image </div>
+                                                            <div class="collage-grid"
+                                                                [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                <ng-container
+                                                                    *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                    <div class="collage-tile"
+                                                                        *ngIf="isValidImage(item)">
+                                                                        <img class="cursor-pointer"
+                                                                            (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                            [src]="environment.TraxAnswerCDN + item"
+                                                                            alt="Reference image">
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+                                                        </div>
+
+                                                        <!-- Checklist: Single reference image (String) -->
+                                                        <div class="col-md-6"
+                                                            *ngIf="hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage  && question.questionReferenceImage !== '')">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(item)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''">
+                                                                    <div class="title-ref my-3">Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(1) }">
+                                                                        <div class="collage-tile">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                                [src]="environment.TraxAnswerCDN + question.questionReferenceImage"
+                                                                                alt="">
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+
+                                                        <div class="col-md-12" *ngFor="let item of question.userAnswer">
+                                                            <div class="title-ref my-3">Uploaded Video</div>
+                                                            <!-- <div class="position-relative w-100 h-450px p-3">
+                                                                <video controls class="w-100 h-100"
+                                                                    src="{{environment.TraxAnswerCDN}}{{item.answer}}">
+                                                                </video> -->
+                                                                <div class="video-wrapper" [ngClass]="{ 'fullscreen-active': isVideoFullscreen(videoRef) }">
+                                                                <video #videoRef controls class="w-100 h-100"
+                                                                    src="{{environment.TraxAnswerCDN}}{{item.answer}}">
+                                                                </video>
+                                                                <!-- <span class="position-absolute top-0 end-0 m-3 cursor-pointer"><svg (click)="downloadVideo(item.answer)" title="Download Video" id="download-icon" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-overlay"><g filter="url(#filter0_d_3822_19479)"><rect x="2" y="1" width="40" height="40" rx="8" fill="white"/><rect x="2.5" y="1.5" width="39" height="39" rx="7.5" stroke="#D0D5DD"/><path d="M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/></g><defs><filter id="filter0_d_3822_19479" x="0" y="0" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3822_19479"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3822_19479" result="shape"/></filter></defs></svg></span> -->
+                                                            </div>
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks">Remarks :
+                                                            {{question.remarks}}</div>
+                                                    </div>
+
+                                                    <div class="row px-5" *ngIf="question?.answerType==='image/video'">
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'task' && hasQuestionReferenceImages(question)">
+                                                            <div class="title-ref my-3">Reference Image</div>
+                                                            <div class="collage-grid"
+                                                                [ngStyle]="{ 'grid-template-columns': getGridColumns(question.questionReferenceImage.length) }">
+                                                                <ng-container
+                                                                    *ngFor="let item of question.questionReferenceImage;let i=index">
+                                                                    <div class="collage-tile"
+                                                                        *ngIf="isValidImage(item)">
+                                                                        <img class="cursor-pointer"
+                                                                            (click)="openImagePopup(getRefImageUrls(question.questionReferenceImage),getRefImageNames(question.questionReferenceImage),i)"
+                                                                            [src]="environment.TraxAnswerCDN + item"
+                                                                            alt="Reference image">
+                                                                    </div>
+                                                                </ng-container>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-6"
+                                                            *ngIf="galleryForm.value.type === 'checklist' && (hasMultiQuestionReferenceImages(question) || (question.questionReferenceImage && question.questionReferenceImage !== ''))">
+                                                            <ng-container
+                                                                *ngIf="galleryForm.value.type === 'checklist' && hasMultiQuestionReferenceImages(question); else noMultiImage">
+                                                                <div class="title-ref my-3">Question Reference Image</div>
+                                                                <div class="collage-grid"
+                                                                    [ngStyle]="{ 'grid-template-columns': getGridColumns(question.multiQuestionReferenceImage.length) }">
+                                                                    <ng-container
+                                                                        *ngFor="let item of question.multiQuestionReferenceImage;let i=index">
+                                                                        <div class="collage-tile"
+                                                                            *ngIf="isValidImage(item)">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openMultiImagePopup(getMultiRefImageUrls(question.multiQuestionReferenceImage),getRefImageNames(question.multiQuestionReferenceImage),i)"
+                                                                                [src]="environment.TraxAnswerCDN + item.imageURL"
+                                                                                alt="Reference image">
+                                                                        </div>
+                                                                    </ng-container>
+                                                                </div>
+                                                            </ng-container>
+                                                            <ng-template #noMultiImage>
+                                                                <div
+                                                                    *ngIf="galleryForm.value.type === 'checklist' && question.questionReferenceImage && question.questionReferenceImage !== ''">
+                                                                    <div class="title-ref my-3">Reference Image</div>
+                                                                    <div class="collage-grid"
+                                                                        [ngStyle]="{ 'grid-template-columns': getGridColumns(1) }">
+                                                                        <div class="collage-tile">
+                                                                            <img class="cursor-pointer"
+                                                                                (click)="openImagePopup1(environment.TraxAnswerCDN + question.questionReferenceImage,0)"
+                                                                                [src]="environment.TraxAnswerCDN + question.questionReferenceImage"
+                                                                                alt="">
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </ng-template>
+                                                        </div>
+                                                        <div class="col-md-6 row" *ngIf="getImageAnswers(question).length">
+                                                            <div class="d-flex justify-content-between">
+                                                                <div class="title-ref my-3">Uploaded Image</div>
+                                                            </div>
+                                                            <div class="collage-grid"
+                                                                [ngStyle]="{'grid-template-columns': getGridColumns(getImageAnswers(question).length), 'grid-auto-rows': getGridRowHeight(getImageAnswers(question).length)}">
+                                                                <div class="collage-tile position-relative"
+                                                                    *ngFor="let item of getImageAnswers(question); let i = index">
+                                                                    <span class="position-absolute top-0 end-0 m-2"
+                                                                        *ngIf="checkDetectionStatus(item?.runAIData).keyPresent ; else noRunAIDataImgVideo">
+                                                                        <span class="badge"
+                                                                            [ngClass]="checkDetectionStatus(item?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                            {{ checkDetectionStatus(item?.runAIData).keyValue ? 'Matched' : 'Not Matched' }}
+                                                                        </span>
+                                                                    </span>
+                                                                    <ng-template #noRunAIDataImgVideo>
+                                                                        <span class="position-absolute top-0 end-0 m-2"
+                                                                            *ngIf="!checkDetectionStatus(item?.runAIData).keyPresent && question.userAnswer?.[0]?.runAIAnswer && question.userAnswer?.[0]?.detectionStatus !== undefined">
+                                                                            <span class="badge"
+                                                                                [ngClass]="question.userAnswer[0]?.detectionStatus ? 'bgSuccess' : 'bgDanger'">
+                                                                                {{ question.userAnswer[0].detectionStatus ? 'Matched' : 'Not Matched' }}
+                                                                            </span>
+                                                                        </span>
+                                                                    </ng-template>
+                                                                    <img class="cursor-pointer"
+                                                                        (click)="openImagePopup(getImageUrls(getImageAnswers(question)), getImageNames(getImageAnswers(question)), i)"
+                                                                        [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer"
+                                                                        alt="">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-12" *ngFor="let item of getVideoAnswers(question)">
+                                                            <div class="title-ref my-3">Uploaded Video</div>
+                                                            <div class="video-wrapper" [ngClass]="{ 'fullscreen-active': isVideoFullscreen(videoRef) }">
+                                                                <video #videoRef controls class="w-100 h-100"
+                                                                    src="{{ (item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.answer }}">
+                                                                </video>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-12" *ngFor="let item of question.userAnswer">
+                                                            <div [ngClass]="item.validationType==='Capture Image'?'col-md-6':'col-md-12'"
+                                                                *ngIf="item.validation && item.validationAnswer && ['Capture Video','Descriptive Answer','Capture Image'].includes(item.validationType)">
+                                                                <div class="title-ref my-3 d-flex justify-content-between"
+                                                                    *ngIf="item.validationType==='Capture Image'||item.validationType==='Capture Video'">
+                                                                    <span>Validation Answer</span>
+                                                                    <span *ngIf="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyPresent">
+                                                                        <span class="badge"
+                                                                            [ngClass]="checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'bgSuccess' : 'bgDanger'">
+                                                                            {{ checkDetectionStatus(question.userAnswer?.[0]?.runAIData).keyValue ? 'Matched' : 'Not Matched' }}
+                                                                        </span>
+                                                                    </span>
+                                                                </div>
+                                                                <img class="img-logo cursor-pointer"
+                                                                    (click)="openImagePopup1((item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer,0)"
+                                                                    *ngIf="item.validationType==='Capture Image'"
+                                                                    [src]="(item.runAIAnswer) ? environment.traxRunAiCDN + item.runAIAnswer : environment.TraxAnswerCDN + item.validationAnswer"
+                                                                    alt="">
+                                                                <div class="position-relative w-100 h-450px p-3"
+                                                                    *ngIf="item.validationType==='Capture Video'">
+                                                                    <video controls class="w-100 h-100"
+                                                                        [src]="environment.TraxAnswerCDN + item.validationAnswer"></video>
+                                                                </div>
+                                                                <span *ngIf="item.validationType==='Descriptive Answer'"
+                                                                    [ngClass]="item.sopFlag ? 'flagclour':''">
+                                                                    Validation Answer : {{item.validationAnswer}}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="remarksTxt" *ngIf="question.remarks">Remarks :
+                                                            {{question.remarks}}</div>
+                                                    </div>
+                                                </ul>
+
+                                                <div class="modal fade my-0 py-0" id="imageModal" tabindex="-1"
+                                                    role="dialog" style="overflow:hidden">
+                                                    <div class="modal-dialog modal-dialog-centered modal-lg"
+                                                        role="document">
+                                                        <div class="modal-content ">
+                                                            <div
+                                                                class="modal-body d-flex align-items-center justify-content-center position-relative">
+                                                                <!-- Prev Button -->
+                                                                <button *ngIf="imageList.length > 1"
+                                                                    class="btn btn-outline-primary position-absolute start-0 top-50 translate-middle-y ms-3"
+                                                                    (click)="navigateImage('prev')"
+                                                                    [disabled]="currentImageIndex === 0">
+                                                                    ‹
+                                                                </button>
+
+                                                                <!-- Image -->
+                                                                <img [src]="selectedImageUrl"
+                                                                    style="max-height: 85vh; max-width: 100%; object-fit: contain;"
+                                                                    class="img-fluid w-100   mx-1" />
+
+                                                                <!-- Next Button -->
+                                                                <button *ngIf="imageList.length > 1"
+                                                                    class="btn btn-outline-primary position-absolute end-0 top-50 translate-middle-y me-3"
+                                                                    (click)="navigateImage('next')"
+                                                                    [disabled]="currentImageIndex === imageList.length - 1">
+                                                                    ›
+                                                                </button>
+                                                            </div>
+
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="modal fade" id="imageModal1" tabindex="-1" role="dialog">
+                                                    <div class="modal-dialog modal-dialog-centered modal-lg"
+                                                        role="document">
+                                                        <div class="modal-content ">
+                                                            <div
+                                                                class="modal-body d-flex align-items-center justify-content-center position-relative">
+                                                                <!-- Image -->
+                                                                <img [src]="selectedImageUrl"
+                                                                    style="max-height: 95vh; max-width: 100%; object-fit: contain;"
+                                                                    class="img-fluid w-100   mx-1" />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div class="row">
+                                                    <div class="col-md-6 text-start">
+                                                        <!-- <button class="btn btn-secondary rounded-pill m-0 p-2" *ngIf="question?.linkType&&question?.linkquestionenabled">Linked to Question {{question.parentQuestion}}</button>                                           -->
+                                                    </div>
+                                                    <div class="col-md-6 text-end">
+                                                        <button class="btn btn-sm btn-default border-default me-3"
+                                                            [disabled]="question.redo"
+                                                            *ngIf="checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_checklist_isEdit&&this.galleryForm.value.type ==='checklist'&&selectedStores.length===0&&selectedUsers.length===0"
+                                                            (click)="addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section,si+'_'+qi)">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                height="20" viewBox="0 0 20 20" fill="none">
+                                                                <g clip-path="url(#clip0_6004_11734)">
+                                                                    <path
+                                                                        d="M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5"
+                                                                        stroke="#344054" stroke-width="2"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round" />
+                                                                </g>
+                                                                <defs>
+                                                                    <clipPath id="clip0_6004_11734">
+                                                                        <rect width="20" height="20" fill="white" />
+                                                                    </clipPath>
+                                                                </defs>
+                                                            </svg>
+                                                            <span class="ms-2 font-defult-task">Redo</span>
+                                                        </button>
+
+                                                        <button class="btn btn-sm btn-default border-default me-3"
+                                                            [disabled]="question.redo"
+                                                            *ngIf="checktodayDate(checklist?.checklistInfo?.date)&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&&(gs.userAccess | async)?.TangoTrax_Task_isEdit&&this.galleryForm.value.type==='task'&&selectedStores.length===0&&selectedUsers.length===0"
+                                                            (click)="addTask('redo',question,checklist?.checklistInfo,checklist?.storeProfile,section,si+'_'+qi)">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                height="20" viewBox="0 0 20 20" fill="none">
+                                                                <g clip-path="url(#clip0_6004_11734)">
+                                                                    <path
+                                                                        d="M19.1693 3.33331V8.33332M19.1693 8.33332H14.1693M19.1693 8.33332L15.3026 4.69998C14.407 3.80391 13.299 3.14932 12.0819 2.79729C10.8649 2.44527 9.57853 2.40727 8.34284 2.68686C7.10716 2.96645 5.96244 3.55451 5.01549 4.39616C4.06855 5.23782 3.35024 6.30564 2.9276 7.49998M0.835938 16.6666V11.6666M0.835938 11.6666H5.83594M0.835938 11.6666L4.7026 15.3C5.59823 16.1961 6.70625 16.8506 7.92328 17.2027C9.14031 17.5547 10.4267 17.5927 11.6624 17.3131C12.898 17.0335 14.0428 16.4455 14.9897 15.6038C15.9367 14.7621 16.655 13.6943 17.0776 12.5"
+                                                                        stroke="#344054" stroke-width="2"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round" />
+                                                                </g>
+                                                                <defs>
+                                                                    <clipPath id="clip0_6004_11734">
+                                                                        <rect width="20" height="20" fill="white" />
+                                                                    </clipPath>
+                                                                </defs>
+                                                            </svg>
+                                                            <span class="ms-2 font-defult-task">Redo</span>
+                                                        </button>
+
+                                                        <button class="btn btn-sm  border-val1"
+                                                            *ngIf="!question.task&&!question.taskId&&this.galleryForm.value.type==='checklist'&&(gs.userAccess | async)?.userType !== 'tango'&&!checklist?.checklistInfo?.approvalStatus&& (gs.userAccess | async)?.TangoTrax_Task_isEdit&&selectedStores.length===0&&selectedUsers.length===0"
+                                                            (click)="addTask('createtask',question,checklist?.checklistInfo,checklist?.storeProfile,section,si+'_'+qi)">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                                height="20" viewBox="0 0 20 20" fill="none">
+                                                                <path
+                                                                    d="M11.6693 1.66675H5.0026C4.56058 1.66675 4.13665 1.84234 3.82409 2.1549C3.51153 2.46746 3.33594 2.89139 3.33594 3.33341V16.6667C3.33594 17.1088 3.51153 17.5327 3.82409 17.8453C4.13665 18.1578 4.56058 18.3334 5.0026 18.3334H15.0026C15.4446 18.3334 15.8686 18.1578 16.1811 17.8453C16.4937 17.5327 16.6693 17.1088 16.6693 16.6667V6.66675M11.6693 1.66675L16.6693 6.66675M11.6693 1.66675V6.66675H16.6693M10.0026 15.0001V10.0001M7.5026 12.5001H12.5026"
+                                                                    stroke="#009BF3" stroke-width="1.67"
+                                                                    stroke-linecap="round" stroke-linejoin="round" />
+                                                            </svg>
+                                                            <span class="ms-2 font-task">Create Task</span>
+                                                        </button>
+                                                        <button
+                                                            *ngIf="question.task&&question.taskId &&this.galleryForm.value.type!=='task'"
+                                                            class="btn btn-sm border-val1"
+                                                            (click)="taskredirect(question,checklist?.storeProfile,checklist?.checklistInfo)">
+                                                            <span class="font-task">View Task</span>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="px-10 my-5" *ngIf="imageChecklist.includes(select)">
+                                <div class="text-center" *ngIf="clientData.logo&&clientData.logo!==''">
+                                    <img class="mt-5 mb-3 text-center iconsize" src="{{clientData.logo}}">
+                                </div>
+                                <!-- <div> <h2>Checklist Name : {{this.checklistName}}</h2> </div> -->
+                                <div *ngIf="!['outsidebusinesshoursqueuetracking', 'halfshutter','tvcompliance','cameratampering','staffgrouping','employeeCount'].includes(galleryForm.value.sourceCheckList_id)">
+                                    @if(['Store Hygiene Monitoring','Mobile usage detection','Uniform detection','staffgrouping','employeeCount'].includes(this.checklistName)) {
+                                        <div class="row">
+                                            <div class="col-md-3" >
+                                                <h3 class="uni-title">Checklist Name:</h3>
+                                            </div>
+                                            <div class="col-md-9">
+                                                <p class="uni-subtitle">{{this.checklistName}} </p>
+                                            </div>
+                                        </div>
+                                    }
+                                    <div class=" my-3 mt-5" *ngFor="let item  of mobileusageData">
+                                        <div class="row px-10 mt-5">
+                                            <div class="col-md-3" *ngIf="!['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)">
+                                                <h3 class="uni-title">Checklist Name</h3>
+                                            </div>
+                                            <div class="col-md-9" *ngIf="!['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)">
+                                                <p class="uni-subtitle">: {{this.checklistName}} </p>
+                                            </div>
+                                            <div class="col-md-3" *ngIf="!['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)">
+                                                <h3 class="uni-title">Store Name</h3>
+                                            </div>
+                                            <div class="col-md-9" *ngIf="!['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)">
+                                                <p class="uni-subtitle">: {{item.storeName}}</p>
+                                            </div>
+                                            <div class="col-md-3" *ngIf="item.down_time && !['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)" >
+                                                <h3 class="uni-title">Average Downtime</h3>
+                                            </div>
+                                            <div class="col-md-9" *ngIf="item.down_time && !['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)">
+                                                <p class="uni-subtitle">: {{item.down_time}} Mins</p>
+                                            </div>
+                                        </div>
+                                        <ul class="row w-100">
+                                            <!-- <li class="qa-heading"> {{item.storeName}} </li> -->
+                                            <div class="row">
+                                                <div class="row qa-bodrer mb-4" *ngFor="let detection of item?.imageUrl">
+                                                    <div class="my-2" [ngClass]="detection?.detectionStatus_afterTaskSubmission ? 'col-md-6' : 'col-md-12'">
+                                                        @if(['Mobile usage detection','Uniform detection'].includes(this.checklistName)) {
+                                                            <img class="w-100 h-500px rounded-top cursor-pointer"
+                                                                src="{{environment.TraxAIchecklistCDN}}{{detection.imageurl}}"
+                                                                alt="" *ngIf="detection?.imageurl" (click)="openImagePreview(environment.TraxAIchecklistCDN + detection.imageurl, this.checklistName)">
+                                                        }@else if(['Store Hygiene Monitoring'].includes(this.checklistName)) {
+                                                            <div *ngIf="detection?.detectionStatus_afterTaskSubmission" class="mb-3 uni-title">
+                                                                Breached Image
+                                                            </div>
+                                                            <div>
+                                                                @if(detection.imageurl) {
+                                                                    <img (click)="openImagePreview(environment.TraxAIchecklistCDN + detection.imageurl, this.checklistName)"
+                                                                       src="{{environment.TraxAIchecklistCDN}}{{detection.imageurl}}"
+                                                                       alt="" [ngClass]="detection?.detectionStatus_afterTaskSubmission ? 'w-100 heightImage rounded' : 'rounded-top w-100 h-500px'" *ngIf="detection.imageurl" />
+                                                                }@else {
+                                                                    <img (click)="openImagePreview(environment.TraxAIchecklistCDN + detection, this.checklistName)"
+                                                                       src="{{environment.TraxAIchecklistCDN}}{{detection}}"
+                                                                       alt="" [ngClass]="detection?.detectionStatus_afterTaskSubmission ? 'w-100 heightImage rounded' : 'rounded-top w-100 h-500px'" *ngIf="!['File Not Received','Files Not Received'].includes(detection?.detectionStatus)" />
+                                                                }
+                                                            </div>
+                                                        } @else{
+                                                            <img (click)="openImagePreview(environment.TraxAIchecklistCDN + detection, this.checklistName)" class="w-100 h-500px rounded-top"
+                                                                src="{{environment.TraxAIchecklistCDN}}{{detection}}"
+                                                                alt="" >
+                                                        }
+                                                        <!-- <div class="text-center mt-3"> {{this.checklistName}}</div> -->
+                                                    </div>
+                                                    <div class="my-2 col-md-6" *ngIf="detection?.detectionStatus_afterTaskSubmission">
+                                                        <div class="d-flex justify-content-between mb-3" >
+                                                            <div class="uni-title">
+                                                                Detection after Task Submission
+                                                            </div>
+                                                            <div>
+                                                                <span class="ms-3 badge badge-light-success"
+                                                                    *ngIf="detection?.detectionStatus_afterTaskSubmission === 'Clean'">Clean</span>
+                                                                <span class="ms-3 mt-1 badge badge-light-danger"
+                                                                    *ngIf="detection?.detectionStatus_afterTaskSubmission !== 'Clean'">{{detection.detectionStatus_afterTaskSubmission}}</span>
+                                                            </div>
+                                                        </div>
+                                                        <div >
+                                                            <img class="w-100 heightImage rounded"
+                                                               src="{{environment.TraxAIchecklistCDN}}{{detection.new_image_url}}" alt="" *ngIf="detection.new_image_url">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="389" height="218" viewBox="0 0 389 218" fill="none" *ngIf="!detection.new_image_url">
+                                                                <rect width="389" height="218" rx="8" fill="black"/>
+                                                            </svg>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row" *ngIf="['Store Hygiene Monitoring','Mobile usage detection','Uniform detection'].includes(this.checklistName)">
+                                                        <div class="col-md-3" *ngIf="item.storeName">
+                                                            <h3 class="uni-title">Store Name</h3>
+                                                        </div>
+                                                        <div class="col-md-9" *ngIf="item.storeName">
+                                                            <p class="uni-subtitle">: <span class="ms-3">{{item.storeName}}</span></p>
+                                                        </div>
+
+                                                          <div class="col-md-3" *ngIf="detection.detectionTime">
+                                                            <h3 class="uni-title">Detected At</h3>
+                                                        </div>
+                                                        <div class="col-md-3" *ngIf="detection.detectionTime">
+                                                            <p class="uni-subtitle text-nowrap">: <span class="ms-3 badge badge-light-primary">{{detection.detectionTime}}</span></p>
+                                                        </div>
+
+                                                        <div class="col-md-3" *ngIf="detection?.detectionType">
+                                                            <h3 class="uni-title">Detection Type</h3>
+                                                        </div>
+                                                        <div class="col-md-3" *ngIf="detection?.detectionType">
+                                                            <p class="uni-subtitle text-nowrap"> : <span class="ms-3 badge badge-light-warning">{{detection.detectionType}}</span></p>
+                                                        </div>
+
+                                                        <div class="col-md-3" *ngIf="detection?.detectionStatus">
+                                                            <h3 class="uni-title">Detection Status</h3>
+                                                        </div>
+    
+                                                        <div [class]="(detection?.downtime != null && detection?.downtime != undefined) ? ['File Not Received','Files Not Received'].includes(detection?.detectionStatus) ? 'col-md-5' : 'col-md-3' : 'col-md-9'"
+                                                            *ngIf="detection?.detectionStatus">
+                                                            <p class="uni-subtitle"> :
+                                                                <!-- <span class="ms-3 badge badge-light-danger" *ngIf="detection?.Flag">Breached</span>
+                                                                <span class="ms-3 badge badge-light-success" *ngIf="!detection?.Flag">Not Breached</span> -->
+                                                                <span class="ms-3 badge badge-light-danger"
+                                                                    *ngIf="detection?.detectionStatus === 'Clutter'">Clutter</span>
+                                                                <span class="ms-3 badge badge-light-danger"
+                                                                    *ngIf="detection?.detectionStatus === 'Breached'">Breached</span>
+                                                                <span class="ms-3 badge badge-light-success"
+                                                                    *ngIf="detection?.detectionStatus === 'Not Breached'">Not
+                                                                    Breached</span>
+                                                                <span class="ms-3 badge badge-light-success"
+                                                                    *ngIf="detection?.detectionStatus === 'Clean'">Clean</span>
+                                                                <span class="ms-3 badge badge-light-danger"
+                                                                    *ngIf="detection?.detectionStatus === 'Offline' || ['File Not Received','Files Not Received'].includes(detection?.detectionStatus)">Offline – No data Received from store</span>
+                                                            </p>
+                                                        </div>
+                                                   
+                                                        <div [class]="['File Not Received','Files Not Received'].includes(detection?.detectionStatus) ? 'col-md-2' : 'col-md-3'" *ngIf="detection?.downtime != null && detection?.downtime != undefined">
+                                                            <h3 class="uni-title">Downtime</h3>
+                                                        </div>
+                                                        <div [class]="['File Not Received','Files Not Received'].includes(detection?.detectionStatus) ? 'col-md-2' : 'col-md-3'" *ngIf="detection?.downtime != null && detection?.downtime != undefined">
+                                                            <p class="uni-subtitle">: <span class="ms-3">{{detection.downtime}} Mins </span></p>
+                                                        </div>
+                                                      
+                                                        <div class="col-md-6" *ngIf="detection.detectionTime_afterTaskSubmission">
+                                                            <h3 class="uni-title">Detection Time (After Task Submission)</h3>
+                                                        </div>
+                                                        <div class="col-md-6" *ngIf="detection.detectionTime_afterTaskSubmission">
+                                                            <p class="uni-subtitle">: <span class="ms-3 badge badge-light-primary">{{detection.detectionTime_afterTaskSubmission}}</span></p>
+                                                        </div>
+                                                        <div class="col-md-3" *ngIf="detection.detectionOn">
+                                                            <h3 class="uni-title">Detection On</h3>
+                                                        </div>
+                                                        <div class="col-md-9" *ngIf="detection.detectionOn">
+                                                            <p class="uni-subtitle">:<span class="ms-3">{{detection.detectionOn}}</span></p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-12 my-2" *ngFor="let detection of item?.imagesData">
+                                                    <div class="card-toolbar"
+                                                        *ngIf="galleryForm.value.sourceCheckList_id==='inventorycount'">
+                                                        <div class="row">
+                                                            <div class="col-md-8">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.date_timestamp">Detection Time :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.date_timestamp}} </span>
+                                                                </span>
+                                                            </div>
+                                                            <div class="col-md-4 text-end">
+                                                                <span class="ms-3" *ngIf="detection?.car_count">No of
+                                                                    cars :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.car_count}}</span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="card-toolbar"
+                                                        *ngIf="galleryForm.value.sourceCheckList_id==='numberplateinfo'">
+                                                        <div class="row">
+                                                            <div class="col-md-8">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.car_license_id">Number Plate :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.car_license_id}}</span>
+                                                                </span>
+                                                            </div>
+                                                            <div class="col-md-4 text-end">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.date_timestamp">Entry Time :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.date_timestamp}}</span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+
+                                                    </div>
+                                                    <div class="card-toolbar"
+                                                        *ngIf="galleryForm.value.sourceCheckList_id==='carsattended'">
+                                                        <div class="row">
+                                                            <div class="col-md-6">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.interacted_person_count">Number of
+                                                                    People Interacted :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.interacted_person_count}}</span>
+                                                                </span>
+                                                            </div>
+                                                            <div class="col-md-6 text-end">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.car_reg_number">Number Plate :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection?.car_reg_number}}</span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row">
+                                                            <div class="col-md-6">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.car_reg_number">Detection Time :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection?.date_timestamp}}</span>
+                                                                </span>
+                                                            </div>
+                                                            <div class="col-md-6 text-end">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.interacted_duration_in_secs">Time
+                                                                    spent :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.interacted_duration_in_secs}}
+                                                                        Mins</span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="card-toolbar"
+                                                        *ngIf="galleryForm.value.sourceCheckList_id==='vehicle_check_in'">
+                                                        <div class="row">
+                                                            <div class="col-md-8">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.date_timestamp">Detection Time :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.date_timestamp}}</span>
+                                                                </span>
+                                                            </div>
+                                                            <div class="col-md-4 text-end">
+                                                                <span class="ms-3"
+                                                                    *ngIf="detection?.date_timestamp">Slot :
+                                                                    <span class="badge badge-light-primary">
+                                                                        {{detection.slot_id}}</span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="card-toolbar"
+                                                        *ngIf="galleryForm.value.sourceCheckList_id==='outsidebusinesshoursqueuetracking'">
+                                                        <div class="snapcard">
+                                                            <div class="row px-10 mt-5 margin-left-side ">
+                                                                <div class="col-md-3" *ngIf="detection?.storeName">
+                                                                    <h3 class="uni-title">Store Name</h3>
+                                                                </div>
+                                                                <div class="col-md-9">
+                                                                    <p class="uni-subtitle">: <span
+                                                                            class="ms-3">{{detection.storeName}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <h3 class="uni-title">Detection Status</h3>
+                                                                </div>
+
+                                                                <div class="col-md-3"
+                                                                    *ngIf="detection?.detectionStatus; else noDetectionStatus">
+                                                                    <p class="uni-subtitle"> :
+                                                                        <!-- <span class="ms-3 badge badge-light-danger" *ngIf="detection?.Flag">Breached</span>
+                                                                        <span class="ms-3 badge badge-light-success" *ngIf="!detection?.Flag">Not Breached</span> -->
+                                                                        <span class="ms-3 badge badge-light-danger"
+                                                                            *ngIf="detection?.detectionStatus === 'Breached'">Breached</span>
+                                                                        <span class="ms-3 badge badge-light-success"
+                                                                            *ngIf="detection?.detectionStatus === 'Not Breached'">Not
+                                                                            Breached</span>
+                                                                        <span class="ms-3 badge badge-light-danger"
+                                                                            *ngIf="detection?.detectionStatus === 'Offline'">Offline</span>
+                                                                    </p>
+                                                                </div>
+                                                                <ng-template #noDetectionStatus>
+                                                                    <div class="col-md-3">
+                                                                        <p class="uni-subtitle"> :
+                                                                            <span class="ms-3 badge badge-light-danger"
+                                                                                *ngIf="detection?.Flag">Breached</span>
+                                                                            <span class="ms-3 badge badge-light-success"
+                                                                                *ngIf="!detection?.Flag">Not
+                                                                                Breached</span>
+                                                                        </p>
+                                                                    </div>
+                                                                </ng-template>
+                                                                <div class="col-md-3">
+                                                                    <h3 class="uni-title">Date</h3>
+                                                                </div>
+                                                                <div class="col-md-3">
+                                                                    <p class="uni-subtitle">: <span
+                                                                            class="ms-3">{{detection.Date|date:'dd-MM-yyyy'
+                                                                            }} </span></p>
+                                                                </div>
+                                                                <div class="col-md-3" *ngIf="detection?.detections">
+                                                                    <h3 class="uni-title">Detection Count</h3>
+                                                                </div>
+                                                                <div class="col-md-9">
+                                                                    <p class="uni-subtitle">: <span
+                                                                            class="ms-3">{{detection.detections.length}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="col-md-3" *ngIf="detection?.detections">
+                                                                    <h3 class="uni-title">Detection at</h3>
+                                                                </div>
+                                                                <div class="col-md-9">
+                                                                    <p class="uni-subtitle">: <span
+                                                                            class="ms-3">{{detection.storeName}}</span>
+                                                                    </p>
+                                                                </div>
+                                                                <div class="col-md-3" *ngIf="detection?.downtime">
+                                                                    <h3 class="uni-title">Downtime</h3>
+                                                                </div>
+                                                                <div class="col-md-3" *ngIf="detection?.downtime">
+                                                                    <p class="uni-subtitle">: <span
+                                                                            class="ms-3">{{detection.downtime}} mins
+                                                                            <span
+                                                                                ngbTooltip="Downtime may result in inaccurate data"
+                                                                                placement="top" container="body">
+                                                                                <svg xmlns="http://www.w3.org/2000/svg"
+                                                                                    width="15" height="16"
+                                                                                    viewBox="0 0 15 16" fill="none">
+                                                                                    <path
+                                                                                        d="M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z"
+                                                                                        stroke="#667085"
+                                                                                        stroke-width="1.33333"
+                                                                                        stroke-linecap="round"
+                                                                                        stroke-linejoin="round" />
+                                                                                </svg>
+                                                                            </span>
+                                                                        </span></p>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="mt-2"
+                                                        *ngIf="detection.path && detection.path !== null && detection.path !== undefined && detection.path !== ''">
+                                                        <img class="w-100 h-500px rounded-top"
+                                                            src="{{environment.TraxAIchecklistCDN}}{{detection.path}}"
+                                                            alt="">
+                                                        <div class="text-center mt-3"> {{this.checklistName}}</div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div
+                                    *ngIf="galleryForm.value.sourceCheckList_id === 'outsidebusinesshoursqueuetracking'">
+                                    <div class=" my-3 mt-5" *ngFor="let item  of mobileusageData">
+                                        <div class="row px-10 mt-5">
+                                            <div class="col-md-3">
+                                                <h3 class="uni-title">Checklist Name</h3>
+                                            </div>
+                                            <div class="col-md-9">
+                                                <p class="uni-subtitle">: {{this.checklistName}} </p>
+                                            </div>
+                                        </div>
+                                        <ul class="row">
+                                            <div class="col-md-12 my-2" *ngFor="let detection of item?.imagesData">
+                                                <div class="card-toolbar"
+                                                    *ngIf="galleryForm.value.sourceCheckList_id==='outsidebusinesshoursqueuetracking'">
+                                                    <div class="snapcard">
+                                                        <div class="row px-10 mt-5 margin-left-side ">
+                                                            <div class="col-md-3" *ngIf="detection?.storeName">
+                                                                <h3 class="uni-title">Store Name</h3>
+                                                            </div>
+                                                            <div class="col-md-9">
+                                                                <p class="uni-subtitle">: <span
+                                                                        class="ms-3">{{detection.storeName}}</span></p>
+                                                            </div>
+                                                            <div class="col-md-3">
+                                                                <h3 class="uni-title">Detection Status</h3>
+                                                            </div>
+                                                            <div class="col-md-3">
+                                                                <p class="uni-subtitle"
+                                                                    *ngIf="detection?.detectionStatus"> :
+                                                                    <span class="ms-3 badge badge-light-danger"
+                                                                        *ngIf="detection?.detectionStatus === 'Detected'">Detected</span>
+                                                                    <span class="ms-3 badge badge-light-success"
+                                                                        *ngIf="detection?.detectionStatus === 'Not Detected'">Not
+                                                                        Detected</span>
+                                                                    <span class="ms-3 badge badge-light-danger"
+                                                                        *ngIf="detection?.detectionStatus === 'Offline'">Offline</span>
+                                                                </p>
+                                                            </div>
+                                                            <div class="col-md-3">
+                                                                <h3 class="uni-title text-end">Date</h3>
+                                                            </div>
+                                                            <div class="col-md-3">
+                                                                <p class="uni-subtitle">: <span
+                                                                        class="ms-3">{{detection.Date}} </span></p>
+                                                            </div>
+                                                            <div class="col-md-3" *ngIf="detection?.detections">
+                                                                <h3 class="uni-title">Detection Count</h3>
+                                                            </div>
+                                                            <div class="col-md-9">
+                                                                <p class="uni-subtitle">: <span
+                                                                        class="ms-3">{{detection.detections.length}}</span>
+                                                                </p>
+                                                            </div>
+                                                            <div class="col-md-3" *ngIf="detection?.detections">
+                                                                <h3 class="uni-title">Detection at</h3>
+                                                            </div>
+                                                            <div class="col-md-9">
+                                                                <p class="uni-subtitle">:
+                                                                    <span
+                                                                        *ngFor="let detectionAt  of detection.detections; let i=index">
+                                                                        <span class="ms-3 badge backgroundGray"
+                                                                            *ngIf="i < 5">
+                                                                            {{detectionAt}}
+                                                                        </span>
+                                                                    </span>
+                                                                    <span *ngIf="detection.detections.length > 5"
+                                                                        class="ms-3 badge backgroundGray">
+                                                                        +{{ detection.detections.length - 5 }}
+                                                                    </span>
+                                                                </p>
+                                                            </div>
+                                                            <div class="col-md-3" *ngIf="detection?.downtime">
+                                                                <h3 class="uni-title">Downtime</h3>
+                                                            </div>
+                                                            <div class="col-md-3" *ngIf="detection?.downtime">
+                                                                <p class="uni-subtitle">: <span
+                                                                        class="ms-3">{{detection.downtime}} mins
+                                                                        <span
+                                                                            ngbTooltip="Downtime may result in inaccurate data"
+                                                                            placement="top" container="body">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg"
+                                                                                width="15" height="16"
+                                                                                viewBox="0 0 15 16" fill="none">
+                                                                                <path
+                                                                                    d="M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z"
+                                                                                    stroke="#667085"
+                                                                                    stroke-width="1.33333"
+                                                                                    stroke-linecap="round"
+                                                                                    stroke-linejoin="round" />
+                                                                            </svg>
+                                                                        </span>
+                                                                    </span></p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div *ngIf="galleryForm.value.sourceCheckList_id === 'halfshutter'||galleryForm.value.sourceCheckList_id === 'tvcompliance'||galleryForm.value.sourceCheckList_id === 'cameratampering'||galleryForm.value.sourceCheckList_id === 'staffgrouping'||galleryForm.value.sourceCheckList_id === 'employeeCount'">
+                                    <div class=" my-3 mt-5">
+                                        <div class="row px-10 mt-5">
+                                            <div class="col-md-3">
+                                                <h3 class="uni-title">Checklist Name</h3>
+                                            </div>
+                                            <div class="col-1">:</div>
+                                            <div class="col-md-8">
+                                                <p class="uni-subtitle"> {{this.checklistName}} </p>
+                                            </div>
+                                        </div>
+                                        <ul class="row" *ngFor="let item  of mobileusageData">
+                                            <div class="col-md-12 my-2" *ngFor="let detection of item?.imagesData">
+                                                <div class="card-toolbar"
+                                                    *ngIf="galleryForm.value.sourceCheckList_id==='halfshutter'||galleryForm.value.sourceCheckList_id === 'tvcompliance'||galleryForm.value.sourceCheckList_id === 'cameratampering'||galleryForm.value.sourceCheckList_id === 'staffgrouping'||galleryForm.value.sourceCheckList_id === 'employeeCount'">
+                                                    <div class="snapcard">
+                                                        <div class="row px-10 mt-5 margin-left-side ">
+                                                           <div class="col-md-12" *ngIf="detection?.storeName">
+                                                            <h3 class="uni-title row">
+                                                                <span class="label col-md-4">Store Name</span>
+                                                                <span class="col-1">:</span>
+                                                                <span class="value col-md-7">{{ detection.storeName }}</span>
+                                                            </h3>
+                                                            </div>
+                                                            <div class="col-md-12" *ngIf="detection.detectionTime">
+                                                                <h3 class="uni-title row">
+                                                                     <span class="label col-md-4">Detection Time</span>  <span class="col-1">:</span>
+                                                                     <span class="col-md-7">
+
+                                                                         <span class="badge badge-light-primary">{{detection.detectionTime}}</span>
+                                                                     </span>
+                                                                    </h3>
+                                                            </div>
+                                                            <div class="col-md-12">
+                                                                
+                                                                <h3 class="uni-title row" >
+                                                                        <ng-container *ngIf="detection?.detectionStatus&&galleryForm.value.sourceCheckList_id != 'employeeCount'">
+
+                                                                            <span class="label col-md-4">Detection Status</span><span class="col-1">:</span>
+                                                                            <span class="col-md-2">
+                                                                                <span class="badge badge-light-danger"
+                                                                                    *ngIf="detection?.detectionStatus === 'Breached'">Breached</span>
+                                                                                <span class="badge badge-light-success"
+                                                                                    *ngIf="detection?.detectionStatus === 'Not Breached'">Not Breached</span>
+                                                                                <span class="badge badge-light-danger"
+                                                                                    *ngIf="detection?.detectionStatus === 'angle changed'">Angle Changed</span>
+                                                                                <span class="badge badge-light-danger"
+                                                                                    *ngIf="['Offline','Files Not Received'].includes(detection.detectionStatus)">Files Not Received</span>
+                                                                            </span>
+                                                                        </ng-container>
+                                                                        <ng-container *ngIf="galleryForm.value.sourceCheckList_id === 'employeeCount'">
+
+                                                                            <span class="label col-md-4">Employee Count</span><span class="col-1">:</span>
+                                                                            <span class="col-md-2">
+                                                                                <span class="badge badge-light-primary" *ngIf="detection.employee_count">{{detection.employee_count}}</span>
+                                                                            </span>
+                                                                        </ng-container>
+                                                                                <ng-container *ngIf="detection?.downtime != null && detection?.downtime != undefined">
+
+                                                                                    <span class="label col-md-2">Downtime</span> <span class="col-1">:</span>
+                                                                                    <span
+                                                                                    class="col-md-2">{{detection.downtime}} mins
+                                                                                    <span
+                                                                                        ngbTooltip="Downtime may result in inaccurate data"
+                                                                                        placement="top" container="body">
+                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                                                                            width="15" height="16"
+                                                                                            viewBox="0 0 15 16" fill="none">
+                                                                                            <path
+                                                                                                d="M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z"
+                                                                                                stroke="#667085"
+                                                                                                stroke-width="1.33333"
+                                                                                                stroke-linecap="round"
+                                                                                                stroke-linejoin="round" />
+                                                                                        </svg>
+                                                                                    </span>
+                                                                                </span>
+                                                                                </ng-container>
+                                                                               
+                                                                        </h3>
+                                                                </div>
+                                                               
+                                                            <div class="col-md-12" *ngIf="detection?.configuredStoreTime">
+                                                            <h3 class="uni-title row">
+                                                                <span class="label col-md-4">Configured Store Time</span>
+                                                                <span class="col-1">:</span>
+                                                                <span class="value col-md-3"><span class="badge badge-num-muted">{{detection.configuredStoreTime}}</span></span>
+                                                            </h3>
+                                                            </div>
+                                                            <div class="col-md-12" *ngIf="detection.streamId">
+                                                                <h3 class="uni-title row">
+                                                                    <span class="label col-md-4">Camera Name & Stream ID</span>
+                                                                    <span class="col-1">:</span>
+                                                                    <span class="cursor-pointer col-md-5" (click)="cameraView(detection.StoreID)"><span class="badge badge-num-muted">{{detection.cameraName}}{{detection.streamId}}<span class="ms-2"  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg></span></span></span></h3>
+                                                            </div>
+                                                            <div class="col-md-12" *ngIf="galleryForm.value.sourceCheckList_id === 'halfshutter'">
+                                                                <h3 class="uni-title row">
+                                                                    <span class="label col-md-4">Scheduled Employee</span>
+                                                                    <span class="col-1">:</span>
+                                                                    <span class="value col-md-7">
+                                                                        @if(detection.scheduleEmp.length) {
+                                                                            <span class="badge badge-num-muted" *ngFor="let emp of detection.scheduleEmp">{{emp}}</span>
+                                                                        }@else {
+                                                                            <span class="badge badge-num-muted">NA</span>
+                                                                        }
+                                                                    </span>
+                                                                </h3>
+                                                            </div>
+                                                            <div class="col-md-12 my-2" *ngIf="detection?.path">
+                                                                <div class="" *ngIf="galleryForm.value.sourceCheckList_id === 'cameratampering'||galleryForm.value.sourceCheckList_id === 'staffgrouping'||galleryForm.value.sourceCheckList_id === 'employeeCount'">
+                                                                    <img class="w-100 h-500px rounded-top cursor-pointer"
+                                                                        src="{{environment.TraxAIchecklistCDN}}{{detection.path}}"
+                                                                        (click)="openImagePreview(environment.TraxAIchecklistCDN + detection.path, this.checklistName)"
+                                                                        alt="">
+                                                                </div>
+                                                                <div class="" *ngIf="galleryForm.value.sourceCheckList_id != 'cameratampering'&&galleryForm.value.sourceCheckList_id != 'staffgrouping'&&galleryForm.value.sourceCheckList_id != 'employeeCount'">
+
+                                                                    <img class="w-100 h-500px rounded-top cursor-pointer"
+                                                                        src="{{environment.TraxAIchecklistCDN}}{{detection.path}}"
+                                                                        (click)="openImagePreview(environment.TraxAIchecklistCDN + detection.path, this.checklistName)"
+                                                                        alt="">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </ul>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                            <div class="px-10 my-5" *ngIf="videoChecklist.includes(select)">
+                                <div class="text-center" *ngIf="clientData.logo&&clientData.logo!==''">
+                                    <img class="mt-5 mb-3 text-center iconsize" src="{{clientData.logo}}">
+                                </div>
+
+                                <div class="my-3 mt-5" *ngFor="let item  of customerunattendedData">
+                                    <div class="row px-10 mt-5">
+                                        <div class="col-md-3">
+                                            <h3 class="uni-title">Checklist Name</h3>
+                                        </div>
+                                        <div class="col-md-9">
+                                            <p class="uni-subtitle">: <span class="ms-3">{{this.checklistName}}</span>
+                                            </p>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <h3 class="uni-title">Store Name</h3>
+                                        </div>
+                                        <div class="col-md-9">
+                                            <p class="uni-subtitle">: <span class="ms-3">{{item.storeName}}</span></p>
+                                        </div>
+                                    </div>
+                                    <ul class="row w-100 margin-top-side">
+                                        <li class="qa-heading"> </li>
+                                        <div class="row">
+                                            <div class="col-md-12" *ngFor="let detection of item.imagesData">
+                                                <div class="row px-10 mt-5 margin-left-side"
+                                                    *ngIf="select!=='suspiciousactivity'">
+                                                    <div class="col-md-3"
+                                                        *ngIf="detection?.detectionStatus; else noDetectionStatusCard">
+                                                        <h3 class="uni-title">Detection Status</h3>
+                                                    </div>
+                                                    <ng-template #noDetectionStatusCard>
+                                                        <div class="col-md-3" *ngIf="detection?.Answer">
+                                                            <h3 class="uni-title">Detection Status</h3>
+                                                        </div>
+                                                    </ng-template>
+                                                    <div class="col-md-3"
+                                                        *ngIf="detection?.detectionStatus; else noDetectionStatus">
+                                                        <p class="uni-subtitle">:
+                                                            <!-- <span class="ms-3 badge badge-light-danger" *ngIf="detection?.Answer==='rejected'">Breached</span>
+                                                            <span class="ms-3 badge badge-light-success" *ngIf="detection?.Answer==='approved'">Not Breached</span> -->
+                                                            <span class="ms-3 badge badge-light-danger"
+                                                                *ngIf="detection?.detectionStatus === 'Breached'">Breached</span>
+                                                            <span class="ms-3 badge badge-light-success"
+                                                                *ngIf="detection?.detectionStatus === 'Not Breached'">Not
+                                                                Breached</span>
+                                                            <span class="ms-3 badge badge-light-danger"
+                                                                *ngIf="detection?.detectionStatus === 'Offline'">Offline</span>
+                                                        </p>
+                                                    </div>
+                                                    <ng-template #noDetectionStatus>
+                                                        <div class="col-md-3" *ngIf="detection?.Answer">
+                                                            <p class="uni-subtitle">:
+                                                                <span class="ms-3 badge badge-light-danger"
+                                                                    *ngIf="detection?.Answer==='rejected'">Breached</span>
+                                                                <span class="ms-3 badge badge-light-success"
+                                                                    *ngIf="detection?.Answer==='approved'">Not
+                                                                    Breached</span>
+                                                            </p>
+                                                        </div>
+                                                    </ng-template>
+                                                    <div class="col-md-3">
+                                                        <h3 class="uni-title">Date</h3>
+                                                    </div>
+                                                    <div class="col-md-3">
+                                                        <p class="uni-subtitle">: <span
+                                                            class="ms-3">{{detection.date|date:'dd-MM-yyyy' }}
+                                                        </span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.zoneName">
+                                                        <h3 class="uni-title">Zone Name</h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.zoneName">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{detection.zoneName }}
+                                                            </span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.configTime">
+                                                        <h3 class="uni-title">Configured Time</h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.configTime">
+                                                        <p class="uni-subtitle ">: <span
+                                                                class="ms-3">{{detection.configTime }}</span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.duration">
+                                                        <h3 class="uni-title">Duration</h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.duration">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{detection.duration }} Mins </span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.downTime">
+                                                        <h3 class="uni-title">Downtime</h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="detection?.downTime">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{detection.downTime }} Mins </span>
+                                                            <span ngbTooltip="Downtime may result in inaccurate data"
+                                                                placement="top" container="body">
+                                                                <svg xmlns="http://www.w3.org/2000/svg" width="15"
+                                                                    height="16" viewBox="0 0 15 16" fill="none">
+                                                                    <path
+                                                                        d="M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z"
+                                                                        stroke="#667085" stroke-width="1.33333"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round" />
+                                                                </svg>
+                                                            </span>
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div class="card-header border-0 min-h-45px px-0 my-0">
+                                                    <h3 class="card-title">
+                                                        <!-- <span class="me-3 store-title">{{item.storeName}}</span> -->
+                                                        <span class="ms-2 badge badge-light-default"
+                                                            *ngIf="detection?.customer_id">Cust ID : <span
+                                                                class="ms-3">{{detection.customer_id}}</span></span>
+                                                        <span class="ms-2 badge badge-light-default"
+                                                            *ngIf="detection?.queue_id">Queue ID : <span
+                                                                class="ms-3">{{detection.queue_id}}</span></span>
+                                                        <span class="ms-2 badge badge-light-default"
+                                                            *ngIf="detection?.optum_id">Optom ID : <span
+                                                                class="ms-3">{{detection.optum_id}}</span></span>
+                                                        <!-- <span class="ms-2 badge badge-light-default" *ngIf="detection?.date">Date : {{detection.date|date:'dd-MM-yyyy' }}</span> -->
+                                                        <!-- <span class="ms-3 badge badge-light-default" *ngIf="detection?.configTime">Inspection time : {{detection.configTime}}</span> -->
+                                                        <span class="ms-3 badge badge-light-default"
+                                                            *ngIf="detection?.temp_id">TempId : <span
+                                                                class="ms-3">{{detection.temp_id}}</span></span>
+                                                        <span class="ms-3 badge badge-light-default"
+                                                            *ngIf="detection?.time_spend">Timespend : <span
+                                                                class="ms-3">{{detection.time_spend}}Mins</span></span>
+                                                    </h3>
+
+                                                    <!-- Switch toggle -->
+                                                    <div class="card-toolbar">
+                                                        <div class="col-md-12 text-end">
+                                                            <span class="ms-3 badge badge-light-default"
+                                                                *ngIf="detection?.entry_time">Entry time : <span
+                                                                    class="ms-3">{{detection.entry_time}}</span></span>
+                                                            <span class="ms-3 badge badge-light-default"
+                                                                *ngIf="detection?.exit_time">Exit time : <span
+                                                                    class="ms-3">{{detection.exit_time}}</span></span>
+                                                            <span class="ms-3 badge badge-light-success"
+                                                                *ngIf="detection?.adherence_rate">Adherence Rate : <span
+                                                                    class="ms-3">{{detection.adherence_rate}}</span></span>
+                                                            <span class="ms-3 badge badge-light-primary text-capitalize"
+                                                                *ngIf="detection?.category"> <span
+                                                                    class="ms-3">{{detection.category}}</span></span>
+                                                            <span class="ms-3 badge badge-light-default"
+                                                                *ngIf="detection?.customer_entry_time">Entry time :
+                                                                <span
+                                                                    class="ms-3">{{detection.customer_entry_time}}</span></span>
+                                                            <span class="ms-3 badge badge-light-default"
+                                                                *ngIf="detection?.customer_exit_time">Exit time : <span
+                                                                    class="ms-3">{{detection.customer_exit_time}}</span></span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+
+                                                <div class="my-0" *ngIf="select !=='eyetest'">
+                                                    <video controls class="w-100 h-450px rounded-top"
+                                                        src="{{environment.TraxAIchecklistCDN}}{{detection.video_path}}"
+                                                        alt="">
+                                                    </video>
+                                                </div>
+                                                <div class="my-0" *ngIf="select ==='eyetest'">
+                                                    <video controls class="w-100 h-450px rounded-top"
+                                                        src="{{environment.EyeTestCDN}}{{detection.video_path}}" alt="">
+                                                    </video>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </ul>
+                                </div>
+                            </div>
+
+                            <div *ngIf="select ==='storeopenandclose'">
+                                <div class="text-center" *ngIf="clientData.logo&&clientData.logo!==''">
+                                    <img class="mt-5 mb-3 text-center iconsize" src="{{clientData.logo}}">
+                                </div>
+                                <div class="row px-10 mt-5">
+                                    <div class="col-md-3">
+                                        <h3 class="uni-title">Checklist Name : </h3>
+                                    </div>
+                                    <div class="col-md-9">
+                                        <p class="uni-subtitle"> {{this.checklistName}} </p>
+                                    </div>
+                                </div>
+                                <div class="col-md-12 margin-top-side" *ngFor="let store of storeOpencloseView">
+                                    <div class="mx-8 my-8" *ngFor="let item of store.imagesData">
+                                        @if(item?.process_type == 'live') {
+                                            <div class="snapcard">
+                                                <div class="row m-0 w-100">
+                                                    <div class="col-12">
+                                                        <div class="img mt-4 px-3 position-relative" *ngIf="!item.openTime">
+                                                            <div
+                                                                class="preview align-items-center justify-content-center d-flex flex-column">
+                                                                <span>
+                                                                    <svg width="23" height="20" viewBox="0 0 23 20"
+                                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                        <g id="Group">
+                                                                            <path id="Vector"
+                                                                                d="M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023"
+                                                                                stroke="#667085" stroke-width="2"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" /> \
+                                                                            <path id="Vector_2"
+                                                                                d="M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z"
+                                                                                stroke="#667085" stroke-width="2"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" />
+                                                                        </g>
+                                                                    </svg>
+                                                                </span>
+                                                                <span class="prvtxt mt-5 textclr">Preview not
+                                                                    available</span>
+                                                                <span class="refreshtxt mt-2 textclr">The selected camera is
+                                                                    not available at the moment.</span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row" *ngIf="item.openTime && item.type ==  'open'">
+                                                            <img class="mx-1 openclosesnapLiveIMG cursor-pointer"
+                                                                src="{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg"
+                                                                alt="open close snap" *ngIf="item.s3_path != ''"
+                                                                (click)="openSnapPopup(item, 'open')">
+                                                            <!-- <div class="col-12">
+                                                                <div class="d-flex flex-stack mx-1 mt-2">
+                                                                    <div>
+                                                                        <div class="snaptext">Opening Snap</div>
+                                                                        <div class="snaptime">{{item.openTime}} -
+                                                                            {{item.date}} </div>
+                                                                    </div>
+                                                                    <span class="badge badge-light-primary snapbadge"
+                                                                        *ngIf="item?.onopenTimeFlag">On Time</span>
+                                                                    <span class="badge badge-light-danger snapbadge"
+                                                                        *ngIf="item?.lateopenTimeFlag">Late Open</span>
+                                                                    <span class="badge badge-light-warning snapbadge"
+                                                                        *ngIf="item?.earlyopenTimeFlag">Early Open</span>
+                                                                </div>
+                                                            </div> -->
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-12">
+                                                        <div class="img mt-4 px-3 position-relative"
+                                                            *ngIf="!item.closeTime">
+                                                            <div
+                                                                class="preview align-items-center justify-content-center d-flex flex-column">
+                                                                <span>
+                                                                    <svg width="23" height="20" viewBox="0 0 23 20"
+                                                                        fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                        <g id="Group">
+                                                                            <path id="Vector"
+                                                                                d="M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023"
+                                                                                stroke="#667085" stroke-width="2"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" /> \
+                                                                            <path id="Vector_2"
+                                                                                d="M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z"
+                                                                                stroke="#667085" stroke-width="2"
+                                                                                stroke-linecap="round"
+                                                                                stroke-linejoin="round" />
+                                                                        </g>
+                                                                    </svg>
+                                                                </span>
+                                                                <span class="prvtxt mt-5 textclr">Preview not
+                                                                    available</span>
+                                                                <span class="refreshtxt mt-2 textclr">The selected camera is
+                                                                    not available at the moment.</span>
+                                                            </div>
+                                                        </div>
+                                                        <div class="row" *ngIf="item.closeTime && item.type ==  'close'&& item.s3_path != ''">
+                                                            <img class="mx-1 openclosesnapLiveIMG cursor-pointer"
+                                                                src="{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/close.jpeg"
+                                                                alt="Checklist Video Player" *ngIf="item.s3_path != ''"
+                                                                (click)="openSnapPopup(item, 'close')">
+                                                            <!-- <div class="col-12">
+                                                                <div class="d-flex flex-stack mx-1 mt-2">
+                                                                    <div>
+                                                                        <div class="snaptext">Closing Snap</div>
+                                                                        <div class="snaptime">{{item.closeTime}} -
+                                                                            {{item.date}}</div>
+                                                                    </div>
+                                                                    <span class="badge badge-light-primary snapbadge"
+                                                                        *ngIf="item?.oncloseTimeFlag">On Time</span>
+                                                                    <span class="badge badge-light-danger snapbadge"
+                                                                        *ngIf="item?.earlycloseTimeFlag">Early Close</span>
+                                                                    <span class="badge badge-light-warning snapbadge"
+                                                                        *ngIf="item?.latecloseTimeFlag">Late Close</span>
+                                                                </div>
+                                                            </div> -->
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="row px-10 mt-5 margin-left-side ">
+                                                    <div class="col-md-3" *ngIf="item?.storeName">
+                                                        <h3 class="uni-title">Store Name</h3>
+                                                    </div>
+                                                    <div class="col-md-9" *ngIf="item?.storeName">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{item.storeName}}</span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.buffer_open">
+                                                        <h3 class="uni-title">Buffer for Open Time </h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.buffer_open">
+                                                        <p class="uni-subtitle">: <span class="ms-3">{{item.buffer_open }}
+                                                                mins</span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.buffer_close">
+                                                        <h3 class="uni-title">Buffer for Close Time </h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.buffer_close">
+                                                        <p class="uni-subtitle">: <span class="ms-3">{{item.buffer_close }}
+                                                                mins</span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item.reason == 'File Not Received'">
+                                                        <h3 class="uni-title">Detected At</h3>
+                                                    </div>
+                                                    <div class="col-md-4" *ngIf="item.reason == 'File Not Received'">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{item.date }} </span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item.reason == 'File Not Received'">
+                                                        <h3 class="uni-title ms-15">Detection Type</h3>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item.reason == 'File Not Received'">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-1 badge badge-light-warning snapbadge">{{item.type =='open' ? 'Store Open' : 'Store Close'}} </span></p>
+                                                    </div>
+                                                    <div class="col-md-3">
+                                                        <h3 class="uni-title">Detection Status</h3>
+                                                    </div>
+                                                    <div [class]="item.reason == 'File Not Received' ? 'col-md-5' : item?.detectionStatus === 'Not Breached' ? 'col-md-8':'col-md-4'">
+                                                        <p class="uni-subtitle"> :
+                                                            <!-- <span class="ms-3 badge badge-light-danger" *ngIf="item?.Flag">Breached</span>
+                                                            <span class="ms-3 badge badge-light-success" *ngIf="!item?.Flag">Not Breached</span> -->
+                                                            <span class="ms-3 badge badge-light-danger"
+                                                                *ngIf="item?.detectionStatus === 'Breached' && item.reason != 'File Not Received'">Breached</span>
+                                                            <span><span class="ms-3 badge badge-light-success"
+                                                                *ngIf="item?.detectionStatus === 'Not Breached'">Not
+                                                                Breached</span><span class="ms-3 badge badge-light-success"
+                                                                *ngIf="item?.reason === 'On Time'">On Time</span></span>
+                                                            <span class="ms-3 badge badge-light-danger"
+                                                                *ngIf="(item?.detectionStatus === 'Breached' && item.reason == 'File Not Received') || item.detectionStatus == 'Offline'">Offline – No data Received from store</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.detectionStatus && item?.detectionStatus !== 'Not Breached' && item.reason !== 'File Not Received'">
+                                                        <h3 class="uni-title">Breached Type</h3>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item?.detectionStatus && item?.detectionStatus !== 'Not Breached' && item.reason !== 'File Not Received'">
+                                                        <p class="uni-subtitle" *ngIf="item.type == 'open'">: 
+                                                            <span class="badge badge-light-primary snapbadge"
+                                                                        *ngIf="item?.detectionStatus != 'Breached' && !item.Flag">On Time</span>
+                                                                    <span class="badge badge-light-danger snapbadge"
+                                                                        *ngIf="item?.detectionStatus == 'Breached' && item.Flag">Late Open</span>
+                                                                    <!-- <span class="badge badge-light-warning snapbadge"
+                                                                        *ngIf="item?.earlyopenTimeFlag">Early Open</span> -->
+                                                                    </p>
+                                                        <p class="uni-subtitle" *ngIf="item.type == 'close'">: 
+                                                            <span class="badge badge-light-primary snapbadge"
+                                                                        *ngIf="item?.detectionStatus != 'Breached' && !item.Flag">On Time</span>
+                                                                    <span class="badge badge-light-danger snapbadge"
+                                                                        *ngIf="item?.detectionStatus == 'Breached' && item.Flag">Early Close</span>
+                                                                    <!-- <span class="badge badge-light-warning snapbadge"
+                                                                        *ngIf="item?.latecloseTimeFlag">Late Close</span> -->
+                                                                    </p>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item?.downtime">
+                                                        <h3 class="uni-title" [ngClass]="item.reason == 'File Not Received' ? 'ms-8' : ''">Downtime</h3>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item?.downtime">
+                                                        <p class="uni-subtitle">: <span class="ms-3">{{item.downtime}} mins
+                                                                <span ngbTooltip="Downtime may result in inaccurate data"
+                                                                    placement="top" container="body">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="15"
+                                                                        height="16" viewBox="0 0 15 16" fill="none">
+                                                                        <path
+                                                                            d="M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z"
+                                                                            stroke="#667085" stroke-width="1.33333"
+                                                                            stroke-linecap="round"
+                                                                            stroke-linejoin="round" />
+                                                                    </svg>
+                                                                </span>
+                                                            </span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.detection_time">
+                                                        <h3 class="uni-title">Detection Time</h3>
+                                                    </div>
+                                                    <div class="col-md-8" *ngIf="item?.detection_time">
+                                                        <p class="uni-subtitle">: <span class="ms-3 badge badge-light-primary">{{item.detection_time}} - {{item.date}}</span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item?.reason !== 'File Not Received'">
+                                                        <h3 class="uni-title">Scheduled Employee </h3>
+                                                    </div>
+                                                    <div class="col-md-9" *ngIf="item?.reason !== 'File Not Received'">
+                                                        <p class="uni-subtitle">: 
+                                                            <span class="ms-3">
+                                                                @if(item.scheduleEmp.length) {
+                                                                    <span class="badge badge-num-muted" *ngFor="let emp of item.scheduleEmp">{{emp}}</span>
+                                                                }@else {
+                                                                    <span class="badge badge-num-muted">NA</span>
+                                                                }
+                                                            </span>
+                                                        </p>
+                                                    </div>
+                                                    
+                                                </div>
+                                            </div>
+                                        }
+                                        @else {
+                                            <div class="snapcard">
+                                                <div class="row px-10 mt-5 margin-left-side ">
+                                                    <div class="col-md-3" *ngIf="store?.storeName">
+                                                        <h3 class="uni-title">Store Name</h3>
+                                                    </div>
+                                                    <div class="col-md-9" *ngIf="store?.storeName">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{store.storeName}}</span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item.reason == 'File Not Received'">
+                                                        <h3 class="uni-title">Detected At</h3>
+                                                    </div>
+                                                    <div class="col-md-4" *ngIf="item.reason == 'File Not Received'">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{item.date }} </span></p>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item.reason == 'File Not Received'">
+                                                        <h3 class="uni-title ms-15">Detection Type</h3>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item.reason == 'File Not Received'">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-1 badge badge-light-warning">{{item.type =='open' ? 'Store Open' : 'Store Close'}} </span></p>
+                                                    </div>
+                                                    <div class="col-md-3">
+                                                        <h3 class="uni-title">Detection Status</h3>
+                                                    </div>
+                                                    <div [class]="item.reason === 'File Not Received' ? 'col-md-5' : item.detectionStatus === 'Not Breached' ? 'col-md-4': 'col-md-3'">
+                                                        <p class="uni-subtitle"> :
+                                                            <!-- <span class="ms-3 badge badge-light-danger" *ngIf="item?.Flag">Breached</span>
+                                                            <span class="ms-3 badge badge-light-success" *ngIf="!item?.Flag">Not Breached</span> -->
+                                                            <span class="ms-3 badge badge-light-danger"
+                                                                *ngIf="item?.detectionStatus === 'Breached' && item.reason !== 'File Not Received'">Breached</span>
+                                                            <span><span class="ms-3 badge badge-light-success"
+                                                                *ngIf="item?.detectionStatus === 'Not Breached'">Not
+                                                                Breached</span><span class="ms-3 badge badge-light-success"
+                                                                *ngIf="item?.reason === 'On Time'">On Time</span></span>
+                                                            <span class="ms-3 badge badge-light-danger"
+                                                                *ngIf="item?.detectionStatus === 'Offline' || (item?.detectionStatus === 'Breached' && item.reason == 'File Not Received')">Offline – No data Received from store</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item.reason !== 'File Not Received'">
+                                                        <h3 class="uni-title">Date</h3>
+                                                    </div>
+                                                    <div class="col-md-3" *ngIf="item.reason !== 'File Not Received'">
+                                                        <p class="uni-subtitle">: <span
+                                                                class="ms-3">{{item.date|date:'dd-MM-yyyy' }} </span></p>
+                                                    </div>
+                                                    <!-- <div class="col-md-4" *ngIf="item?.downtime">
+                                                        <h3 class="uni-title">Downtime</h3>
+                                                    </div>
+                                                    <div class="col-md-2" *ngIf="item?.downtime">
+                                                        <p class="uni-subtitle">: <span class="ms-3">{{item.downtime}} mins
+                                                                <span ngbTooltip="Downtime may result in inaccurate data"
+                                                                    placement="top" container="body">
+                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="15"
+                                                                        height="16" viewBox="0 0 15 16" fill="none">
+                                                                        <path
+                                                                            d="M7.66667 5.33203V7.9987M7.66667 10.6654H7.67333M14.3333 7.9987C14.3333 11.6806 11.3486 14.6654 7.66667 14.6654C3.98477 14.6654 1 11.6806 1 7.9987C1 4.3168 3.98477 1.33203 7.66667 1.33203C11.3486 1.33203 14.3333 4.3168 14.3333 7.9987Z"
+                                                                            stroke="#667085" stroke-width="1.33333"
+                                                                            stroke-linecap="round"
+                                                                            stroke-linejoin="round" />
+                                                                    </svg>
+                                                                </span>
+                                                            </span></p>
+                                                    </div> -->
+                                                </div>
+                                                <div class="row m-0 w-100">
+                                                    <!-- @for (item of store.imagesData; track item) { -->
+                                                        <div class="col-6">
+                                                            <div class="img mt-4 px-3 position-relative" *ngIf="!item.openTime">
+                                                                <div
+                                                                    class="preview align-items-center justify-content-center d-flex flex-column">
+                                                                    <span>
+                                                                        <svg width="23" height="20" viewBox="0 0 23 20"
+                                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                            <g id="Group">
+                                                                                <path id="Vector"
+                                                                                    d="M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023"
+                                                                                    stroke="#667085" stroke-width="2"
+                                                                                    stroke-linecap="round"
+                                                                                    stroke-linejoin="round" /> \
+                                                                                <path id="Vector_2"
+                                                                                    d="M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z"
+                                                                                    stroke="#667085" stroke-width="2"
+                                                                                    stroke-linecap="round"
+                                                                                    stroke-linejoin="round" />
+                                                                            </g>
+                                                                        </svg>
+                                                                    </span>
+                                                                    <span class="prvtxt mt-5 textclr">Preview not
+                                                                        available</span>
+                                                                    <span class="refreshtxt mt-2 textclr">The selected camera is
+                                                                        not available at the moment.</span>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row" *ngIf="item.openTime && item.reason !== 'File Not Received'">
+                                                                <img class="mx-1 openclosesnapIMG cursor-pointer"
+                                                                    src="{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/open.jpeg"
+                                                                    alt="open close snap"
+                                                                    (click)="openSnapPopup(item, 'open')">
+                                                                <div class="col-12">
+                                                                    <div class="d-flex flex-stack mx-1 mt-2">
+                                                                        <div>
+                                                                            <div class="snaptext">Opening Snap</div>
+                                                                            <div class="snaptime">{{item.openTime}} -
+                                                                                {{item.date}} <span class="ms-5 badge badge-light-danger"
+                                                                            *ngIf="item?.lateopenTimeFlag">{{item.lateOpen}} mins Delay</span></div>
+                                                                        </div>
+                                                                        <span class="badge badge-light-primary snapbadge"
+                                                                            *ngIf="item?.onopenTimeFlag">On Time</span>
+                                                                        <span class="badge badge-light-danger snapbadge"
+                                                                            *ngIf="item?.lateopenTimeFlag">Late Open</span>
+                                                                        <span class="badge badge-light-warning snapbadge"
+                                                                            *ngIf="item?.earlyopenTimeFlag">Early Open</span>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-6">
+                                                            <div class="img mt-4 px-3 position-relative"
+                                                                *ngIf="!item.closeTime">
+                                                                <div
+                                                                    class="preview align-items-center justify-content-center d-flex flex-column">
+                                                                    <span>
+                                                                        <svg width="23" height="20" viewBox="0 0 23 20"
+                                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                            <g id="Group">
+                                                                                <path id="Vector"
+                                                                                    d="M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023"
+                                                                                    stroke="#667085" stroke-width="2"
+                                                                                    stroke-linecap="round"
+                                                                                    stroke-linejoin="round" /> \
+                                                                                <path id="Vector_2"
+                                                                                    d="M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z"
+                                                                                    stroke="#667085" stroke-width="2"
+                                                                                    stroke-linecap="round"
+                                                                                    stroke-linejoin="round" />
+                                                                            </g>
+                                                                        </svg>
+                                                                    </span>
+                                                                    <span class="prvtxt mt-5 textclr">Preview not
+                                                                        available</span>
+                                                                    <span class="refreshtxt mt-2 textclr">The selected camera is
+                                                                        not available at the moment.</span>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row" *ngIf="item.closeTime && item.reason !== 'File Not Received'">
+                                                                <img class="mx-1 openclosesnapIMG cursor-pointer"
+                                                                    src="{{environment.TraxOpenclosechecklistCDN}}{{item.storeId}}/{{item.dateString|date:'dd-MM-yyyy'}}/operation_snaps/close.jpeg"
+                                                                    alt="Checklist Video Player"
+                                                                    (click)="openSnapPopup(item, 'close')">
+                                                                <div class="col-12">
+                                                                    <div class="d-flex flex-stack mx-1 mt-2">
+                                                                        <div>
+                                                                            <div class="snaptext">Closing Snap</div>
+                                                                            <div class="snaptime">{{item.closeTime}} -
+                                                                                {{item.date}}  <span class="ms-2 badge badge-light-danger"
+                                                                            *ngIf="item?.earlycloseTimeFlag">{{item.earlyClose}} mins Early</span></div>
+                                                                        </div>
+                                                                        <span class="badge badge-light-primary snapbadge"
+                                                                            *ngIf="item?.oncloseTimeFlag">On Time</span>
+                                                                        <span class="badge badge-light-danger snapbadge"
+                                                                            *ngIf="item?.earlycloseTimeFlag">Early Close</span>
+                                                                        <span class="badge badge-light-warning snapbadge"
+                                                                            *ngIf="item?.latecloseTimeFlag">Late Close</span>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    <!-- } -->
+                                                </div>
+                                            </div>
+                                        }
+                                    </div>
+                                    
+                                </div>
+                            </div>
+                            
+                            <div *ngIf="boximageChecklist.includes(select)">
+                                <div class="text-center" *ngIf="clientData.logo&&clientData.logo!==''">
+                                    <img class="mt-5 mb-3 text-center iconsize" src="{{clientData.logo}}">
+                                </div>
+                                <div class="col-md-12" *ngFor="let store of queueAlertView">
+                                    <div class="row px-10 mt-5" *ngIf="showmulti">
+                                        <div class="col-md-3">
+                                            <h3 class="uni-title">Store Name</h3>
+                                        </div>
+                                        <div class="col-md-9">
+                                            <p class="uni-subtitle">: {{store?.storeName}} |
+                                                {{store?.city}},{{store?.state}},{{store?.country}} </p>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <h3 class="uni-title">Checklist Name</h3>
+
+                                        </div>
+                                        <div class="col-md-9">
+                                            <p class="uni-subtitle">: {{checklistName}}</p>
+                                        </div>
+                                        <div class="col-md-3"
+                                            *ngIf="select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'">
+                                            <h3 class="uni-title">Description:</h3>
+                                        </div>
+                                        <div class="col-md-9"
+                                            *ngIf="select==='boxalert'||select==='suspiciousfootfall'||select==='drinking'||select==='bagdetection'">
+                                            <p class="uni-subtitle">{{checkListDescription}}</p>
+                                        </div>
+
+                                    </div>
+                                    <div class="row m-0 w-100 ">
+                                        <div class="col-4 mt-2" *ngFor="let item of store.imagesData">
+                                            <div class="card bordercolor bg-secondary mt-8">
+                                                <div class="text-start ms-5 mt-2 mb-5">
+                                                    <!-- <div *ngIf="item.zone">
+                                                        <span
+                                                            class="btn btn-secondary rounded-lg p-2">{{item.zone}}</span>
+                                                    </div> -->
+
+                                                    <div class="mt-3 fw-semibold">{{ item.date_timestamp }}</div>
+                                                    <div *ngIf="select==='boxalert'" class="mt-3 fw-semibold">Empty shelves : {{ item.emptyBoxCount }}</div>
+                                                </div>
+                                                <img class="w-100 h-250px rounded-bottom" (click)="openModel(item)"
+                                                    src="{{environment.TraxAIchecklistCDN}}{{item.path}}" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <lib-pagination *ngIf="!viewloading && !viewnoData" [itemsPerPage]="limit"
+                                [currentPage]="offset" [totalItems]="totalCount" [paginationSizes]='paginationSizes'
+                                [pageSize]="limit" (pageChange)="onPageChangeview($event)"
+                                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                        </section>
+                    </div>
+                </div>
+                <div *ngIf="!showsidenav" (click)="sidenav()" class="backButtonleft text-center pt-1 cursor-pointer">
+                    <svg class="mt-2 ms-2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+                        fill="none">
+                        <path
+                            d="M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377"
+                            stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div  class="row card mx-0 p-3">
+    <div class="col-md-12 text-end">
+       <button
+        class="btn btn-sm border-primary1"
+        [disabled]="!approvalStatus"
+        (click)="onApproveChecklistClick()">
+        Approve
+        </button>
+    </div>
+</div>
+<ng-template #zoomPopup let-model>
+    <div class="p-8">
+        <div class="modal-header pt-0 ps-1 pe-0">
+            <div>
+                <div class="text-start mt-2">
+                    <div *ngIf="viewImage.zone">
+                        <span class="btn btn-secondary rounded-lg p-2">{{viewImage.zone}}</span>
+                    </div>
+                    <div *ngIf="viewImage.emptyBoxCount">
+                        <span>Empty shelves : {{viewImage.emptyBoxCount}}</span>
+                    </div>
+
+                    <div *ngIf="viewImage.entry_time">
+                        <span>Entry Time : {{viewImage.entry_time}}</span>
+                    </div>
+                    <div *ngIf="viewImage.exit_time">
+                        <span>Exit Time : {{viewImage.exit_time}}</span>
+                    </div>
+                    <div *ngIf="viewImage.temp_id">
+                        <span>Temp Id : {{viewImage.temp_id}}</span>
+                    </div>
+                    <div *ngIf="viewImage.time_spend">
+                        <span>Time Spend : {{viewImage.time_spend}} Mins</span>
+                    </div>
+
+                    <div class="mt-2" *ngIf="viewImage.threshold&&viewImage.Dwelltime">
+                        <p>If the queue exceeds {{viewImage.threshold}} people and wait time surpasses
+                            {{viewImage.Dwelltime}} minutes, an alert will be triggered</p>
+                    </div>
+                    <div class="mt-3 fw-semibold">{{ viewImage.date_timestamp }}</div>
+                </div>
+
+            </div>
+            <div data-bs-dismiss="modal">
+                <!-- <span class="stream fw-semibold text-nowrap me-5" *ngIf="camera.height && camera.width"> Resolution: {{camera.height}} X  {{camera.width}}</span> -->
+                <span class="btn btn-sm btn-icon btn-active-color-primary me-0" (click)="model.dismiss()"><svg
+                        width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M15 5L5 15M5 5L15 15" stroke="#667085" stroke-width="1.67" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                    </svg>
+                </span>
+            </div>
+        </div>
+        <div *ngIf="viewImage.path" class="mt-2 overflow-auto">
+            <img class="rounded-4 mt-5 img-popup-src w-100" src="{{environment.TraxAIchecklistCDN}}{{viewImage.path}}">
+        </div>
+    </div>
+</ng-template>