tango-app-ui-manage-settings 3.7.20 → 3.7.21
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.
- package/esm2022/lib/components/configurations/feature-configuration/feature-configuration.component.mjs +2 -1
- package/esm2022/lib/components/configurations/footfall-configuration/footfall-configuration.component.mjs +3 -3
- package/fesm2022/tango-app-ui-manage-settings.mjs +3 -2
- package/fesm2022/tango-app-ui-manage-settings.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -6117,6 +6117,7 @@ class FeatureConfigurationComponent {
|
|
|
6117
6117
|
{ value: '15', label: "15 mins" },
|
|
6118
6118
|
{ value: '20', label: "20 mins" },
|
|
6119
6119
|
{ value: '25', label: "25 mins" },
|
|
6120
|
+
{ value: '30', label: "30 mins" },
|
|
6120
6121
|
];
|
|
6121
6122
|
billableCalculation = [
|
|
6122
6123
|
{ value: "footfall-count", label: "Footfall Count" },
|
|
@@ -8799,11 +8800,11 @@ class FootfallConfigurationComponent {
|
|
|
8799
8800
|
return match?.label || '';
|
|
8800
8801
|
}
|
|
8801
8802
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FootfallConfigurationComponent, deps: [{ token: i1$2.FormBuilder }, { token: i3.GlobalStateService }, { token: ClientApiService }, { token: i1$1.NgbModal }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FootfallConfigurationComponent, selector: "lib-footfall-configuration", host: { listeners: { "document:click": "closeMenus()" } }, viewQueries: [{ propertyName: "categoryModalTpl", first: true, predicate: ["categoryModal"], descendants: true }, { propertyName: "deleteCategoryModalTpl", first: true, predicate: ["deleteCategoryModal"], descendants: true }, { propertyName: "resetConfirmationModalTpl", first: true, predicate: ["resetConfirmationModal"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\r\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\r\n <span class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>Edit Details\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Approver Configuration -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\r\n <p class=\"ff-section-desc mb-4\">\r\n Set level of revisions required for a store raised tickets\r\n </p>\r\n\r\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\r\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\r\n class=\"approver-option d-flex flex-column\"\r\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n\r\n <label class=\"custom-checkbox align-items-start\"\r\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\r\n <span class=\"checkmark\"></span>\r\n <div class=\"label-text\">\r\n <div class=\"title\">\r\n {{ rev.get('actionType')?.value | titlecase }}\r\n </div>\r\n <div class=\"desc text-muted\">\r\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\r\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\r\n footfall.</span>\r\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\r\n check.</span>\r\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </label>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Store SPOC Ticket Creation -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\r\n\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <label class=\"mb-0\">\r\n Allow store SPOC to create tickets only for the last\r\n </label>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\r\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\r\n spocTicketCreationdays[0] }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\r\n (click)=\"selectAllowTicketCreation($event, day)\">\r\n {{ day }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <span class=\"mb-0\">Days</span>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Ticket Auto-close -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\r\n\r\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\r\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <span class=\"mb-0\">\r\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\r\n </span>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\r\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\r\n (click)=\"selectAutoCloseAccuracy($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Footfall Directory Limitations -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div>\r\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\r\n <p class=\"ff-section-desc mb-2\">\r\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\r\n </p>\r\n </div>\r\n\r\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\r\n (click)=\"openCategoryModal('add')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>Add New</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Category Cards Grid -->\r\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\r\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\r\n <div class=\"category-card-header\">\r\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\r\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\r\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1162_24621)\">\r\n <path\r\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24621\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\r\n <path\r\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n <div class=\"category-name\">\r\n {{ tag.get('name')?.value }}\r\n </div>\r\n <button\r\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\r\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\r\n [disabled]=\"isEdit\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\r\n fill=\"#475467\" />\r\n </svg>\r\n </button>\r\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"category-percentage-section\">\r\n <div class=\"position-relative ff-select-wrapper compact\"\r\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleLimitDropdown($event, i)\">\r\n <span>{{ tag.get('value')?.value || 0 }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectLimitValue($event, i, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Store Requests -->\r\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div>\r\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\r\n <p class=\"ff-section-desc mb-0\">\r\n Below stores have requested to raise a ticket after breaching the configured limit\r\n <span class=\"info-icon\">i</span>\r\n </p>\r\n </div>\r\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\r\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\r\n <span>Reset</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Restriction Criteria -->\r\n <div class=\"restriction-criteria mb-4\">\r\n <label class=\"mb-3 d-block\">\r\n Restrict ticket creation for any store that:\r\n </label>\r\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\r\n <span>Has raised more than</span>\r\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\r\n <span>\r\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\r\n (click)=\"selectTicketCount($event, c)\">\r\n {{ c }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>tickets in the calender</span>\r\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\r\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\r\n <span>{{ selectedDaysLabel }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\r\n (click)=\"selectStoreDays($event, opt)\">\r\n {{ opt.label }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>based on configured conditions\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\r\n <g clip-path=\"url(#clip0_1432_80035)\">\r\n <path\r\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1432_80035\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #conditionsTooltip>\r\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\r\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\r\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\r\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\r\n Store is Less than equal to 10\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Store Requests Table -->\r\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\r\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\r\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\r\n <table class=\"table table-hover store-requests-table-content\">\r\n <thead>\r\n <tr>\r\n <th class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\r\n (change)=\"toggleSelectAll($event)\" />\r\n <span class=\"checkmark-select\"></span>\r\n\r\n </label>\r\n </th>\r\n <th class=\"sortable store-name-column\">\r\n <div class=\"d-flex align-items-center\">\r\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th class=\"sortable\">\r\n Raised on\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n Last raised(Approved)\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n No of Time Raised\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList\">\r\n <td class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\r\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\r\n <span class=\"checkmark-select\"></span>\r\n </label>\r\n </td>\r\n <td>{{ store.storeName }}</td>\r\n <td>{{ store.raisedOn }}</td>\r\n <td>{{ store.lastApproved || '-' }}</td>\r\n <td>{{ store.totalRaised }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <ng-template #emptyStoreRequests>\r\n <div class=\"empty-store-state text-center\">\r\n <div class=\"empty-store-icon mb-3\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Send Ticket to Tango -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\r\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\r\n (click)=\"selectSendTicketTango($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer Actions -->\r\n <div *ngIf=\"!isEdit\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline mt-1 pt-3 me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n <!-- Category Modal -->\r\n <ng-template #categoryModal>\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">\r\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\r\n </h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\r\n </div>\r\n <div class=\"modal-body category-modal-body\">\r\n <form [formGroup]=\"categoryForm\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Icon</label>\r\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\r\n <span class=\"d-inline-flex align-items-center gap-2\">\r\n <span class=\"category-icon\"\r\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <ng-container\r\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_icon_housekeeping\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\r\n *ngFor=\"let icon of categoryIcons\"\r\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\r\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\r\n <ng-container [ngSwitch]=\"icon.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span>{{ icon.label }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Category Name</label>\r\n <input type=\"text\" class=\"form-control\"\r\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\r\n placeholder=\"Enter your new category\" formControlName=\"name\" />\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\r\n Category name is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\r\n Category name already exists.\r\n </small>\r\n </div>\r\n\r\n <div class=\"mb-2\">\r\n <label class=\"form-label text-muted\">Limitation</label>\r\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\r\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectCategoryLimitValue($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\r\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Delete Confirmation Modal -->\r\n <ng-template #deleteCategoryModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\r\n <p class=\"mb-4 text-muted\">\r\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Reset Store Requests Confirmation Modal -->\r\n <ng-template #resetConfirmationModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\r\n <p class=\"mb-4 text-muted\">\r\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\r\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n</form>\r\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
|
|
8803
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FootfallConfigurationComponent, selector: "lib-footfall-configuration", host: { listeners: { "document:click": "closeMenus()" } }, viewQueries: [{ propertyName: "categoryModalTpl", first: true, predicate: ["categoryModal"], descendants: true }, { propertyName: "deleteCategoryModalTpl", first: true, predicate: ["deleteCategoryModal"], descendants: true }, { propertyName: "resetConfirmationModalTpl", first: true, predicate: ["resetConfirmationModal"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\n <div class=\"d-flex justify-content-end\">\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\n <span class=\"me-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <g clip-path=\"url(#clip0_2579_25125)\">\n <path\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2579_25125\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>Edit Details\n </button>\n </div>\n </div>\n </ng-container>\n\n <!-- Approver Configuration -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\n <p class=\"ff-section-desc mb-4\">\n Set level of revisions required for a store raised tickets\n </p>\n\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\n class=\"approver-option d-flex flex-column\"\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n\n <label class=\"custom-checkbox align-items-start\"\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\n <span class=\"checkmark\"></span>\n <div class=\"label-text\">\n <div class=\"title\">\n {{ rev.get('actionType')?.value | titlecase }}\n </div>\n <div class=\"desc text-muted\">\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\n footfall.</span>\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\n check.</span>\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\n </ng-container>\n </div>\n </div>\n </label>\n\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Store SPOC Ticket Creation -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\n\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\n <label class=\"mb-0\">\n Allow store SPOC to create tickets only for the last\n </label>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\n spocTicketCreationdays[0] }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\n (click)=\"selectAllowTicketCreation($event, day)\">\n {{ day }}\n </button>\n </div>\n </div>\n\n <span class=\"mb-0\">Days</span>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Ticket Auto-close -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex align-items-center mb-2\">\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\n\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\n <span class=\"slider round\"></span>\n </label>\n </div>\n\n <div class=\"d-flex align-items-center mt-2\">\n <span class=\"mb-0\">\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\n </span>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\n (click)=\"selectAutoCloseAccuracy($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Footfall Directory Limitations -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div>\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\n <p class=\"ff-section-desc mb-2\">\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\n </p>\n </div>\n\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\n (click)=\"openCategoryModal('add')\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span>Add New</span>\n </button>\n </div>\n\n <!-- Category Cards Grid -->\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\n <div class=\"category-card-header\">\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <g clip-path=\"url(#clip0_1162_24621)\">\n <path\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24621\">\n <rect width=\"12\" height=\"12\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\n <path\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </div>\n <div class=\"category-name\">\n {{ tag.get('name')?.value }}\n </div>\n <button\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\n [disabled]=\"isEdit\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\n fill=\"#475467\" />\n </svg>\n </button>\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\n </div>\n </div>\n\n <div class=\"category-percentage-section\">\n <div class=\"position-relative ff-select-wrapper compact\"\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleLimitDropdown($event, i)\">\n <span>{{ tag.get('value')?.value || 0 }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectLimitValue($event, i, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Store Requests -->\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\n <div>\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\n <p class=\"ff-section-desc mb-0\">\n Below stores have requested to raise a ticket after breaching the configured limit\n <span class=\"info-icon\">i</span>\n </p>\n </div>\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\n <span>Reset</span>\n </button>\n </div>\n\n <!-- Restriction Criteria -->\n <div class=\"restriction-criteria mb-4\">\n <label class=\"mb-3 d-block\">\n Restrict ticket creation for any store that:\n </label>\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\n <span>Has raised more than</span>\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\n <span>\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\n (click)=\"selectTicketCount($event, c)\">\n {{ c }}\n </button>\n </div>\n </div>\n <span>tickets in the calender</span>\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\n <span>{{ selectedDaysLabel }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\n (click)=\"selectStoreDays($event, opt)\">\n {{ opt.label }}\n </button>\n </div>\n </div>\n <span>based on configured conditions\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\n <g clip-path=\"url(#clip0_1432_80035)\">\n <path\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1432_80035\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n <ng-template #conditionsTooltip>\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\n Store is Less than equal to 10\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- Store Requests Table -->\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\n <table class=\"table table-hover store-requests-table-content\">\n <thead>\n <tr>\n <th class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\n (change)=\"toggleSelectAll($event)\" />\n <span class=\"checkmark-select\"></span>\n\n </label>\n </th>\n <th class=\"sortable store-name-column\">\n <div class=\"d-flex align-items-center\">\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </th>\n <th class=\"sortable\">\n Raised on\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n Last raised(Approved)\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n No of Time Raised\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let store of storeList\">\n <td class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\n <span class=\"checkmark-select\"></span>\n </label>\n </td>\n <td>{{ store.storeName }}</td>\n <td>{{ store.raisedOn }}</td>\n <td>{{ store.lastApproved || '-' }}</td>\n <td>{{ store.totalRaised }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <ng-template #emptyStoreRequests>\n <div class=\"empty-store-state text-center\">\n <div class=\"empty-store-icon mb-3\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\n </svg>\n </div>\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\n </div>\n </ng-template>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Send Ticket to Tango -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\n <div class=\"d-flex align-items-center mt-2\">\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\n (click)=\"selectSendTicketTango($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions -->\n <div *ngIf=\"!isEdit\">\n <div class=\"mb-5 w-100 footer-seperator\"></div>\n <div class=\"d-flex justify-content-end\">\n <a type=\"button\" class=\"btn btn-outline mt-1 pt-3 me-4\" (click)=\"onCancel()\">Cancel</a>\n <a type=\"submit\" class=\"btn btn-primary px-4\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\n </div>\n </div>\n\n <!-- Category Modal -->\n <ng-template #categoryModal>\n <div class=\"modal-header border-0 pb-0\">\n <h5 class=\"modal-title\">\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\n </h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\n </div>\n <div class=\"modal-body category-modal-body\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Icon</label>\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\n <span class=\"d-inline-flex align-items-center gap-2\">\n <span class=\"category-icon\"\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <ng-container\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_icon_housekeeping\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\n *ngFor=\"let icon of categoryIcons\"\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\n <ng-container [ngSwitch]=\"icon.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span>{{ icon.label }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Category Name</label>\n <input type=\"text\" class=\"form-control\"\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\n placeholder=\"Enter your new category\" formControlName=\"name\" />\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\n Category name is required.\n </small>\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\n Category name already exists.\n </small>\n </div>\n\n <div class=\"mb-2\">\n <label class=\"form-label text-muted\">Limitation</label>\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectCategoryLimitValue($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n <div class=\"modal-footer border-0 pt-0\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\n </button>\n </div>\n </ng-template>\n\n <!-- Delete Confirmation Modal -->\n <ng-template #deleteCategoryModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\n <p class=\"mb-4 text-muted\">\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\n </div>\n </div>\n </ng-template>\n\n <!-- Reset Store Requests Confirmation Modal -->\n <ng-template #resetConfirmationModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\n <p class=\"mb-4 text-muted\">\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\n </div>\n </div>\n </ng-template>\n\n</form>\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] });
|
|
8803
8804
|
}
|
|
8804
8805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FootfallConfigurationComponent, decorators: [{
|
|
8805
8806
|
type: Component,
|
|
8806
|
-
args: [{ selector: 'lib-footfall-configuration', template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\r\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\r\n <div class=\"d-flex justify-content-end\">\r\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\r\n <span class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_2579_25125)\">\r\n <path\r\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2579_25125\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>Edit Details\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Approver Configuration -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\r\n <p class=\"ff-section-desc mb-4\">\r\n Set level of revisions required for a store raised tickets\r\n </p>\r\n\r\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\r\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\r\n class=\"approver-option d-flex flex-column\"\r\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n\r\n <label class=\"custom-checkbox align-items-start\"\r\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\r\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\r\n <span class=\"checkmark\"></span>\r\n <div class=\"label-text\">\r\n <div class=\"title\">\r\n {{ rev.get('actionType')?.value | titlecase }}\r\n </div>\r\n <div class=\"desc text-muted\">\r\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\r\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\r\n footfall.</span>\r\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\r\n check.</span>\r\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </label>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Store SPOC Ticket Creation -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\r\n\r\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\r\n <label class=\"mb-0\">\r\n Allow store SPOC to create tickets only for the last\r\n </label>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\r\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\r\n spocTicketCreationdays[0] }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\r\n (click)=\"selectAllowTicketCreation($event, day)\">\r\n {{ day }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <span class=\"mb-0\">Days</span>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Ticket Auto-close -->\r\n <div class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\r\n\r\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\r\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\r\n <span class=\"slider round\"></span>\r\n </label>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <span class=\"mb-0\">\r\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\r\n </span>\r\n\r\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\r\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\r\n (click)=\"selectAutoCloseAccuracy($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\">\r\n\r\n <!-- Footfall Directory Limitations -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div>\r\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\r\n <p class=\"ff-section-desc mb-2\">\r\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\r\n </p>\r\n </div>\r\n\r\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\r\n (click)=\"openCategoryModal('add')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span>Add New</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Category Cards Grid -->\r\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\r\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\r\n <div class=\"category-card-header\">\r\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\r\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\r\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1162_24621)\">\r\n <path\r\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24621\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\r\n <path\r\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\r\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </div>\r\n <div class=\"category-name\">\r\n {{ tag.get('name')?.value }}\r\n </div>\r\n <button\r\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\r\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\r\n [disabled]=\"isEdit\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\r\n fill=\"#475467\" />\r\n </svg>\r\n </button>\r\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\r\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"category-percentage-section\">\r\n <div class=\"position-relative ff-select-wrapper compact\"\r\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\"\r\n (click)=\"toggleLimitDropdown($event, i)\">\r\n <span>{{ tag.get('value')?.value || 0 }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectLimitValue($event, i, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Store Requests -->\r\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div>\r\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\r\n <p class=\"ff-section-desc mb-0\">\r\n Below stores have requested to raise a ticket after breaching the configured limit\r\n <span class=\"info-icon\">i</span>\r\n </p>\r\n </div>\r\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\r\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\r\n <span>Reset</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Restriction Criteria -->\r\n <div class=\"restriction-criteria mb-4\">\r\n <label class=\"mb-3 d-block\">\r\n Restrict ticket creation for any store that:\r\n </label>\r\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\r\n <span>Has raised more than</span>\r\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\r\n <span>\r\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\r\n (click)=\"selectTicketCount($event, c)\">\r\n {{ c }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>tickets in the calender</span>\r\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\r\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\r\n <span>{{ selectedDaysLabel }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\r\n (click)=\"selectStoreDays($event, opt)\">\r\n {{ opt.label }}\r\n </button>\r\n </div>\r\n </div>\r\n <span>based on configured conditions\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\r\n <g clip-path=\"url(#clip0_1432_80035)\">\r\n <path\r\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1432_80035\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <ng-template #conditionsTooltip>\r\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\r\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\r\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\r\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\r\n Store is Less than equal to 10\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <!-- Store Requests Table -->\r\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\r\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\r\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\r\n <table class=\"table table-hover store-requests-table-content\">\r\n <thead>\r\n <tr>\r\n <th class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\r\n (change)=\"toggleSelectAll($event)\" />\r\n <span class=\"checkmark-select\"></span>\r\n\r\n </label>\r\n </th>\r\n <th class=\"sortable store-name-column\">\r\n <div class=\"d-flex align-items-center\">\r\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th class=\"sortable\">\r\n Raised on\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n Last raised(Approved)\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"sortable\">\r\n No of Time Raised\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\r\n fill=\"none\" class=\"ms-1 sort-icon\">\r\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of storeList\">\r\n <td class=\"checkbox-column\">\r\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\r\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\r\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\r\n <span class=\"checkmark-select\"></span>\r\n </label>\r\n </td>\r\n <td>{{ store.storeName }}</td>\r\n <td>{{ store.raisedOn }}</td>\r\n <td>{{ store.lastApproved || '-' }}</td>\r\n <td>{{ store.totalRaised }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <ng-template #emptyStoreRequests>\r\n <div class=\"empty-store-state text-center\">\r\n <div class=\"empty-store-icon mb-3\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\r\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\r\n </svg>\r\n </div>\r\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n\r\n <!-- Send Ticket to Tango -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\r\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\r\n <div class=\"d-flex align-items-center mt-2\">\r\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\r\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\r\n [class.disabled]=\"isEdit\">\r\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\r\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\r\n (click)=\"selectSendTicketTango($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer Actions -->\r\n <div *ngIf=\"!isEdit\">\r\n <div class=\"mb-5 w-100 footer-seperator\"></div>\r\n <div class=\"d-flex justify-content-end\">\r\n <a type=\"button\" class=\"btn btn-outline mt-1 pt-3 me-4\" (click)=\"onCancel()\">Cancel</a>\r\n <a type=\"submit\" class=\"btn btn-primary px-4\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\r\n </div>\r\n </div>\r\n\r\n <!-- Category Modal -->\r\n <ng-template #categoryModal>\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">\r\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\r\n </h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\r\n </div>\r\n <div class=\"modal-body category-modal-body\">\r\n <form [formGroup]=\"categoryForm\">\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Icon</label>\r\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\r\n <span class=\"d-inline-flex align-items-center gap-2\">\r\n <span class=\"category-icon\"\r\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <ng-container\r\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_icon_housekeeping\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\r\n </span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\r\n *ngFor=\"let icon of categoryIcons\"\r\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\r\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\r\n <ng-container [ngSwitch]=\"icon.value\">\r\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1162_24650)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\r\n fill=\"currentColor\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1162_24650\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <span>{{ icon.label }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-3\">\r\n <label class=\"form-label text-muted\">Category Name</label>\r\n <input type=\"text\" class=\"form-control\"\r\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\r\n placeholder=\"Enter your new category\" formControlName=\"name\" />\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\r\n Category name is required.\r\n </small>\r\n <small class=\"text-danger\"\r\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\r\n Category name already exists.\r\n </small>\r\n </div>\r\n\r\n <div class=\"mb-2\">\r\n <label class=\"form-label text-muted\">Limitation</label>\r\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\r\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\r\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\r\n (click)=\"selectCategoryLimitValue($event, p)\">\r\n {{ p }}%\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\r\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Delete Confirmation Modal -->\r\n <ng-template #deleteCategoryModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\r\n <p class=\"mb-4 text-muted\">\r\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Reset Store Requests Confirmation Modal -->\r\n <ng-template #resetConfirmationModal>\r\n <div class=\"modal-body text-center p-4\">\r\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\r\n <p class=\"mb-4 text-muted\">\r\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\r\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\r\n </p>\r\n <div class=\"d-flex justify-content-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n</form>\r\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"] }]
|
|
8807
|
+
args: [{ selector: 'lib-footfall-configuration', template: "<form [formGroup]=\"footfallDirConfigurationForm\" class=\"container-fluid\">\n <ng-container *ngIf=\"(gs.userAccess | async)?.Global_Configuration_isEdit\">\n <div *ngIf=\"isEdit\" class=\"col-12 mb-5\">\n <div class=\"d-flex justify-content-end\">\n <button (click)=\"toggleForm();\" type=\"button\" class=\"btn btn-outline py-3 align-items-end\">\n <span class=\"me-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <g clip-path=\"url(#clip0_2579_25125)\">\n <path\n d=\"M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z\"\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_2579_25125\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>Edit Details\n </button>\n </div>\n </div>\n </ng-container>\n\n <!-- Approver Configuration -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Approver configuration</h5>\n <p class=\"ff-section-desc mb-4\">\n Set level of revisions required for a store raised tickets\n </p>\n\n <div formArrayName=\"revision\" class=\"d-flex flex-wrap gap-5\">\n <div *ngFor=\"let rev of revisionArray.controls; let i = index\" [formGroupName]=\"i\"\n class=\"approver-option d-flex flex-column\"\n [class.disabled-option]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n\n <label class=\"custom-checkbox align-items-start\"\n [class.disabled-checkbox]=\"(rev.get('actionType')?.value === 'approver' && isApproverDisabled) || (rev.get('actionType')?.value === 'tango' && isTangoDisabled)\">\n <input type=\"checkbox\" formControlName=\"isChecked\" [id]=\"'action-' + i\" />\n <span class=\"checkmark\"></span>\n <div class=\"label-text\">\n <div class=\"title\">\n {{ rev.get('actionType')?.value | titlecase }}\n </div>\n <div class=\"desc text-muted\">\n <ng-container [ngSwitch]=\"rev.get('actionType')?.value\">\n <span *ngSwitchCase=\"'reviewer'\">The ticket undergoes a single review to verify\n footfall.</span>\n <span *ngSwitchCase=\"'approver'\">The ticket undergoes a final review after the initial\n check.</span>\n <span *ngSwitchCase=\"'tango'\">Finalize tickets and update footfall count.</span>\n </ng-container>\n </div>\n </div>\n </label>\n\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Store SPOC Ticket Creation -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-3\">Store SPOC Ticket Creation</h5>\n\n <div class=\"d-flex align-items-center flex-wrap gap-2\">\n <label class=\"mb-0\">\n Allow store SPOC to create tickets only for the last\n </label>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\"\n [class.open]=\"isAllowTicketCreationDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleAllowTicketCreationDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('allowTicketCreation')?.value ||\n spocTicketCreationdays[0] }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAllowTicketCreationDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let day of spocTicketCreationdays\"\n (click)=\"selectAllowTicketCreation($event, day)\">\n {{ day }}\n </button>\n </div>\n </div>\n\n <span class=\"mb-0\">Days</span>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Ticket Auto-close -->\n <div class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex align-items-center mb-2\">\n <h5 class=\"ff-section-title m-0\">Ticket Auto-close</h5>\n\n <label class=\"switch m-0 ms-3\" [class.disabled]=\"isEdit\">\n <input type=\"checkbox\" formControlName=\"isAutoCloseEnable\" [disabled]=\"isEdit\">\n <span class=\"slider round\"></span>\n </label>\n </div>\n\n <div class=\"d-flex align-items-center mt-2\">\n <span class=\"mb-0\">\n Ticket should be auto-closed, if the created ticket accuracy is greater than or equal to\n </span>\n\n <div class=\"position-relative ff-select-wrapper compact ms-2\" [class.open]=\"isAutoCloseDropdownOpen\"\n [class.disabled]=\"isEdit || !footfallDirConfigurationForm.get('isAutoCloseEnable')?.value\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleAutoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('autoCloseAccuracy')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isAutoCloseDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of accuracyPercentageList\"\n (click)=\"selectAutoCloseAccuracy($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\">\n\n <!-- Footfall Directory Limitations -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div>\n <h5 class=\"ff-section-title m-0\">Footfall directory limitations</h5>\n <p class=\"ff-section-desc mb-2\">\n Set maximum limitation for stores to tag non-Purchasers from Total Footfall\n </p>\n </div>\n\n <button type=\"button\" [disabled]=\"isEdit\" class=\"add-new-btn d-inline-flex align-items-center gap-2\"\n (click)=\"openCategoryModal('add')\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M8 3.33334V12.6667M3.33334 8H12.6667\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <span>Add New</span>\n </button>\n </div>\n\n <!-- Category Cards Grid -->\n <div formArrayName=\"taggingLimitation\" class=\"category-grid mt-3\">\n <div *ngFor=\"let tag of tagLimits.controls; let i = index\" [formGroupName]=\"i\" class=\"category-card\">\n <div class=\"category-card-header\">\n <div class=\"category-icon\" [ngClass]=\"tag.get('iconName')?.value\">\n <ng-container [ngSwitch]=\"tag.get('iconName')?.value\">\n <svg *ngSwitchCase=\"'duplicateTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\n height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <g clip-path=\"url(#clip0_1162_24621)\">\n <path\n d=\"M2.5 7.5H2C1.73478 7.5 1.48043 7.39464 1.29289 7.20711C1.10536 7.01957 1 6.76522 1 6.5V2C1 1.73478 1.10536 1.48043 1.29289 1.29289C1.48043 1.10536 1.73478 1 2 1H6.5C6.76522 1 7.01957 1.10536 7.20711 1.29289C7.39464 1.48043 7.5 1.73478 7.5 2V2.5M5.5 4.5H10C10.5523 4.5 11 4.94772 11 5.5V10C11 10.5523 10.5523 11 10 11H5.5C4.94772 11 4.5 10.5523 4.5 10V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24621\">\n <rect width=\"12\" height=\"12\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'employeeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\n height=\"13\" viewBox=\"0 0 16 13\" fill=\"none\">\n <path\n d=\"M11.1667 12.5V11.1667C11.1667 10.4594 10.8857 9.78115 10.3856 9.28105C9.88552 8.78095 9.20724 8.5 8.5 8.5H3.16667C2.45942 8.5 1.78115 8.78095 1.28105 9.28105C0.780952 9.78115 0.5 10.4594 0.5 11.1667V12.5M15.1667 12.5V11.1667C15.1662 10.5758 14.9696 10.0018 14.6076 9.53488C14.2456 9.06791 13.7388 8.73438 13.1667 8.58667M10.5 0.586667C11.0736 0.733534 11.582 1.06713 11.9451 1.53487C12.3082 2.00261 12.5052 2.57789 12.5052 3.17C12.5052 3.76211 12.3082 4.33739 11.9451 4.80513C11.582 5.27287 11.0736 5.60647 10.5 5.75333M8.5 3.16667C8.5 4.63943 7.30609 5.83333 5.83333 5.83333C4.36057 5.83333 3.16667 4.63943 3.16667 3.16667C3.16667 1.69391 4.36057 0.5 5.83333 0.5C7.30609 0.5 8.5 1.69391 8.5 3.16667Z\"\n stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </div>\n <div class=\"category-name\">\n {{ tag.get('name')?.value }}\n </div>\n <button\n *ngIf=\"(tag.get('iconName')?.value !== 'duplicateTag' && tag.get('iconName')?.value !== 'employeeTag')\"\n type=\"button\" class=\"category-menu-btn\" (click)=\"toggleCategoryMenu($event, i)\"\n [disabled]=\"isEdit\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\n fill=\"#475467\" />\n <path\n d=\"M12 21C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21Z\"\n fill=\"#475467\" />\n </svg>\n </button>\n <div class=\"category-menu\" *ngIf=\"activeMenuIndex === i\">\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'edit', i)\">Edit Name</button>\n <button type=\"button\" (click)=\"onCategoryMenuAction($event, 'delete', i)\">Delete</button>\n </div>\n </div>\n\n <div class=\"category-percentage-section\">\n <div class=\"position-relative ff-select-wrapper compact\"\n [class.open]=\"openLimitDropdownIndex === i\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\"\n (click)=\"toggleLimitDropdown($event, i)\">\n <span>{{ tag.get('value')?.value || 0 }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"openLimitDropdownIndex === i\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectLimitValue($event, i, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Store Requests -->\n <div formGroupName=\"accuracyBreach\" class=\"card p-4 mb-4 ff-section-card\">\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\n <div>\n <h5 class=\"ff-section-title mb-2\">Store Requests</h5>\n <p class=\"ff-section-desc mb-0\">\n Below stores have requested to raise a ticket after breaching the configured limit\n <span class=\"info-icon\">i</span>\n </p>\n </div>\n <button type=\"button\" class=\"btn btn-primary reset-btn d-inline-flex align-items-center gap-2\"\n *ngIf=\"!isEdit\" [disabled]=\"isResetDisabled\" (click)=\"openResetConfirmationModal()\" aria-live=\"polite\">\n <span>Reset</span>\n </button>\n </div>\n\n <!-- Restriction Criteria -->\n <div class=\"restriction-criteria mb-4\">\n <label class=\"mb-3 d-block\">\n Restrict ticket creation for any store that:\n </label>\n <div class=\"d-flex align-items-center flex-nowrap gap-2\">\n <span>Has raised more than</span>\n <div class=\"position-relative ff-select-wrapper compact\" [class.open]=\"isTicketCountDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleTicketCountDropdown($event)\">\n <span>\n {{ footfallDirConfigurationForm.get('accuracyBreach.ticketCount')?.value || 1 }}\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isTicketCountDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let c of [1, 2, 3, 4, 5]\"\n (click)=\"selectTicketCount($event, c)\">\n {{ c }}\n </button>\n </div>\n </div>\n <span>tickets in the calender</span>\n <div class=\"position-relative ff-select-wrapper compact store-days-select\"\n [class.open]=\"isStoreDaysDropdownOpen\" [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleStoreDaysDropdown($event)\">\n <span>{{ selectedDaysLabel }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isStoreDaysDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let opt of daysOptions\"\n (click)=\"selectStoreDays($event, opt)\">\n {{ opt.label }}\n </button>\n </div>\n </div>\n <span>based on configured conditions\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n placement=\"top\" [ngbTooltip]=\"conditionsTooltip\" tooltipClass=\"conditions-tooltip\">\n <g clip-path=\"url(#clip0_1432_80035)\">\n <path\n d=\"M8.00065 10.6666V7.99992M8.00065 5.33325H8.00732M14.6673 7.99992C14.6673 11.6818 11.6826 14.6666 8.00065 14.6666C4.31875 14.6666 1.33398 11.6818 1.33398 7.99992C1.33398 4.31802 4.31875 1.33325 8.00065 1.33325C11.6826 1.33325 14.6673 4.31802 14.6673 7.99992Z\"\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1432_80035\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n <ng-template #conditionsTooltip>\n <div style=\"text-align: left; font-size: 12px; line-height: 1.6;\">\n <b>1.</b> Delta between Store/AOM accuracy and Central Ops/Tango accuracy exceeds 10%<br>\n <b>2.</b> The overall accuracy after all reviews is greater than 85%.<br>\n <b>3.</b> Overall the Number of Images (Footfall) marked for validation in the ticket by the\n Store is Less than equal to 10\n </div>\n </ng-template>\n </div>\n </div>\n\n <!-- Store Requests Table -->\n <div class=\"store-requests-table\" [class.disabled]=\"isEdit\"\n *ngIf=\"storeList?.length > 0; else emptyStoreRequests\">\n <div class=\"table-responsive\" [ngClass]=\"{'store-table-scroll': storeList?.length > 5}\">\n <table class=\"table table-hover store-requests-table-content\">\n <thead>\n <tr>\n <th class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input type=\"checkbox\" [checked]=\"isAllSelected\" [disabled]=\"isEdit\"\n (change)=\"toggleSelectAll($event)\" />\n <span class=\"checkmark-select\"></span>\n\n </label>\n </th>\n <th class=\"sortable store-name-column\">\n <div class=\"d-flex align-items-center\">\n <span>Select all stores ({{ storeList?.length || 0 }})</span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" class=\"ms-2 dropdown-arrow\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#344054\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n </th>\n <th class=\"sortable\">\n Raised on\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n Last raised(Approved)\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n <th class=\"sortable\">\n No of Time Raised\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"\n fill=\"none\" class=\"ms-1 sort-icon\">\n <path d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\" stroke=\"#344054\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let store of storeList\">\n <td class=\"checkbox-column\">\n <label class=\"custom-checkbox-select d-flex align-items-center mb-0\">\n <input #cb type=\"checkbox\" [checked]=\"isStoreSelected(store)\" [disabled]=\"isEdit\"\n (change)=\"toggleStoreSelection(store, cb.checked)\" />\n <span class=\"checkmark-select\"></span>\n </label>\n </td>\n <td>{{ store.storeName }}</td>\n <td>{{ store.raisedOn }}</td>\n <td>{{ store.lastApproved || '-' }}</td>\n <td>{{ store.totalRaised }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <ng-template #emptyStoreRequests>\n <div class=\"empty-store-state text-center\">\n <div class=\"empty-store-icon mb-3\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.94629 21.1995C8.645 21.2313 8.33828 21.2502 8.02734 21.2502C7.85782 21.2502 7.69052 21.2434 7.52539 21.2336V31.6067C7.52539 33.0347 8.70837 34.2258 10.1963 34.2258H29.8008C31.2888 34.2258 32.4717 33.0347 32.4717 31.6067V21.2346C32.3098 21.2438 32.1459 21.2502 31.9814 21.2502C31.6675 21.2502 31.3569 21.2323 31.0508 21.1995V28.9875H8.94629V21.1995ZM30.9277 5.77368H9.06934C8.89197 5.77368 8.73671 5.86647 8.65918 5.98755L8.65723 5.9895L5.14746 11.4729L5.05273 11.6204C3.82719 13.7402 5.0918 16.4671 7.44336 16.7766C7.64428 16.8011 7.83403 16.8157 8.02148 16.8157C9.25156 16.8157 10.3395 16.287 11.0967 15.4651L12.0186 14.4641L12.9375 15.468C13.6864 16.2861 14.7731 16.8157 16.0107 16.8157C17.2428 16.8156 18.3347 16.2854 19.083 15.468L20.0049 14.4612L20.9268 15.468C21.6751 16.2855 22.7668 16.8157 23.999 16.8157C25.2312 16.8157 26.3229 16.2854 27.0713 15.468L27.9932 14.4612L28.915 15.468C29.6634 16.2855 30.756 16.8157 31.9883 16.8157C32.1697 16.8157 32.3648 16.8018 32.5645 16.7776H32.5635C34.9572 16.4571 36.2254 13.6075 34.8574 11.4729L34.8564 11.4739L31.3398 5.99048L31.3389 5.98755C31.2614 5.86628 31.1053 5.77368 30.9277 5.77368Z\"\n stroke=\"#009BF3\" stroke-width=\"2.5\" />\n </svg>\n </div>\n <p class=\"mb-0 fw-semibold text-muted\">No reset request from store</p>\n </div>\n </ng-template>\n </div>\n\n <hr class=\"ff-divider\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\n\n <!-- Send Ticket to Tango -->\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"card p-4 mb-4 ff-section-card\">\n <h5 class=\"ff-section-title mb-1\">Send Ticket to Tango</h5>\n <div class=\"d-flex align-items-center mt-2\">\n <label class=\"me-2 mb-0 tango-label\">Send ticket to Tango if accuracy falls below</label>\n <div class=\"position-relative ff-select-wrapper compact ms-0\" [class.open]=\"issendTangoDropdownOpen\"\n [class.disabled]=\"isEdit\">\n <button type=\"button\" class=\"ff-select-toggle small\" (click)=\"toggleSendTangoCloseDropdown($event)\">\n <span>{{ footfallDirConfigurationForm.get('tangoReview')?.value || '1%' }}</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"issendTangoDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of sendTicketTango\"\n (click)=\"selectSendTicketTango($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer Actions -->\n <div *ngIf=\"!isEdit\">\n <div class=\"mb-5 w-100 footer-seperator\"></div>\n <div class=\"d-flex justify-content-end\">\n <a type=\"button\" class=\"btn btn-outline mt-1 pt-3 me-4\" (click)=\"onCancel()\">Cancel</a>\n <a type=\"submit\" class=\"btn btn-primary px-4\" (click)=\"onSubmit()\"><span>Save Changes</span></a>\n </div>\n </div>\n\n <!-- Category Modal -->\n <ng-template #categoryModal>\n <div class=\"modal-header border-0 pb-0\">\n <h5 class=\"modal-title\">\n {{ categoryModalMode === 'add' ? 'Add New Category' : 'Edit Category' }}\n </h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closeCategoryModal()\"></button>\n </div>\n <div class=\"modal-body category-modal-body\">\n <form [formGroup]=\"categoryForm\">\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Icon</label>\n <div class=\"ff-select-wrapper icon-select\" [class.open]=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryIconDropdown($event)\">\n <span class=\"d-inline-flex align-items-center gap-2\">\n <span class=\"category-icon\"\n [ngClass]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <ng-container\n [ngSwitch]=\"categoryForm.get('iconName')?.value || baseCategoryIcons[0]?.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_icon_housekeeping)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_icon_housekeeping\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span class=\"icon-label\">{{ selectedCategoryIconLabel }}</span>\n </span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryIconDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option d-flex align-items-center gap-2\"\n *ngFor=\"let icon of categoryIcons\"\n (click)=\"selectCategoryIconFromDropdown($event, icon.value)\">\n <span class=\"category-icon\" [ngClass]=\"icon.value\">\n <ng-container [ngSwitch]=\"icon.value\">\n <svg *ngSwitchCase=\"'purpleTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'orangeTag'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path\n d=\"M20.7071 13.2929L11.4142 4H4V11.4142L13.2929 20.7071C13.6834 21.0976 14.3166 21.0976 14.7071 20.7071L20.7071 14.7071C21.0976 14.3166 21.0976 13.6834 20.7071 13.2929Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 7H7.01\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngSwitchCase=\"'houseKeepingTag'\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1162_24650)\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.04983 0.544947C7.74738 -0.181649 8.87829 -0.181649 9.57584 0.544947L15.4697 6.6844C16.1672 7.41101 16.1672 8.58904 15.4697 9.31565L9.57584 15.4551C8.87829 16.1816 7.74738 16.1816 7.04983 15.4551L5.36562 13.7007L3.82179 15.3088C3.12426 16.0354 1.99334 16.0354 1.2958 15.3088C0.598272 14.5823 0.598272 13.4042 1.2958 12.6777L2.83964 11.0695L1.15596 9.31565C0.458429 8.58904 0.458429 7.41101 1.15596 6.6844L7.04983 0.544947ZM8.73381 1.42203C8.50129 1.17983 8.1243 1.17983 7.89178 1.42203L3.68165 5.80762L10.4175 12.8242L14.6277 8.43854C14.8602 8.19634 14.8602 7.80363 14.6277 7.56151L11.6805 4.49143L10.6981 5.51469C10.4656 5.75689 10.0887 5.75689 9.85614 5.51469C9.62363 5.27249 9.62363 4.87981 9.85614 4.63761L10.8384 3.61435L9.99665 2.73746L7.611 5.22252C7.37849 5.46471 7.00149 5.46471 6.76897 5.22252C6.53646 4.98032 6.53646 4.58763 6.76897 4.34544L9.15462 1.86038L8.73381 1.42203ZM9.57552 13.7012L2.83966 6.6847L1.99796 7.56151C1.76544 7.80363 1.76544 8.19634 1.99796 8.43854L7.89178 14.578C8.1243 14.8202 8.50129 14.8202 8.73381 14.578L9.57552 13.7012ZM3.68156 11.9466L2.1378 13.5547C1.90529 13.7969 1.90529 14.1896 2.1378 14.4318C2.37031 14.674 2.74729 14.674 2.9798 14.4318L4.52355 12.8237L3.68156 11.9466Z\"\n fill=\"currentColor\" />\n </g>\n <defs>\n <clipPath id=\"clip0_1162_24650\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n <svg *ngSwitchCase=\"'junkTag'\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2 4.00004H3.33333M3.33333 4.00004H14M3.33333 4.00004V13.3334C3.33333 13.687 3.47381 14.0261 3.72386 14.2762C3.97391 14.5262 4.31304 14.6667 4.66667 14.6667H11.3333C11.687 14.6667 12.0261 14.5262 12.2761 14.2762C12.5262 14.0261 12.6667 13.687 12.6667 13.3334V4.00004H3.33333ZM5.33333 4.00004V2.66671C5.33333 2.31309 5.47381 1.97395 5.72386 1.7239C5.97391 1.47385 6.31304 1.33337 6.66667 1.33337H9.33333C9.68696 1.33337 10.0261 1.47385 10.2761 1.7239C10.5262 1.97395 10.6667 2.31309 10.6667 2.66671V4.00004M6.66667 7.33337V11.3334M9.33333 7.33337V11.3334\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </span>\n <span>{{ icon.label }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label text-muted\">Category Name</label>\n <input type=\"text\" class=\"form-control\"\n [class.is-invalid]=\"categoryForm.get('name')?.invalid && categoryForm.get('name')?.touched\"\n placeholder=\"Enter your new category\" formControlName=\"name\" />\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched\">\n Category name is required.\n </small>\n <small class=\"text-danger\"\n *ngIf=\"categoryForm.get('name')?.hasError('duplicate') && categoryForm.get('name')?.touched\">\n Category name already exists.\n </small>\n </div>\n\n <div class=\"mb-2\">\n <label class=\"form-label text-muted\">Limitation</label>\n <div class=\"ff-select-wrapper\" [class.open]=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-toggle\" (click)=\"toggleCategoryLimitDropdown($event)\">\n <span>{{ categoryForm.get('limit')?.value || percentageList[0] }}%</span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"ff-select-menu\" *ngIf=\"isCategoryLimitDropdownOpen\">\n <button type=\"button\" class=\"ff-select-option\" *ngFor=\"let p of percentageList\"\n (click)=\"selectCategoryLimitValue($event, p)\">\n {{ p }}%\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n <div class=\"modal-footer border-0 pt-0\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeCategoryModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitCategoryForm()\">\n {{ categoryModalMode === 'add' ? 'Create' : 'Save' }}\n </button>\n </div>\n </ng-template>\n\n <!-- Delete Confirmation Modal -->\n <ng-template #deleteCategoryModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Confirmation</h5>\n <p class=\"mb-4 text-muted\">\n You're about to delete <span class=\"fw-semibold\">{{ categoryPendingDeleteName }}</span> category.\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeDeleteModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-danger\" (click)=\"confirmDeleteCategory()\">Delete</button>\n </div>\n </div>\n </ng-template>\n\n <!-- Reset Store Requests Confirmation Modal -->\n <ng-template #resetConfirmationModal>\n <div class=\"modal-body text-center p-4\">\n <h5 class=\"fw-semibold mb-2\">Reset Store Requests</h5>\n <p class=\"mb-4 text-muted\">\n Are you sure you want to proceed with resetting the selected <span class=\"fw-semibold\">{{\n resetRequest.arrayOfStores.length }}</span> store(s) requests?\n </p>\n <div class=\"d-flex justify-content-center gap-3\">\n <button type=\"button\" class=\"btn btn-outline\" (click)=\"closeResetModal()\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"confirmResetStoreRequest()\">Reset</button>\n </div>\n </div>\n </ng-template>\n\n</form>\n", styles: ["::ng-deep .conditions-tooltip .tooltip-inner{max-width:450px;text-align:left;padding:10px 14px;font-size:12px;line-height:1.6}form{padding:32px 20px;border-radius:16px;font-family:Inter,Segoe UI,sans-serif}.ff-section-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 4px #0f172a0a}.ff-section-title{font-size:16px;font-weight:600;color:#101828}.ff-section-desc{font-size:13px;color:#667085}.ff-divider{margin:8px 24px;border-color:#e4e7ec}.form-check{display:flex;align-items:center;gap:10px}.form-check-input{width:42px;height:22px;cursor:pointer;accent-color:#2563eb;border:1px solid #d1d5db;transition:all .2s ease-in-out}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.form-check-input:disabled{opacity:.6;cursor:not-allowed}input[type=radio].form-check-input{width:16px;height:16px;accent-color:#2563eb}input[type=radio]:checked{border-color:#2563eb}select.form-select{border:1px solid #d1d5db;border-radius:8px;height:38px;font-size:14px;color:#374151;padding:6px 10px;outline:none;transition:.2s}select.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.btn-outline{background-color:#fff;border:1px solid #d1d5db;color:#374151;padding:6px 16px;border-radius:8px;transition:all .2s}.btn-outline:hover{background:#f9fafb}.btn-primary{background-color:#2563eb;border:none;color:#fff;border-radius:8px;padding:6px 16px;transition:.2s}.btn-primary:hover{background-color:#1e40af}.approver-option{display:flex;flex-direction:column;justify-content:flex-start;width:220px}.custom-checkbox{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{height:18px;width:18px;min-width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease}.custom-checkbox input:checked~.checkmark{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.label-text{display:flex;flex-direction:column}.label-text .title{font-weight:600;color:#101828}.label-text .desc{font-size:13px;color:#667085;margin-top:2px;max-width:190px;line-height:1.4}.custom-checkbox input:not(:checked)~.label-text .desc{opacity:.6}.approver-option.disabled-option{opacity:.6;pointer-events:none}.approver-option.disabled-option .custom-checkbox.disabled-checkbox{cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .checkmark{background-color:#f3f4f6;border-color:#d1d5dd;cursor:not-allowed}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark{background-color:#f3f4f6;border-color:#d1d5dd}.approver-option.disabled-option .custom-checkbox.disabled-checkbox input:checked~.checkmark:after{content:\"\";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid #9ca3af;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.5}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .title{color:#9ca3af}.approver-option.disabled-option .custom-checkbox.disabled-checkbox .label-text .desc{color:#d1d5dd}.switch{position:relative;display:inline-block;width:44px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;transition:.3s;border-radius:22px}.slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#4c9aff}input:checked+.slider:before{transform:translate(21px)}.switch.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.switch.disabled .slider{cursor:not-allowed;background-color:#e5e7eb}.switch.disabled input:checked+.slider{background-color:#7dd3fc}.category-grid{display:flex;flex-wrap:wrap;gap:12px}.category-card{min-width:180px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;background-color:#fff;box-shadow:0 1px 3px #1018280f;position:relative;display:flex;flex-direction:column;gap:12px}.category-card-header{display:flex;align-items:center;gap:10px}.category-icon{width:32px;height:32px;min-width:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.category-name{font-weight:500;color:#101828;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-percentage-section{width:100%}.category-percentage-section .ff-select-wrapper.compact{width:100%;min-width:auto}.category-percentage-section .ff-select-toggle.small{width:100%;min-height:36px;padding:6px 10px;font-size:13px}.category-menu-btn{border:none;background:transparent;padding:4px;line-height:1;cursor:pointer;flex-shrink:0;margin-left:4px;display:inline-flex;align-items:center;justify-content:center}.category-menu-btn:disabled{cursor:default}.category-menu{position:absolute;top:48px;right:16px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;box-shadow:0 12px 30px #0f172a26;min-width:140px;z-index:5;padding:4px}.category-menu button{width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:8px;font-size:13px;color:#101828}.category-menu button:hover{background:#f4f7fb}.duplicateTag{background:#4755691f;color:#475569}.employeeTag{background:#3b82f61f;color:#3b82f6}.houseKeepingTag{background:#22c55e1f;color:#22c55e}.junkTag{background:#ef44441f;color:#ef4444}.purpleTag{background:#7c3aed1f;color:#7c3aed}.orangeTag{background:#ea580c1f;color:#ea580c}.add-new-btn{background:#fff;border:1px solid #d0d5dd;border-radius:10px;padding:5px 13px;font-size:14px;font-weight:600;color:#101828;transition:all .2s ease;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 2px #1018280d}.add-new-btn:hover:not(:disabled){background:#f9fafb;border-color:#004aad;color:#004aad;box-shadow:0 2px 4px #10182814}.add-new-btn:active:not(:disabled){background:#f4f7fb;transform:translateY(1px);box-shadow:0 1px 2px #1018280d}.add-new-btn:disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;border-color:#e5e7eb;color:#9ca3af}.add-new-btn svg{transition:transform .2s ease;flex-shrink:0}.add-new-btn:hover:not(:disabled) svg{transform:rotate(90deg)}.info-icon{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:600;border-radius:50%;background:#f3f3f3;color:#555;cursor:pointer;margin-left:6px;border:1.5px solid #8a8a8a}.tango-label{font-size:13px;color:#475467;font-weight:500}.store-requests-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px}.reset-btn{border-width:1px;border-color:#d0d5dd;color:#004aad;font-weight:600;padding:6px 18px;background-color:#fff;transition:all .2s ease}.reset-btn svg path{stroke:currentColor}.reset-btn .spinner-border{color:#004aad}.reset-btn:disabled{opacity:.6;cursor:not-allowed}.reset-btn:not(:disabled):hover{background-color:#f4f7fb;border-color:#004aad;box-shadow:0 1px 2px #1018280f}.restriction-criteria{padding:16px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.custom-checkbox-select{position:relative;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.custom-checkbox-select input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;width:0;height:0}.checkmark-select{height:18px;width:18px;border:none;outline:1px solid var(--primary-600, #00A3FF);border-radius:4px;display:inline-block;background:var(--primary-50, #EAF8FF);transition:all .2s ease;position:relative}.custom-checkbox-select input:checked~.checkmark-select{background-color:var(--primary-50, #EAF8FF);border-color:var(--primary-600, #00A3FF)}.custom-checkbox-select input:checked~.checkmark-select:after{content:\"\";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #00A3FF;border-width:0 2px 2px 0;transform:rotate(45deg)}.dropdown-arrow{cursor:pointer;transition:transform .2s}.dropdown-arrow:hover{transform:translateY(2px)}.store-requests-table{margin-top:16px;position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.store-requests-table.disabled{pointer-events:none;opacity:.6;-webkit-user-select:none;user-select:none}.store-requests-table-content{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.store-requests-table-content thead{background:linear-gradient(180deg,#f0f6ff,#f7f9fc)}.store-requests-table-content thead th{padding:14px 16px;font-weight:600;font-size:12px;color:#475467;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em}.store-requests-table-content tbody td{padding:14px 16px;font-size:13px;color:#344054;border-bottom:1px solid #f2f4f7;vertical-align:middle}.store-requests-table-content tbody tr{transition:background .15s}.store-requests-table-content tbody tr:hover{background-color:#f8fbff}.store-requests-table-content tbody tr:last-child td{border-bottom:none}.store-table-scroll{max-height:360px;overflow-y:auto}.store-table-scroll table{margin-bottom:0}.store-table-scroll .store-requests-table-content thead th{position:sticky;top:0;z-index:2;background:#f0f6ff}.checkbox-column{width:50px;padding-left:16px!important;padding-right:0!important}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sortable:hover{background-color:#e8eef8}.sort-icon{opacity:.5;transition:opacity .2s}.sortable:hover .sort-icon{opacity:1}.store-name-column{min-width:240px}.store-name-column .column-header{justify-content:space-between}.store-name-column .select-all-row{padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.empty-store-state{border:1px dashed #c7d7f0;border-radius:12px;padding:40px 16px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-store-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#2e90fa1f}.store-days-select .ff-select-toggle{min-width:99px}.store-days-select .ff-select-toggle span{white-space:nowrap}.ff-select-wrapper{width:100%;position:relative}.ff-select-wrapper.compact{width:auto;min-width:80px}.ff-select-wrapper.disabled{pointer-events:none;opacity:.7}.ff-select-wrapper.open .ff-select-toggle svg{transform:rotate(180deg)}.ff-select-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #d0d5dd;border-radius:10px;padding:8px 12px;background:#fff;font-weight:600;color:#101828;min-height:40px}.ff-select-toggle.small{min-height:36px;padding:6px 10px;font-size:13px}.ff-select-toggle svg{transition:transform .2s ease}.ff-select-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 16px 40px #0f172a26;max-height:220px;overflow-y:auto;z-index:15;padding:4px}.ff-select-option{width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:8px;font-size:14px;color:#101828}.ff-select-option:hover{background:#f4f7fb}.category-modal-body .form-control,.category-modal-body .form-select{border-radius:10px;min-height:44px}.category-modal-body .form-label{font-size:13px}.category-modal-body .text-danger{font-size:12px}.custom-modal{border-radius:16px;padding:10px 20px 20px;background:#fff;box-shadow:0 10px 40px #00000014;width:500px}.field-label{color:#8b8b8b;font-size:14px;margin-bottom:4px;display:block}.input-box{width:100%;height:46px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:15px;background:#f8fafc;display:flex;align-items:center}.input-box:focus-within{border-color:#4daeff;background:#fff;box-shadow:0 0 0 2px #4daeff26}.icon-row{display:flex}.icon-box{width:60px;cursor:pointer;justify-content:space-between}.clean-select{border:none;width:100%;height:100%;background:transparent;font-size:15px;outline:none}.select-box{padding:0}.button-area{display:flex;justify-content:space-between;gap:15px}.btn-cancel{width:50%;height:46px;border-radius:10px;border:1px solid #dbdbdb;background:#fff;font-weight:500;cursor:pointer}.btn-create{width:50%;height:46px;border-radius:10px;border:none;background:#0094ff;color:#fff;font-weight:600;cursor:pointer}.btn-create:hover{background:#007bdb}.card .btn-outline.btn-sm{padding:6px 10px;border-radius:8px}\n"] }]
|
|
8807
8808
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i3.GlobalStateService }, { type: ClientApiService }, { type: i1$1.NgbModal }, { type: i4.ToastService }], propDecorators: { categoryModalTpl: [{
|
|
8808
8809
|
type: ViewChild,
|
|
8809
8810
|
args: ['categoryModal']
|