tango-app-ui-manage-tickets 3.7.0-beta.1 → 3.7.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/esm2022/lib/components/footfall-dic/footfall-dic.component.mjs +3 -3
  2. package/fesm2022/tango-app-ui-manage-tickets.mjs +2 -2
  3. package/fesm2022/tango-app-ui-manage-tickets.mjs.map +1 -1
  4. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-tickets.mjs CHANGED
@@ -2669,11 +2669,11 @@ class FootfallDicComponent {
2669
2669
  this.getStores();
2670
2670
  }
2671
2671
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FootfallDicComponent, deps: [{ token: i1$1.GlobalStateService }, { token: TicketService }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i1$2.NgbModal }, { token: ExcelService }, { token: i6.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
2672
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FootfallDicComponent, selector: "lib-footfall-dic", viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"footfallView\" class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-xl-9 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col-lg-6 col-xl-3 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.noShopper !== null ?\r\n getFootfallSummaryData?.noShopper : '--' }}</h5>\r\n <div class=\"sub-header\">Non-Shoppers</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.duplicateCount !== null ?\r\n getFootfallSummaryData?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3 \">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.employeeCount !== null ?\r\n getFootfallSummaryData?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header \">Employee/Staff</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-2 col-md-4 my-3\">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.houseKeepingCount !== null ?\r\n getFootfallSummaryData?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Housekeeping</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"footfallView\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Ticket Info</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req?.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req?.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n <!-- <lib-filters [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body mt-3 py-0 px-0\">\r\n\r\n\r\n\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this Date</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Info<svg\r\n [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('ticketId')\">Ticket ID<svg\r\n [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'dateString' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Total footfalls\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Duplicates\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'duplicateCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Employee/Staff\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'employeeCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Housekeeping\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'houseKeepingCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th>Revised footfalls\r\n \r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let ticket of footfallListData\">\r\n <ng-container *ngIf=\"ticket?._source as source\">\r\n <td (click)=\"dataStoreView(ticket)\">\r\n <div class=\"text-primary cursor-pointer\">{{ source.storeName }}</div>\r\n <div class=\"text-gray-500 fs-7 mt-2\">ID : {{ source.storeId }}</div>\r\n </td>\r\n \r\n <td class=\"py-7\">{{ source.ticketId }}</td>\r\n <td class=\"py-7\">{{ source.dateString | date: 'dd MMM, yyyy' }}</td>\r\n <td class=\"py-7\">{{ source.footfallCount }}</td>\r\n <td class=\"py-7\">{{ source.duplicateCount }}</td>\r\n <td class=\"py-7\">{{ source.employeeCount }}</td>\r\n <td class=\"py-7\">{{ source.houseKeepingCount }}</td>\r\n <td class=\"py-7\">\r\n {{ source.footfallCount - (source.houseKeepingCount + source.employeeCount +\r\n source.duplicateCount) }}\r\n </td>\r\n \r\n <td class=\"py-7\">\r\n <span *ngIf=\"source.status === 'open' || source.status === 'closed'\" class=\"badge mx-2\" [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-light-default': source.status === 'closed'\r\n }\">\r\n {{ source.status | titlecase }}\r\n </span>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n<div *ngIf=\"!footfallView\" class=\"card mt-2\">\r\n <form [formGroup]=\"filterForm\">\r\n <div class=\"row my-0\">\r\n <div class=\"col-lg-3 my-3\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n 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\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"card-title-foot ms-3\">Footfall Directory</span>\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"selectedStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"type\"\r\n (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n \r\n\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"actionStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"pendingArray\"\r\n (itemChange)=\"pendingChange($event)\"></lib-reactive-select>\r\n \r\n </div>\r\n <div class=\"col-md-3 my-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(filterForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"filterForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-2 my-4\">\r\n <div class=\"d-flex me-3\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-sm btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n</div>\r\n<div *ngIf=\"!footfallView\" class=\"row mt-3\">\r\n <div class=\"position-relative\" \r\n [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3'\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Footfall Directory</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n<g filter=\"url(#filter0_dd_778_34282)\">\r\n<rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\"/>\r\n<path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<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\"/>\r\n<feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_778_34282\"/>\r\n<feOffset dy=\"4\"/>\r\n<feGaussianBlur stdDeviation=\"3\"/>\r\n<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.03 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_778_34282\"/>\r\n<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\"/>\r\n<feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feOffset dy=\"12\"/>\r\n<feGaussianBlur stdDeviation=\"8\"/>\r\n<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.08 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"dataReset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 me-5 btn-resize\" (click)=\"dataApply()\">Apply</button>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <input\r\n class=\"form-control form-control-sm mb-2 px-2 py-1 w-100\"\r\n type=\"text\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"StoresSearchValue\"\r\n (change)=\"searchStoresData()\"\r\n/>\r\n\r\n <div class=\"mb-2 border-selectall\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\" />\r\n <label class=\"mt-2 font-semibold ms-2\">Select All {{storeCount}} Stores</label>\r\n </div>\r\n <ul class=\"list-unstyled ps-0\">\r\n <li *ngFor=\"let store of stores\" class=\"mb-5\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(store)\" (change)=\"toggleStoreSelection(store)\" />\r\n {{ store?.storeName }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\" >\r\n <div class=\"card\">\r\n\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"mb-2\">\r\n <input *ngIf=\"!footfallLoading && !footfallNoData\"\r\n type=\"checkbox\"\r\n [checked]=\"allSelectValue\"\r\n (change)=\"selectAllValue()\" />\r\n <label *ngIf=\"!footfallLoading && !footfallNoData\" class=\"mt-2 fs-6 font-semibold ms-2\">\r\n Select All (\r\n {{\r\n houseKeepingACCount > 0\r\n ? houseKeepingACCount\r\n : employeeACCount > 0\r\n ? employeeACCount\r\n : duplicateACCount > 0\r\n ? duplicateACCount\r\n : 0\r\n }}\r\n )\r\n</label>\r\n <!-- -->\r\n</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select formControlName=\"selectedRevopsType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"revopsTypeArray\" (itemChange)=\"RevopsTypeChange($event)\"></lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"my-7 d-flex justify-content-end me-5\" role=\"group\">\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected',this.selectedRevopsType.value)\">Reject selection</button>\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved',this.selectedRevopsType.value)\">Approve selection</button>\r\n </div>\r\n <section *ngIf=\"selectedRevopsType?.value === ''\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-body mt-3 py-0\">\r\n\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"row mb-6\">\r\n <div class=\"col-2 card-title-label my-2\">Ticket Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketName ? (source.ticketName | titlecase) : '-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketId ? source.ticketId:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.storeName ? source.storeName:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 my-2\"><span \r\n class=\"badge\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-secondary': source.status === 'closed',\r\n 'badge-light-warning': source.status === 'pending',\r\n 'badge-light-danger': source.status === 'rejected'\r\n }\">\r\n {{ source.status ? (source.status | titlecase) : '-' }}\r\n</span></div>\r\n \r\n <div class=\"col-2 card-title-label my-2\">Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ source.dateString ? (source.dateString | date: 'dd MMM, yyyy') :'- ' }}</div>\r\n </div>\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"border-totalfootfall\">\r\n <div class=\"card-header ellipse1 min-h-45px py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ source?.footfallCount !== null ?\r\n source?.footfallCount : '--' }} <span class=\"sub-header ms-2\">Total Footfall</span></h5>\r\n \r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.duplicateCount !== null ?\r\n source?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.employeeCount !== null ?\r\n source?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Employee/Staff</span>\r\n </div>\r\n \r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.houseKeepingCount !== null ?\r\n source?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">House Keeping</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3 vl\">\r\n <h5 class=\"card-title\"> {{ \r\n (source.footfallCount || 0) - \r\n ((source.houseKeepingCount || 0) + \r\n (source.employeeCount || 0) + \r\n (source.duplicateCount || 0)) \r\n }}</h5>\r\n <span class=\"card-title-sub-header\">Actual footfall</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"my-4\">\r\n <h3 *ngIf=\"source?.duplicateImages?.length\" class=\"text-lg font-semibold mb-2\"> <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Duplicates</h3>\r\n \r\n \r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-2\">Original image</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"duplicate-head my-2\">Duplicates</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source.status ==='pending'\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n(change)=\"onImageCheckboxChange(img, 'duplicate', original)\"\r\n />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','duplicate')\" >Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"duplicate-head my-2\">Employee/Staff</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','employee')\" >Reject</button>\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','employee')\">Approve</button>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"duplicate-head my-2\">House Keeping</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('reject','housekeeping')\" >Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','housekeeping')\">Approve</button>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\" [totalItems]=\"totalItemsFootfall\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\" (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n \r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"footfallNoData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n \r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column \" style=\"margin: 64px;border-radius: 8px;\r\nbackground: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No pending items</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no action item required for <span\r\n *ngIf=\"selectedRevopsType?.value==='duplicateImages'\">duplicates</span><span\r\n *ngIf=\"selectedRevopsType?.value==='employee'\">employee/staff</span> <span\r\n *ngIf=\"selectedRevopsType?.value==='houseKeeping'\">houseKeeping</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Card Body -->\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"card-body mt-3 py-0\">\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-4\">\r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-2\">Original image</div>\r\n <div class=\"row\">\r\n <!-- \u2705 Original Image -->\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- \uD83D\uDFE8 Duplicate Images (for this original) -->\r\n <div class=\"duplicate-head my-2\">Duplicates</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'duplicate')\" />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.employee?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\"\r\n [totalItems]=\"totalItemsFootfall\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\"\r\n (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n \r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3\">\r\n You're about to {{ popupType === 'approved' ? 'approve' : 'reject' }} the following number of selected images.\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"border border-1 rounded p-3 w-50 mb-4\">\r\n <div *ngIf=\"popupvalue === 'employee'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ employeeACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'housekeeping'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ houseKeepingACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'duplicate'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ duplicateACCount || '--' }}\r\n </div>\r\n <div class=\"fw-semibold text-muted fs-6 mt-2\">\r\n {{ popupvalue | titlecase }}s\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:7px 5px -2px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px!important;border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:8px;font-weight:500;line-height:14px}.desc-value{color:var(--Gray-900, #475467);font-size:7px;font-weight:500;line-height:14px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
2672
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FootfallDicComponent, selector: "lib-footfall-dic", viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"footfallView\" class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-xl-9 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col-lg-6 col-xl-3 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.noShopper !== null ?\r\n getFootfallSummaryData?.noShopper : '--' }}</h5>\r\n <div class=\"sub-header\">Non-Shoppers</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.duplicateCount !== null ?\r\n getFootfallSummaryData?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3 \">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.employeeCount !== null ?\r\n getFootfallSummaryData?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header \">Employee/Staff</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-2 col-md-4 my-3\">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.houseKeepingCount !== null ?\r\n getFootfallSummaryData?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Housekeeping</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"footfallView\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Ticket Info</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req?.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req?.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n <!-- <lib-filters [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body mt-3 py-0 px-0\">\r\n\r\n\r\n\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this Date</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Info<svg\r\n [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('ticketId')\">Ticket ID<svg\r\n [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'dateString' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Total footfalls\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Duplicates\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'duplicateCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Employee/Staff\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'employeeCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Housekeeping\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'houseKeepingCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th>Revised footfalls\r\n \r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let ticket of footfallListData\">\r\n <ng-container *ngIf=\"ticket?._source as source\">\r\n <td (click)=\"dataStoreView(ticket)\">\r\n <div class=\"text-primary cursor-pointer\">{{ source.storeName }}</div>\r\n <div class=\"text-gray-500 fs-7 mt-2\">ID : {{ source.storeId }}</div>\r\n </td>\r\n \r\n <td class=\"py-7\">{{ source.ticketId }}</td>\r\n <td class=\"py-7\">{{ source.dateString | date: 'dd MMM, yyyy' }}</td>\r\n <td class=\"py-7\">{{ source.footfallCount }}</td>\r\n <td class=\"py-7\">{{ source.duplicateCount }}</td>\r\n <td class=\"py-7\">{{ source.employeeCount }}</td>\r\n <td class=\"py-7\">{{ source.houseKeepingCount }}</td>\r\n <td class=\"py-7\">\r\n {{ source.footfallCount - (source.houseKeepingCount + source.employeeCount +\r\n source.duplicateCount) }}\r\n </td>\r\n \r\n <td class=\"py-7\">\r\n <span *ngIf=\"source.status === 'open' || source.status === 'closed'\" class=\"badge mx-2\" [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-light-default': source.status === 'closed'\r\n }\">\r\n {{ source.status | titlecase }}\r\n </span>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n<div *ngIf=\"!footfallView\" class=\"card mt-2\">\r\n <form [formGroup]=\"filterForm\">\r\n <div class=\"row my-0\">\r\n <div class=\"col-lg-3 my-3\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n 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\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"card-title-foot ms-3\">Footfall Directory</span>\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"selectedStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"type\"\r\n (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n \r\n\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"actionStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"pendingArray\"\r\n (itemChange)=\"pendingChange($event)\"></lib-reactive-select>\r\n \r\n </div>\r\n <div class=\"col-md-3 my-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(filterForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"filterForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-2 my-4\">\r\n <div class=\"d-flex me-3\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-sm btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n</div>\r\n<div *ngIf=\"!footfallView\" class=\"row mt-3\">\r\n <div class=\"position-relative\" \r\n [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3'\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Footfall Directory</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n<g filter=\"url(#filter0_dd_778_34282)\">\r\n<rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\"/>\r\n<path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<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\"/>\r\n<feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_778_34282\"/>\r\n<feOffset dy=\"4\"/>\r\n<feGaussianBlur stdDeviation=\"3\"/>\r\n<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.03 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_778_34282\"/>\r\n<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\"/>\r\n<feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feOffset dy=\"12\"/>\r\n<feGaussianBlur stdDeviation=\"8\"/>\r\n<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.08 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"dataReset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 me-5 btn-resize\" (click)=\"dataApply()\">Apply</button>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <input\r\n class=\"form-control form-control-sm mb-2 px-2 py-1 w-100\"\r\n type=\"text\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"StoresSearchValue\"\r\n (change)=\"searchStoresData()\"\r\n/>\r\n\r\n <div class=\"mb-2 border-selectall\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\" />\r\n <label class=\"mt-2 font-semibold ms-2\">Select All {{storeCount}} Stores</label>\r\n </div>\r\n <ul class=\"list-unstyled ps-0\">\r\n <li *ngFor=\"let store of stores\" class=\"mb-5\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(store)\" (change)=\"toggleStoreSelection(store)\" />\r\n {{ store?.storeName }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\" >\r\n <div class=\"card\">\r\n\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"mb-2\">\r\n <input *ngIf=\"!footfallLoading && !footfallNoData\"\r\n type=\"checkbox\"\r\n [checked]=\"allSelectValue\"\r\n (change)=\"selectAllValue()\" />\r\n <label *ngIf=\"!footfallLoading && !footfallNoData\" class=\"mt-2 fs-6 font-semibold ms-2\">\r\n Select All (\r\n {{\r\n houseKeepingACCount > 0\r\n ? houseKeepingACCount\r\n : employeeACCount > 0\r\n ? employeeACCount\r\n : duplicateACCount > 0\r\n ? duplicateACCount\r\n : 0\r\n }}\r\n )\r\n</label>\r\n <!-- -->\r\n</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select formControlName=\"selectedRevopsType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"revopsTypeArray\" (itemChange)=\"RevopsTypeChange($event)\"></lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"my-7 d-flex justify-content-end me-5\" role=\"group\">\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected',this.selectedRevopsType.value)\">Reject selection</button>\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved',this.selectedRevopsType.value)\">Approve selection</button>\r\n </div>\r\n <section *ngIf=\"selectedRevopsType?.value === ''\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-body mt-3 py-0\">\r\n\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"row mb-6\">\r\n <div class=\"col-2 card-title-label my-2\">Ticket Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketName ? (source.ticketName | titlecase) : '-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketId ? source.ticketId:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.storeName ? source.storeName:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 my-2\"><span \r\n class=\"badge\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-secondary': source.status === 'closed',\r\n 'badge-light-warning': source.status === 'pending',\r\n 'badge-light-danger': source.status === 'rejected'\r\n }\">\r\n {{ source.status ? (source.status | titlecase) : '-' }}\r\n</span></div>\r\n \r\n <div class=\"col-2 card-title-label my-2\">Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ source.dateString ? (source.dateString | date: 'dd MMM, yyyy') :'- ' }}</div>\r\n </div>\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"border-totalfootfall\">\r\n <div class=\"card-header ellipse1 min-h-45px py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ source?.footfallCount !== null ?\r\n source?.footfallCount : '--' }} <span class=\"sub-header ms-2\">Total Footfall</span></h5>\r\n \r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.duplicateCount !== null ?\r\n source?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.employeeCount !== null ?\r\n source?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Employee/Staff</span>\r\n </div>\r\n \r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.houseKeepingCount !== null ?\r\n source?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">House Keeping</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3 vl\">\r\n <h5 class=\"card-title\"> {{ \r\n (source.footfallCount || 0) - \r\n ((source.houseKeepingCount || 0) + \r\n (source.employeeCount || 0) + \r\n (source.duplicateCount || 0)) \r\n }}</h5>\r\n <span class=\"card-title-sub-header\">Actual footfall</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <h3 *ngIf=\"source?.duplicateImages?.length\" class=\"text-lg font-semibold mb-4\"> <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Duplicates</h3>\r\n \r\n \r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-3\">Original image</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"duplicate-head text-lg my-3\">Duplicates<span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.duplicateStatus === 'pending',\r\n 'badge-light-success': source?.duplicateStatus === 'approved',\r\n 'badge-light-danger': source?.duplicateStatus === 'rejected'\r\n }\">{{source?.duplicateStatus | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source?.duplicateStatus ==='pending'\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n(change)=\"onImageCheckboxChange(img, 'duplicate', original)\"\r\n />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','duplicate')\" >Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\">\r\n<path d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>Employee/Staff <span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.employeeStatus === 'pending',\r\n 'badge-light-success': source?.employeeStatus === 'approved',\r\n 'badge-light-danger': source?.employeeStatus === 'rejected'\r\n }\">{{source?.employeeStatus | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.employeeStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','employee')\" >Reject</button>\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','employee')\">Approve</button>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\" fill=\"#475467\"/>\r\n</svg></span> House Keeping <span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.houseKeepingStatus === 'pending',\r\n 'badge-light-success': source?.houseKeepingStatus === 'approved',\r\n 'badge-light-danger': source?.houseKeepingStatus === 'rejected'\r\n }\">{{source?.houseKeeping | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.houseKeepingStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('reject','housekeeping')\" >Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','housekeeping')\">Approve</button>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\" [totalItems]=\"totalItemsFootfall\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\" (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n \r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"footfallNoData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n \r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column \" style=\"margin: 64px;border-radius: 8px;\r\nbackground: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No pending items</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no action item required for <span\r\n *ngIf=\"selectedRevopsType?.value==='duplicateImages'\">duplicates</span><span\r\n *ngIf=\"selectedRevopsType?.value==='employee'\">employee/staff</span> <span\r\n *ngIf=\"selectedRevopsType?.value==='houseKeeping'\">houseKeeping</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Card Body -->\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"card-body mt-3 py-0\">\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-4\">\r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-2\">Original image</div>\r\n <div class=\"row\">\r\n <!-- \u2705 Original Image -->\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- \uD83D\uDFE8 Duplicate Images (for this original) -->\r\n <div class=\"duplicate-head my-3\">Duplicates <span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.duplicateStatus === 'pending',\r\n 'badge-light-success': source?.duplicateStatus === 'approved',\r\n 'badge-light-danger': source?.duplicateStatus === 'rejected'\r\n }\">{{source?.duplicateStatus | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source?.duplicateStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'duplicate')\" />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.employee?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.employeeStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.houseKeepingStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\"\r\n [totalItems]=\"totalItemsFootfall\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\"\r\n (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n \r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3\">\r\n You're about to {{ popupType === 'approved' ? 'approve' : 'reject' }} the following number of selected images.\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"border border-1 rounded p-3 w-50 mb-4\">\r\n <div *ngIf=\"popupvalue === 'employee'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ employeeACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'housekeeping'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ houseKeepingACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'duplicate'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ duplicateACCount || '--' }}\r\n </div>\r\n <div class=\"fw-semibold text-muted fs-6 mt-2\">\r\n {{ popupvalue | titlecase }}s\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:7px 5px -2px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px!important;border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:8px;font-weight:500;line-height:14px}.desc-value{color:var(--Gray-900, #475467);font-size:7px;font-weight:500;line-height:14px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: GroupSelectComponent, selector: "lib-group-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
2673
2673
  }
2674
2674
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FootfallDicComponent, decorators: [{
2675
2675
  type: Component,
2676
- args: [{ selector: "lib-footfall-dic", template: "<div *ngIf=\"footfallView\" class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-xl-9 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col-lg-6 col-xl-3 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.noShopper !== null ?\r\n getFootfallSummaryData?.noShopper : '--' }}</h5>\r\n <div class=\"sub-header\">Non-Shoppers</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.duplicateCount !== null ?\r\n getFootfallSummaryData?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3 \">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.employeeCount !== null ?\r\n getFootfallSummaryData?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header \">Employee/Staff</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-2 col-md-4 my-3\">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.houseKeepingCount !== null ?\r\n getFootfallSummaryData?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Housekeeping</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"footfallView\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Ticket Info</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req?.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req?.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n <!-- <lib-filters [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body mt-3 py-0 px-0\">\r\n\r\n\r\n\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this Date</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Info<svg\r\n [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('ticketId')\">Ticket ID<svg\r\n [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'dateString' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Total footfalls\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Duplicates\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'duplicateCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Employee/Staff\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'employeeCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Housekeeping\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'houseKeepingCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th>Revised footfalls\r\n \r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let ticket of footfallListData\">\r\n <ng-container *ngIf=\"ticket?._source as source\">\r\n <td (click)=\"dataStoreView(ticket)\">\r\n <div class=\"text-primary cursor-pointer\">{{ source.storeName }}</div>\r\n <div class=\"text-gray-500 fs-7 mt-2\">ID : {{ source.storeId }}</div>\r\n </td>\r\n \r\n <td class=\"py-7\">{{ source.ticketId }}</td>\r\n <td class=\"py-7\">{{ source.dateString | date: 'dd MMM, yyyy' }}</td>\r\n <td class=\"py-7\">{{ source.footfallCount }}</td>\r\n <td class=\"py-7\">{{ source.duplicateCount }}</td>\r\n <td class=\"py-7\">{{ source.employeeCount }}</td>\r\n <td class=\"py-7\">{{ source.houseKeepingCount }}</td>\r\n <td class=\"py-7\">\r\n {{ source.footfallCount - (source.houseKeepingCount + source.employeeCount +\r\n source.duplicateCount) }}\r\n </td>\r\n \r\n <td class=\"py-7\">\r\n <span *ngIf=\"source.status === 'open' || source.status === 'closed'\" class=\"badge mx-2\" [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-light-default': source.status === 'closed'\r\n }\">\r\n {{ source.status | titlecase }}\r\n </span>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n<div *ngIf=\"!footfallView\" class=\"card mt-2\">\r\n <form [formGroup]=\"filterForm\">\r\n <div class=\"row my-0\">\r\n <div class=\"col-lg-3 my-3\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n 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\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"card-title-foot ms-3\">Footfall Directory</span>\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"selectedStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"type\"\r\n (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n \r\n\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"actionStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"pendingArray\"\r\n (itemChange)=\"pendingChange($event)\"></lib-reactive-select>\r\n \r\n </div>\r\n <div class=\"col-md-3 my-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(filterForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"filterForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-2 my-4\">\r\n <div class=\"d-flex me-3\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-sm btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n</div>\r\n<div *ngIf=\"!footfallView\" class=\"row mt-3\">\r\n <div class=\"position-relative\" \r\n [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3'\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Footfall Directory</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n<g filter=\"url(#filter0_dd_778_34282)\">\r\n<rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\"/>\r\n<path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<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\"/>\r\n<feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_778_34282\"/>\r\n<feOffset dy=\"4\"/>\r\n<feGaussianBlur stdDeviation=\"3\"/>\r\n<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.03 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_778_34282\"/>\r\n<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\"/>\r\n<feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feOffset dy=\"12\"/>\r\n<feGaussianBlur stdDeviation=\"8\"/>\r\n<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.08 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"dataReset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 me-5 btn-resize\" (click)=\"dataApply()\">Apply</button>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <input\r\n class=\"form-control form-control-sm mb-2 px-2 py-1 w-100\"\r\n type=\"text\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"StoresSearchValue\"\r\n (change)=\"searchStoresData()\"\r\n/>\r\n\r\n <div class=\"mb-2 border-selectall\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\" />\r\n <label class=\"mt-2 font-semibold ms-2\">Select All {{storeCount}} Stores</label>\r\n </div>\r\n <ul class=\"list-unstyled ps-0\">\r\n <li *ngFor=\"let store of stores\" class=\"mb-5\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(store)\" (change)=\"toggleStoreSelection(store)\" />\r\n {{ store?.storeName }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\" >\r\n <div class=\"card\">\r\n\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"mb-2\">\r\n <input *ngIf=\"!footfallLoading && !footfallNoData\"\r\n type=\"checkbox\"\r\n [checked]=\"allSelectValue\"\r\n (change)=\"selectAllValue()\" />\r\n <label *ngIf=\"!footfallLoading && !footfallNoData\" class=\"mt-2 fs-6 font-semibold ms-2\">\r\n Select All (\r\n {{\r\n houseKeepingACCount > 0\r\n ? houseKeepingACCount\r\n : employeeACCount > 0\r\n ? employeeACCount\r\n : duplicateACCount > 0\r\n ? duplicateACCount\r\n : 0\r\n }}\r\n )\r\n</label>\r\n <!-- -->\r\n</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select formControlName=\"selectedRevopsType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"revopsTypeArray\" (itemChange)=\"RevopsTypeChange($event)\"></lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"my-7 d-flex justify-content-end me-5\" role=\"group\">\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected',this.selectedRevopsType.value)\">Reject selection</button>\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved',this.selectedRevopsType.value)\">Approve selection</button>\r\n </div>\r\n <section *ngIf=\"selectedRevopsType?.value === ''\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-body mt-3 py-0\">\r\n\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"row mb-6\">\r\n <div class=\"col-2 card-title-label my-2\">Ticket Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketName ? (source.ticketName | titlecase) : '-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketId ? source.ticketId:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.storeName ? source.storeName:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 my-2\"><span \r\n class=\"badge\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-secondary': source.status === 'closed',\r\n 'badge-light-warning': source.status === 'pending',\r\n 'badge-light-danger': source.status === 'rejected'\r\n }\">\r\n {{ source.status ? (source.status | titlecase) : '-' }}\r\n</span></div>\r\n \r\n <div class=\"col-2 card-title-label my-2\">Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ source.dateString ? (source.dateString | date: 'dd MMM, yyyy') :'- ' }}</div>\r\n </div>\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"border-totalfootfall\">\r\n <div class=\"card-header ellipse1 min-h-45px py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ source?.footfallCount !== null ?\r\n source?.footfallCount : '--' }} <span class=\"sub-header ms-2\">Total Footfall</span></h5>\r\n \r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.duplicateCount !== null ?\r\n source?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.employeeCount !== null ?\r\n source?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Employee/Staff</span>\r\n </div>\r\n \r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.houseKeepingCount !== null ?\r\n source?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">House Keeping</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3 vl\">\r\n <h5 class=\"card-title\"> {{ \r\n (source.footfallCount || 0) - \r\n ((source.houseKeepingCount || 0) + \r\n (source.employeeCount || 0) + \r\n (source.duplicateCount || 0)) \r\n }}</h5>\r\n <span class=\"card-title-sub-header\">Actual footfall</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"my-4\">\r\n <h3 *ngIf=\"source?.duplicateImages?.length\" class=\"text-lg font-semibold mb-2\"> <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Duplicates</h3>\r\n \r\n \r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-2\">Original image</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"duplicate-head my-2\">Duplicates</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source.status ==='pending'\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n(change)=\"onImageCheckboxChange(img, 'duplicate', original)\"\r\n />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','duplicate')\" >Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"duplicate-head my-2\">Employee/Staff</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','employee')\" >Reject</button>\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','employee')\">Approve</button>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"duplicate-head my-2\">House Keeping</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('reject','housekeeping')\" >Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','housekeeping')\">Approve</button>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\" [totalItems]=\"totalItemsFootfall\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\" (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n \r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"footfallNoData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n \r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column \" style=\"margin: 64px;border-radius: 8px;\r\nbackground: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No pending items</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no action item required for <span\r\n *ngIf=\"selectedRevopsType?.value==='duplicateImages'\">duplicates</span><span\r\n *ngIf=\"selectedRevopsType?.value==='employee'\">employee/staff</span> <span\r\n *ngIf=\"selectedRevopsType?.value==='houseKeeping'\">houseKeeping</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Card Body -->\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"card-body mt-3 py-0\">\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-4\">\r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-2\">Original image</div>\r\n <div class=\"row\">\r\n <!-- \u2705 Original Image -->\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- \uD83D\uDFE8 Duplicate Images (for this original) -->\r\n <div class=\"duplicate-head my-2\">Duplicates</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'duplicate')\" />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.employee?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source.status ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\"\r\n [totalItems]=\"totalItemsFootfall\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\"\r\n (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n \r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3\">\r\n You're about to {{ popupType === 'approved' ? 'approve' : 'reject' }} the following number of selected images.\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"border border-1 rounded p-3 w-50 mb-4\">\r\n <div *ngIf=\"popupvalue === 'employee'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ employeeACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'housekeeping'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ houseKeepingACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'duplicate'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ duplicateACCount || '--' }}\r\n </div>\r\n <div class=\"fw-semibold text-muted fs-6 mt-2\">\r\n {{ popupvalue | titlecase }}s\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:7px 5px -2px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px!important;border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:8px;font-weight:500;line-height:14px}.desc-value{color:var(--Gray-900, #475467);font-size:7px;font-weight:500;line-height:14px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}\n"] }]
2676
+ args: [{ selector: "lib-footfall-dic", template: "<div *ngIf=\"footfallView\" class=\"row\">\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-xl-9 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col-lg-6 col-xl-3 col-md-6 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.noShopper !== null ?\r\n getFootfallSummaryData?.noShopper : '--' }}</h5>\r\n <div class=\"sub-header\">Non-Shoppers</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.duplicateCount !== null ?\r\n getFootfallSummaryData?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-5 col-md-4 my-3 \">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.employeeCount !== null ?\r\n getFootfallSummaryData?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header \">Employee/Staff</span>\r\n </div>\r\n <div class=\"col-lg-4 col-xl-2 col-md-4 my-3\">\r\n <h5 class=\"card-title \">{{ getFootfallSummaryData?.houseKeepingCount !== null ?\r\n getFootfallSummaryData?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Housekeeping</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"footfallView\" class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Ticket Info</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req?.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req?.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n <!-- <lib-filters [dataObject]=\"dataObject\"\r\n (appliedFilters)=\"applyFilters($event)\"></lib-filters> -->\r\n\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"card-body mt-3 py-0 px-0\">\r\n\r\n\r\n\r\n <div *ngIf=\"loading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"noData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this Date</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Info<svg\r\n [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('ticketId')\">Ticket ID<svg\r\n [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'dateString' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Total footfalls\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Duplicates\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'duplicateCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Employee/Staff\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'employeeCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Housekeeping\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'houseKeepingCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th>Revised footfalls\r\n \r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let ticket of footfallListData\">\r\n <ng-container *ngIf=\"ticket?._source as source\">\r\n <td (click)=\"dataStoreView(ticket)\">\r\n <div class=\"text-primary cursor-pointer\">{{ source.storeName }}</div>\r\n <div class=\"text-gray-500 fs-7 mt-2\">ID : {{ source.storeId }}</div>\r\n </td>\r\n \r\n <td class=\"py-7\">{{ source.ticketId }}</td>\r\n <td class=\"py-7\">{{ source.dateString | date: 'dd MMM, yyyy' }}</td>\r\n <td class=\"py-7\">{{ source.footfallCount }}</td>\r\n <td class=\"py-7\">{{ source.duplicateCount }}</td>\r\n <td class=\"py-7\">{{ source.employeeCount }}</td>\r\n <td class=\"py-7\">{{ source.houseKeepingCount }}</td>\r\n <td class=\"py-7\">\r\n {{ source.footfallCount - (source.houseKeepingCount + source.employeeCount +\r\n source.duplicateCount) }}\r\n </td>\r\n \r\n <td class=\"py-7\">\r\n <span *ngIf=\"source.status === 'open' || source.status === 'closed'\" class=\"badge mx-2\" [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-light-default': source.status === 'closed'\r\n }\">\r\n {{ source.status | titlecase }}\r\n </span>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n<div *ngIf=\"!footfallView\" class=\"card mt-2\">\r\n <form [formGroup]=\"filterForm\">\r\n <div class=\"row my-0\">\r\n <div class=\"col-lg-3 my-3\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\" filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n 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\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span class=\"card-title-foot ms-3\">Footfall Directory</span>\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"selectedStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"type\"\r\n (itemChange)=\"typeChange($event)\"></lib-reactive-select>\r\n \r\n\r\n </div>\r\n <div class=\"col-md-2 my-3\">\r\n \r\n <lib-reactive-select formControlName=\"actionStatus\" [idField]=\"'value'\" [nameField]=\"'label'\" [data]=\"pendingArray\"\r\n (itemChange)=\"pendingChange($event)\"></lib-reactive-select>\r\n \r\n </div>\r\n <div class=\"col-md-3 my-4\" >\r\n <div class=\"select-wrapper\">\r\n <div class=\"placeholder-overlay\" *ngIf=\"!(filterForm.get('ClusterList')?.value?.length)\">\r\n Select cluster\r\n </div>\r\n <lib-group-select [items]=\"ClusterList\" [disabled]=\"false\" [multi]=\"true\"\r\n [searchField]=\"'groupName'\" [idField]=\"'groupName'\" (selected)=\"ongroupSelect($event)\"\r\n [selectedValues]=\"filterForm.get('ClusterList')?.value\">\r\n </lib-group-select>\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-md-2 my-4\">\r\n <div class=\"d-flex me-3\">\r\n <a (click)=\"onFilterApply()\" type=\"submit\" class=\"btn btn-sm btn-primary px-4 \"><span>Apply</span></a>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n</div>\r\n<div *ngIf=\"!footfallView\" class=\"row mt-3\">\r\n <div class=\"position-relative\" \r\n [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3'\" >\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Footfall Directory</span>\r\n <span class=\"text-sub mb-2\">Based on {{footfallList_req.fromDate | date: 'dd MMM, yyyy'}} \u2013 {{footfallList_req.toDate | date: 'dd MMM, yyyy'}} </span>\r\n </h3>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n<g filter=\"url(#filter0_dd_778_34282)\">\r\n<rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\"/>\r\n<path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<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\"/>\r\n<feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_778_34282\"/>\r\n<feOffset dy=\"4\"/>\r\n<feGaussianBlur stdDeviation=\"3\"/>\r\n<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.03 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_778_34282\"/>\r\n<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\"/>\r\n<feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feOffset dy=\"12\"/>\r\n<feGaussianBlur stdDeviation=\"8\"/>\r\n<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.08 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\" result=\"effect2_dropShadow_778_34282\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n <div class=\"text-end mt-10\">\r\n <button class=\"btn btn-outline w-25 me-3 btn-resize\" (click)=\"dataReset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 me-5 btn-resize\" (click)=\"dataApply()\">Apply</button>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <input\r\n class=\"form-control form-control-sm mb-2 px-2 py-1 w-100\"\r\n type=\"text\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"StoresSearchValue\"\r\n (change)=\"searchStoresData()\"\r\n/>\r\n\r\n <div class=\"mb-2 border-selectall\">\r\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"toggleSelectAll()\" />\r\n <label class=\"mt-2 font-semibold ms-2\">Select All {{storeCount}} Stores</label>\r\n </div>\r\n <ul class=\"list-unstyled ps-0\">\r\n <li *ngFor=\"let store of stores\" class=\"mb-5\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(store)\" (change)=\"toggleStoreSelection(store)\" />\r\n {{ store?.storeName }}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\" >\r\n <div class=\"card\">\r\n\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"mb-2\">\r\n <input *ngIf=\"!footfallLoading && !footfallNoData\"\r\n type=\"checkbox\"\r\n [checked]=\"allSelectValue\"\r\n (change)=\"selectAllValue()\" />\r\n <label *ngIf=\"!footfallLoading && !footfallNoData\" class=\"mt-2 fs-6 font-semibold ms-2\">\r\n Select All (\r\n {{\r\n houseKeepingACCount > 0\r\n ? houseKeepingACCount\r\n : employeeACCount > 0\r\n ? employeeACCount\r\n : duplicateACCount > 0\r\n ? duplicateACCount\r\n : 0\r\n }}\r\n )\r\n</label>\r\n <!-- -->\r\n</div>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select formControlName=\"selectedRevopsType\" [idField]=\"'value'\" [nameField]=\"'label'\"\r\n [data]=\"revopsTypeArray\" (itemChange)=\"RevopsTypeChange($event)\"></lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"my-7 d-flex justify-content-end me-5\" role=\"group\">\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected',this.selectedRevopsType.value)\">Reject selection</button>\r\n <button *ngIf=\"!footfallLoading && !footfallNoData\" [disabled]=\"checkedValue\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved',this.selectedRevopsType.value)\">Approve selection</button>\r\n </div>\r\n <section *ngIf=\"selectedRevopsType?.value === ''\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-body mt-3 py-0\">\r\n\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"row mb-6\">\r\n <div class=\"col-2 card-title-label my-2\">Ticket Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketName ? (source.ticketName | titlecase) : '-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.ticketId ? source.ticketId:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-9 card-title-value my-2\">{{ source.storeName ? source.storeName:'-' }}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 my-2\"><span \r\n class=\"badge\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source.status === 'open',\r\n 'badge-secondary': source.status === 'closed',\r\n 'badge-light-warning': source.status === 'pending',\r\n 'badge-light-danger': source.status === 'rejected'\r\n }\">\r\n {{ source.status ? (source.status | titlecase) : '-' }}\r\n</span></div>\r\n \r\n <div class=\"col-2 card-title-label my-2\">Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ source.dateString ? (source.dateString | date: 'dd MMM, yyyy') :'- ' }}</div>\r\n </div>\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"border-totalfootfall\">\r\n <div class=\"card-header ellipse1 min-h-45px py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title\">{{ source?.footfallCount !== null ?\r\n source?.footfallCount : '--' }} <span class=\"sub-header ms-2\">Total Footfall</span></h5>\r\n \r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.duplicateCount !== null ?\r\n source?.duplicateCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Duplicates</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.employeeCount !== null ?\r\n source?.employeeCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Employee/Staff</span>\r\n </div>\r\n \r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3\">\r\n <h5 class=\"card-title\">{{ source?.houseKeepingCount !== null ?\r\n source?.houseKeepingCount : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">House Keeping</span>\r\n </div>\r\n <div class=\"col-lg-3 col-xl-3 col-md-3 my-3 vl\">\r\n <h5 class=\"card-title\"> {{ \r\n (source.footfallCount || 0) - \r\n ((source.houseKeepingCount || 0) + \r\n (source.employeeCount || 0) + \r\n (source.duplicateCount || 0)) \r\n }}</h5>\r\n <span class=\"card-title-sub-header\">Actual footfall</span>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <h3 *ngIf=\"source?.duplicateImages?.length\" class=\"text-lg font-semibold mb-4\"> <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>Duplicates</h3>\r\n \r\n \r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-3\">Original image</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"duplicate-head text-lg my-3\">Duplicates<span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.duplicateStatus === 'pending',\r\n 'badge-light-success': source?.duplicateStatus === 'approved',\r\n 'badge-light-danger': source?.duplicateStatus === 'rejected'\r\n }\">{{source?.duplicateStatus | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source?.duplicateStatus ==='pending'\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n(change)=\"onImageCheckboxChange(img, 'duplicate', original)\"\r\n />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','duplicate')\" >Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"16\" viewBox=\"0 0 18 16\" fill=\"none\">\r\n<path d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>Employee/Staff <span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.employeeStatus === 'pending',\r\n 'badge-light-success': source?.employeeStatus === 'approved',\r\n 'badge-light-danger': source?.employeeStatus === 'rejected'\r\n }\">{{source?.employeeStatus | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.employeeStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.employee?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('rejected','employee')\" >Reject</button>\r\n <button [disabled]=\"!employeeACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','employee')\">Approve</button>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\" fill=\"#475467\"/>\r\n</svg></span> House Keeping <span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.houseKeepingStatus === 'pending',\r\n 'badge-light-success': source?.houseKeepingStatus === 'approved',\r\n 'badge-light-danger': source?.houseKeepingStatus === 'rejected'\r\n }\">{{source?.houseKeeping | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.houseKeepingStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\" role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\" (click)=\"popupOpen('reject','housekeeping')\" >Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\" (click)=\"popupOpen('approved','housekeeping')\">Approve</button>\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\" [totalItems]=\"totalItemsFootfall\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\" (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n \r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"footfallNoData\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n \r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column \" style=\"margin: 64px;border-radius: 8px;\r\nbackground: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\" viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\" stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No pending items</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no action item required for <span\r\n *ngIf=\"selectedRevopsType?.value==='duplicateImages'\">duplicates</span><span\r\n *ngIf=\"selectedRevopsType?.value==='employee'\">employee/staff</span> <span\r\n *ngIf=\"selectedRevopsType?.value==='houseKeeping'\">houseKeeping</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Card Body -->\r\n <div *ngIf=\"selectedRevopsType?.value !== ''\" class=\"card-body mt-3 py-0\">\r\n <span class=\"cursor-pointer\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\" style=\"position: absolute; top: 15px; left: 0;\">\r\n <svg class=\"mt-2 ms-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M9.72714 12.6365L13.3635 9.00013L9.72714 5.36377M4.63623 12.6365L8.27259 9.00013L4.63623 5.36377\"\r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-4\">\r\n <div *ngFor=\"let original of source.duplicateImages\" class=\"mb-4\">\r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"duplicate-head my-2\">Original image</div>\r\n <div class=\"row\">\r\n <!-- \u2705 Original Image -->\r\n <div class=\"col-md-3 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n \r\n <img [src]=\"imageUrl + original.filePath\" alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ original.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ original.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- \uD83D\uDFE8 Duplicate Images (for this original) -->\r\n <div class=\"duplicate-head my-3\">Duplicates <span class=\"badge ms-2\" \r\n [ngClass]=\"{\r\n 'badge-light-primary': source?.duplicateStatus === 'pending',\r\n 'badge-light-success': source?.duplicateStatus === 'approved',\r\n 'badge-light-danger': source?.duplicateStatus === 'rejected'\r\n }\">{{source?.duplicateStatus | titlecase}}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of original.data\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n <input *ngIf=\"source?.duplicateStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'duplicate')\" />\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{ img.tempId }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{ img.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.employee?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.employee\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.employeeStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'employee')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"source?.houseKeeping?.length\" class=\"row\">\r\n <div class=\"col-md-3 position-relative\" *ngFor=\"let img of source.houseKeeping\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3 position-relative\">\r\n \r\n <!-- Top-right Checkbox -->\r\n <input *ngIf=\"source?.houseKeepingStatus ==='pending'\" type=\"checkbox\" [(ngModel)]=\"img.selected\"\r\n class=\"position-absolute absolute form-check-input\"\r\n (change)=\"onImageCheckboxChange1(img, 'housekeeping')\" />\r\n \r\n \r\n <!-- Image -->\r\n <img [src]=\"imageUrl + img.filePath\" alt=\"\" class=\"w-100 mb-2 rounded border\" />\r\n \r\n <!-- Details -->\r\n <div class=\"desc-title ms-2 mt-2\">Temp ID: {{img.tempId}}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{img.entryTime}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"my-3\">\r\n <lib-pagination [itemsPerPage]=\"pageSizeFootfall\" [currentPage]=\"footfallcurrentPage\"\r\n [totalItems]=\"totalItemsFootfall\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"setFootfallpageSize()\"\r\n (pageChange)=\"onFootfallPageChange($event)\"\r\n (pageSizeChange)=\"onFootfallPageSizeChange($event)\"></lib-pagination>\r\n </div> -->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n \r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3\">\r\n You're about to {{ popupType === 'approved' ? 'approve' : 'reject' }} the following number of selected images.\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"border border-1 rounded p-3 w-50 mb-4\">\r\n <div *ngIf=\"popupvalue === 'employee'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ employeeACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'housekeeping'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ houseKeepingACCount || '--' }}\r\n </div>\r\n <div *ngIf=\"popupvalue === 'duplicate'\" class=\"fw-semibold fs-5 mb-2\">\r\n {{ duplicateACCount || '--' }}\r\n </div>\r\n <div class=\"fw-semibold text-muted fs-6 mt-2\">\r\n {{ popupvalue | titlecase }}s\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:30px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:7px 5px -2px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px!important;border-bottom:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:8px;font-weight:500;line-height:14px}.desc-value{color:var(--Gray-900, #475467);font-size:7px;font-weight:500;line-height:14px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}\n"] }]
2677
2677
  }], ctorParameters: () => [{ type: i1$1.GlobalStateService }, { type: TicketService }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i1$2.NgbModal }, { type: ExcelService }, { type: i6.FormBuilder }], propDecorators: { zoomPopup: [{
2678
2678
  type: ViewChild,
2679
2679
  args: ['zoomPopup']