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

package/src/lib/components/eye-test-audit/eye-test-audit/start-audit/start-audit.component.html

@@ -0,0 +1,708 @@
+<div class="card p-5">
+    <div class="d-flex align-items-center">
+        <div (click)="backNavigation()"  class="btn btn-am btn-outline p-3">
+            <span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M15.8332 9.99984H4.1665M4.1665 9.99984L9.99984 15.8332M4.1665 9.99984L9.99984 4.1665"
+                        stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                </svg></span>
+        </div>
+        <span  *ngIf="currentAuditType !== 'remote'" class="ms-3 badge badge-light-default">{{auditDetails?.optumId}}</span> 
+        <span *ngIf="currentAuditType === 'remote'" class="ms-3 badge badge-light-default"><span class="me-2"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path d="M10 10.5V9.5C10 8.96957 9.78929 8.46086 9.41421 8.08579C9.03914 7.71071 8.53043 7.5 8 7.5H4C3.46957 7.5 2.96086 7.71071 2.58579 8.08579C2.21071 8.46086 2 8.96957 2 9.5V10.5M8 3.5C8 4.60457 7.10457 5.5 6 5.5C4.89543 5.5 4 4.60457 4 3.5C4 2.39543 4.89543 1.5 6 1.5C7.10457 1.5 8 2.39543 8 3.5Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg></span>{{auditDetails?.displayName ? auditDetails?.displayName:'--'}}</span> 
+            <span class="d-flex ms-1 align-items-center">
+                <svg  width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect  x="3" y="3" width="40" height="40" rx="20" fill="" opacity="0.1"></rect>
+                    <rect  x="3" y="3" width="40" height="40" rx="20" stroke="" stroke-width="6"></rect>
+                    <path  d="M15.6799 18.8039L15.6267 18.8871C15.0686 19.8741 15.6644 21.1215 16.7361 21.2646C16.8331 21.2765 16.9235 21.2828 17.0118 21.2828C17.5899 21.2828 18.1011 21.0348 18.4574 20.648L19.0107 20.0474L19.5621 20.6498C19.9141 21.0342 20.4241 21.2828 21.0061 21.2828C21.5856 21.2828 22.0985 21.0338 22.4502 20.6498L23.0033 20.0455L23.5565 20.6498C23.9081 21.0338 24.4211 21.2828 25.0005 21.2828C25.58 21.2828 26.0929 21.0338 26.4445 20.6498L26.9977 20.0455L27.5509 20.6498C27.9025 21.0338 28.4155 21.2828 28.9949 21.2828C29.0803 21.2828 29.1733 21.2765 29.2697 21.2647C30.3649 21.1154 30.9627 19.8012 30.324 18.8044C30.324 18.8043 30.324 18.8043 30.3239 18.8042L28.5658 16.0628L28.5658 16.0628L28.5648 16.0614C28.5496 16.0375 28.5121 16.012 28.465 16.012H17.5356C17.4884 16.012 17.4509 16.0375 17.4357 16.0614L17.4351 16.0623L15.6799 18.8039ZM28.6514 23.7372V26.8691V27.6191H27.9014H18.0992H17.3492V26.8691V23.7376C17.239 23.7458 17.1274 23.7501 17.0148 23.7501C16.9725 23.7501 16.9305 23.7494 16.8888 23.7482V26.8691V28.8036C16.8888 29.4471 17.4227 29.9882 18.0992 29.9882H27.9014C28.5779 29.9882 29.1118 29.4471 29.1118 28.8036V26.8691V23.7484C29.072 23.7495 29.032 23.7501 28.9918 23.7501C28.8774 23.7501 28.7639 23.7457 28.6514 23.7372Z" stroke="#000000" stroke-width="1.5"></path></svg> 
+                    <span class="ms-1 sub-title"> {{auditDetails.storeName}}</span>
+            </span>
+
+            
+        <!-- displayName -->
+        <div *ngIf="currentAuditType !== 'remote'" class="d-flex ms-3 align-items-center">
+            <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <path
+                        d="M5.25021 6.50028C5.91329 6.50028 6.54921 6.23689 7.01807 5.76807C7.48694 5.29924 7.75035 4.66337 7.75035 4.00035C7.75035 3.33732 7.48694 2.70146 7.01807 2.23263C6.54921 1.7638 5.91329 1.50042 5.25021 1.50042C4.58713 1.50042 3.95121 1.7638 3.48234 2.23263C3.01348 2.70146 2.75007 3.33732 2.75007 4.00035C2.75007 4.66337 3.01348 5.29924 3.48234 5.76807C3.95121 6.23689 4.58713 6.50028 5.25021 6.50028ZM5.25021 5.25031C4.91867 5.25031 4.60071 5.11862 4.36628 4.88421C4.13184 4.64979 4.00014 4.33186 4.00014 4.00035C4.00014 3.66884 4.13184 3.3509 4.36628 3.11649C4.60071 2.88207 4.91867 2.75038 5.25021 2.75038C5.58175 2.75038 5.89971 2.88207 6.13414 3.11649C6.36857 3.3509 6.50028 3.66884 6.50028 4.00035C6.50028 4.33186 6.36857 4.64979 6.13414 4.88421C5.89971 5.11862 5.58175 5.25031 5.25021 5.25031ZM1.5 8.79188C1.5 7.9869 2.15337 7.33359 2.95841 7.33359H7.542C8.34705 7.33359 9.00042 7.9869 9.00042 8.79188V12.7501C9.00042 13.7446 8.60531 14.6984 7.90201 15.4017C7.1987 16.1049 6.24483 16.5 5.25021 16.5C4.25559 16.5 3.30171 16.1049 2.59841 15.4017C1.89511 14.6984 1.5 13.7446 1.5 12.7501V8.79188ZM2.95841 8.58355C2.90316 8.58355 2.85016 8.6055 2.81109 8.64457C2.77202 8.68364 2.75007 8.73663 2.75007 8.79188V12.7501C2.75007 13.4131 3.01348 14.049 3.48234 14.5178C3.95121 14.9867 4.58713 15.25 5.25021 15.25C5.91329 15.25 6.54921 14.9867 7.01807 14.5178C7.48694 14.049 7.75035 13.4131 7.75035 12.7501V8.79188C7.75035 8.73663 7.7284 8.68364 7.68932 8.64457C7.65025 8.6055 7.59726 8.58355 7.542 8.58355H2.95841ZM7.77285 6.17862C8.15328 6.39267 8.58313 6.5034 9.01963 6.49978C9.45614 6.49616 9.8841 6.37832 10.2609 6.15799C10.6378 5.93766 10.9503 5.62252 11.1675 5.24391C11.3848 4.8653 11.499 4.43642 11.499 3.99993C11.499 3.56344 11.3848 3.13456 11.1675 2.75595C10.9503 2.37734 10.6378 2.0622 10.2609 1.84187C9.8841 1.62154 9.45614 1.50371 9.01963 1.50009C8.58313 1.49647 8.15328 1.60719 7.77285 1.82124C8.04536 2.13623 8.25954 2.50289 8.39955 2.90454C8.58991 2.80026 8.80415 2.74733 9.02118 2.75097C9.23821 2.75462 9.45055 2.81471 9.63731 2.92533C9.82406 3.03594 9.97879 3.19328 10.0863 3.38185C10.1937 3.57042 10.2503 3.78372 10.2503 4.00076C10.2503 4.21781 10.1937 4.43111 10.0863 4.61968C9.97879 4.80825 9.82406 4.96558 9.63731 5.0762C9.45055 5.18682 9.23821 5.24691 9.02118 5.25055C8.80415 5.2542 8.58991 5.20127 8.39955 5.09698C8.26074 5.49382 8.0481 5.86082 7.77285 6.17862ZM8.05036 16.3783C8.35483 16.4583 8.67151 16.4989 9.00042 16.5C9.99503 16.5 10.9489 16.1049 11.6522 15.4017C12.3555 14.6984 12.7506 13.7446 12.7506 12.7501V8.79188C12.7506 8.40512 12.597 8.03419 12.3235 7.76071C12.05 7.48723 11.679 7.33359 11.2922 7.33359H9.30877C9.59462 7.67941 9.78046 8.11107 9.8238 8.58355H11.2905C11.3458 8.58355 11.3988 8.6055 11.4379 8.64457C11.4769 8.68364 11.4989 8.73663 11.4989 8.79188V12.7501C11.4989 13.3968 11.2483 14.0184 10.7996 14.4843C10.351 14.9501 9.73925 15.224 9.09292 15.2484C8.81041 15.6817 8.45872 16.0633 8.05036 16.3783ZM11.5222 6.17862C11.9027 6.39267 12.3325 6.5034 12.769 6.49978C13.2055 6.49616 13.6335 6.37832 14.0103 6.15799C14.3871 5.93766 14.6997 5.62252 14.9169 5.24391C15.1341 4.8653 15.2484 4.43642 15.2484 3.99993C15.2484 3.56344 15.1341 3.13456 14.9169 2.75595C14.6997 2.37734 14.3871 2.0622 14.0103 1.84187C13.6335 1.62154 13.2055 1.50371 12.769 1.50009C12.3325 1.49647 11.9027 1.60719 11.5222 1.82124C11.7947 2.13623 12.0089 2.50289 12.1489 2.90454C12.3393 2.80026 12.5535 2.74733 12.7706 2.75097C12.9876 2.75462 13.1999 2.81471 13.3867 2.92533C13.5734 3.03594 13.7282 3.19328 13.8356 3.38185C13.9431 3.57042 13.9996 3.78372 13.9996 4.00076C13.9996 4.21781 13.9431 4.43111 13.8356 4.61968C13.7282 4.80825 13.5734 4.96558 13.3867 5.0762C13.1999 5.18682 12.9876 5.24691 12.7706 5.25055C12.5535 5.2542 12.3393 5.20127 12.1489 5.09698C12.0101 5.49382 11.7975 5.86082 11.5222 6.17862ZM11.7997 16.3783C12.1042 16.4583 12.4209 16.4989 12.7498 16.5C13.7444 16.5 14.6983 16.1049 15.4016 15.4017C16.1049 14.6984 16.5 13.7446 16.5 12.7501V8.79188C16.5 8.40526 16.3465 8.03447 16.0731 7.76101C15.7998 7.48755 15.4291 7.33381 15.0424 7.33359H13.059C13.3448 7.67941 13.5315 8.11107 13.574 8.58355H15.0408C15.096 8.58355 15.149 8.6055 15.1881 8.64457C15.2271 8.68364 15.2491 8.73663 15.2491 8.79188V12.7501C15.2491 13.3968 14.9985 14.0184 14.5498 14.4843C14.1012 14.9501 13.4895 15.224 12.8431 15.2484C12.5606 15.6817 12.2081 16.0633 11.7997 16.3783Z"
+                        fill="#667085" />
+                </svg></span>
+            <span class="ms-2 sub-title">{{auditDetails?.queueId}}</span>
+        </div>
+        <div *ngIf="currentAuditType === 'remote'" class="d-flex ms-3 align-items-center">
+            <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <path
+                        d="M5.25021 6.50028C5.91329 6.50028 6.54921 6.23689 7.01807 5.76807C7.48694 5.29924 7.75035 4.66337 7.75035 4.00035C7.75035 3.33732 7.48694 2.70146 7.01807 2.23263C6.54921 1.7638 5.91329 1.50042 5.25021 1.50042C4.58713 1.50042 3.95121 1.7638 3.48234 2.23263C3.01348 2.70146 2.75007 3.33732 2.75007 4.00035C2.75007 4.66337 3.01348 5.29924 3.48234 5.76807C3.95121 6.23689 4.58713 6.50028 5.25021 6.50028ZM5.25021 5.25031C4.91867 5.25031 4.60071 5.11862 4.36628 4.88421C4.13184 4.64979 4.00014 4.33186 4.00014 4.00035C4.00014 3.66884 4.13184 3.3509 4.36628 3.11649C4.60071 2.88207 4.91867 2.75038 5.25021 2.75038C5.58175 2.75038 5.89971 2.88207 6.13414 3.11649C6.36857 3.3509 6.50028 3.66884 6.50028 4.00035C6.50028 4.33186 6.36857 4.64979 6.13414 4.88421C5.89971 5.11862 5.58175 5.25031 5.25021 5.25031ZM1.5 8.79188C1.5 7.9869 2.15337 7.33359 2.95841 7.33359H7.542C8.34705 7.33359 9.00042 7.9869 9.00042 8.79188V12.7501C9.00042 13.7446 8.60531 14.6984 7.90201 15.4017C7.1987 16.1049 6.24483 16.5 5.25021 16.5C4.25559 16.5 3.30171 16.1049 2.59841 15.4017C1.89511 14.6984 1.5 13.7446 1.5 12.7501V8.79188ZM2.95841 8.58355C2.90316 8.58355 2.85016 8.6055 2.81109 8.64457C2.77202 8.68364 2.75007 8.73663 2.75007 8.79188V12.7501C2.75007 13.4131 3.01348 14.049 3.48234 14.5178C3.95121 14.9867 4.58713 15.25 5.25021 15.25C5.91329 15.25 6.54921 14.9867 7.01807 14.5178C7.48694 14.049 7.75035 13.4131 7.75035 12.7501V8.79188C7.75035 8.73663 7.7284 8.68364 7.68932 8.64457C7.65025 8.6055 7.59726 8.58355 7.542 8.58355H2.95841ZM7.77285 6.17862C8.15328 6.39267 8.58313 6.5034 9.01963 6.49978C9.45614 6.49616 9.8841 6.37832 10.2609 6.15799C10.6378 5.93766 10.9503 5.62252 11.1675 5.24391C11.3848 4.8653 11.499 4.43642 11.499 3.99993C11.499 3.56344 11.3848 3.13456 11.1675 2.75595C10.9503 2.37734 10.6378 2.0622 10.2609 1.84187C9.8841 1.62154 9.45614 1.50371 9.01963 1.50009C8.58313 1.49647 8.15328 1.60719 7.77285 1.82124C8.04536 2.13623 8.25954 2.50289 8.39955 2.90454C8.58991 2.80026 8.80415 2.74733 9.02118 2.75097C9.23821 2.75462 9.45055 2.81471 9.63731 2.92533C9.82406 3.03594 9.97879 3.19328 10.0863 3.38185C10.1937 3.57042 10.2503 3.78372 10.2503 4.00076C10.2503 4.21781 10.1937 4.43111 10.0863 4.61968C9.97879 4.80825 9.82406 4.96558 9.63731 5.0762C9.45055 5.18682 9.23821 5.24691 9.02118 5.25055C8.80415 5.2542 8.58991 5.20127 8.39955 5.09698C8.26074 5.49382 8.0481 5.86082 7.77285 6.17862ZM8.05036 16.3783C8.35483 16.4583 8.67151 16.4989 9.00042 16.5C9.99503 16.5 10.9489 16.1049 11.6522 15.4017C12.3555 14.6984 12.7506 13.7446 12.7506 12.7501V8.79188C12.7506 8.40512 12.597 8.03419 12.3235 7.76071C12.05 7.48723 11.679 7.33359 11.2922 7.33359H9.30877C9.59462 7.67941 9.78046 8.11107 9.8238 8.58355H11.2905C11.3458 8.58355 11.3988 8.6055 11.4379 8.64457C11.4769 8.68364 11.4989 8.73663 11.4989 8.79188V12.7501C11.4989 13.3968 11.2483 14.0184 10.7996 14.4843C10.351 14.9501 9.73925 15.224 9.09292 15.2484C8.81041 15.6817 8.45872 16.0633 8.05036 16.3783ZM11.5222 6.17862C11.9027 6.39267 12.3325 6.5034 12.769 6.49978C13.2055 6.49616 13.6335 6.37832 14.0103 6.15799C14.3871 5.93766 14.6997 5.62252 14.9169 5.24391C15.1341 4.8653 15.2484 4.43642 15.2484 3.99993C15.2484 3.56344 15.1341 3.13456 14.9169 2.75595C14.6997 2.37734 14.3871 2.0622 14.0103 1.84187C13.6335 1.62154 13.2055 1.50371 12.769 1.50009C12.3325 1.49647 11.9027 1.60719 11.5222 1.82124C11.7947 2.13623 12.0089 2.50289 12.1489 2.90454C12.3393 2.80026 12.5535 2.74733 12.7706 2.75097C12.9876 2.75462 13.1999 2.81471 13.3867 2.92533C13.5734 3.03594 13.7282 3.19328 13.8356 3.38185C13.9431 3.57042 13.9996 3.78372 13.9996 4.00076C13.9996 4.21781 13.9431 4.43111 13.8356 4.61968C13.7282 4.80825 13.5734 4.96558 13.3867 5.0762C13.1999 5.18682 12.9876 5.24691 12.7706 5.25055C12.5535 5.2542 12.3393 5.20127 12.1489 5.09698C12.0101 5.49382 11.7975 5.86082 11.5222 6.17862ZM11.7997 16.3783C12.1042 16.4583 12.4209 16.4989 12.7498 16.5C13.7444 16.5 14.6983 16.1049 15.4016 15.4017C16.1049 14.6984 16.5 13.7446 16.5 12.7501V8.79188C16.5 8.40526 16.3465 8.03447 16.0731 7.76101C15.7998 7.48755 15.4291 7.33381 15.0424 7.33359H13.059C13.3448 7.67941 13.5315 8.11107 13.574 8.58355H15.0408C15.096 8.58355 15.149 8.6055 15.1881 8.64457C15.2271 8.68364 15.2491 8.73663 15.2491 8.79188V12.7501C15.2491 13.3968 14.9985 14.0184 14.5498 14.4843C14.1012 14.9501 13.4895 15.224 12.8431 15.2484C12.5606 15.6817 12.2081 16.0633 11.7997 16.3783Z"
+                        fill="#667085" />
+                </svg></span>
+            <span class="ms-2 sub-title">{{auditDetails?.engagementId ?auditDetails?.engagementId:'--'}}</span>
+        </div>
+        <div class="d-flex ms-3 align-items-center">
+            <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <path
+                        d="M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z"
+                        stroke="#667085" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                </svg></span>
+            <span class="ms-2 sub-title">{{currentAuditType | titlecase}} Eye Test</span>
+        </div>
+        <div class="d-flex ms-3 align-items-center">
+            <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <path
+                        d="M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z"
+                        stroke="#667085" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                </svg></span>
+            <span class="ms-2 sub-title">{{auditDetails?.fileDate | date: 'dd/MM/YYYY'}}</span>
+        </div>
+        <div class="d-flex ms-3 align-items-center">
+            <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <g clip-path="url(#clip0_166_55019)">
+                        <path
+                            d="M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+                            stroke="#667085" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_166_55019">
+                            <rect width="18" height="18" fill="white" />
+                        </clipPath>
+                    </defs>
+                </svg></span>
+            <span class="ms-2 sub-title">{{auditDetails?.testStartTime}} {{auditDetails?.testStartTime?.split(':')[0]>12?'PM':'AM'}} - {{auditDetails?.testEndTime}} {{auditDetails?.testEndTime?.split(':')[0]>12?'PM':'AM'}}
+                ({{auditDetails?.testDuration}} Mins)</span>
+        </div>
+        <span class="ms-3 badge badge-light-primary">{{auditDetails?.visitorsType | titlecase}}</span>
+        <div *ngIf="['Yet-to-Audit'].includes(auditDetails?.auditStatus)"
+            class="text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-primary" style="font-size: 14px;">
+            Yet to Audit
+        </div>
+        <div *ngIf="auditDetails?.auditType === 'Audit'&&auditDetails?.auditStatus === 'Audited'"
+            class="text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-success" style="font-size: 14px;">
+            Audited
+        </div>
+        <div *ngIf="auditDetails?.auditType === 'Re-Audit'&&auditDetails?.auditStatus === 'Audited' || auditDetails?.auditType === 'Re-Audit'&&auditDetails?.auditStatus === 'Re-Audited'"
+            class="text-white ms-3 px-3 py-1 fw-semibold rounded-3 cursor-pointer bg-warning" style="font-size: 14px;">
+            Re-Audited
+        </div>
+    </div>
+</div>
+<div class="row mt-3">
+    <div class="col-sm-3">
+        <div class="card p-3 fw-bold text-center">
+            <div class="p-3 text-center header-card">
+                AI Verified Steps <span><svg ngbTooltip="Number of steps detected and validated automatically without manual review." placement="right" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 
+                        viewBox="0 0 20 20" fill="none">
+                        <g clip-path="url(#clip0_362_2979)">
+                            <path
+                                d="M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z"
+                                stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_362_2979">
+                                <rect width="20" height="20" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg></span>
+            </div>
+            <div class="p-5 text-card">
+                <span>{{auditDetails?.coveredStepsAI?auditDetails?.coveredStepsAI:0}}/{{auditDetails?.totalSteps ? auditDetails?.totalSteps:'--'}}</span>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-3">
+        <div class="card p-3 fw-bold text-center">
+            <div class="p-3 text-center header-card">
+                Human Verified Steps <span><svg ngbTooltip="Number of steps that required human validation to ensure compliance and accuracy." placement="right" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                        viewBox="0 0 20 20" fill="none">
+                        <g clip-path="url(#clip0_362_2979)">
+                            <path
+                                d="M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z"
+                                stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_362_2979">
+                                <rect width="20" height="20" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg></span>
+            </div>
+            <div class="p-5 text-card">
+                <span>{{auditDetails?.auditedSteps?auditDetails?.auditedSteps:0}}/{{auditDetails?.totalSteps ? auditDetails?.totalSteps:'--'}}</span>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-3">
+        <div class="card p-3 fw-bold text-center">
+            <div class="p-3 header-card">
+                AI Compliance Score <span><svg ngbTooltip="Measures the percentage of steps AI flagged as compliant without human intervention." placement="left" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                        viewBox="0 0 20 20" fill="none">
+                        <g clip-path="url(#clip0_362_2979)">
+                            <path
+                                d="M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z"
+                                stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_362_2979">
+                                <rect width="20" height="20" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg></span>
+            </div>
+            <div class="p-5 text-card">
+                <span>{{auditDetails?.complianceScore ?auditDetails?.complianceScore :'--'}}%</span>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-3">
+        <div class="card p-3 fw-bold text-center">
+            <div class="p-3 header-card">
+                AI Trust Score <span><svg ngbTooltip="This score reflects how often AI predictions were accepted without manual overrides." placement="left" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                        fill="none">
+                        <g clip-path="url(#clip0_362_2979)">
+                            <path
+                                d="M9.99984 13.3332V9.99984M9.99984 6.6665H10.0082M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z"
+                                stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_362_2979">
+                                <rect width="20" height="20" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg></span>
+            </div>
+            <div class="p-5 text-card">
+                <span>{{auditDetails?.trustScore ? auditDetails?.trustScore:'--'}}%</span>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row mt-3">
+    <div [ngClass]="eyeTestType ==='fake' ? 'col-md-12' : 'col-md-6'" class="col-sm-6">
+        <div class="card h-500px px-5">
+            <div class="card-header p-0 border-0">
+                <span class="card-title m-0 fw-bolder bg-none">Preview Eye Test</span>
+            </div>
+            <div class="card-body px-0 position-relative">
+                <div class="video-position w-100">
+                    <video class="w-100 rounded-3 h-auto" controls
+                        [src]="auditDetails?.filePath"></video>
+                        <div class="controls mt-2">
+    <label>Playback Speed: </label>
+    <select (change)="changePlaybackSpeed($event)">
+      <option *ngFor="let speed of speeds" [value]="speed">{{ speed }}x</option>
+    </select>
+  </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="eyeTestType !=='fake'" class="col-sm-6">
+        <div class="card h-500px px-5 overflow-scroll">
+            <div class="card-header mb-3 p-0 border-0 d-flex justify-content-between align-items-center">
+                <div class="">
+                    <span class="card-title m-0 fw-bolder bg-none">Step-wise Breakdown</span>
+                   
+                    
+                    <div class="d-flex sub-title mt-2" *ngIf="auditDetails?.lastAuditedDetails?.auditedBy">
+                     <span *ngIf="currentAuditType === 'remote'"> <span *ngIf="auditDetails?.spokenLanguage"> <span *ngIf="!takeAudit" class="badge badge-light-info mt-0 me-2">Language Spoken: {{auditDetails?.spokenLanguage}}</span></span></span>  <span class="mt-1">Recently Audited By : </span>
+                        <span class="ms-2 mt-1"><span class="me-2"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+                                    height="16" viewBox="0 0 16 16" fill="none">
+                                    <path
+                                        d="M13.3337 14V12.6667C13.3337 11.9594 13.0527 11.2811 12.5526 10.781C12.0525 10.281 11.3742 10 10.667 10H5.33366C4.62641 10 3.94814 10.281 3.44804 10.781C2.94794 11.2811 2.66699 11.9594 2.66699 12.6667V14M10.667 4.66667C10.667 6.13943 9.47308 7.33333 8.00033 7.33333C6.52757 7.33333 5.33366 6.13943 5.33366 4.66667C5.33366 3.19391 6.52757 2 8.00033 2C9.47308 2 10.667 3.19391 10.667 4.66667Z"
+                                        stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg></span >{{auditDetails?.lastAuditedDetails?.auditedBy}}</span>
+                        <span class="ms-2 mt-1"><span class="me-2"><svg xmlns="http://www.w3.org/2000/svg" width="18"
+                                    height="18" viewBox="0 0 18 18" fill="none">
+                                    <g clip-path="url(#clip0_152_29431)">
+                                        <path
+                                            d="M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+                                            stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                            stroke-linejoin="round" />
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_152_29431">
+                                            <rect width="18" height="18" fill="white" />
+                                        </clipPath>
+                                    </defs>
+                                </svg></span>{{auditDetails?.lastAuditedDetails?.completionTime}}
+                            {{auditDetails?.lastAuditedDetails?.timeZone}}</span>
+                    </div>
+                    
+                </div>
+                <div class="card-toolbar">
+                    <div *ngIf="takeAudit && currentAuditType === 'remote'" class="d-flex align-items-end me-2">
+                        <select [(ngModel)]="spokenLanguage" class="form-select form-select-sm">
+                            <option selected disabled >Language Spoken <span style="color:red">*</span></option>
+                            <option value="English">English</option>
+                            <option value="Hindi">Hindi</option>
+                        </select></div>
+                <div *ngIf="auditDetails?.auditType === 'Audit'&&auditDetails?.auditStatus === 'Yet-to-Audit' && !takeAudit" (click)="startAudit('audit')"
+                    class="text-white ms-3 px-3 py-2 fw-semibold rounded-2 cursor-pointer bg-primary"
+                    style="font-size: 14px;">
+                    Start Audit
+                </div>
+       
+                <div *ngIf="['Audited','Re-Audit','Yet-to-Audit'].includes(auditDetails?.auditStatus)&&auditDetails?.auditType === 'Re-Audit' && !takeAudit||auditDetails?.auditType === 'Audit'&&auditDetails?.auditStatus === 'Audited' ||auditDetails?.auditType === 'Re-Audit'&&auditDetails?.auditStatus === 'Re-Audited'&& !takeAudit "
+                    (click)="startAudit('Re-Audit')" class="btn btn-sm py-2 btn-warning">Re-Audit</div>
+                <div *ngIf="takeAudit" class="d-flex">
+                    <button class="btn btn-sm btn-outline" [disabled]="disablecancel" (click)="cancel()">Cancel</button>
+                    <button class="btn ms-2 btn-sm btn-success"  [disabled]="disablecancel" (click)="onsubmit()">Submit</button>
+                    
+                </div>
+                </div>
+            </div>
+            <div class="card-body mt-1 px-0">
+                <div *ngIf="!takeAudit && stepWiseProcess?.length" class="table-responsive border border-1 rounded-3">
+                    <table class="w-100 table bottom-border text-nowrap">
+                        <thead>
+                            <tr>
+                                <th class="text-align-left">
+                                    Step-by-step Process
+                                </th>
+                                <th *ngIf="currentAuditType === 'remote'" class="text-align-left">
+                                    Predicted Transcript
+                                </th>
+                                <th class="text-align-left">
+                                    AI Verified
+                                </th>
+                                <th class="text-align-left">
+                                    Human Audited
+                                </th>
+                                <th class="text-align-left">
+                                    Reason for Error
+                                </th>
+                                <th class="text-align-left">
+                                    Noticed Time Range
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let data of stepWiseProcess;let i=index">
+                                <td>
+                                    <div class="d-flex align-items-start">
+                                        <!-- <div class="w-40px h-40px d-flex justify-content-center text-center me-3">
+                                            <img class="w-100 rounded-5" [src]="data?.imageUrl">
+                                        </div> -->
+                                        {{data.processName}}
+                                    </div>
+                                </td>
+                                <td *ngIf="currentAuditType ==='remote'" class="text-capitalize">
+                                    <div class="text-primary1 text-decoration-underline cursor-pointer"
+                                        [ngbTooltip]="data?.predictedTranscript ? tooltipContent : ''"
+                                        placement='bottom'>{{data?.predictedTranscript?data?.predictedTranscript:"N/A"}}</div>
+
+                                    <ng-template #tooltipContent>
+                                        <div class="custom-tooltip-content tooltip-content w-100">
+                                            <span class="min-w-500px">{{data?.predictedTranscript?data?.predictedTranscript:"N/A"}}</span>
+                                        </div>
+                                    </ng-template>
+
+                                </td>
+                                <td class="text-capitalize"><span
+                                        [ngClass]="data.AIStatus ? 'badge badge-light-success' : 'badge badge-light-danger'">{{data.AIStatus
+                                        ? 'pass' : 'fail'}}</span></td>
+                         <td class="text-capitalize">
+                            <span 
+                                  [ngClass]="data?.auditedStatus === true ? 'badge badge-light-success' : (data?.auditedStatus === false ? 'badge badge-light-danger' : '')">
+                              {{ data?.auditedStatus === true ? 'pass' : (data?.auditedStatus === false ? 'fail' : 'N/A') }}
+                            </span>
+                            
+                          </td>
+                          <td *ngIf="data.AIStatus !== data.auditedStatus || data.auditedStatus === null || data.auditedStatus === undefined || data.auditedStatus === ''; else EqualBlock">
+                            <!-- {{ data?.reason || 'N/A' }} -->
+                            <span *ngIf="data.reason !=='others'">{{data.reason || 'N/A'}}</span><span *ngIf="data.reason ==='others'">{{data.otherReason || 'N/A'}}</span>
+                          </td>
+                          <ng-template #EqualBlock>
+                            <td>N/A</td>
+                          </ng-template>
+                                <td>{{data?.startTime}} - {{data?.endTime}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div *ngIf="stepWiseProcess?.length && takeAudit&&auditDetails?.auditStatus==='Yet-to-Audit'||auditDetails?.auditStatus==='In-Progress'">
+                    <div *ngFor="let process of stepWiseProcess; let i=index ;let last=last"
+                        class="border border-1 rounded-3 mb-3">
+                        <table class="w-100 table bottom-border text-nowrap">
+                            <thead>
+                                <tr>
+                                    <th class="text-primary bg-light-primary text-align-left">
+                                        Step-{{i+1 | number}}
+                                    </th>
+                                    <th class="text-primary bg-light-primary text-align-left">
+                                        AI Verified
+                                    </th>
+                                    <th class="text-primary bg-light-primary text-align-left">
+                                        Human Audited
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="w-200px">
+                                        <!-- <div class="d-flex align-items-start"> -->
+                                            <!-- <div class="w-40px h-40px d-flex justify-content-center text-center me-3">
+                                                <img class="w-100 rounded-5" [src]="process.imageUrl">
+                                            </div> -->
+                                            {{process.processName}}
+                                        <!-- </div> -->
+                                    </td>
+                                    <td><span *ngIf="process.AIStatus" class="badge badge-light-success text-capitalize">Pass</span>
+                                        <span *ngIf="!process.AIStatus" class="badge badge-light-danger text-capitalize">Fail</span>
+                                    </td>
+                                    <td>
+                                        <div class="d-flex justify-content-start">
+                                            <div (click)="selectHumanVerified(i,true)"
+                                                [ngClass]="process?.auditedStatus ? 'text-white btn-success' : 'text-success bg-white border border-success'"
+                                                class="btn btn-sm  rounded-5"><span><svg
+                                                        xmlns="http://www.w3.org/2000/svg" width="17" height="16"
+                                                        viewBox="0 0 17 16" fill="none">
+                                                        <path d="M14.1667 4L6.83333 11.3333L3.5 8"
+                                                            [attr.stroke]="process?.auditedStatus ? 'white' : '#17C653'"
+                                                            stroke-width="1.25" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span><span class="ms-2">Pass</span></div>
+
+                                            <div (click)="selectHumanVerified(i,false)"
+                                                [ngClass]="process?.auditedStatus===false ? 'text-white bg-danger' : 'text-danger bg-white border border-danger'"
+                                                class="ms-3 px-5 py-2 fw-semibold rounded-5 cursor-pointer rounded-5">
+                                                <span>
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16"
+                                                        viewBox="0 0 17 16" fill="none">
+                                                        <path d="M12.6665 4L4.6665 12M4.6665 4L12.6665 12"
+                                                            [attr.stroke]="process?.auditedStatus===false ? 'white' : '#F8285A'"
+                                                            stroke-width="1.25" stroke-linecap="rowund"
+                                                            stroke-linejoin="round" />
+                                                    </svg>
+                                                </span><span class="ms-2">Fail</span></div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div *ngIf="currentAuditType === 'remote' && process?.predictedTranscript" class="w-100">
+                            <div class="bg-light-primary text-primary p-3">
+                                Predicted Transcript
+                            </div>
+                            <div class="row col-sm-12 p-5">
+                                <div class="text-primary text-decoration-underline cursor-pointer"
+                                    [ngbTooltip]="process?.predictedTranscript ? tooltipContent : ''"
+                                    placement='bottom'>
+                                    {{process?.predictedTranscript}}
+                                </div>
+                                <ng-template #tooltipContent>
+                                    <div class="custom-tooltip-content tooltip-content w-100">
+                                        <span class="min-w-500px">{{process?.predictedTranscript}}</span>
+                                    </div>
+                                </ng-template>
+                            </div>
+                        </div>
+                        <div *ngIf="process?.auditedStatus !== undefined && process?.auditedStatus !== '' && process?.auditedStatus !== process?.AIStatus" class="w-100">
+                            <div class="bg-light-primary text-primary p-3">
+                                Reason & Time Stamp
+                            </div>
+                            <div class="row col-sm-12 p-5">
+                                <div class="col-sm-6 col-md-6">
+                                    <div>
+                                      <div (click)="toggleDropdown(i,'reason')" class="custom-dropdown">
+                                        <div class="d-flex justify-content-between">
+                                          <span class="text-select">
+                                            {{ process?.reason ? process?.reason : 'Select Reason' }}
+                                          </span>
+                                          <span>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                              <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.66667"
+                                                stroke-linecap="round" stroke-linejoin="round" />
+                                            </svg>
+                                          </span>
+                                        </div>
+                                  
+                                        <div [ngClass]="last ? 'dropdown-content1' : 'dropdown-content'" *ngIf="dropdownOpen[i]?.reason">
+                                          <div class="scroll-container">
+                                            <!-- Minutes List -->
+                                            <div class="item my-2 minutes-scroll">
+                                              <ul *ngFor="let item of dropdownList" class="list-unstyled">
+                                                <li [ngClass]="process?.reason === item?.key ? 'active' : ''"
+                                                    class="camera px-5 items fw-semibold cursor-pointer py-2"
+                                                    (click)="selectReason(i, item?.key, 'reason')">
+                                                  {{ item?.item }}
+                                                </li>
+                                              </ul>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                  
+                                      <!-- Custom Input for "Others" -->
+                                      <div *ngIf="process?.reason === 'others'" class="mt-2">
+                                        <input 
+                                          type="text" 
+                                          [(ngModel)]="process.otherReason" 
+                                          placeholder="Enter your reason" 
+                                          class="form-control form-control-sm" />
+                                      </div>
+                                    </div>
+                                  </div>
+                                  
+                                <div class="col-sm-3">
+                                    <div class="w-100">
+                                        <div (click)="toggleDropdown(i,'startTime')" class="custom-dropdown">
+                                            <label class="label fw-semibold bg-white px-2">Start</label>
+                                            <div class="text-select">{{process?.startTime ? process?.startTime
+                                                :'MM:SS'}}</div>
+
+                                            <div [ngClass]="last ? 'dropdown-content1' : 'dropdown-content'"
+                                                *ngIf="dropdownOpen[i]?.startTime">
+                                                <div class="scroll-container">
+                                                    <!-- Minutes List -->
+                                                    <div class="scroll-section minutes-scroll ">
+                                                        <div *ngFor="let min of minutesList"
+                                                            (click)="selectMinute(i,min,'startTime')"
+                                                            [class.selected]="min === selectedMinutes">
+                                                            {{ min }}
+                                                        </div>
+                                                    </div>
+                                                    <!-- Seconds List -->
+                                                    <div class="scroll-section seconds-scroll">
+                                                        <div *ngFor="let sec of secondsList"
+                                                            (click)="selectSecond(i,sec,'startTime')"
+                                                            [class.selected]="sec === selectedSeconds">
+                                                            {{ sec }}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-sm-3">
+                                    <div class="w-100">
+                                        <div (click)="toggleDropdown(i,'endTime')" class="custom-dropdown">
+                                            <label class="label fw-semibold bg-white px-2">End</label>
+                                            <div class="text-select"><span>{{process.endTime ? process.endTime :
+                                                    'MM:SS'}}</span></div>
+
+                                            <div [ngClass]="last ? 'dropdown-content1' : 'dropdown-content'"
+                                                *ngIf="dropdownOpen[i]?.endTime">
+                                                <div class="scroll-container">
+                                                    <!-- Minutes List -->
+                                                    <div class="scroll-section minutes-scroll">
+                                                        <div *ngFor="let min of minutesList"
+                                                        [class.selected]="min === selectedMinutes"
+                                                        [class.disabled]="getSecondsFromTime(min + ':' + selectedSeconds) <= getSecondsFromTime(process.startTime)"
+                                                        (click)="
+                                                           getSecondsFromTime(min + ':' + selectedSeconds) > getSecondsFromTime(process.startTime)
+                                                           && selectMinute(i,min,'endTime')">
+                                                     {{ min }}
+                                                   </div>
+                                                   
+                                                    </div>
+                                                    <!-- Seconds List -->
+                                                    <div class="scroll-section seconds-scroll">
+                                                        <div *ngFor="let sec of secondsList"
+                                                        [class.selected]="sec === selectedSeconds"
+                                                        [class.disabled]="getSecondsFromTime(selectedMinutes + ':' + sec) <= getSecondsFromTime(process.startTime)"
+                                                        (click)="
+                                                           getSecondsFromTime(selectedMinutes + ':' + sec) > getSecondsFromTime(process.startTime)
+                                                           && selectSecond(i,sec,'endTime')">
+                                                     {{ sec }}
+                                                   </div>
+                                                   
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div *ngIf="!stepWiseProcess?.length">
+                    <div *ngIf="(tableLoading | async) === 'loading'"
+                        class="card 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="(tableLoading | async) === 'loaded'" class="row mt-2">
+                        <div *ngIf="noData" class="col-lg-12">
+                            <div class="card-body my-8 d-flex justify-content-center align-items-center flex-column">
+                                <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                <div class="nodata-title">No data found</div>
+                                <div class="nodata-sub">There is no result for the test</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card mt-3 p-2">
+    <div class="card-header border-0 pt-3">
+        <h3 class="card-title align-items-start flex-column">
+            <span class="title-text mb-2">History</span>
+        </h3>
+    </div>
+    <div class="card-body py-0 px-3">
+        <div class="table-responsive border border-1 rounded-3" *ngIf="historyData?.length">
+            <table class="w-100 table bottom-border text-nowrap">
+                <thead>
+                    <tr>
+                        <th class="text-start">Audited By</th>
+                        <th>Audited Date</th>
+                        <th>Time Stamp</th>
+                        <th>View Logs</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of historyData">
+                        <td>{{item.userName}}</td>
+                        <td>{{item.Date}}</td>
+                        <td>{{item.Time}} IST</td>
+                        <td (click)="viewHistoryModel(item)" class="cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="16"
+                                viewBox="0 0 20 16" fill="none">
+                                <path
+                                    d="M0.833496 8.00016C0.833496 8.00016 4.16683 1.3335 10.0002 1.3335C15.8335 1.3335 19.1668 8.00016 19.1668 8.00016C19.1668 8.00016 15.8335 14.6668 10.0002 14.6668C4.16683 14.6668 0.833496 8.00016 0.833496 8.00016Z"
+                                    stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path
+                                    d="M10.0002 10.5002C11.3809 10.5002 12.5002 9.38087 12.5002 8.00016C12.5002 6.61945 11.3809 5.50016 10.0002 5.50016C8.61945 5.50016 7.50016 6.61945 7.50016 8.00016C7.50016 9.38087 8.61945 10.5002 10.0002 10.5002Z"
+                                    stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div *ngIf="!historyData?.length">
+            <div *ngIf="(historytableLoading | async) === 'loading'"
+                class="card 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="(historytableLoading | async) === 'loaded'" class="row mt-2">
+                <div class="col-lg-12">
+                    <div class="card-body my-8 d-flex justify-content-center align-items-center flex-column">
+                        <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                        <div class="nodata-title">No data found</div>
+                        <div class="nodata-sub">There is no result for the test</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<ng-template #viewHistory let-model>
+    <div class="p-5 ts700px scroll">
+
+
+        <div class="card-body py-0 ">
+            <div class="my-2 d-flex">
+<svg xmlns="http://www.w3.org/2000/svg" width="46"
+                            height="46" viewBox="0 0 56 56" fill="none">
+                            <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF" />
+                            <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8" />
+                            <path
+                                d="M28 22V28L32 30M38 28C38 33.5228 33.5228 38 28 38C22.4772 38 18 33.5228 18 28C18 22.4772 22.4772 18 28 18C33.5228 18 38 22.4772 38 28Z"
+                                stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    <span
+                        class="ms-3 pt-2 fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer">Audit
+                        History</span>
+            </div>
+            <div class="table-responsive" *ngIf="historyData?.length">
+                <table class="w-100 table bottom-border text-nowrap">
+                    <thead>
+                        <tr>
+                            <th class="text-start">Step-by-Step Process</th>
+                            <th>Status changed from</th>
+                            <th>Noted Time Range</th>
+                            <th>Reason for Error</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of viewHistoryData">
+                            <td>{{item.processName}}</td>
+                            <td>
+                                <span *ngIf="item.AIStatus" class="badge badge-light-success me-2">Pass</span>
+                                <span *ngIf="!item.AIStatus" class="badge badge-light-danger me-2">Fail</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="31" height="8" viewBox="0 0 31 8"
+                                    fill="none">
+                                    <path
+                                        d="M30.3536 4.35355C30.5488 4.15829 30.5488 3.84171 30.3536 3.64645L27.1716 0.464466C26.9763 0.269204 26.6597 0.269204 26.4645 0.464466C26.2692 0.659728 26.2692 0.976311 26.4645 1.17157L29.2929 4L26.4645 6.82843C26.2692 7.02369 26.2692 7.34027 26.4645 7.53553C26.6597 7.7308 26.9763 7.7308 27.1716 7.53553L30.3536 4.35355ZM0 4.5H30V3.5H0V4.5Z"
+                                        fill="#D0D5DD" />
+                                </svg>
+                                <span *ngIf="item.auditedStatus" class="badge badge-light-success ms-2">Pass</span>
+                                <span *ngIf="!item.auditedStatus" class="badge badge-light-danger ms-2">Fail</span>
+                            </td>
+                            <td ><span class="badge badge-light-success" *ngIf="item.startTime">Noted Time Range : <span class="text-dark1">{{item.startTime ? item.startTime:'--'}} - {{item.endTime}}</span></span></td>
+                            <td class="engage-text"><span *ngIf="item.reason !=='others'">{{item.reason}}</span><span *ngIf="item.reason ==='others'">{{item.otherReason}}</span></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #viewCancel let-model>
+    <div class="card group-delete py-0">
+        <div class="card-body py-0 d-flex flex-start flex-column p-9 ">
+            <div class="my-5">
+                <div class="symbol symbol-75px symbol-circle">
+                    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/>
+                        <rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/>
+                        <path d="M27.9988 24V28M27.9988 32H28.0088M26.2888 18.86L17.8188 33C17.6442 33.3024 17.5518 33.6453 17.5508 33.9945C17.5498 34.3437 17.6403 34.6871 17.8132 34.9905C17.9862 35.2939 18.2355 35.5467 18.5365 35.7238C18.8375 35.9009 19.1796 35.9961 19.5288 36H36.4688C36.818 35.9961 37.1601 35.9009 37.4611 35.7238C37.7621 35.5467 38.0114 35.2939 38.1844 34.9905C38.3573 34.6871 38.4478 34.3437 38.4468 33.9945C38.4458 33.6453 38.3534 33.3024 38.1788 33L29.7088 18.86C29.5305 18.5661 29.2795 18.3231 28.98 18.1544C28.6805 17.9858 28.3425 17.8972 27.9988 17.8972C27.6551 17.8972 27.3171 17.9858 27.0176 18.1544C26.7181 18.3231 26.4671 18.5661 26.2888 18.86Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>  
+                </div>
+            </div>
+            <a class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer">Are you sure?</a>
+            <span  class="sub-title fw-normal mt-2">Would you like to cancel this?</span>
+    
+            <div class="mt-5 w-100">
+             
+                    <div role="group" class="d-flex mt-3 mb-15">
+                        <button class="btn btn-outline w-100 me-3" (click)="OnCancel()">No</button>
+                        <button id="alert-toast" class="btn btn-danger w-100 ms-3" (click)="onYes()">Yes</button>
+                       
+                    </div>
+               
+            </div>
+    
+        </div>
+    </div>
+</ng-template>