@web-portal/view-shared 0.0.1 → 0.0.2

package/fesm2022/web-portal-view-shared.mjs

@@ -1,14 +1,15 @@
 import { HttpEventType, HttpResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, ViewChild, Component, inject, Input, signal, Injectable, computed } from '@angular/core';
+import { EventEmitter, Output, ViewChild, Component, inject, Input, signal, Injectable, computed, effect } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i4 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
+import * as i7 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i1 from '@web-portal/core-infrastructure';
 import { FileWAPGCSService } from '@web-portal/core-infrastructure';
@@ -21,7 +22,18 @@ import { TreeSelectModule } from 'primeng/treeselect';
 import { Subject } from 'rxjs';
 import * as i1$3 from 'primeng/dynamicdialog';
 import { DialogService } from 'primeng/dynamicdialog';
-import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import * as i3$2 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i5 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i8 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import { signalStore, withProps, withMethods, withHooks, signalStoreFeature, withState, withComputed, patchState } from '@ngrx/signals';
+import { BaseApiService, buildKey, withBaseStore as withBaseStore$1 } from '@cci-web-app/core';
+import { CORE_GATEWAY_CONFIG_TOKEN } from '@web-portal/core-base';
+import { StoreHelper } from '@web-portal/core-domain';
+import * as i10 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
 
 class ExcelUploadComponent {
     ngOnInit() { }
@@ -441,6 +453,1345 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: "app-relogin-dialog", standalone: true, imports: [CommonModule, ButtonModule], template: "<div class=\"dialog-wrapper\">\r\n  <div class=\"dialog-illustration\">\r\n    <i class=\"pi pi-exclamation-triangle dialog-icon\" aria-hidden=\"true\"></i>\r\n  </div>\r\n  <div class=\"dialog-content\">\r\n    <h2 class=\"dialog-title\">Phi\u00EAn \u0111\u0103ng nh\u1EADp \u0111\u00E3 h\u1EBFt h\u1EA1n</h2>\r\n    <p class=\"dialog-text\">\r\n      Vui l\u00F2ng \u0111\u0103ng nh\u1EADp l\u1EA1i \u0111\u1EC3 ti\u1EBFp t\u1EE5c s\u1EED d\u1EE5ng h\u1EC7 th\u1ED1ng.\r\n    </p>\r\n  </div>\r\n  <div class=\"dialog-actions\">\r\n    <button\r\n      pButton\r\n      type=\"button\"\r\n      label=\"\u0110\u00F3ng\"\r\n      [severity]=\"'secondary'\"\r\n      class=\"p-button-text\"\r\n      (click)=\"onCancel()\"\r\n    ></button>\r\n    <button\r\n      pButton\r\n      type=\"button\"\r\n      label=\"\u0110\u0103ng nh\u1EADp l\u1EA1i\"\r\n      [severity]=\"'primary'\"\r\n      icon=\"pi pi-sign-in\"\r\n      (click)=\"onConfirm()\"\r\n    ></button>\r\n  </div>\r\n</div>\r\n", styles: [".dialog-wrapper{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem 1.25rem;min-width:320px;max-width:460px;animation:fadeInUp .18s ease-out}.dialog-illustration{margin:.25rem 0 1rem}.dialog-illustration .dialog-icon{font-size:2.75rem;color:var(--yellow-500, #f59e0b);text-shadow:0 2px 8px rgba(0,0,0,.06);animation:floatY 1.4s ease-in-out infinite,glowPulse 1.8s ease-in-out infinite;will-change:transform,filter}.dialog-title{margin:.25rem 0;font-size:1.25rem;font-weight:700}.dialog-text{margin:0 0 1rem;color:var(--text-secondary-color, #6b7280)}.dialog-actions{display:flex;gap:.5rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes floatY{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}@keyframes glowPulse{0%,to{filter:drop-shadow(0 2px 6px rgba(245,158,11,.25))}50%{filter:drop-shadow(0 6px 14px rgba(245,158,11,.45))}}:host ::ng-deep .p-dynamic-dialog .p-dialog-content{padding:0}:host ::ng-deep .relogin-dynamic-dialog .p-dialog-header{font-weight:600}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DynamicDialogRef }] });
 
+class CategoryTreeApiService extends BaseApiService {
+    constructor() {
+        const gatewayConfig = inject(CORE_GATEWAY_CONFIG_TOKEN);
+        super({
+            baseUrl: `/api/ProductCategories`,
+            gatewayApi: gatewayConfig.MDM_API
+        });
+    }
+    list() {
+        return this.get(`${this.baseUrl}`, null, true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CategoryTreeApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CategoryTreeApiService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CategoryTreeApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: () => [] });
+
+const initialState = {
+    loading: {},
+    error: {},
+    data: {}
+};
+const CATEGORY_TREE_STORE_KEY = {
+    LIST: buildKey({ feature: "category-tree", scope: "default", device: "all" }),
+    USER_LIST: buildKey({ feature: "category-tree", scope: "user", device: "all" })
+};
+const CategoryTreeStore = signalStore({ providedIn: "root" }, withBaseStore$1(initialState), withProps(() => ({
+    _categoryTreeApiService: inject(CategoryTreeApiService)
+})), withMethods(store => ({
+    list: StoreHelper.createRxMethod(store, ({ key }) => key ?? CATEGORY_TREE_STORE_KEY.LIST, () => store._categoryTreeApiService.list())
+})), withHooks({
+    onInit() { },
+    onDestroy() { }
+}));
+
+class ProductPopupApiService extends BaseApiService {
+    constructor() {
+        const gatewayConfig = inject(CORE_GATEWAY_CONFIG_TOKEN);
+        super({
+            baseUrl: `/api/Products`,
+            gatewayApi: gatewayConfig.SCM_API,
+        });
+    }
+    popupSearch(payload) {
+        return this.post(`${this.baseUrl}/PopupSearch`, payload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProductPopupApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProductPopupApiService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProductPopupApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+class ProductPickerDialogComponent {
+    set visible(value) {
+        this.isDialogOpen.set(value);
+        if (value) {
+            this.pageIndex = 0;
+            this.allProducts = [];
+            this.totalRecords = 0;
+            this.remoteLoaded = false;
+            this.selectedProducts = [];
+        }
+    }
+    set products(value) {
+        this.initialProducts = value ?? [];
+        if (!this.remoteLoaded) {
+            this.allProducts = [...this.initialProducts];
+            this.totalRecords = this.allProducts.length;
+        }
+    }
+    constructor(fb, productPopupApi, cdr) {
+        this.fb = fb;
+        this.productPopupApi = productPopupApi;
+        this.cdr = cdr;
+        this.title = 'Chọn sản phẩm';
+        this.selectionMode = 'single';
+        this.visibleChange = new EventEmitter();
+        this.select = new EventEmitter();
+        this.selectMultiple = new EventEmitter();
+        // Dialog state using signal pattern
+        this.isDialogOpen = signal(false);
+        this.isDialogVisible = computed(() => this.isDialogOpen());
+        this.allProducts = [];
+        this.selectedProducts = [];
+        this.totalRecords = 0;
+        this.pageIndex = 0;
+        this.pageSize = 10;
+        this.loading = false;
+        this.categoryTreeNodes = [];
+        this.remoteLoaded = false;
+        this.initialProducts = [];
+        this.searchForm = this.fb.group({
+            keySearch: [''],
+            categoryIds: [[]],
+        });
+        this.categoryTreeStore = inject(CategoryTreeStore);
+        this.categoryTreeWatcher = effect(() => {
+            const categoryData = this.categoryTreeStore.getData()(CATEGORY_TREE_STORE_KEY.LIST);
+            if (Array.isArray(categoryData) && categoryData.length > 0) {
+                const nodes = this.buildTreeFromFlat(categoryData);
+                queueMicrotask(() => {
+                    this.categoryTreeNodes = nodes;
+                    this.cdr.markForCheck();
+                });
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.categoryTreeStore.list) {
+            this.categoryTreeStore.list({ key: CATEGORY_TREE_STORE_KEY.LIST });
+        }
+    }
+    onCategorySelectionChange() {
+        // Close dropdown after a short delay to allow selection to complete
+        setTimeout(() => {
+            if (this.categoryTreeSelect && typeof this.categoryTreeSelect.hide === 'function') {
+                this.categoryTreeSelect.hide();
+            }
+        }, 150);
+    }
+    onDialogClose() {
+        this.isDialogOpen.set(false);
+        this.visibleChange.emit(false);
+    }
+    onVisibleChange(visible) {
+        if (!visible) {
+            this.onDialogClose();
+        }
+    }
+    onConfirm() {
+        if (this.selectedProducts.length === 0) {
+            return;
+        }
+        // Emit all selected products
+        this.selectMultiple.emit([...this.selectedProducts]);
+        // Also emit the last selected product for backward compatibility
+        if (this.selectedProducts.length > 0) {
+            this.select.emit(this.selectedProducts[this.selectedProducts.length - 1]);
+        }
+        // Close dialog after confirmation
+        this.onDialogClose();
+    }
+    onCheckboxClick(event) {
+        event.stopPropagation();
+    }
+    onRowClick(event, product) {
+        event.stopPropagation();
+        // In single mode, select immediately and close dialog
+        if (this.selectionMode === 'single') {
+            const target = event.target;
+            if (target.closest('p-checkbox') || target.closest('.p-checkbox')) {
+                return;
+            }
+            // Select product and close
+            this.select.emit(product);
+            this.onDialogClose();
+        }
+    }
+    isSelected(product) {
+        return this.selectedProducts.some((p) => this.isSameProduct(p, product));
+    }
+    toggleSelect(product, checked) {
+        if (checked) {
+            if (!this.isSelected(product)) {
+                this.selectedProducts.push(product);
+            }
+        }
+        else {
+            this.selectedProducts = this.selectedProducts.filter((p) => !this.isSameProduct(p, product));
+        }
+    }
+    getCurrentPageProducts() {
+        const start = this.pageIndex * this.pageSize;
+        const end = start + this.pageSize;
+        return this.allProducts.slice(start, end);
+    }
+    getProductId(product) {
+        return product.id || (product.raw?.PID ? String(product.raw.PID) : '');
+    }
+    isSameProduct(p1, p2) {
+        const id1 = this.getProductId(p1);
+        const id2 = this.getProductId(p2);
+        if (id1 && id2) {
+            return id1 === id2;
+        }
+        return p1.raw?.PID === p2.raw?.PID && p1.raw?.PID != null;
+    }
+    isAllSelected() {
+        const currentPageProducts = this.getCurrentPageProducts();
+        if (currentPageProducts.length === 0) {
+            return false;
+        }
+        return currentPageProducts.every((product) => this.isSelected(product));
+    }
+    toggleSelectAll(checked) {
+        const currentPageProducts = this.getCurrentPageProducts();
+        if (checked) {
+            currentPageProducts.forEach((product) => {
+                if (!this.isSelected(product)) {
+                    this.selectedProducts.push(product);
+                }
+            });
+        }
+        else {
+            const currentPageProductIds = new Set(currentPageProducts.map(p => this.getProductId(p)));
+            this.selectedProducts = this.selectedProducts.filter((p) => !currentPageProductIds.has(this.getProductId(p)));
+        }
+    }
+    onSearch(resetPage = false) {
+        if (resetPage) {
+            this.pageIndex = 0;
+        }
+        this.fetchProducts();
+    }
+    onPageChange(event) {
+        if (event?.first === undefined) {
+            return;
+        }
+        if (event.rows !== undefined && event.rows !== this.pageSize) {
+            this.pageSize = event.rows;
+        }
+        this.pageIndex = Math.floor(event.first / this.pageSize);
+    }
+    fetchProducts() {
+        const payload = this.buildSearchPayload();
+        this.loading = true;
+        this.productPopupApi.popupSearch(payload).subscribe({
+            next: (response) => {
+                const items = this.extractResponseItems(response).map((item) => this.mapProduct(item));
+                this.allProducts = items;
+                this.totalRecords = this.resolveTotalRecords(response, items.length);
+                this.remoteLoaded = true;
+                this.loading = false;
+            },
+            error: () => {
+                this.loading = false;
+            },
+        });
+    }
+    mapProduct(item) {
+        const code = item.ProductID ?? String(item.PID ?? '');
+        return {
+            id: code,
+            code,
+            name: item.ProductName ?? code,
+            price: item.SalePriceAfter ?? item.SalePrice ?? undefined,
+            raw: item,
+        };
+    }
+    extractResponseItems(response) {
+        if (!response) {
+            return [];
+        }
+        if (Array.isArray(response)) {
+            return response;
+        }
+        return (response.items ||
+            response.data ||
+            response.results ||
+            response.list ||
+            response.payload ||
+            []);
+    }
+    resolveTotalRecords(response, fallback) {
+        if (!response) {
+            return fallback;
+        }
+        return (response.totalItems ??
+            response.totalRecords ??
+            response.total ??
+            response.count ??
+            fallback);
+    }
+    buildSearchPayload() {
+        const { keySearch, categoryIds } = this.searchForm.value;
+        return {
+            KeySearch: keySearch?.trim() || "",
+            CategoryIDs: this.extractCategoryIds(categoryIds).map((id) => id.toString()),
+            IsActived: true,
+            PageIndex: 0,
+            PageSize: this.pageSize,
+        };
+    }
+    extractCategoryIds(selection) {
+        if (!selection) {
+            return [];
+        }
+        const nodes = Array.isArray(selection) ? selection : [selection];
+        return nodes
+            .map((node) => this.getNodeCategoryId(node))
+            .filter((value) => value !== null);
+    }
+    getNodeCategoryId(node) {
+        if (!node) {
+            return null;
+        }
+        if (typeof node === "number") {
+            return node;
+        }
+        if (typeof node === "string" && !Number.isNaN(Number(node))) {
+            return Number(node);
+        }
+        return (node?.data?.categoryId ??
+            node?.data?.id ??
+            node?.categoryId ??
+            node?.id ??
+            null);
+    }
+    buildTreeFromFlat(flatData) {
+        const nodeMap = new Map();
+        const roots = [];
+        flatData.forEach((item) => {
+            const id = this.extractCategoryId(item);
+            if (id == null) {
+                return;
+            }
+            const label = item.CategoryName ??
+                `ID ${id}`;
+            nodeMap.set(id, {
+                key: `category_${id}`,
+                label: String(label),
+                data: {
+                    categoryId: item.CategoryID,
+                    name: label,
+                },
+                children: [],
+                selectable: true,
+            });
+        });
+        flatData.forEach((item) => {
+            const id = this.extractCategoryId(item);
+            if (id == null) {
+                return;
+            }
+            const parentId = this.extractParentCategoryId(item);
+            const node = nodeMap.get(id);
+            if (!node) {
+                return;
+            }
+            if (parentId == null || !nodeMap.has(parentId)) {
+                roots.push(node);
+            }
+            else {
+                const parentNode = nodeMap.get(parentId);
+                parentNode?.children?.push(node);
+            }
+        });
+        return roots.length > 0 ? roots : Array.from(nodeMap.values());
+    }
+    extractCategoryId(item) {
+        return (item.CategoryID ??
+            null);
+    }
+    extractParentCategoryId(item) {
+        return (item.ParentCategoryID ??
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProductPickerDialogComponent, deps: [{ token: i1$2.FormBuilder }, { token: ProductPopupApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ProductPickerDialogComponent, isStandalone: true, selector: "app-product-picker-dialog", inputs: { title: "title", visible: "visible", products: "products", selectionMode: "selectionMode" }, outputs: { visibleChange: "visibleChange", select: "select", selectMultiple: "selectMultiple" }, viewQueries: [{ propertyName: "categoryTreeSelect", first: true, predicate: ["categoryTreeSelect"], descendants: true }], ngImport: i0, template: `
+    <p-dialog
+      [header]="title"
+      [visible]="isDialogVisible()"
+      [modal]="true"
+      [dismissableMask]="false"
+      [style]="{ width: '950px' }"
+      [closable]="true"
+      [draggable]="false"
+      [resizable]="false"
+      (onHide)="onDialogClose()"
+      (visibleChange)="onVisibleChange($event)"
+      [closeOnEscape]="true"
+      appendTo="body"
+    >
+      <div>
+      <form [formGroup]="searchForm" class="grid grid-cols-1 gap-4 md:grid-cols-3 items-end mb-4">
+        <div class="md:col-span-1 w-full">
+          <label class="block text-sm font-semibold text-gray-700 mb-2">Từ khóa</label>
+          <input
+            pInputText
+            formControlName="keySearch"
+            placeholder="Nhập mã hoặc tên sản phẩm"
+            class="w-full"
+          />
+        </div>
+
+        <div class="md:col-span-1 w-full">
+          <label class="block text-sm font-semibold text-gray-700 mb-2">Ngành hàng</label>
+          <p-treeSelect
+            #categoryTreeSelect
+            formControlName="categoryIds"
+            [options]="categoryTreeNodes"
+            [selectionMode]="'checkbox'"
+            [display]="'chip'"
+            [showClear]="true"
+            placeholder="Chọn ngành hàng"
+            [panelStyle]="{ width: '100%' }"
+            panelStyleClass="!w-auto !max-w-full min-w-0"
+            styleClass="w-full"
+            fluid
+            inputStyleClass="w-full"
+            appendTo="body"
+            (onSelectionChange)="onCategorySelectionChange()"
+          ></p-treeSelect>
+        </div>
+
+        <div class="md:col-span-1 flex justify-end">
+          <p-button
+            type="button"
+            label="Tìm kiếm"
+            icon="pi pi-search"
+            [loading]="loading"
+            (onClick)="onSearch(true)"
+            styleClass="w-full md:w-auto"
+          ></p-button>
+        </div>
+      </form>
+
+      <p-table
+        [value]="allProducts"
+        [rows]="pageSize"
+        [paginator]="true"
+        [rowsPerPageOptions]="[10, 20, 30, 50]"
+        [totalRecords]="totalRecords"
+        [first]="pageIndex * pageSize"
+        [lazy]="false"
+        [loading]="loading"
+        responsiveLayout="scroll"
+        currentPageReportTemplate="Hiển thị {first} - {last} / {totalRecords}"
+        (onPage)="onPageChange($event)"
+      >
+        <ng-template pTemplate="header">
+          <tr>
+            @if (selectionMode === 'multiple') {
+            <th class="w-12 text-center">
+              <p-checkbox
+                [binary]="true"
+                [ngModel]="isAllSelected()"
+                (ngModelChange)="toggleSelectAll($event)"
+                (click)="onCheckboxClick($event)"
+                [inputId]="'selectAll'"
+              ></p-checkbox>
+            </th>
+            }
+            <th class="w-32">Mã sản phẩm</th>
+            <th class="w-32">Mã tham chiếu</th>
+            <th>Tên sản phẩm</th>
+            <th class="w-70">Ngành hàng</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-product>
+          <tr class="hover:bg-gray-50 cursor-pointer" (click)="onRowClick($event, product)">
+            @if (selectionMode === 'multiple') {
+            <td class="text-center">
+              <p-checkbox
+                [binary]="true"
+                [ngModel]="isSelected(product)"
+                (ngModelChange)="toggleSelect(product, $event)"
+                (click)="onCheckboxClick($event)"
+                [inputId]="'select-' + product.id"
+              ></p-checkbox>
+            </td>
+            }
+            <td>{{ product.raw?.ProductID || product.code || '—' }}</td>
+            <td>{{ product.raw?.ReferenceID || '—' }}</td>
+            <td>
+              <div class="font-semibold text-gray-900">{{ product.name || product.raw?.ProductName || '—' }}</div>
+            </td>
+            <td>{{ product.raw?.CategoryName || '—' }}</td>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="emptymessage">
+          <tr>
+            <td [attr.colspan]="selectionMode === 'multiple' ? 5 : 4" class="text-center text-gray-500 py-4">
+              Không tìm thấy sản phẩm phù hợp
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex items-center justify-between">
+          @if (selectionMode === 'multiple') {
+          <div class="text-sm text-gray-600">
+            Đã chọn: <span class="font-semibold">{{ selectedProducts.length }}</span> sản phẩm
+          </div>
+          } @else {
+          <div class="text-sm text-gray-600">
+            Click vào sản phẩm để chọn
+          </div>
+          }
+          <div class="flex gap-2">
+            <p-button
+              label="Hủy"
+              icon="pi pi-times"
+              text
+              (onClick)="onDialogClose()"
+            />
+            @if (selectionMode === 'multiple') {
+            <p-button
+              label="Xác nhận"
+              icon="pi pi-check"
+              severity="primary"
+              [disabled]="selectedProducts.length === 0"
+              (onClick)="onConfirm()"
+            />
+            }
+          </div>
+        </div>
+      </ng-template>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i7.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i2$1.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "fluid", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "size", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProductPickerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-product-picker-dialog',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        DialogModule,
+                        TableModule,
+                        ButtonModule,
+                        InputTextModule,
+                        CheckboxModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TreeSelectModule
+                    ],
+                    template: `
+    <p-dialog
+      [header]="title"
+      [visible]="isDialogVisible()"
+      [modal]="true"
+      [dismissableMask]="false"
+      [style]="{ width: '950px' }"
+      [closable]="true"
+      [draggable]="false"
+      [resizable]="false"
+      (onHide)="onDialogClose()"
+      (visibleChange)="onVisibleChange($event)"
+      [closeOnEscape]="true"
+      appendTo="body"
+    >
+      <div>
+      <form [formGroup]="searchForm" class="grid grid-cols-1 gap-4 md:grid-cols-3 items-end mb-4">
+        <div class="md:col-span-1 w-full">
+          <label class="block text-sm font-semibold text-gray-700 mb-2">Từ khóa</label>
+          <input
+            pInputText
+            formControlName="keySearch"
+            placeholder="Nhập mã hoặc tên sản phẩm"
+            class="w-full"
+          />
+        </div>
+
+        <div class="md:col-span-1 w-full">
+          <label class="block text-sm font-semibold text-gray-700 mb-2">Ngành hàng</label>
+          <p-treeSelect
+            #categoryTreeSelect
+            formControlName="categoryIds"
+            [options]="categoryTreeNodes"
+            [selectionMode]="'checkbox'"
+            [display]="'chip'"
+            [showClear]="true"
+            placeholder="Chọn ngành hàng"
+            [panelStyle]="{ width: '100%' }"
+            panelStyleClass="!w-auto !max-w-full min-w-0"
+            styleClass="w-full"
+            fluid
+            inputStyleClass="w-full"
+            appendTo="body"
+            (onSelectionChange)="onCategorySelectionChange()"
+          ></p-treeSelect>
+        </div>
+
+        <div class="md:col-span-1 flex justify-end">
+          <p-button
+            type="button"
+            label="Tìm kiếm"
+            icon="pi pi-search"
+            [loading]="loading"
+            (onClick)="onSearch(true)"
+            styleClass="w-full md:w-auto"
+          ></p-button>
+        </div>
+      </form>
+
+      <p-table
+        [value]="allProducts"
+        [rows]="pageSize"
+        [paginator]="true"
+        [rowsPerPageOptions]="[10, 20, 30, 50]"
+        [totalRecords]="totalRecords"
+        [first]="pageIndex * pageSize"
+        [lazy]="false"
+        [loading]="loading"
+        responsiveLayout="scroll"
+        currentPageReportTemplate="Hiển thị {first} - {last} / {totalRecords}"
+        (onPage)="onPageChange($event)"
+      >
+        <ng-template pTemplate="header">
+          <tr>
+            @if (selectionMode === 'multiple') {
+            <th class="w-12 text-center">
+              <p-checkbox
+                [binary]="true"
+                [ngModel]="isAllSelected()"
+                (ngModelChange)="toggleSelectAll($event)"
+                (click)="onCheckboxClick($event)"
+                [inputId]="'selectAll'"
+              ></p-checkbox>
+            </th>
+            }
+            <th class="w-32">Mã sản phẩm</th>
+            <th class="w-32">Mã tham chiếu</th>
+            <th>Tên sản phẩm</th>
+            <th class="w-70">Ngành hàng</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-product>
+          <tr class="hover:bg-gray-50 cursor-pointer" (click)="onRowClick($event, product)">
+            @if (selectionMode === 'multiple') {
+            <td class="text-center">
+              <p-checkbox
+                [binary]="true"
+                [ngModel]="isSelected(product)"
+                (ngModelChange)="toggleSelect(product, $event)"
+                (click)="onCheckboxClick($event)"
+                [inputId]="'select-' + product.id"
+              ></p-checkbox>
+            </td>
+            }
+            <td>{{ product.raw?.ProductID || product.code || '—' }}</td>
+            <td>{{ product.raw?.ReferenceID || '—' }}</td>
+            <td>
+              <div class="font-semibold text-gray-900">{{ product.name || product.raw?.ProductName || '—' }}</div>
+            </td>
+            <td>{{ product.raw?.CategoryName || '—' }}</td>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="emptymessage">
+          <tr>
+            <td [attr.colspan]="selectionMode === 'multiple' ? 5 : 4" class="text-center text-gray-500 py-4">
+              Không tìm thấy sản phẩm phù hợp
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex items-center justify-between">
+          @if (selectionMode === 'multiple') {
+          <div class="text-sm text-gray-600">
+            Đã chọn: <span class="font-semibold">{{ selectedProducts.length }}</span> sản phẩm
+          </div>
+          } @else {
+          <div class="text-sm text-gray-600">
+            Click vào sản phẩm để chọn
+          </div>
+          }
+          <div class="flex gap-2">
+            <p-button
+              label="Hủy"
+              icon="pi pi-times"
+              text
+              (onClick)="onDialogClose()"
+            />
+            @if (selectionMode === 'multiple') {
+            <p-button
+              label="Xác nhận"
+              icon="pi pi-check"
+              severity="primary"
+              [disabled]="selectedProducts.length === 0"
+              (onClick)="onConfirm()"
+            />
+            }
+          </div>
+        </div>
+      </ng-template>
+    </p-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: ProductPopupApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], products: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], selectMultiple: [{
+                type: Output
+            }], categoryTreeSelect: [{
+                type: ViewChild,
+                args: ['categoryTreeSelect']
+            }] } });
+
+class PromotionApiService extends BaseApiService {
+    constructor() {
+        const gatewayConfig = inject(CORE_GATEWAY_CONFIG_TOKEN);
+        super({
+            baseUrl: `/api/Promotions`,
+            gatewayApi: gatewayConfig.SCM_API
+        });
+    }
+    search(payload) {
+        return this.post(`${this.baseUrl}/Search`, payload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PromotionApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PromotionApiService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PromotionApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+class PromotionPickerDialogComponent {
+    set visible(value) {
+        this.isDialogOpen.set(value);
+        if (value) {
+            this.pageIndex = 0;
+            this.allPromotions = [];
+            this.totalRecords = 0;
+            this.remoteLoaded = false;
+            // Reset form với giá trị mặc định
+            this.searchForm.patchValue({
+                dateFrom: this.getDefaultDateFrom(),
+                dateTo: this.getDefaultDateTo()
+            });
+        }
+    }
+    constructor(fb, promotionApiService, cdr) {
+        this.fb = fb;
+        this.promotionApiService = promotionApiService;
+        this.cdr = cdr;
+        this.title = 'Chọn chương trình khuyến mãi';
+        this.selectionMode = 'single';
+        this.visibleChange = new EventEmitter();
+        this.select = new EventEmitter();
+        this.selectMultiple = new EventEmitter();
+        // Dialog state using signal pattern
+        this.isDialogOpen = signal(false);
+        this.isDialogVisible = computed(() => this.isDialogOpen());
+        this.allPromotions = [];
+        this.selectedPromotions = [];
+        this.totalRecords = 0;
+        this.pageIndex = 0;
+        this.pageSize = 10;
+        this.loading = false;
+        this.categoryTreeNodes = [];
+        this.promotionTypeOptions = [];
+        this.remoteLoaded = false;
+        this.searchForm = this.fb.group({
+            keySearch: [''],
+            typeSearch: 2,
+            categoryIDs: [[]],
+            dateFrom: [this.getDefaultDateFrom()],
+            dateTo: [this.getDefaultDateTo()]
+        });
+        this.categoryTreeStore = inject(CategoryTreeStore);
+        this.categoryTreeWatcher = effect(() => {
+            const categoryData = this.categoryTreeStore.getData()(CATEGORY_TREE_STORE_KEY.LIST);
+            if (Array.isArray(categoryData) && categoryData.length > 0) {
+                const nodes = this.buildTreeFromFlat(categoryData);
+                queueMicrotask(() => {
+                    this.categoryTreeNodes = nodes;
+                    this.cdr.markForCheck();
+                });
+            }
+        });
+    }
+    getDefaultDateFrom() {
+        const date = new Date();
+        date.setDate(date.getDate() - 30);
+        date.setHours(0, 0, 0, 0);
+        return date;
+    }
+    getDefaultDateTo() {
+        const date = new Date();
+        date.setHours(23, 59, 59, 999);
+        return date;
+    }
+    ngOnInit() {
+        if (this.categoryTreeStore.list) {
+            this.categoryTreeStore.list({ key: CATEGORY_TREE_STORE_KEY.LIST });
+        }
+    }
+    onCategorySelectionChange() {
+        // Close dropdown after a short delay to allow selection to complete
+        setTimeout(() => {
+            if (this.categoryTreeSelect && typeof this.categoryTreeSelect.hide === 'function') {
+                this.categoryTreeSelect.hide();
+            }
+        }, 150);
+    }
+    onDialogClose() {
+        this.isDialogOpen.set(false);
+        this.visibleChange.emit(false);
+    }
+    onVisibleChange(visible) {
+        if (!visible) {
+            this.onDialogClose();
+        }
+    }
+    onRowClick(event, promotion) {
+        event.stopPropagation();
+        if (this.selectionMode === 'single') {
+            this.select.emit(promotion);
+            this.onDialogClose();
+        }
+    }
+    onSearch(resetPage = false) {
+        if (resetPage) {
+            this.pageIndex = 0;
+        }
+        this.fetchPromotions();
+    }
+    onPageChange(event) {
+        if (event?.first === undefined) {
+            return;
+        }
+        if (event.rows !== undefined && event.rows !== this.pageSize) {
+            this.pageSize = event.rows;
+        }
+        this.pageIndex = Math.floor(event.first / this.pageSize);
+        this.fetchPromotions();
+    }
+    fetchPromotions() {
+        const payload = this.buildSearchPayload();
+        this.loading = true;
+        this.promotionApiService.search(payload).subscribe({
+            next: (response) => {
+                const items = (response.Records || []).map((item) => this.mapPromotion(item));
+                this.allPromotions = items;
+                this.totalRecords = response.TotalRecord || items.length;
+                this.remoteLoaded = true;
+                this.loading = false;
+            },
+            error: () => {
+                this.loading = false;
+            },
+        });
+    }
+    mapPromotion(item) {
+        const id = String(item.PromotionID);
+        return {
+            id,
+            code: item.PromotionNo || id,
+            name: item.PromotionName || id,
+            raw: item,
+        };
+    }
+    buildSearchPayload() {
+        const { keySearch, categoryIDs, dateFrom, dateTo } = this.searchForm.value;
+        return {
+            KeySearch: keySearch?.trim() || "",
+            CreatedUser: -1,
+            DateFrom: dateFrom ? this.formatDateWithTime(dateFrom) : undefined,
+            DateTo: dateTo ? this.formatDateWithTime(dateTo, true) : undefined,
+            StoreID: -1,
+            PromotionTypeID: -1,
+            CategoryIDs: this.extractCategoryIds(categoryIDs),
+            TypeSearch: 2,
+            OptionSearch: -1,
+            PageIndex: this.pageIndex, // API expects 1-based index
+            PageSize: this.pageSize,
+            IsStopped: -1,
+            IsActived: -1
+        };
+    }
+    formatDateWithTime(date, isEndDate = false) {
+        const d = new Date(date);
+        if (isNaN(d.getTime()))
+            return "";
+        const month = String(d.getMonth() + 1).padStart(2, "0");
+        const day = String(d.getDate()).padStart(2, "0");
+        const year = d.getFullYear();
+        const hours = String(d.getHours()).padStart(2, "0");
+        const minutes = String(d.getMinutes()).padStart(2, "0");
+        if (isEndDate) {
+            // End date: set to 23:59
+            return `${month}/${day}/${year} 23:59`;
+        }
+        // Start date: use actual time or 00:00
+        return `${month}/${day}/${year} ${hours}:${minutes}`;
+    }
+    extractCategoryIds(selection) {
+        if (!selection) {
+            return [];
+        }
+        const nodes = Array.isArray(selection) ? selection : [selection];
+        return nodes
+            .map((node) => this.getNodeCategoryId(node))
+            .filter((value) => value !== null);
+    }
+    getNodeCategoryId(node) {
+        if (!node) {
+            return null;
+        }
+        if (typeof node === "number") {
+            return node;
+        }
+        if (typeof node === "string" && !Number.isNaN(Number(node))) {
+            return Number(node);
+        }
+        return (node?.data?.categoryId ??
+            node?.data?.id ??
+            node?.categoryId ??
+            node?.id ??
+            null);
+    }
+    buildTreeFromFlat(flatData) {
+        const nodeMap = new Map();
+        const roots = [];
+        flatData.forEach((item) => {
+            const id = this.extractCategoryId(item);
+            if (id == null) {
+                return;
+            }
+            const label = item.CategoryName ?? `ID ${id}`;
+            nodeMap.set(id, {
+                key: `category_${id}`,
+                label: String(label),
+                data: {
+                    categoryId: item.CategoryID,
+                    name: label,
+                },
+                children: [],
+                selectable: true,
+            });
+        });
+        flatData.forEach((item) => {
+            const id = this.extractCategoryId(item);
+            if (id == null) {
+                return;
+            }
+            const parentId = this.extractParentCategoryId(item);
+            const node = nodeMap.get(id);
+            if (!node) {
+                return;
+            }
+            if (parentId == null || !nodeMap.has(parentId)) {
+                roots.push(node);
+            }
+            else {
+                const parentNode = nodeMap.get(parentId);
+                parentNode?.children?.push(node);
+            }
+        });
+        return roots.length > 0 ? roots : Array.from(nodeMap.values());
+    }
+    extractCategoryId(item) {
+        return item.CategoryID ?? null;
+    }
+    extractParentCategoryId(item) {
+        return item.ParentCategoryID ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PromotionPickerDialogComponent, deps: [{ token: i1$2.FormBuilder }, { token: PromotionApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PromotionPickerDialogComponent, isStandalone: true, selector: "app-promotion-picker-dialog", inputs: { title: "title", visible: "visible", selectionMode: "selectionMode" }, outputs: { visibleChange: "visibleChange", select: "select", selectMultiple: "selectMultiple" }, viewQueries: [{ propertyName: "categoryTreeSelect", first: true, predicate: ["categoryTreeSelect"], descendants: true }], ngImport: i0, template: `
+    <p-dialog
+      [header]="title"
+      [visible]="isDialogVisible()"
+      [modal]="true"
+      [dismissableMask]="false"
+      [style]="{ width: '95vw', maxWidth: '1400px' }"
+      [closable]="true"
+      [draggable]="false"
+      [resizable]="false"
+      (onHide)="onDialogClose()"
+      (visibleChange)="onVisibleChange($event)"
+      [closeOnEscape]="true"
+      appendTo="body"
+    >
+      <div>
+        <!-- Search Form -->
+        <form [formGroup]="searchForm" class="mb-4">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+            <!-- Chuỗi tìm -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Chuỗi tìm</label>
+              <input
+                pInputText
+                formControlName="keySearch"
+                placeholder="Nhập từ khóa"
+                class="w-full"
+              />
+            </div>
+
+            <!-- Ngành hàng -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Ngành hàng</label>
+            <p-treeSelect
+              #categoryTreeSelect
+              formControlName="categoryIDs"
+              [options]="categoryTreeNodes"
+              [selectionMode]="'checkbox'"
+              [display]="'chip'"
+              [showClear]="true"
+              placeholder="Chọn ngành hàng"
+              [panelStyle]="{ width: '100%' }"
+              panelStyleClass="!w-auto !max-w-full min-w-0"
+              styleClass="w-full"
+              fluid
+              inputStyleClass="w-full"
+              appendTo="body"
+              (onSelectionChange)="onCategorySelectionChange()">
+            </p-treeSelect>
+            </div>
+
+            <!-- Chạy từ ngày -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Chạy từ ngày</label>
+              <p-calendar
+                formControlName="dateFrom"
+                [showIcon]="true"
+                [showTime]="true"
+                [hourFormat]="'24'"
+                dateFormat="dd/mm/yy"
+                styleClass="w-full"
+                appendTo="body"
+                placeholder="dd/MM/yyyy HH:mm">
+              </p-calendar>
+            </div>
+
+            <!-- Đến ngày -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Đến ngày</label>
+              <p-calendar
+                formControlName="dateTo"
+                [showIcon]="true"
+                [showTime]="true"
+                [hourFormat]="'24'"
+                dateFormat="dd/mm/yy"
+                styleClass="w-full"
+                appendTo="body"
+                placeholder="dd/MM/yyyy HH:mm">
+              </p-calendar>
+            </div>
+          </div>
+
+          <!-- Search Button -->
+          <div class="flex justify-end mt-4">
+            <p-button
+              type="button"
+              label="Tìm kiếm"
+              icon="pi pi-search"
+              [loading]="loading"
+              (onClick)="onSearch(true)"
+              severity="primary"
+            />
+          </div>
+        </form>
+
+        <!-- Table -->
+        <p-table
+          [value]="allPromotions"
+          [rows]="pageSize"
+          [paginator]="true"
+          [rowsPerPageOptions]="[10, 20, 30, 50]"
+          [totalRecords]="totalRecords"
+          [first]="pageIndex * pageSize"
+          [lazy]="true"
+          [loading]="loading"
+          responsiveLayout="scroll"
+          currentPageReportTemplate="Hiển thị {first} - {last} / {totalRecords}"
+          (onPage)="onPageChange($event)"
+        >
+          <ng-template pTemplate="header">
+            <tr>
+              <th class="w-32">Mã CTKM</th>
+              <th>Tên chương trình khuyến mãi</th>
+              <th class="w-32">Ngày bắt đầu</th>
+              <th class="w-32">Ngày kết thúc</th>
+              <th class="w-40">Số ngày bắt đầu chạy</th>
+              <th class="w-48">Loại chương trình</th>
+              <th class="w-48">Nhân viên tạo</th>
+              <th class="w-24 text-center">Duyệt cấp 1</th>
+              <th class="w-24 text-center">Duyệt cấp 2</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-promotion>
+            <tr class="hover:bg-gray-50 cursor-pointer" (click)="onRowClick($event, promotion)">
+              <td>{{ promotion.raw?.PromotionNo || '—' }}</td>
+              <td>
+                <div class="font-semibold text-gray-900">{{ promotion.raw?.PromotionName || '—' }}</div>
+              </td>
+              <td>{{ promotion.raw?.BeginDate ? (promotion.raw.BeginDate | date:'dd/MM/yyyy') : '—' }}</td>
+              <td>{{ promotion.raw?.EndDate ? (promotion.raw.EndDate | date:'dd/MM/yyyy') : '—' }}</td>
+              <td>{{ promotion.raw?.RunStatus || '—' }}</td>
+              <td>{{ promotion.raw?.PromotionTypeName || '—' }}</td>
+              <td>{{ promotion.raw?.CreatedUser_FullName || '—' }}</td>
+              <td class="text-center">
+                <p-checkbox [binary]="true" [ngModel]="promotion.raw?.IsActivedOne" [disabled]="true" [inputId]="'actived1-' + promotion.id"></p-checkbox>
+              </td>
+              <td class="text-center">
+                <p-checkbox [binary]="true" [ngModel]="promotion.raw?.IsActivedTwo" [disabled]="true" [inputId]="'actived2-' + promotion.id"></p-checkbox>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="emptymessage">
+            <tr>
+              <td colspan="9" class="text-center text-gray-500 py-4">
+                Không tìm thấy chương trình khuyến mãi phù hợp
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex items-center justify-between">
+          <div class="text-sm text-gray-600">
+            Click vào chương trình khuyến mãi để chọn
+          </div>
+          <div class="flex gap-2">
+            <p-button
+              label="Hủy"
+              icon="pi pi-times"
+              text
+              (onClick)="onDialogClose()"
+            />
+          </div>
+        </div>
+      </ng-template>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i7.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i8.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i10.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i2$1.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "fluid", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "size", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PromotionPickerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-promotion-picker-dialog',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        DialogModule,
+                        TableModule,
+                        ButtonModule,
+                        InputTextModule,
+                        CheckboxModule,
+                        CalendarModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TreeSelectModule,
+                        DatePipe
+                    ],
+                    template: `
+    <p-dialog
+      [header]="title"
+      [visible]="isDialogVisible()"
+      [modal]="true"
+      [dismissableMask]="false"
+      [style]="{ width: '95vw', maxWidth: '1400px' }"
+      [closable]="true"
+      [draggable]="false"
+      [resizable]="false"
+      (onHide)="onDialogClose()"
+      (visibleChange)="onVisibleChange($event)"
+      [closeOnEscape]="true"
+      appendTo="body"
+    >
+      <div>
+        <!-- Search Form -->
+        <form [formGroup]="searchForm" class="mb-4">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+            <!-- Chuỗi tìm -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Chuỗi tìm</label>
+              <input
+                pInputText
+                formControlName="keySearch"
+                placeholder="Nhập từ khóa"
+                class="w-full"
+              />
+            </div>
+
+            <!-- Ngành hàng -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Ngành hàng</label>
+            <p-treeSelect
+              #categoryTreeSelect
+              formControlName="categoryIDs"
+              [options]="categoryTreeNodes"
+              [selectionMode]="'checkbox'"
+              [display]="'chip'"
+              [showClear]="true"
+              placeholder="Chọn ngành hàng"
+              [panelStyle]="{ width: '100%' }"
+              panelStyleClass="!w-auto !max-w-full min-w-0"
+              styleClass="w-full"
+              fluid
+              inputStyleClass="w-full"
+              appendTo="body"
+              (onSelectionChange)="onCategorySelectionChange()">
+            </p-treeSelect>
+            </div>
+
+            <!-- Chạy từ ngày -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Chạy từ ngày</label>
+              <p-calendar
+                formControlName="dateFrom"
+                [showIcon]="true"
+                [showTime]="true"
+                [hourFormat]="'24'"
+                dateFormat="dd/mm/yy"
+                styleClass="w-full"
+                appendTo="body"
+                placeholder="dd/MM/yyyy HH:mm">
+              </p-calendar>
+            </div>
+
+            <!-- Đến ngày -->
+            <div>
+              <label class="block text-sm font-semibold text-gray-700 mb-2">Đến ngày</label>
+              <p-calendar
+                formControlName="dateTo"
+                [showIcon]="true"
+                [showTime]="true"
+                [hourFormat]="'24'"
+                dateFormat="dd/mm/yy"
+                styleClass="w-full"
+                appendTo="body"
+                placeholder="dd/MM/yyyy HH:mm">
+              </p-calendar>
+            </div>
+          </div>
+
+          <!-- Search Button -->
+          <div class="flex justify-end mt-4">
+            <p-button
+              type="button"
+              label="Tìm kiếm"
+              icon="pi pi-search"
+              [loading]="loading"
+              (onClick)="onSearch(true)"
+              severity="primary"
+            />
+          </div>
+        </form>
+
+        <!-- Table -->
+        <p-table
+          [value]="allPromotions"
+          [rows]="pageSize"
+          [paginator]="true"
+          [rowsPerPageOptions]="[10, 20, 30, 50]"
+          [totalRecords]="totalRecords"
+          [first]="pageIndex * pageSize"
+          [lazy]="true"
+          [loading]="loading"
+          responsiveLayout="scroll"
+          currentPageReportTemplate="Hiển thị {first} - {last} / {totalRecords}"
+          (onPage)="onPageChange($event)"
+        >
+          <ng-template pTemplate="header">
+            <tr>
+              <th class="w-32">Mã CTKM</th>
+              <th>Tên chương trình khuyến mãi</th>
+              <th class="w-32">Ngày bắt đầu</th>
+              <th class="w-32">Ngày kết thúc</th>
+              <th class="w-40">Số ngày bắt đầu chạy</th>
+              <th class="w-48">Loại chương trình</th>
+              <th class="w-48">Nhân viên tạo</th>
+              <th class="w-24 text-center">Duyệt cấp 1</th>
+              <th class="w-24 text-center">Duyệt cấp 2</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-promotion>
+            <tr class="hover:bg-gray-50 cursor-pointer" (click)="onRowClick($event, promotion)">
+              <td>{{ promotion.raw?.PromotionNo || '—' }}</td>
+              <td>
+                <div class="font-semibold text-gray-900">{{ promotion.raw?.PromotionName || '—' }}</div>
+              </td>
+              <td>{{ promotion.raw?.BeginDate ? (promotion.raw.BeginDate | date:'dd/MM/yyyy') : '—' }}</td>
+              <td>{{ promotion.raw?.EndDate ? (promotion.raw.EndDate | date:'dd/MM/yyyy') : '—' }}</td>
+              <td>{{ promotion.raw?.RunStatus || '—' }}</td>
+              <td>{{ promotion.raw?.PromotionTypeName || '—' }}</td>
+              <td>{{ promotion.raw?.CreatedUser_FullName || '—' }}</td>
+              <td class="text-center">
+                <p-checkbox [binary]="true" [ngModel]="promotion.raw?.IsActivedOne" [disabled]="true" [inputId]="'actived1-' + promotion.id"></p-checkbox>
+              </td>
+              <td class="text-center">
+                <p-checkbox [binary]="true" [ngModel]="promotion.raw?.IsActivedTwo" [disabled]="true" [inputId]="'actived2-' + promotion.id"></p-checkbox>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="emptymessage">
+            <tr>
+              <td colspan="9" class="text-center text-gray-500 py-4">
+                Không tìm thấy chương trình khuyến mãi phù hợp
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex items-center justify-between">
+          <div class="text-sm text-gray-600">
+            Click vào chương trình khuyến mãi để chọn
+          </div>
+          <div class="flex gap-2">
+            <p-button
+              label="Hủy"
+              icon="pi pi-times"
+              text
+              (onClick)="onDialogClose()"
+            />
+          </div>
+        </div>
+      </ng-template>
+    </p-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: PromotionApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], selectMultiple: [{
+                type: Output
+            }], categoryTreeSelect: [{
+                type: ViewChild,
+                args: ['categoryTreeSelect']
+            }] } });
+
 class AuthDialogService {
     constructor() {
         this.dialogService = inject(DialogService);
@@ -611,5 +1962,5 @@ function withBaseStore(initialState) {
  * Generated bundle index. Do not edit.
  */
 
-export { AuthDialogService, ExcelUploadComponent, MediaUploadComponent, ReLoginDialogComponent, SubSink, TreeSelectComponent, UnsubscribeOnDestroyAdapter, withBaseStore };
+export { AuthDialogService, CATEGORY_TREE_STORE_KEY, CategoryTreeApiService, CategoryTreeStore, ExcelUploadComponent, MediaUploadComponent, ProductPickerDialogComponent, ProductPopupApiService, PromotionApiService, PromotionPickerDialogComponent, ReLoginDialogComponent, SubSink, TreeSelectComponent, UnsubscribeOnDestroyAdapter, withBaseStore };
 //# sourceMappingURL=web-portal-view-shared.mjs.map