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

package/src/lib/components/task-configure/task-configure.interface.ts

@@ -0,0 +1,138 @@
+
+export type AnswerType = 'descriptive' | 'yes/no' | 'multiplechoicesingle' | 'multiplechoicemultiple' | 'descriptiveImage' | 'image' | 'video' | 'multipleImage' | 'date' | 'linearscale' | 'time';
+
+export type DescriptiveType = 'text' | 'number' | '' ;
+
+export type ValidationType = 'Capture Image' | 'Descriptive Answer' | 'Capture Video' | '';
+
+export interface ITask {
+  alert: {
+    usageExceeds: any | null;
+    alertsTo: any[];
+  };
+  _id: string;
+  type: string;
+  checkListNumber: number;
+  checkListName: string;
+  checkListDescription: string;
+  createdBy: string;
+  createdByName: string;
+  publish: boolean;
+  schedule: string;
+  scheduleRepeatedDay: string[];
+  scheduleStartTime: string;
+  scheduleEndTime: string;
+  configStartDate: string | null;
+  configEndDate: string | null;
+  specificDate: string[];
+  scheduleWeekDays: string[];
+  scheduleRepeatedMonthSetup: string;
+  scheduleRepeatedMonthDate: string;
+  allowedOverTime: boolean;
+  allowedStoreLocation: boolean;
+  detectionArea: any[];
+  client_id: string;
+  questionCount: number;
+  storeCount: number;
+  checkListType: string;
+  isdeleted: boolean;
+  markasread: boolean;
+  allowedMultiSubmit: boolean;
+  allowOnce: boolean;
+  scheduleRepeatedMonthWeek: string;
+  scheduleRepeatedType: string;
+  scheduleDate: string | null;
+  createdAt: string;
+  updatedAt: string;
+  locationCount: number;
+  publishDate: string;
+  scheduleEndTimeISO: string;
+  scheduleStartTimeISO: string;
+  assignedUsers: any[];
+  assign: any[];
+  removedUsers: any[];
+  sections: Section[];
+  approver: {id:string, email:string, userName:string}[],
+  priorityType:string,
+  restrictAttendance:boolean,
+  remainder?:number[]
+  
+}
+
+export interface Section {
+  id: string;
+  name: string;
+  questions: Question[];
+}
+
+export interface Question {
+  qno?: number;
+  qname: string;
+  answerType: AnswerType;
+  runAI: boolean;
+  runAIDescription: string;
+  allowUploadfromGallery: boolean;
+  linkType: boolean;
+  questionReferenceImage: string;
+  answers: Answer[];
+  descriptivetype?:DescriptiveType
+
+}
+
+export interface Answer {
+  answer: string;
+  answeroptionNumber?: number;
+  sopFlag: boolean;
+  validation: boolean;
+  validationType: ValidationType;
+  referenceImage: string;
+  showLinked: boolean;
+  linkedQuestion: number;
+  nestedQuestion:any[]
+  validationAnswer?:string,
+  allowUploadfromGallery?: boolean;
+  runAI?: boolean;
+  rangeStart?: number;
+  rangeEnd?: number;
+  descriptivetype?:DescriptiveType;
+}
+
+
+interface DateRange {
+  startDate: string;
+  endDate: string;
+}
+
+interface Store {
+  storeId: string;
+  storeName: string;
+  checked: boolean;
+}
+
+interface Group {
+  city: string;
+  checked: boolean;
+}
+
+export interface HeaderFilter {
+  client: string;
+  clientName: string;
+  clients: string[];
+  store: null | string;
+  date: DateRange;
+  stores: Store[];
+  group: Group[];
+}
+
+export interface UserAssignDetails {
+  id: string;
+  userName: string;
+  userEmail: string;
+  store_id: string;
+  storeName: string;
+  clusterName: string;
+  teamName: string;
+  userPhone: string;
+  city: string;
+  checkFlag: boolean;
+}

package/src/lib/components/task-info/task-info.component.html

@@ -0,0 +1,390 @@
+<div class="col-lg-12 mt-4">
+    <div class="card">
+        <div class="card-header border-0 pt-3">
+            <div class="d-flex flex-column">
+                <div class="d-flex flex-wrap my-2 pe-2">
+                    <a [routerLink]="['/manage/trax/dashboard/task']" class="d-flex align-items-center me-3 cursor-pointer">
+                        <span><svg width="44" height="44" viewBox="0 0 44 44" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <g filter="url(#filter0_d_987_30898)">
+                                    <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="M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667"
+                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </g>
+                                <defs>
+                                    <filter id="filter0_d_987_30898" 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_987_30898" />
+                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_987_30898"
+                                            result="shape" />
+                                    </filter>
+                                </defs>
+                            </svg>
+                        </span>
+                    </a>
+                    <!-- <form class="mt-1 me-3 cursor-pointer" style="min-width: 200px;" [formGroup]="form">
+                        <lib-select [items]="taskDropdown" [multi]="false" [searchField]="'checkListName'"
+                            [idField]="'_id'" [selectedValues]="[selectedTask]" (selected)="onTaskSelect($event)">
+                        </lib-select>
+                    </form> -->
+                    <div class="d-flex">
+                        <input type="text" class="form-control ps-10 ms-4 footfallsearch" value="{{taskName}}" readonly/>
+                    </div>
+                    <div class="checklist-details d-flex flex-wrap">
+                        <div class="d-flex align-items-center me-3 checklisttext">
+                            <span><svg class="mx-2 mb-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                    viewBox="0 0 16 16" fill="none">
+                                    <path
+                                        d="M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z"
+                                        stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg><span class="mt-2">{{ selectedTask?.createdByName || '--' }}</span></span>
+                        </div>
+
+                        <div class="d-flex align-items-center me-3 checklisttext">
+                            <span><svg class="mx-2 mb-1" 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> {{ totalItems || '--' }} {{selectedTask?.coverage === 'store' ? 'Stores' : 'Users'}}</span>
+                        </div>
+                        <div class="d-flex align-items-center me-3 checklisttext">
+                            <span><svg class="mx-2 mb-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                                <path d="M13.0387 15.7501C12.2028 15.7501 11.4937 15.4591 10.9117 14.8771C10.3298 14.2941 10.0388 13.5851 10.0388 12.7501C10.0388 11.9151 10.3298 11.2061 10.9117 10.6231C11.4937 10.0411 12.2028 9.75005 13.0387 9.75005C13.8737 9.75005 14.5825 10.0411 15.165 10.6231C15.7475 11.2051 16.0388 11.9141 16.0387 12.7501C16.0387 13.5856 15.7475 14.2946 15.165 14.8771C14.5825 15.4596 13.8737 15.7506 13.0387 15.7501ZM13.3267 12.6263V10.8751C13.3267 10.7981 13.298 10.7306 13.2405 10.6726C13.1825 10.6151 13.115 10.5863 13.038 10.5863C12.9615 10.5863 12.8942 10.6153 12.8363 10.6733C12.7787 10.7308 12.75 10.7981 12.75 10.8751V12.6248C12.75 12.7013 12.764 12.7753 12.792 12.8468C12.82 12.9188 12.8665 12.9876 12.9315 13.0531L14.0753 14.1968C14.1313 14.2523 14.1973 14.2826 14.2733 14.2876C14.3492 14.2926 14.4198 14.2623 14.4847 14.1968C14.5503 14.1318 14.583 14.0636 14.583 13.9921C14.583 13.9206 14.5505 13.8523 14.4855 13.7873L13.3267 12.6263ZM4.21125 15.0001C3.87825 15.0001 3.59325 14.8813 3.35625 14.6438C3.11875 14.4068 3 14.1218 3 13.7888V4.2113C3 3.8783 3.11875 3.5933 3.35625 3.3563C3.59325 3.1188 3.87825 3.00005 4.21125 3.00005H7.689C7.759 2.70655 7.91475 2.46005 8.15625 2.26055C8.39775 2.06105 8.679 1.9613 9 1.9613C9.327 1.9613 9.6105 2.0613 9.8505 2.2613C10.0905 2.4603 10.2455 2.70655 10.3155 3.00005H13.788C14.1215 3.00005 14.4067 3.1188 14.6437 3.3563C14.8812 3.5933 15 3.8783 15 4.2113V8.7263C14.871 8.6598 14.749 8.60155 14.634 8.55155C14.519 8.50155 14.391 8.4568 14.25 8.4173V4.2113C14.25 4.0963 14.202 3.99055 14.106 3.89405C14.0095 3.79805 13.9038 3.75005 13.7887 3.75005H12V4.8173C12 4.9888 11.9425 5.1328 11.8275 5.2493C11.7125 5.3653 11.57 5.4233 11.4 5.4233H6.6C6.43 5.4233 6.2875 5.3653 6.1725 5.2493C6.0575 5.1328 6 4.9888 6 4.8173V3.75005H4.21125C4.09625 3.75005 3.9905 3.79805 3.894 3.89405C3.798 3.99055 3.75 4.0963 3.75 4.2113V13.7888C3.75 13.9233 3.79325 14.0338 3.87975 14.1203C3.96625 14.2068 4.07675 14.2501 4.21125 14.2501H8.8065C8.8465 14.3901 8.89375 14.5203 8.94825 14.6408C9.00325 14.7608 9.07325 14.8806 9.15825 15.0001H4.212H4.21125ZM9.00225 3.92255C9.17475 3.92255 9.3185 3.86455 9.4335 3.74855C9.5485 3.63155 9.606 3.48705 9.606 3.31505C9.606 3.14255 9.54775 2.9988 9.43125 2.8838C9.31425 2.7688 9.16975 2.7113 8.99775 2.7113C8.82525 2.7113 8.6815 2.7698 8.5665 2.8868C8.4515 3.0033 8.394 3.14755 8.394 3.31955C8.394 3.49205 8.4525 3.6358 8.5695 3.7508C8.686 3.8658 8.83025 3.92255 9.00225 3.92255Z" fill="#667085"/>
+                                </svg><span ngbTooltip="Due Date" placement="top"
+                                triggers="mouseenter:mouseleave"
+                                tooltipClass="custom-tooltip">{{ selectedTask?.scheduleEndTime_iso || "--" }}</span></span>
+                        </div>
+                    </div>
+                </div>
+                <!--end::Info-->
+            </div>
+            <div class="card-toolbar">
+                <div class="d-flex">
+
+                    <div>
+                        <form class="mt-1" [formGroup]="form">
+                            <div class="col-md-4 w-200px">
+                                <!-- *ngIf="refreshTaskDropdown" -->
+                                <lib-reactive-select  [formControl]="selectedlistselectControl" [idField]="'_id'"
+                                    [nameField]="'label'" [data]="statusselectControl" class="w-200px"
+                                    (valueChange)="onValueChangeStatusSelect($event)">
+                                    <ng-template let-item>
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <span>{{ item.label }}</span>
+                                            <span class="d-flex align-items-center">
+                                                <!-- <span class="status-text">Status</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="#344054" stroke-width="1.67"
+                                                        stroke-linecap="round" stroke-linejoin="round" />
+                                                </svg>
+                                            </span>
+                                        </div>
+                                    </ng-template>
+                                </lib-reactive-select>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="d-flex align-items-center  position-relative my-1">
+                        <span class="svg-icon footfallsearch svg-icon-1 position-absolute  ms-8">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none">
+                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
+                                    transform="rotate(45 17.0365 15.1223)" fill="currentColor">
+                                </rect>
+                                <path
+                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                    fill="currentColor"></path>
+                            </svg>
+                        </span>
+                        <!-- [disabled]="searchDisabled" -->
+                        <input [(ngModel)]="searchInput" type="text" class="form-control ps-14 ms-4 footfallsearch"
+                            placeholder="Search" autocomplete="off" (keyup.enter)="searchField()" />
+                            <button type="button" (click)="onExport()"
+                            class="btn-outline btn align-items-end text-nowrap invheader ms-4"
+                            [disabled]="!TaskInfoData.length">
+                            <!-- Export Icon -->
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                fill="none">
+                                <path
+                                    d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5"
+                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                    stroke-linejoin="round"></path>
+                            </svg>
+                            <span class="ms-2"></span> Export
+                        </button>  
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="card-body p-0">
+            <div class="table-responsive">
+
+                <table *ngIf="!taskInfoLoading && !taskInfoNoData" class="table text-nowrap bottom-border">
+                    <thead>
+                        <tr>
+                            <th class="cursor-pointer" (click)="sortData('storeName')">Store
+                                <svg [ngClass]="sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'storeName' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                            <th class="cursor-pointer" (click)="sortData('userEmail')">User Name
+                                <svg [ngClass]="sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'userEmail' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                            <th class="cursor-pointer" (click)="sortData('userEmail')">User Email
+                                <svg [ngClass]="sortColumName === 'userEmail' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'userEmail' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                            <th *ngIf="showZoneData" class="cursor-pointer" (click)="sortData('zoneName')">Type
+                                <svg [ngClass]="sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'zoneName' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                            <th>Due on</th>
+                            <th>Status</th>
+                            <th class="cursor-pointer" (click)="sortData('submitTime_string')">Submitted On
+                                <svg [ngClass]="sortColumName === 'submitTime_string' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                    fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'submitTime_string' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                            </th>
+                            <th >Approved By</th>
+                            <!-- class="cursor-pointer" (click)="sortData('approvalTime_string')" -->
+                            <th >Approved On
+                                <!-- <svg [ngClass]="sortColumName === 'approvalTime_string' && sortDirection === 1 ? 'rotate' : ''"
+                                    xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                    viewBox="0 0 16 16" fill="none">
+                                    <path
+                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                        [attr.stroke]="sortColumName === 'approvalTime_string' ? '#00A3FF' : '#667085'"
+                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg> -->
+                            </th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let taskinfo of TaskInfoData">
+                            <!-- (click)="storeView(taskinfo)" -->
+                            <td>
+                                <span 
+                                    class="table-title">{{ taskinfo.storeName || '--' }}</span>
+                            </td>
+                            <td>
+                                <div class="table-title">
+                                    {{ taskinfo.userName || '--' }}
+                                </div>
+                            </td>
+                            <td>
+                                <div class="table-title">
+                                    {{ taskinfo.userEmail || '--' }}
+                                </div>
+                            </td>
+                            <td *ngIf="showZoneData">
+                                <div class="table-title">
+                                    {{ taskinfo.zoneName || '--' }}
+                                </div>
+                            </td>
+                            <td>
+                                <div class="table-title">{{ taskinfo.scheduleEndTime_iso ?
+                                    taskinfo.scheduleEndTime_iso.toLocaleString('en-US', {
+                                    minimumFractionDigits: 0 }) :
+                                    '--' }}</div>
+                            </td>
+                            <td>
+                                <span class="badge" [ngClass]="{
+                                    'badge-light-danger': taskinfo.checklistStatus === 'Open',
+                                    'badge-light-primary': taskinfo.checklistStatus === 'In Progress',
+                                    'badge-light-success': taskinfo.checklistStatus === 'Submitted'
+                                }"> <span *ngIf="taskinfo.redoStatus"><svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 12 14" fill="none">
+                                    <g clip-path="url(#clip0_7166_57025)">
+                                        <path 
+                                            d="M0.5 2.66674V5.91674M0.5 5.91674H3.5M0.5 5.91674L2.82 3.55507C3.51046 2.80834 4.40623 2.32493 5.37234 2.17768C6.33845 2.03042 7.32257 2.22731 8.17642 2.73865C9.03026 3.25 9.70758 4.04812 10.1063 5.01275C10.505 5.97738 10.6036 7.05627 10.3871 8.08685C10.1706 9.11744 9.65084 10.0439 8.90606 10.7266C8.16129 11.4093 7.23187 11.8113 6.25786 11.8721C5.28384 11.9328 4.31799 11.649 3.50583 11.0633C2.69367 10.4777 2.0792 9.62195 1.755 8.62507"
+                                            [attr.stroke]="getRedoSvgColor(taskinfo.checklistStatus)"
+                                            stroke-width="2" 
+                                            stroke-linecap="round" 
+                                            stroke-linejoin="round" />
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_7166_57025">
+                                            <rect width="12" height="13" fill="white" transform="translate(0 0.5)" />
+                                        </clipPath>
+                                    </defs>
+                                </svg></span>
+                                    {{ taskinfo.checklistStatus | titlecase }}
+                                </span>
+
+                            </td>
+                            <td>
+                                <div class="table-title">{{ taskinfo.submitTime_string ?
+                                    taskinfo.submitTime_string.toLocaleString('en-US', {
+                                    minimumFractionDigits: 0 }) :
+                                    '--' }}</div>
+                            </td>
+                            <td>
+                                <div class="table-title">{{ taskinfo.approvalByEmail || "--" }}</div>
+                            </td>
+                            <td>
+                                <div class="table-title">{{ taskinfo.approvalTime_string?.toLocaleString('en-US', {
+                                    minimumFractionDigits: 0 }) || '--' }}</div>
+                            </td>
+                            <td>
+                                <div class="d-flex">
+                                    <a *ngIf="taskinfo.checklistStatus !== 'Open' && taskinfo.checklistStatus !== 'In Progress'"
+                                    (click)="navigateToGallery(taskinfo)" class="cursor-pointer table-title">
+                                        <span>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <path
+                                                    d="M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z"
+                                                    stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                                <path
+                                                    d="M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z"
+                                                    stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg>
+                                        </span></a>
+                                    <a *ngIf="taskinfo.checklistStatus === 'Open' || taskinfo.checklistStatus === 'In Progress' && taskinfo.checklistStatus !== 'Submitted'"
+                                        class="table-title">
+                                        <span ngbTooltip="Required Submitted status" placement="top"
+                                        triggers="mouseenter:mouseleave"
+                                        tooltipClass="custom-tooltip">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <path
+                                                    d="M0.832031 9.99992C0.832031 9.99992 4.16536 3.33325 9.9987 3.33325C15.832 3.33325 19.1654 9.99992 19.1654 9.99992C19.1654 9.99992 15.832 16.6666 9.9987 16.6666C4.16536 16.6666 0.832031 9.99992 0.832031 9.99992Z"
+                                                    stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                                <path
+                                                    d="M9.9987 12.4999C11.3794 12.4999 12.4987 11.3806 12.4987 9.99992C12.4987 8.61921 11.3794 7.49992 9.9987 7.49992C8.61799 7.49992 7.4987 8.61921 7.4987 9.99992C7.4987 11.3806 8.61799 12.4999 9.9987 12.4999Z"
+                                                    stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg>
+                                        </span></a>
+                                    
+                                 
+                                    <a *ngIf="taskinfo.checklistStatus !== 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit"
+                                        (click)="taskinfoedit(taskinfo)"
+                                        class="cursor-pointer ms-6">
+                                        <span>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <g clip-path="url(#clip0_5271_17556)">
+                                                    <path
+                                                        d="M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z"
+                                                        stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                                        stroke-linejoin="round" />
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_5271_17556">
+                                                        <rect width="20" height="20" fill="white" />
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span></a>
+                                        <a *ngIf="taskinfo.checklistStatus === 'Submitted' && (gs.userAccess | async)?.TangoTrax_Task_isEdit" class="ms-6">
+                                            <span ngbTooltip="Required Open or In Progress status" placement="top"
+                                            triggers="mouseenter:mouseleave"
+                                            tooltipClass="custom-tooltip">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                    viewBox="0 0 20 20" fill="none">
+                                                    <g clip-path="url(#clip0_5271_17556)">
+                                                        <path
+                                                            d="M14.168 2.49993C14.3868 2.28106 14.6467 2.10744 14.9326 1.98899C15.2186 1.87054 15.5251 1.80957 15.8346 1.80957C16.1442 1.80957 16.4507 1.87054 16.7366 1.98899C17.0226 2.10744 17.2824 2.28106 17.5013 2.49993C17.7202 2.7188 17.8938 2.97863 18.0122 3.2646C18.1307 3.55057 18.1917 3.85706 18.1917 4.16659C18.1917 4.47612 18.1307 4.78262 18.0122 5.06859C17.8938 5.35455 17.7202 5.61439 17.5013 5.83326L6.2513 17.0833L1.66797 18.3333L2.91797 13.7499L14.168 2.49993Z"
+                                                            stroke="#98A2B3" stroke-width="1.66667" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </g>
+                                                    <defs>
+                                                        <clipPath id="clip0_5271_17556">
+                                                            <rect width="20" height="20" fill="white" />
+                                                        </clipPath>
+                                                    </defs>
+                                                </svg>
+                                            </span></a>    
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <ng-container *ngIf="taskInfoLoading">
+                    <div class="row loader  d-flex justify-content-center align-items-center">
+                        <div class="shimmer">
+                            <div class="wrapper">
+                                <div class="stroke animate title"></div>
+                                <div class="stroke animate link"></div>
+                                <div class="stroke animate description"></div>
+                            </div>
+                        </div>
+                        <div class="shimmer">
+                            <div class="wrapper">
+                                <div class="stroke animate title"></div>
+                                <div class="stroke animate link"></div>
+                                <div class="stroke animate description"></div>
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="taskInfoNoData && !taskInfoLoading">
+                    <div class="row">
+                        <div class="col-lg-12 my-6">
+                            <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                                <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                <div class="nodatamaintext mt-3">No data found</div>
+                                <div class="nodatasubtext">There is no result for Task Info</div>
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
+
+            </div>
+            <div *ngIf="!taskInfoLoading && !taskInfoNoData">
+                <lib-pagination class="text-start" [itemsPerPage]="itemsPerPage" [currentPage]="currentPage"
+                    [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                    (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/task-info/task-info.component.scss

@@ -0,0 +1,56 @@
+.table-title{
+    color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px; /* 142.857% */
+}
+.table-title-primary{
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px; /* 142.857% */
+    text-decoration-line: underline;
+}
+.taskname{
+    color: var(--Gray-900, #101828);
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 155.556% */
+}
+.grey-badge{
+    border-radius: 16px;
+background: var(--Gray-100, #F2F4F7);
+display: flex;
+padding: 2px 8px;
+justify-content: center;
+align-items: center;
+color: var(--Gray-700, #344054);
+text-align: center;
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px;
+}
+.checklisttext{
+    color: var(--Gray-500, #667085);
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 18px; /* 150% */
+}
+
+::ng-deep .custom-tooltip{
+    border-radius: 8px;
+background: var(--White, #FFF);
+padding: 8px 12px;
+color: var(--Gray-700, #344054);
+text-align: center;
+font-family: 'Inter';
+font-size: 12px;
+font-weight: 600;
+line-height: 18px; /* 150% */
+
+}

package/src/lib/components/task-info/task-info.component.spec.ts

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